// Ticker + Navigation + Hero

const Ticker = () => {
  const items = [
    "⚓ Cap Fréhel · Côtes-d'Armor",
    "Hep Breizh n'eus netra",
    "Analyses COA sur chaque lot",
    "Expédié sous 24-48h",
    "Emballage discret",
  ];
  // Triplé pour que la boucle soit invisible
  const tripled = [...items, ...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker__track">
        {tripled.map((t, i) => (
          <div key={i} className="ticker__item"><span>·</span> {t} <span>·</span></div>
        ))}
      </div>
    </div>
  );
};

const Nav = ({ scrolled, cartCount, onOpenCart }) => {
  return (
    <nav className={"nav " + (scrolled ? "nav--scrolled" : "")}>
      <a href="#top" className="nav__brand">Monsieur <em>Rod</em></a>
      <div className="nav__links">
        <a href="#shop">Boutique</a>
        <a href="#culture">Culture</a>
        <a href="#trust">Qualité</a>
        <a href="#cap-frehel">Cap Fréhel</a>
        <a href="#faq">FAQ</a>
      </div>
      <button className="nav__cart" onClick={onOpenCart} aria-label="Ouvrir le panier">
        <span>Panier</span>
        <span className="nav__cart-count">{cartCount}</span>
      </button>
    </nav>
  );
};

const Hero = ({ onShop }) => {
  const contentRef = React.useRef(null);
  const silhouetteRef = React.useRef(null);
  const moonRef = React.useRef(null);

  // Parallaxe au scroll
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const fade = Math.max(0, 1 - y / 700);
      if (contentRef.current) {
        contentRef.current.style.transform = `translateY(${y * 0.35}px)`;
        contentRef.current.style.opacity = fade;
      }
      if (silhouetteRef.current) {
        silhouetteRef.current.style.transform = `translateY(${y * -0.05}px)`;
      }
      if (moonRef.current) {
        moonRef.current.style.transform = `translateY(${y * 0.15}px)`;
      }
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section className="hero" id="top" data-screen-label="01 Hero — Phare du Cap Fréhel">
      <div className="hero__stars"></div>
      <div ref={moonRef} className="hero__moon" style={{ willChange: "transform" }}></div>

      <div className="hero__particles" aria-hidden="true">
        {[...Array(14)].map((_, i) => {
          const left = (i * 7.3 + 5) % 100;
          const d = 7 + (i % 5) * 1.4;
          const dl = (i % 7) * 1.2;
          const dr = i % 2 === 0 ? 40 : -40;
          const size = 1.5 + (i % 3) * 0.7;
          return (
            <span
              key={i}
              className="hero__particle"
              style={{
                left: `${left}%`,
                width: `${size}px`,
                height: `${size}px`,
                "--d": `${d}s`,
                "--dl": `${dl}s`,
                "--dr": `${dr}px`,
              }}
            />
          );
        })}
      </div>

      <div className="hero__flash" aria-hidden="true"></div>

      {/* Silhouette du phare réel — beam ancré sur la lanterne */}
      <div ref={silhouetteRef} className="hero__silhouette" style={{ willChange: "transform" }}>
        <img src="assets/cap-frehel-phare.png" alt="Phare du Cap Fréhel" />

        {/* Faisceau rotatif positionné précisément sur la lanterne */}
        <div className="beam-anchor" aria-hidden="true">
          <div className="beam-scatter"></div>
          <div className="beam-cone"></div>
          <div className="beam-cone-inner"></div>
          <div className="beam-glow"></div>
        </div>
      </div>

      <div ref={contentRef} className="hero__content" style={{ willChange: "transform, opacity" }}>
        <div className="hero__eyebrow">CBD Premium · Breton & Fier</div>
        <h1 className="hero__title h-display">
          Monsieur<br/><em>Rod</em>
        </h1>
        <p className="hero__sub">
          Né au souffle de la Manche — Cultivé sur les landes bretonnes
        </p>
        <div className="hero__cta">
          <button className="btn btn--gold" onClick={onShop}>
            Découvrir la collection
            <span className="btn__arrow">→</span>
          </button>
          <a className="btn btn--ghost" href="#cap-frehel">Cap Fréhel</a>
        </div>
      </div>

      <div className="hero__scroll">
        <span>Scroll</span>
        <div className="hero__scroll-line"></div>
      </div>
    </section>
  );
};

const Manifesto = () => {
  return (
    <section className="manifesto" data-screen-label="02 Manifesto">
      <div className="manifesto__inner">
        <div className="celtic-divider reveal">
          <div className="celtic-divider__line"></div>
          <CelticKnot />
          <div className="celtic-divider__line"></div>
        </div>
        <div className="section-eyebrow reveal">Notre engagement</div>
        <p className="manifesto__text reveal reveal--d1">
          Chaque fleur passe entre <em>nos mains</em>. Du semis à la mise en sachet,
          nous contrôlons chaque étape — pour qu'à l'autre bout, dans votre salon,
          il ne reste que <em>l'essentiel</em> : du goût, de la traçabilité, du calme.
        </p>
        <div className="manifesto__meta reveal reveal--d2">
          <div>
            <div className="manifesto__stat-num">3</div>
            <div className="manifesto__stat-label">Variétés sélectionnées</div>
          </div>
          <div>
            <div className="manifesto__stat-num">&lt;0,3%</div>
            <div className="manifesto__stat-label">THC garanti UE</div>
          </div>
          <div>
            <div className="manifesto__stat-num">100%</div>
            <div className="manifesto__stat-label">Analyses laboratoire</div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Petit ornement celtique (SVG)
const CelticKnot = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: 0 }}>
    <circle cx="20" cy="20" r="12" stroke="#c9a84c" strokeWidth="1" fill="none" opacity=".5"/>
    <circle cx="20" cy="20" r="7" stroke="#c9a84c" strokeWidth="1" fill="none" opacity=".3"/>
    <path d="M20 8 L22 16 L20 14 L18 16 Z" fill="#c9a84c" opacity=".6"/>
    <path d="M20 32 L18 24 L20 26 L22 24 Z" fill="#c9a84c" opacity=".6"/>
    <path d="M8 20 L16 18 L14 20 L16 22 Z" fill="#c9a84c" opacity=".6"/>
    <path d="M32 20 L24 22 L26 20 L24 18 Z" fill="#c9a84c" opacity=".6"/>
    <circle cx="20" cy="20" r="2.5" fill="#c9a84c" opacity=".7"/>
  </svg>
);

Object.assign(window, { Ticker, Nav, Hero, Manifesto, CelticKnot });