/* Hero + Navbar + Sections components */
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// ─── NAVBAR ───
function Navbar() {
  const [hidden, setHidden] = useStateH(false);
  const lastY = useRefH(0);

  useEffectH(() => {
    const onScroll = () => {
      const y = window.scrollY;
      if (y < 80) { setHidden(false); lastY.current = y; return; }
      const diff = y - lastY.current;
      if (Math.abs(diff) < 6) return;
      if (diff > 0) setHidden(true);
      else setHidden(false);
      lastY.current = y;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const [openMenu, setOpenMenu] = useStateH(null);
  const closeTimer = useRefH(null);
  const openNow = (id) => { if (closeTimer.current) clearTimeout(closeTimer.current); setOpenMenu(id); };
  const closeSoon = () => { closeTimer.current = setTimeout(() => setOpenMenu(null), 180); };

  const productItems = [
    { name: 'Canvas', desc: 'Espace libre, post-its, dessins', icon: 'layout-grid', grad: 'linear-gradient(135deg,#3B82F6,#2563EB)', href: 'produit.html#canvas' },
    { name: 'Kanban', desc: 'Colonnes, cartes, priorités', icon: 'columns-3', grad: 'linear-gradient(135deg,#A855F7,#7C3AED)', href: 'produit.html#kanban' },
    { name: 'Database', desc: 'Propriétés typées, filtres, tris', icon: 'table-2', grad: 'linear-gradient(135deg,#10B981,#059669)', href: 'produit.html#database' },
  ];
  const docItems = [
    { name: 'Guide de démarrage', desc: 'Créez votre premier board en 5 min.', icon: 'book-open', href: 'docs.html#introduction' },
    { name: 'Référence API', desc: 'REST, webhooks, authentification', icon: 'code-2', href: 'docs.html#api' },
    { name: 'Intégrations', desc: 'Slack, GitHub, Figma, Zapier', icon: 'puzzle', href: 'docs.html#integrations' },
  ];

  return (
    <div className={`horus-nav-wrap ${hidden ? 'is-hidden' : ''}`}>
      <nav className="horus-nav">
        <a href="#top" className="horus-nav__brand">
          <img src="assets/horus-sun.svg" alt="Horus" className="horus-nav__logo" />
        </a>
        <div className="horus-nav__links">
          <div className="horus-nav__menu" onMouseEnter={() => openNow('product')} onMouseLeave={closeSoon}>
            <button className={`horus-nav__link ${openMenu === 'product' ? 'is-open' : ''}`}>
              Produit
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" width="11" height="11" style={{ marginLeft: 4, transition: 'transform 180ms', transform: openMenu === 'product' ? 'rotate(180deg)' : 'none' }}><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            {openMenu === 'product' && (
              <div className="horus-nav__dropdown">
                {productItems.map(it => (
                  <a key={it.name} href={it.href} className="horus-nav__item">
                    <span className="horus-nav__item-text">
                      <b>{it.name}</b>
                      <em>{it.desc}</em>
                    </span>
                  </a>
                ))}
              </div>
            )}
          </div>
          <a href="#demo" className="horus-nav__link">Démo</a>
          <a href="#pricing" className="horus-nav__link">Tarifs</a>
          <a href="#apps" className="horus-nav__link">Écosystème</a>
          <div className="horus-nav__menu" onMouseEnter={() => openNow('docs')} onMouseLeave={closeSoon}>
            <button className={`horus-nav__link ${openMenu === 'docs' ? 'is-open' : ''}`}>
              Docs
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" width="11" height="11" style={{ marginLeft: 4, transition: 'transform 180ms', transform: openMenu === 'docs' ? 'rotate(180deg)' : 'none' }}><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            {openMenu === 'docs' && (
              <div className="horus-nav__dropdown">
                {docItems.map(it => (
                  <a key={it.name} href={it.href} className="horus-nav__item">
                    <span className="horus-nav__item-text">
                      <b>{it.name}</b>
                      <em>{it.desc}</em>
                    </span>
                  </a>
                ))}
              </div>
            )}
          </div>
        </div>
        <a href="https://horus-pro.app/" className="horus-nav__cta">Commencer</a>
      </nav>
    </div>
  );
}

// ─── HERO STAGE VARIANTS ───
function HeroMarquee() {
  const items = [
    { C: CanvasMockup, tilt: 'tilt-l' },
    { C: KanbanMockup, tilt: 'tilt-r' },
    { C: DatabaseMockup, tilt: 'tilt-l' },
    { C: CanvasMockup, tilt: 'tilt-r' },
    { C: KanbanMockup, tilt: 'tilt-l' },
    { C: DatabaseMockup, tilt: 'tilt-r' },
  ];
  // Duplicate for seamless loop
  const loop = [...items, ...items];
  return (
    <div className="horus-marquee">
      {loop.map((it, i) => (
        <div key={i} className={`horus-hero__slot horus-hero__slot--tilt-${it.tilt.slice(-1)}`}>
          <it.C />
        </div>
      ))}
    </div>
  );
}

function HeroFloat() {
  const wrap = useRefH(null);
  const [m, setM] = useStateH({ x: 0, y: 0 });
  useEffectH(() => {
    const onMove = (e) => {
      if (!wrap.current) return;
      const r = wrap.current.getBoundingClientRect();
      const x = ((e.clientX - r.left) / r.width - 0.5) * 2;
      const y = ((e.clientY - r.top) / r.height - 0.5) * 2;
      setM({ x, y });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);
  const items = [
    { C: CanvasMockup,   top: '8%',  left: '4%',  w: 340, h: 230, depth: 20, rot: -4 },
    { C: KanbanMockup,   top: '42%', left: '38%', w: 360, h: 240, depth: 35, rot: 2 },
    { C: DatabaseMockup, top: '14%', left: '58%', w: 320, h: 210, depth: 28, rot: 5 },
  ];
  return (
    <div className="horus-float" ref={wrap}>
      {items.map((it, i) => (
        <div key={i} className="horus-float__item" style={{
          top: it.top, left: it.left, width: it.w, height: it.h,
          transform: `translate(${m.x * it.depth}px, ${m.y * it.depth}px) rotate(${it.rot}deg)`,
          zIndex: i + 1,
        }}>
          <it.C />
        </div>
      ))}
    </div>
  );
}

function HeroStack() {
  const [cycle, setCycle] = useStateH(0);
  useEffectH(() => {
    const t = setInterval(() => setCycle(c => (c + 1) % 3), 2800);
    return () => clearInterval(t);
  }, []);
  const variants = [CanvasMockup, KanbanMockup, DatabaseMockup];
  return (
    <div className="horus-stack">
      {variants.map((C, i) => {
        const offset = (i - cycle + 3) % 3;
        const opacity = offset === 0 ? 1 : offset === 1 ? 0.5 : 0.2;
        const z = 3 - offset;
        const ty = offset * 40;
        const tx = offset * 28;
        const scale = 1 - offset * 0.06;
        return (
          <div key={i} className="horus-stack__item" style={{
            transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
            opacity, zIndex: z,
          }}>
            <C />
          </div>
        );
      })}
    </div>
  );
}

// ─── HERO ───
function Hero({ heroVariant }) {
  return (
    <section className="horus-section horus-hero" id="top">
      <div>
        <div className="horus-hero__eyebrow">
          <b>Nouveau</b>
          <span>Horus Boards  v1.0 — disponible en bêta</span>
        </div>
        <h1 className="horus-hero__title">
          Un espace.<br />
          <em>Trois façons</em><br />
          de voir vos projets.
        </h1>
        <p className="horus-hero__sub">
          Canvas libre, tableaux Kanban, bases de données typées — les mêmes projets, réorganisés à volonté. Horus est l'outil de gestion qui s'adapte à votre cerveau, pas l'inverse.
        </p>
        <div className="horus-hero__ctas">
          <button className="horus-btn horus-btn--primary">
            Commencer gratuitement
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </button>
          <button className="horus-btn horus-btn--ghost">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><polygon points="6 3 20 12 6 21 6 3"/></svg>
            Voir la démo
          </button>
        </div>
        <div className="horus-hero__meta">
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Sans carte bancaire</span>
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> RGPD / hébergé en UE</span>
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> 14 jours d'essai Pro</span>
        </div>
      </div>
      <div className="horus-hero__stage">
        {heroVariant === 'marquee' && <HeroMarquee />}
        {heroVariant === 'float'   && <HeroFloat />}
        {heroVariant === 'stack'   && <HeroStack />}
      </div>
    </section>
  );
}

Object.assign(window, { Navbar, Hero, HeroMarquee, HeroFloat, HeroStack });