// header-hero.jsx — Sticky header with lang toggle + hero

function Header({ lang, setLang, openLead }) {
  const c = window.CONTENT[lang].nav;
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      backgroundColor: scrolled ? 'color-mix(in srgb, var(--bg) 90%, transparent)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      borderBottom: scrolled ? '2px solid var(--line)' : '2px solid transparent',
      transition: 'all .25s ease',
    }}>
      <div className="wrap" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 28px',
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center' }}>
          <Logo />
        </a>

        <nav className="nav-links" style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
          {c.links.map((l) => (
            <a key={l.id} href={`#${l.id}`} style={{
              fontSize: 14, fontWeight: 600, color: 'var(--ink)',
              opacity: .8, transition: 'opacity .15s'
            }} onMouseEnter={e => e.target.style.opacity = 1} onMouseLeave={e => e.target.style.opacity = .8}>
              {l.label}
            </a>
          ))}
        </nav>

        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <LangToggle lang={lang} setLang={setLang} />
          <button className="btn btn-sm" onClick={openLead}>
            {c.cta}
          </button>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) { .nav-links { display: none !important; } }
      `}</style>
    </header>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div style={{
      display: 'inline-flex',
      border: '2px solid var(--line)',
      borderRadius: 999,
      padding: 2,
      background: 'var(--surface)',
      fontWeight: 700,
      fontSize: 12,
    }}>
      {['tr', 'en'].map(l => (
        <button key={l} onClick={() => setLang(l)} style={{
          padding: '6px 12px',
          background: lang === l ? 'var(--ink)' : 'transparent',
          color: lang === l ? 'var(--bg)' : 'var(--ink)',
          border: 0,
          borderRadius: 999,
          textTransform: 'uppercase',
          letterSpacing: '0.05em',
        }}>{l}</button>
      ))}
    </div>
  );
}

/* ─────────────  HERO  ───────────── */
function Hero({ lang, openLead, headlineIdx, ctaIdx }) {
  const c = window.CONTENT[lang].hero;
  const h = c.heroHeadingVariants[headlineIdx % c.heroHeadingVariants.length];
  const ctaLabel = c.ctaVariants[ctaIdx % c.ctaVariants.length];

  return (
    <section id="top" style={{ position: 'relative', paddingTop: 48, paddingBottom: 100 }}>
      {/* decorative confetti */}
      <Confetti />

      <div className="wrap" style={{
        display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center',
      }}>
        <div>
          <span className="pill" style={{ marginBottom: 26 }}>
            <span className="dot"></span>{c.pill}
          </span>

          <h1 style={{
            fontSize: 'clamp(40px, 6.8vw, 84px)',
            lineHeight: 0.98,
            marginBottom: 28,
          }}>
            {h.pre}{' '}
            <span style={{ position: 'relative', display: 'inline-block' }}>
              <span className="hl-box" style={{
                background: 'var(--coral)', color: '#fff',
                padding: '0 12px 4px', borderRadius: 14,
                border: '2px solid var(--line)',
                display: 'inline-block',
                transform: 'rotate(-1.5deg)',
              }}>{h.mid}</span>
            </span>
            {h.post}
          </h1>

          <p style={{
            fontSize: 19, color: 'var(--ink-soft)', maxWidth: 540,
            marginBottom: 36, lineHeight: 1.5,
          }}>
            {c.sub}
          </p>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, alignItems: 'center', marginBottom: 28 }}>
            <button className="btn" onClick={openLead} style={{ fontSize: 17, padding: '16px 28px' }}>
              {ctaLabel}
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                <path d="M5 12 H 19 M 13 6 L 19 12 L 13 18"/>
              </svg>
            </button>
            <a href="#guide" className="btn btn-ghost" style={{ fontSize: 16 }}>
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                <path d="M 4 4 H 18 a 2 2 0 0 1 2 2 V 20 a 2 2 0 0 1 -2 2 H 4 Z M 8 9 H 16 M 8 13 H 16 M 8 17 H 13"/>
              </svg>
              {c.ctaGhost}
            </a>
          </div>

          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexWrap: 'wrap', gap: '8px 20px' }}>
            {c.bullets.map((b, i) => (
              <li key={i} style={{ fontSize: 14, color: 'var(--ink-soft)', display: 'flex', gap: 8, alignItems: 'center' }}>
                <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="var(--leaf)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M 4 10 L 8 14 L 16 6"/>
                </svg>
                {b}
              </li>
            ))}
          </ul>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          <HeroIllustration />
          {/* floating tags */}
          <div className="float-sticker" style={{
            position: 'absolute', top: -10, right: -10,
            transform: 'rotate(8deg)',
          }}>
            <div className="card" style={{
              padding: '8px 14px', background: 'var(--sun)', fontWeight: 700, fontSize: 13,
            }}>
              Vibe Coding ✨
            </div>
          </div>
          <div className="float-sticker" style={{
            position: 'absolute', bottom: 30, left: -20,
            transform: 'rotate(-6deg)',
          }}>
            <div className="card" style={{
              padding: '8px 14px', background: 'var(--leaf)', color: '#fff', fontWeight: 700, fontSize: 13,
            }}>
              Proje Tabanlı 🎯
            </div>
          </div>
        </div>
      </div>

      {/* Trust strip */}
      <div className="wrap" style={{ marginTop: 60 }}>
        <div style={{
          borderTop: '2px dashed var(--line)',
          borderBottom: '2px dashed var(--line)',
          padding: '18px 0',
          textAlign: 'center',
          fontSize: 14,
          fontWeight: 600,
          color: 'var(--ink-soft)',
          letterSpacing: '0.02em',
        }}>
          {c.meta}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px){
          #top .wrap[style*="grid"] {
            grid-template-columns: 1fr !important;
            gap: 40px !important;
          }
        }
      `}</style>
    </section>
  );
}

function Confetti() {
  // Pure-decoration absolutely-positioned shapes
  const items = [
    { top: '12%', left: '6%',  c: 'var(--sun)',  rot: 18 },
    { top: '70%', left: '2%',  c: 'var(--leaf)', rot: -10 },
    { top: '6%',  right: '20%',c: 'var(--sky)',  rot: 25 },
    { top: '78%', right: '4%', c: 'var(--rose)', rot: 8 },
    { top: '40%', right: '46%',c: 'var(--plum)', rot: -25 },
  ];
  return (
    <div className="confetti" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0 }}>
      {items.map((it, i) => (
        <div key={i} style={{
          position: 'absolute',
          top: it.top, left: it.left, right: it.right,
          transform: `rotate(${it.rot}deg)`,
          opacity: 0.5,
        }}>
          <StarBurst color={it.c} size={26 + (i % 2) * 6} />
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Header, Hero });