// ============================================================
// HERO — 3 variations
// ============================================================

function Nav({ active }) {
  const links = [
    { href: "#consulting", label: "Consulting" },
    { href: "#dyna", label: "Dyna" },
    { href: "#guide-business", label: "Guide business" },
    { href: "#about", label: "À propos" },
  ];

  const onClick = (e, href) => {
    e.preventDefault();
    const el = document.querySelector(href);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="nav-brand" onClick={(e) => onClick(e, "#top")}>
          <span className="nav-brand-dot"></span>
          <span>NN</span>
        </a>
        {links.map((l) => (
          <a
            key={l.href}
            href={l.href}
            onClick={(e) => onClick(e, l.href)}
            className={`nav-link ${active === l.href.slice(1) ? "is-active" : ""}`}
          >
            {l.label}
          </a>
        ))}
        <a href="mailto:contact@nicolas-nechitch.fr" className="nav-cta">
          Contact ↗
        </a>
      </div>
    </nav>
  );
}

// ===== HERO V1 — Editorial split with portrait =====
function HeroEditorial() {
  const ref = useReveal();
  const [time, setTime] = useState("");

  useEffect(() => {
    const update = () => {
      const d = new Date();
      const opts = { hour: "2-digit", minute: "2-digit", timeZone: "Europe/Paris" };
      setTime(d.toLocaleTimeString("fr-FR", opts) + " CET");
    };
    update();
    const id = setInterval(update, 30000);
    return () => clearInterval(id);
  }, []);

  return (
    <section ref={ref} id="top" className="hero hero-editorial">
      <div className="shell hero-grid">
        <div className="hero-left">
          <div className="reveal-fade hero-meta">
            <span className="eyebrow">Paris · {time}</span>
          </div>

          <h1 className="display hero-title">
            <span className="hero-line">
              <SplitReveal text="Le fitness" />
            </span>
            <span className="hero-line">
              <span className="reveal-word"><span style={{ transitionDelay: "150ms", color: "var(--blue)" }}>premium,</span></span>
            </span>
            <span className="hero-line">
              <SplitReveal text="à portée" delay={300} />
            </span>
            <span className="hero-line">
              <SplitReveal text="de tous." delay={500} />
            </span>
          </h1>

          <div className="reveal-up hero-sub" style={{ transitionDelay: "900ms" }}>
            <p>
              <strong>Consultant, formateur, entrepreneur.</strong><br />
              <span className="text-muted">+12 ans dans l'industrie du fitness.<br />
              +750 professionnels accompagnés.<br />
              +12 marques partenaires.<br />
              L'objectif ? <strong style={{ color: "var(--ink)", fontWeight: 700 }}>Premiumiser l'expérience client</strong>,<br />
              pour clubs de sport et coachs indépendants et ainsi générer plus de chiffre d'affaires.</span>
            </p>
          </div>

          <div className="reveal-up hero-cta-row" style={{ transitionDelay: "1050ms" }}>
            <Magnetic>
              <a href="#consulting" className="btn btn-primary">
                Découvrir <ArrowUpRight />
              </a>
            </Magnetic>
          </div>
        </div>

        <div className="hero-right">
          <HeroPortrait />
        </div>
      </div>

      <div className="hero-marquee">
        <Marquee items={[
          "+750 professionnels accompagnés",
          "12 ans d'expertise premium",
          "Consulting et formations business",
          "Livre · Les 4 piliers d'un business de fitness premium",
          "dyna · app business pour pros du fitness",
        ]} />
      </div>

      <ScrollHint />
    </section>
  );
}

// ===== HERO V2 — Giant typography, no photo =====
function HeroTypographic() {
  const ref = useReveal();
  return (
    <section ref={ref} id="top" className="hero hero-typo">
      <div className="shell">
        <div className="hero-typo-meta reveal-fade">
          <span className="eyebrow">Nicolas Nechitch · Consultant · Auteur · Fondateur</span>
          <span className="mono hero-typo-loc">Paris ↗ FR</span>
        </div>

        <h1 className="display hero-typo-title">
          <span className="hero-typo-line">
            <span className="reveal-word"><span style={{ transitionDelay: "100ms" }}>BUILDING</span></span>
          </span>
          <span className="hero-typo-line hero-typo-italic">
            <span className="reveal-word"><span style={{ transitionDelay: "300ms" }} className="serif">premium</span></span>
          </span>
          <span className="hero-typo-line">
            <span className="reveal-word"><span style={{ transitionDelay: "500ms" }}>FITNESS</span></span>
            <span className="hero-typo-amp serif">&</span>
          </span>
          <span className="hero-typo-line hero-typo-blue">
            <span className="reveal-word"><span style={{ transitionDelay: "700ms" }}>BUSINESS.</span></span>
          </span>
        </h1>

        <div className="hero-typo-bottom">
          <div className="reveal-up hero-typo-stats" style={{ transitionDelay: "900ms" }}>
            <Stat n="12" suffix="ans" l="d'expertise terrain" />
            <Stat n="750" suffix="+" l="pros accompagnés" />
            <Stat n="15" l="marques partenaires" />
          </div>
          <div className="reveal-up" style={{ transitionDelay: "1050ms" }}>
            <Magnetic>
              <a href="#consulting" className="btn btn-blue">
                Explorer le travail <ArrowUpRight />
              </a>
            </Magnetic>
          </div>
        </div>
      </div>
      <ScrollHint />
    </section>
  );
}

// ===== HERO V3 — Full bleed photo with overlay =====
function HeroFullbleed() {
  const ref = useReveal();
  return (
    <section ref={ref} id="top" className="hero hero-full">
      <div className="hero-full-image">
        <PortraitPlaceholder large />
        <div className="hero-full-overlay"></div>
      </div>

      <div className="shell hero-full-content">
        <div className="hero-full-top">
          <span className="eyebrow reveal-fade" style={{ color: "rgba(255,255,255,0.7)" }}>
            <span style={{ background: "white", color: "var(--ink)", padding: "4px 8px", borderRadius: 4 }}>NN</span>
            Nicolas Nechitch
          </span>
        </div>

        <h1 className="display hero-full-title">
          <span className="hero-full-line">
            <SplitReveal text="Structurer" />
          </span>
          <span className="hero-full-line hero-italic">
            <span className="reveal-word"><span style={{ transitionDelay: "200ms" }} className="serif">le</span></span>{" "}
            <span className="reveal-word"><span style={{ transitionDelay: "300ms" }} className="serif">fitness</span></span>
          </span>
          <span className="hero-full-line">
            <SplitReveal text="premium" delay={400} />
          </span>
        </h1>

        <div className="hero-full-bottom">
          <div className="reveal-up hero-full-desc" style={{ transitionDelay: "700ms" }}>
            <p>
              Consultant, auteur, fondateur. J'aide les salles de sport et les coachs à construire des business durables, premium et alignés.
            </p>
          </div>
          <div className="reveal-up hero-full-actions" style={{ transitionDelay: "850ms" }}>
            <Magnetic>
              <a href="#consulting" className="btn btn-blue">
                Découvrir <ArrowUpRight />
              </a>
            </Magnetic>
          </div>
        </div>
      </div>

      <ScrollHint light />
    </section>
  );
}

// ===== Hero supporting bits =====
function Stat({ n, suffix, l }) {
  return (
    <div className="stat">
      <div className="stat-num mono">
        {n}<span className="stat-suffix">{suffix || ""}</span>
      </div>
      <div className="stat-label">{l}</div>
    </div>
  );
}

function ScrollHint({ light }) {
  return (
    <div className={`scroll-hint ${light ? "is-light" : ""}`}>
      <span className="mono">scroll</span>
      <svg width="12" height="40" viewBox="0 0 12 40" fill="none">
        <path d="M6 2 V38 M2 32 L6 38 L10 32" stroke="currentColor" strokeWidth="1" strokeLinecap="round" />
      </svg>
    </div>
  );
}

// ===== Hero portrait — placeholder editorial composition =====
function HeroPortrait() {
  return (
    <Tilt max={4} className="hero-portrait">
      <div className="hero-portrait-frame">
        <PortraitPlaceholder src="assets/hero-portrait.jpeg" />
        <div className="hero-portrait-corner top-right"></div>
        <div className="hero-portrait-corner bottom-left"></div>

        <div className="hero-portrait-tag tag-1">
          <span className="mono">01 —</span> Consulting
        </div>
        <div className="hero-portrait-tag tag-2">
          <span className="mono">02 —</span> dyna
        </div>
        <div className="hero-portrait-tag tag-3">
          <span className="mono">03 —</span> Guide business
        </div>
      </div>
    </Tilt>
  );
}

function PortraitPlaceholder({ large, src = "assets/portrait.png" }) {
  return (
    <div className={`portrait-ph ${large ? "is-large" : ""}`}>
      <div className="portrait-ph-bg">
        <img
          src={src}
          alt="Nicolas Nechitch"
          className="portrait-img"
        />
      </div>
    </div>
  );
}

Object.assign(window, {
  Nav,
  HeroEditorial,
  HeroTypographic,
  HeroFullbleed,
  Stat,
  ScrollHint,
  HeroPortrait,
  PortraitPlaceholder,
});