const { useEffect: useEffectH, useState: useStateH } = React;

function RotatingPhrase({ items, interval = 2600 }) {
  const [i, setI] = useStateH(0);
  const [phase, setPhase] = useStateH('in'); // 'in' | 'out'
  useEffectH(() => {
    let outT, inT;
    const cycle = () => {
      setPhase('out');
      outT = setTimeout(() => {
        setI((v) => (v + 1) % items.length);
        setPhase('in');
      }, 420);
    };
    const id = setInterval(cycle, interval);
    return () => { clearInterval(id); clearTimeout(outT); clearTimeout(inT); };
  }, [items.length, interval]);
  // largeur fluide : on mesure l'item le plus long via un ghost
  return (
    <span className={`rotor ${phase === 'out' ? 'is-out' : 'is-in'}`}>
      <span className="rotor-ghost" aria-hidden="true">
        {items.reduce((a, b) => (a.length >= b.length ? a : b))}
      </span>
      <span className="rotor-text" key={i}>{items[i]}</span>
    </span>
  );
}

function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero" id="presentation">
      <svg className="hero-blueprint" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        <defs>
          <pattern id="bp-grid-fine" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse">
            <path d="M 22 0 L 0 0 0 22" fill="none" stroke="var(--ink)" strokeOpacity="0.04" strokeWidth="0.5"/>
          </pattern>
          <pattern id="bp-grid-major" x="0" y="0" width="110" height="110" patternUnits="userSpaceOnUse">
            <rect width="110" height="110" fill="url(#bp-grid-fine)"/>
            <path d="M 110 0 L 0 0 0 110" fill="none" stroke="var(--ink)" strokeOpacity="0.08" strokeWidth="0.6"/>
          </pattern>
        </defs>

        {/* Grille technique — très discrète */}
        <rect className="bp-grid" x="0" y="0" width="1440" height="900" fill="url(#bp-grid-major)"/>

        {/* Bâtiment centré — 1000×500 */}
        <g className="bp-lines" fill="none" stroke="var(--terra)" strokeWidth="1" strokeLinecap="round">
          {/* Contour extérieur */}
          <rect className="bp-line bp-l-0" x="220" y="200" width="1000" height="500" strokeOpacity="0.5"/>

          {/* Refend vertical central */}
          <line className="bp-line bp-l-1" x1="720" y1="200" x2="720" y2="700" strokeOpacity="0.35"/>
          {/* Refend horizontal central */}
          <line className="bp-line bp-l-2" x1="220" y1="450" x2="1220" y2="450" strokeOpacity="0.35"/>

          {/* Sous-cloisons quart haut-gauche */}
          <line className="bp-line bp-l-3" x1="220" y1="320" x2="480" y2="320" strokeOpacity="0.26"/>
          <line className="bp-line bp-l-4" x1="480" y1="200" x2="480" y2="450" strokeOpacity="0.26"/>

          {/* Sous-cloisons quart bas-droit */}
          <line className="bp-line bp-l-5" x1="960" y1="450" x2="960" y2="700" strokeOpacity="0.26"/>
          <line className="bp-line bp-l-6" x1="720" y1="580" x2="1220" y2="580" strokeOpacity="0.22"/>

          {/* Arcs de porte */}
          <path className="bp-line bp-l-7" d="M 340 200 A 40 40 0 0 1 380 240" strokeOpacity="0.38" stroke="var(--ink)"/>
          <path className="bp-line bp-l-8" d="M 820 450 A 40 40 0 0 1 860 490" strokeOpacity="0.38" stroke="var(--ink)"/>

          {/* Cotation horizontale haute */}
          <line className="bp-line bp-l-9"  x1="220"  y1="150" x2="1220" y2="150" strokeOpacity="0.22" strokeDasharray="5 5"/>
          <line className="bp-line bp-l-10" x1="220"  y1="140" x2="220"  y2="160" strokeOpacity="0.32"/>
          <line className="bp-line bp-l-11" x1="720"  y1="140" x2="720"  y2="160" strokeOpacity="0.32"/>
          <line className="bp-line bp-l-12" x1="1220" y1="140" x2="1220" y2="160" strokeOpacity="0.32"/>

          {/* Cotation verticale gauche */}
          <line className="bp-line bp-l-13" x1="170" y1="200" x2="170" y2="700" strokeOpacity="0.22" strokeDasharray="5 5"/>
          <line className="bp-line bp-l-14" x1="160" y1="200" x2="180" y2="200" strokeOpacity="0.32"/>
          <line className="bp-line bp-l-15" x1="160" y1="450" x2="180" y2="450" strokeOpacity="0.32"/>
          <line className="bp-line bp-l-16" x1="160" y1="700" x2="180" y2="700" strokeOpacity="0.32"/>

          {/* Axes (croix) */}
          <line className="bp-line bp-l-17" x1="720" y1="165" x2="720" y2="195" strokeOpacity="0.28" stroke="var(--ink)" strokeDasharray="6 3 2 3"/>
          <line className="bp-line bp-l-18" x1="720" y1="705" x2="720" y2="735" strokeOpacity="0.28" stroke="var(--ink)" strokeDasharray="6 3 2 3"/>

          {/* Escalier */}
          <g className="bp-line bp-l-19" strokeOpacity="0.32">
            <rect x="780" y="490" width="120" height="60" />
            <line x1="780" y1="505" x2="900" y2="505"/>
            <line x1="780" y1="520" x2="900" y2="520"/>
            <line x1="780" y1="535" x2="900" y2="535"/>
          </g>
        </g>

        {/* Pastilles repères */}
        <g className="bp-marks" fill="none" stroke="var(--ink)" strokeOpacity="0.35" strokeWidth="0.8">
          <circle className="bp-mark bp-m-0" cx="220"  cy="200" r="3.5"/>
          <circle className="bp-mark bp-m-1" cx="1220" cy="200" r="3.5"/>
          <circle className="bp-mark bp-m-2" cx="220"  cy="700" r="3.5"/>
          <circle className="bp-mark bp-m-3" cx="1220" cy="700" r="3.5"/>
          <circle className="bp-mark bp-m-4" cx="720"  cy="450" r="2.5"/>
        </g>
      </svg>

      <h1 className="hero-title">
        Implémentez notre infrastructure IA qui{' '}
        <RotatingPhrase
          items={[
            'génère plus de rendez-vous',
            'prospecte en continu',
            'vous fait gagner du temps',
            'envoie les devis clients',
            'remplit votre agenda',
          ]}
        />
      </h1>

      <p className="hero-lede">
        Une approche sur mesure fondée sur une compréhension approfondie de votre activité et la création d'une architecture IA dédiée.
      </p>

      <div className="hero-chips">
        {[
          {
            label: 'Agents IA autonomes',
            icon: (
              <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <rect x="3" y="5" width="10" height="8" rx="2" stroke="currentColor" strokeWidth="1.4"/>
                <path d="M8 3v2M5.5 2.5l.8.8M10.5 2.5l-.8.8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                <circle cx="6.3" cy="8.8" r="0.9" fill="currentColor"/>
                <circle cx="9.7" cy="8.8" r="0.9" fill="currentColor"/>
              </svg>
            ),
          },
          {
            label: 'Déployé en 14 jours',
            icon: (
              <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <circle cx="8" cy="9" r="5.5" stroke="currentColor" strokeWidth="1.4"/>
                <path d="M8 6.2V9l1.8 1.2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                <path d="M6 2h4M8 2v1.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
              </svg>
            ),
          },
          {
            label: 'Partenariat long-terme',
            icon: (
              <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <path d="M4.5 8.5L7 11l4.8-5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                <circle cx="8" cy="8" r="6.2" stroke="currentColor" strokeWidth="1.4"/>
              </svg>
            ),
          },
        ].map((c, i) => (
          <span key={i} className="chip">
            <span className="chip-icon">{c.icon}</span>
            {c.label}
          </span>
        ))}
      </div>

      <div className="hero-actions">
        <a href="#contact" className="hero-cta-primary">
          <span className="hero-cta-primary-icon">▶</span>
          Réservez un audit gratuit
        </a>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.MagneticCTA = () => null;