// hero.jsx — 3 variations du HERO de la landing
// Toutes partagent le titre "Fais un vœu. Ton territoire l'exauce."
// V1: Constellation cinétique (signature) — la carte au centre, contenu autour
// V2: Typographie géante "à la Apple" — mot par mot révélé, constellation discrète
// V3: Photo immersive aurore — collage cinématique de placeholders

function useAnimatedCounter(target, durationMs = 1800) {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / durationMs);
      // Ease-out cubic
      const eased = 1 - Math.pow(1 - t, 3);
      setV(Math.round(target * eased));
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target]);
  return v;
}

function MagneticButton({ children, href, primary = true, ...rest }) {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    el.style.transform = `translate(${x * 0.18}px, ${y * 0.22}px) scale(1.02)`;
  };
  const onLeave = () => {
    const el = ref.current;
    if (el) el.style.transform = "";
  };
  const Cmp = href ? "a" : "button";
  return (
    <Cmp
      ref={ref}
      href={href}
      className={`btn-magnetic ${primary ? "" : "ghost"}`}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      {...rest}
    >
      {children}
    </Cmp>
  );
}

function LiveCounter({ base = 1240 }) {
  const v = useAnimatedCounter(base, 2200);
  return (
    <div className="hero-counter reveal in" role="status">
      <span className="ping" aria-hidden="true"></span>
      <span className="num">{v.toLocaleString("fr-FR")}</span>
      <span className="lbl">vœux exaucés cette semaine</span>
    </div>
  );
}

function HeroEyebrow() {
  return (
    <div className="hero-eyebrow reveal in">
      <span className="badge">V1</span>
      <span>La Pévèle Augmentée — Le Génie Territorial</span>
    </div>
  );
}

function HeroActions() {
  return (
    <div className="hero-actions">
      <MagneticButton primary={true}>
        Commencer
        <span className="arrow" aria-hidden="true">→</span>
      </MagneticButton>
      <MagneticButton primary={false} href="#comment">
        Voir comment ça marche
      </MagneticButton>
    </div>
  );
}

/* ─── V1 : Constellation cinétique ────────────────────────────────────── */
function HeroConstellation() {
  return (
    <section className="hero">
      <div
        className="aurora-orb"
        style={{ width: 540, height: 540, background: "#7C5CFF", top: -120, left: -160 }}
      />
      <div
        className="aurora-orb"
        style={{ width: 480, height: 480, background: "#22D3EE", bottom: -160, right: -120 }}
      />
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1.15fr)", gap: 48, alignItems: "center" }}>
        <div>
          <HeroEyebrow />
          <h1 className="display reveal in" style={{ fontSize: "clamp(54px, 6.6vw, 96px)", lineHeight: 0.94, marginTop: 4 }}>
            Fais un vœu.<br />
            <span className="gradient-text">Ton territoire</span><br />
            l'exauce.
          </h1>
          <p className="reveal in" style={{ color: "var(--text-muted)", fontSize: 18, lineHeight: 1.5, marginTop: 28, maxWidth: 520 }}>
            La Pévèle Carembault s'illumine quand 100 000 habitants se relient.
            38 communes, 10 univers, un seul geste : le <em style={{ fontStyle: "normal", color: "var(--text)" }}>Vœu</em>.
            Le Génie matche localement. Le territoire exauce.
          </p>
          <HeroActions />
          <LiveCounter base={1247} />
        </div>
        <div style={{ position: "relative" }}>
          <Constellation showLabels="few" />
        </div>
      </div>
    </section>
  );
}

/* ─── V2 : Typographie géante "Apple" ─────────────────────────────────── */
function HeroTypographic() {
  // Mots révélés en cascade
  const words = ["Fais", "un", "vœu."];
  const words2 = ["Ton", "territoire", "l'exauce."];
  return (
    <section className="hero hero-type">
      <div
        className="aurora-orb"
        style={{ width: 700, height: 700, background: "#7C5CFF", top: -200, left: "30%" }}
      />
      <div
        className="aurora-orb"
        style={{ width: 500, height: 500, background: "#22D3EE", bottom: -180, right: "10%", opacity: 0.4 }}
      />
      <div
        className="aurora-orb"
        style={{ width: 380, height: 380, background: "#F5B544", top: "40%", left: "8%", opacity: 0.25 }}
      />

      {/* Discrete constellation top right */}
      <div style={{ position: "absolute", top: 60, right: -120, width: 600, opacity: 0.4, pointerEvents: "none" }}>
        <Constellation showLabels="none" />
      </div>

      <div className="wrap" style={{ textAlign: "center", position: "relative", zIndex: 2 }}>
        <HeroEyebrow />
        <h1 className="display" style={{ marginTop: 12 }}>
          <div style={{ display: "flex", justifyContent: "center", gap: "0.18em", flexWrap: "wrap" }}>
            {words.map((w, i) => (
              <span
                key={i}
                className="reveal in"
                style={{ transitionDelay: `${i * 80}ms`, display: "inline-block" }}
              >{w}</span>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "center", gap: "0.18em", flexWrap: "wrap" }}>
            {words2.map((w, i) => (
              <span
                key={i}
                className="reveal in gradient-text"
                style={{ transitionDelay: `${(words.length + i) * 80}ms`, display: "inline-block" }}
              >{w}</span>
            ))}
          </div>
        </h1>
        <p className="reveal in" style={{
          color: "var(--text-muted)", fontSize: 19, lineHeight: 1.55,
          marginTop: 36, maxWidth: 580, marginInline: "auto", textWrap: "balance"
        }}>
          Le réseau d'intentions de la Pévèle Carembault. Un vœu local. Un match
          en moins de 60 secondes. <span style={{ color: "var(--gold)" }}>Un Exaucement</span>.
        </p>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <HeroActions />
        </div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <LiveCounter base={1247} />
        </div>
      </div>
    </section>
  );
}

/* ─── V3 : Photo immersive aurore ─────────────────────────────────────── */

// Placeholder cards — fallback dégradé aurore + emoji du brief (jamais vide)
const PH_CARDS = [
  { emoji: "🥖", label: "Pain frais — Orchies", grad: "linear-gradient(135deg, #F59E0B, #FB7185)",
    pos: { top: "8%",  left: "0%",  width: 220, height: 280, rotate: -4 } },
  { emoji: "🌱", label: "Plantation collective", grad: "linear-gradient(135deg, #10B981, #34D399)",
    pos: { top: "0%",  right: "10%", width: 260, height: 200, rotate: 3 } },
  { emoji: "🤝", label: "Coup de main voisin", grad: "linear-gradient(135deg, #7C5CFF, #22D3EE)",
    pos: { top: "44%", left: "18%", width: 240, height: 190, rotate: -2 } },
  { emoji: "🎻", label: "Concert au village",   grad: "linear-gradient(135deg, #F472B6, #A78BFA)",
    pos: { top: "38%", right: "0%", width: 280, height: 220, rotate: 4 } },
  { emoji: "🌅", label: "Pévèle, golden hour",  grad: "linear-gradient(135deg, #F5B544, #FB7185)",
    pos: { bottom: "0%", left: "8%",   width: 300, height: 200, rotate: 2 } },
  { emoji: "🛠", label: "Atelier réparation",   grad: "linear-gradient(135deg, #22D3EE, #60A5FA)",
    pos: { bottom: "4%", right: "16%", width: 230, height: 170, rotate: -3 } },
];

function PhotoCard({ card, delay = 0 }) {
  const { pos, grad, emoji, label } = card;
  return (
    <div
      className="photo-card reveal in"
      style={{
        ...pos,
        transform: `rotate(${pos.rotate || 0}deg)`,
        transitionDelay: `${delay}ms`,
        animation: `float-y 6s ${delay}ms infinite ease-in-out`,
      }}
    >
      <div className="ph-fill" style={{ background: grad }}>
        <div style={{
          position: "absolute", inset: 0,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontSize: 84, filter: "drop-shadow(0 4px 20px rgba(0,0,0,.3))",
          opacity: 0.9,
        }}>{emoji}</div>
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, transparent 40%, rgba(0,0,0,.4))",
        }} />
      </div>
      <div className="ph-label">
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#F5B544", boxShadow: "0 0 6px #F5B544" }} />
        {label}
      </div>
    </div>
  );
}

function HeroImmersive() {
  return (
    <section className="hero hero-immersive">
      <div className="wrap" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.05fr)",
        gap: 60, alignItems: "center"
      }}>
        <div>
          <HeroEyebrow />
          <h1 className="display reveal in" style={{ fontSize: "clamp(54px, 6.4vw, 92px)", lineHeight: 0.94, marginTop: 4 }}>
            Fais un vœu.<br />
            <span className="gradient-text">Ton territoire</span><br />
            l'exauce.
          </h1>
          <p className="reveal in" style={{ color: "var(--text-muted)", fontSize: 18, lineHeight: 1.55, marginTop: 28, maxWidth: 480 }}>
            Mille visages, trente-huit communes, dix univers. Ici, on ne poste pas —
            on demande, on aide, on s'exauce. Et le territoire s'illumine.
          </p>
          <HeroActions />
          <LiveCounter base={1247} />
        </div>
        <div className="photo-stack" style={{ height: 560 }}>
          {PH_CARDS.map((c, i) => (
            <PhotoCard key={i} card={c} delay={i * 80} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.HeroConstellation = HeroConstellation;
window.HeroTypographic = HeroTypographic;
window.HeroImmersive = HeroImmersive;
window.MagneticButton = MagneticButton;
window.useAnimatedCounter = useAnimatedCounter;