// Page Notre réseau

/* ============ HERO ============ */
const ReseauHero = () => {
  const { IMG } = window.IMMO;
  return (
    <section className="metiers-page-hero">
      <div className="metiers-page-hero-bg">
        <img src={IMG.heroReseau} alt="" />
      </div>
      <div className="shell metiers-page-hero-inner">
        <div className="breadcrumb">Immo&amp;Sens <span className="sep">/</span> Notre réseau</div>
        <h1 className="display on-ink metiers-page-hero-title">
          Notre <em>réseau</em>
        </h1>
        <p className="lede metiers-page-hero-lede">
          Un maillage d'indépendants ancrés dans le Grand Ouest,<br />
          adossé à une structure centrale solide.
        </p>
      </div>
    </section>
  );
};

/* ============ SECTION 1 — PRÉSENTATION ============ */
const NETWORK_PILLARS = [
  {
    t: 'Proximité terrain',
    d: 'Des indépendants enracinés dans chaque territoire.',
    svg: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M32 8 C20 8,14 18,14 28 C14 42,32 56,32 56 C32 56,50 42,50 28 C50 18,44 8,32 8 Z" />
        <circle cx="32" cy="26" r="6" />
      </svg>
    ),
  },
  {
    t: 'Structure centrale',
    d: 'Un siège près de Vannes qui coordonne et appuie chaque opération.',
    svg: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M14 56 V24 L32 12 L50 24 V56 Z" />
        <path d="M24 56 V38 H40 V56" />
        <path d="M28 28 H36" />
      </svg>
    ),
  },
  {
    t: 'Cadre réglementaire',
    d: 'Garanties professionnelles adaptées à chaque opération.',
    svg: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M32 8 L52 18 V32 C52 44,42 54,32 56 C22 54,12 44,12 32 V18 Z" />
        <path d="M24 32 L30 38 L42 26" />
      </svg>
    ),
  },
  {
    t: 'Capacité financière',
    d: 'Des moyens pour porter des montages complexes ou patrimoniaux.',
    svg: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="8" y="20" width="48" height="32" rx="2" />
        <circle cx="32" cy="36" r="6" />
        <path d="M14 26 H20 M44 26 H50 M14 46 H20 M44 46 H50" />
      </svg>
    ),
  },
];

const SectionPresentation = ({ go }) => (
  <section className="metier-section paper-bg reseau-presentation">
    <div className="shell">
      <Reveal>
        <div className="reseau-head">
          <h2 className="display metier-title reseau-title">
            Un réseau structuré dans le<br /><em>Grand Ouest.</em>
          </h2>
        </div>
      </Reveal>

      <div className="reseau-body-grid">
        <Reveal>
          <div className="reseau-body">
            <p>
              Immo&amp;Sens s'appuie sur un réseau d'indépendants répartis sur le Grand Ouest,
              coordonné depuis notre siège près de Vannes. Cette organisation permet de
              conjuguer <strong>proximité terrain, réactivité et connaissance fine des territoires.</strong>
            </p>
            <p>
              Chaque membre du réseau agit de manière autonome tout en bénéficiant de l'appui
              d'une structure centrale solide, notamment sur les aspects financiers, juridiques
              et opérationnels. Cette organisation garantit une capacité d'action renforcée,
              y compris sur des projets complexes ou nécessitant des montages spécifiques.
            </p>
            <p>
              Immo&amp;Sens dispose de toutes les garanties réglementaires nécessaires à ses
              activités de développement et de construction, assurant un haut niveau de
              sécurité, de conformité et de fiabilité pour l'ensemble de ses opérations.
            </p>
            <p>
              Ce modèle hybride entre indépendance et structure centrale permet d'offrir
              un accompagnement fiable, flexible et maîtrisé.
            </p>
          </div>
        </Reveal>

        <Reveal delay={1}>
          <aside className="reseau-pillars">
            {NETWORK_PILLARS.map((p) => (
              <div className="reseau-pillar" key={p.t}>
                <div className="reseau-pillar-icon">{p.svg}</div>
                <div className="reseau-pillar-text">
                  <div className="reseau-pillar-title">{p.t}</div>
                  <div className="reseau-pillar-desc">{p.d}</div>
                </div>
              </div>
            ))}
          </aside>
        </Reveal>
      </div>

      <Reveal>
        <div className="reseau-cta-row">
          <p className="reseau-cta-text">
            Vous souhaitez rejoindre notre réseau et développer votre activité dans un cadre
            structuré et exigeant ?
          </p>
          <div className="reseau-cta-actions">
            <button className="btn btn-primary" onClick={() => go('contact')}>
              Rejoindre le réseau<Arrow />
            </button>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============ SECTION 2 — CARTE DU GRAND OUEST ============ */
const NETWORK_NODES = [
  { id: 'vannes',     label: 'Vannes',        sub: 'Siège',  x: 365, y: 380, hq: true },
  { id: 'rennes',     label: 'Rennes',                       x: 545, y: 235 },
  { id: 'brest',      label: 'Brest',                        x: 100, y: 230 },
  { id: 'quimper',    label: 'Quimper',                      x: 150, y: 320 },
  { id: 'sb',         label: 'Saint-Brieuc',                 x: 340, y: 175 },
  { id: 'lorient',    label: 'Lorient',                      x: 245, y: 365 },
  { id: 'nantes',     label: 'Nantes',                       x: 555, y: 430 },
  { id: 'larochelle', label: 'La Rochelle',                  x: 660, y: 550 },
];

const SectionCarte = () => {
  const hq = NETWORK_NODES.find((n) => n.hq);

  return (
    <section className="metier-section ink-section reseau-carte">
      <div className="shell">
        <Reveal>
          <div className="carte-head">
            <div className="metier-index on-ink">Présence territoriale</div>
            <h2 className="display on-ink metier-title carte-title">
              Une présence locale,<br /><em>une dynamique collective.</em>
            </h2>
          </div>
        </Reveal>

        <Reveal>
          <div className="map-wrap">
            <svg
              className="map"
              viewBox="0 0 800 640"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Carte du réseau Immo&Sens dans le Grand Ouest"
            >
              <defs>
                <linearGradient id="mapStroke" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="rgba(217,191,149,0.55)" />
                  <stop offset="100%" stopColor="rgba(217,191,149,0.18)" />
                </linearGradient>
              </defs>

              {/* Grille de fond */}
              <g opacity="0.08" stroke="#d0b189" strokeWidth="1">
                <line x1="0" y1="160" x2="800" y2="160" />
                <line x1="0" y1="320" x2="800" y2="320" />
                <line x1="0" y1="480" x2="800" y2="480" />
                <line x1="200" y1="0" x2="200" y2="640" />
                <line x1="400" y1="0" x2="400" y2="640" />
                <line x1="600" y1="0" x2="600" y2="640" />
              </g>

              {/* Contour Grand Ouest stylisé */}
              <path
                d="M 80,260 C 70,240 75,210 95,205 C 130,195 145,205 165,210 C 195,200 220,180 260,175 C 295,170 320,165 350,165 C 390,160 430,170 480,200 C 530,220 570,235 610,245 C 640,255 660,280 680,310 C 700,340 715,380 720,420 C 725,460 720,495 710,525 C 690,560 660,580 625,590 C 590,600 555,600 525,595 C 480,585 440,560 410,540 C 380,520 350,510 320,510 C 280,515 250,520 220,510 C 185,495 165,470 145,440 C 125,410 110,375 100,340 C 90,310 85,285 80,260 Z"
                fill="rgba(217,191,149,0.04)"
                stroke="url(#mapStroke)"
                strokeWidth="1.2"
                strokeLinejoin="round"
              />

              {/* Lignes de connexion depuis le siège */}
              <g>
                {NETWORK_NODES.filter((n) => !n.hq).map((n, i) => (
                  <line
                    key={n.id}
                    x1={hq.x} y1={hq.y}
                    x2={n.x} y2={n.y}
                    stroke="#d0b189"
                    strokeWidth="1"
                    strokeDasharray="3 6"
                    opacity="0.55"
                    className={`map-line line-${i}`}
                  />
                ))}
              </g>

              {/* Nœuds */}
              <g>
                {NETWORK_NODES.map((n) => (
                  <g
                    key={n.id}
                    className={`map-node${n.hq ? ' hq' : ''}`}
                    transform={`translate(${n.x},${n.y})`}
                  >
                    {n.hq && (
                      <>
                        <circle r="22" fill="rgba(208,177,137,0.12)" stroke="#d0b189" strokeWidth="1" opacity="0.7" />
                        <circle r="14" fill="rgba(208,177,137,0.18)" stroke="#d0b189" strokeWidth="1.2" />
                      </>
                    )}
                    <circle r={n.hq ? 6 : 4} fill="#d0b189" />
                    {n.hq && <circle r="4" fill="#fff" />}
                    <text
                      x={n.hq ? 0 : 14}
                      y={n.hq ? -32 : -10}
                      fill={n.hq ? '#fff' : 'rgba(255,255,255,0.85)'}
                      fontFamily="Open Sans, sans-serif"
                      fontWeight={n.hq ? 700 : 500}
                      fontSize={n.hq ? 16 : 12}
                      textAnchor={n.hq ? 'middle' : 'start'}
                      letterSpacing={n.hq ? '0.04em' : '0'}
                    >
                      {n.label}
                    </text>
                    {n.sub && (
                      <text
                        x={0} y={-16}
                        fill="#d0b189"
                        fontFamily="Open Sans, sans-serif"
                        fontWeight={600}
                        fontSize={9}
                        letterSpacing="0.22em"
                        textAnchor="middle"
                      >
                        {n.sub.toUpperCase()}
                      </text>
                    )}
                  </g>
                ))}
              </g>

              {/* Boussole */}
              <g transform="translate(720, 580)" opacity="0.6">
                <circle r="14" stroke="#d0b189" strokeWidth="1" fill="none" />
                <path d="M0 -10 L0 10 M-10 0 L10 0" stroke="#d0b189" strokeWidth="1" />
                <text x="0" y="-22" fill="#d0b189" fontFamily="Open Sans, sans-serif" fontSize="8" fontWeight="600" letterSpacing="0.2em" textAnchor="middle">N</text>
              </g>

              <text x="40" y="40" fill="#d0b189" fontFamily="Open Sans, sans-serif" fontSize="10" fontWeight="600" letterSpacing="0.22em">
                RÉSEAU Immo&amp;Sens · GRAND OUEST
              </text>
              <text x="40" y="55" fill="rgba(255,255,255,0.5)" fontFamily="Open Sans, sans-serif" fontSize="9" fontWeight="400" letterSpacing="0.12em">
                7 indépendants — 1 siège — coordination centrale
              </text>
            </svg>

            <div className="map-legend">
              <div className="legend-item">
                <span className="legend-dot hq-dot" />
                <span>Siège · Vannes</span>
              </div>
              <div className="legend-item">
                <span className="legend-dot" />
                <span>Indépendant local</span>
              </div>
              <div className="legend-item">
                <span className="legend-line" />
                <span>Coordination</span>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ============ PAGE ============ */
const Reseau = ({ go }) => (
  <>
    <ReseauHero />
    <SectionPresentation go={go} />
    <SectionCarte />
  </>
);

window.Reseau = Reseau;