// Header (sticky, transparent → opaque) + Hero V1 Editorial.

function useScrolled(threshold = 24) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [threshold]);
  return scrolled;
}

function BudGiLogoMark({ size = 32 }) {
  // Dark-bg artwork — keep it on its native dark tile so the navy/silver
  // contrast remains intact. Rounded square, subtle ring, soft shadow.
  return (
    <span style={{
      width: size,
      height: size,
      borderRadius: size * 0.22,
      background: '#0e0f12',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      overflow: 'hidden',
      boxShadow: '0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 14px -6px rgba(20,30,60,0.35)',
      flexShrink: 0,
    }}>
      <img src="assets/budgi-logo.png" alt="BudGi"
        width={size} height={size}
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
    </span>
  );
}

function BudGiWordmark({ size = 22, color }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <BudGiLogoMark size={Math.round(size * 1.45)} />
      <span style={{
        fontFamily: 'var(--serif)',
        fontSize: size,
        fontWeight: 400,
        letterSpacing: '-0.025em',
        color: color || 'var(--ink)',
        lineHeight: 1,
        fontVariationSettings: '"opsz" 144',
      }}>
        BudGi<span style={{ color: 'var(--navy)' }}>.</span>
      </span>
    </span>
  );
}

function Header() {
  const scrolled = useScrolled(40);
  const links = [
    ['Souveraineté', '#sovereignty'],
    ['Anticipation', '#anticipation'],
    ['Blog', '#blog'],
    ['FAQ', '#faq'],
    ['Tarifs', '#pricing'],
  ];
  return (
    <header style={{
      position: 'fixed',
      top: 0, left: 0, right: 0,
      zIndex: 50,
      background: scrolled ? 'rgba(250,250,247,0.86)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(0,0,0,0.06)' : '1px solid transparent',
      transition: 'background .3s ease, border-color .3s ease',
    }}>
      <div className="container" style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: 68,
      }}>
        <a href="#top" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center' }}>
          <BudGiWordmark size={24} />
        </a>
        <nav style={{ display: 'flex', gap: 28, alignItems: 'center' }} className="nav-desktop">
          {links.map(([l, h]) => (
            <a key={h} href={h} style={{
              fontSize: 14,
              color: 'var(--ink-2)',
              textDecoration: 'none',
              fontWeight: 500,
              letterSpacing: '-0.005em',
            }}>{l}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <a href="#pricing" className="btn btn-ghost" style={{ height: 40, padding: '0 18px', fontSize: 13.5 }}>
            Acheter — 39,99 €
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .nav-desktop { display: none !important; }
        }
      `}</style>
    </header>
  );
}

// ── HERO V1 — Editorial ─────────────────────────────────────────
function HeroEditorial({ tweaks }) {
  return (
    <section id="top" style={{
      paddingTop: 120,
      paddingBottom: 80,
      background: 'var(--paper)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Subtle paper grain overlay */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(1200px 600px at 80% 0%, rgba(29,58,138,0.04), transparent 60%)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)',
          gap: 'clamp(28px, 5vw, 72px)',
          alignItems: 'center',
        }} className="hero-grid">
          {/* LEFT: copy */}
          <div className="hero-copy">
            <div className="reveal in">
              <span className="eyebrow">
                <span className="dot" />
                Gestion budgétaire · 100 % locale
              </span>
            </div>

            <h1 className="h-display reveal delay-1" style={{
              fontSize: 'clamp(46px, 6.6vw, 84px)',
              margin: '22px 0 22px',
              maxWidth: '14ch',
            }}>
              Vos finances.<br />
              Chez vous.<br />
              <em style={{ color: 'var(--navy)' }}>Pour de bon.</em>
            </h1>

            <p className="body-lead reveal delay-2" style={{
              maxWidth: '44ch',
              marginBottom: 32,
            }}>
              BudGi anticipe, alerte et synchronise — sans qu'aucune donnée
              ne quitte vos appareils. Votre NAS. Vos règles.
            </p>

            <div className="reveal delay-3" style={{
              display: 'flex',
              gap: 12,
              flexWrap: 'wrap',
              marginBottom: 24,
            }}>
              <a href="#pricing" className="btn btn-primary btn-lg">
                Essayer · 50 opérations
              </a>
              <a href="#anticipation" className="btn btn-ghost btn-lg">
                Voir une démo →
              </a>
            </div>

            <div className="trust-row reveal delay-4">
              <span><span className="dot" />Aucun cloud tiers</span>
              <span><span className="dot" />PWA hors-ligne</span>
              <span><span className="dot" />Achat unique — CB / PayPal</span>
            </div>
          </div>

          {/* RIGHT: real app screenshots stacked */}
          <div className="hero-visual reveal delay-2" style={{
            position: 'relative',
            minHeight: 360,
          }}>
            {/* Back frame — Mes Comptes, tilted right */}
            <div className="hero-back-frame" style={{
              position: 'absolute',
              top: 40,
              right: 0,
              width: '76%',
              transform: 'rotate(2.5deg)',
              transformOrigin: 'top right',
              zIndex: 1,
            }}>
              <AppFrame
                src={SCREENSHOTS.mescomptes}
                alt="Mes comptes"
              />
            </div>

            {/* Front frame — Dashboard, slight tilt left */}
            <div className="hero-front-frame" style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '82%',
              transform: 'rotate(-1.5deg)',
              transformOrigin: 'top left',
              zIndex: 2,
            }}>
              <AppFrame
                src={SCREENSHOTS.dashboard}
                alt="Dashboard BudGi"
              />
            </div>

            {/* Annotation */}
            {tweaks.annotations && (
              <div className="hero-annotation" style={{
                position: 'absolute',
                bottom: '10%',
                right: '2%',
                transform: 'rotate(-3deg)',
                pointerEvents: 'none',
                zIndex: 5,
              }}>
                <div className="annotation" style={{ maxWidth: 150, textAlign: 'right' }}>
                  synchro NAS<br/>en temps réel
                </div>
                <svg width="70" height="44" viewBox="0 0 70 44" style={{
                  position: 'absolute',
                  top: 24, right: -24,
                  transform: 'rotate(16deg)',
                }}>
                  <path d="M 4 4 Q 26 8 52 32" fill="none"
                    stroke="var(--amber)" strokeWidth="1.5" strokeLinecap="round" />
                  <path d="M 46 27 L 54 34 L 44 37" fill="none"
                    stroke="var(--amber)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
            )}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; }
          .hero-visual { min-height: 420px !important; margin-top: 12px; }
        }
        @media (max-width: 600px) {
          .hero-visual { min-height: 280px !important; }
          .hero-back-frame {
            width: 58% !important;
            top: 24px !important;
            right: 0 !important;
            transform: rotate(2.5deg) !important;
          }
          .hero-front-frame {
            width: 62% !important;
            left: 0 !important;
            top: 0 !important;
            transform: rotate(-1.5deg) !important;
          }
          .hero-annotation { display: block !important; bottom: auto !important; top: 52% !important; right: 2% !important; }
          .hero-annotation .annotation { font-size: 10px !important; max-width: 100px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Header, HeroEditorial, BudGiWordmark });