// Nav, Marquee, Manifesto sections
const { useEffect: useEffect2, useState: useState2, useRef: useRef2 } = React;

function Nav({ lang, setLang, t }) {
  const [scrolled, setScrolled] = useState2(false);
  useEffect2(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" className="nav-logo">
        <img src="assets/logo-circles.png" alt="" />
        <span>Fem<span className="q">Quity</span></span>
      </a>
      <div className="nav-links">
        <a href="#podcast">{t.nav.podcast}</a>
        <a href="#events">{t.nav.events}</a>
        <a href="#education">{t.nav.education}</a>
        <a href="#membership">{t.nav.membership}</a>
        <a href="#lab">{t.nav.lab}</a>
        <a href="#founder">{t.nav.about}</a>
      </div>
      <div className="nav-right">
        <div className="lang-toggle">
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          <button className={lang === 'sv' ? 'active' : ''} onClick={() => setLang('sv')}>SV</button>
        </div>
        <a href="#community" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13 }}>
          {t.nav.join} <span className="arrow">→</span>
        </a>
      </div>
    </nav>
  );
}

function Marquee({ items }) {
  const loop = [...items, ...items];
  return (
    <div style={{
      padding: '28px 0',
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
      overflow: 'hidden',
      background: 'rgba(251,244,240,.02)',
    }}>
      <div className="marquee">
        {loop.map((item, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 40,
            fontFamily: 'var(--serif)', fontStyle: 'italic',
            fontSize: 'clamp(32px, 4.5vw, 64px)',
            fontWeight: 300, letterSpacing: '-0.02em',
            color: i % 2 ? 'var(--ivory)' : 'transparent',
            WebkitTextStroke: i % 2 ? 'none' : '1px rgba(251,244,240,.5)',
            whiteSpace: 'nowrap',
          }}>
            {item}
            <span style={{
              display: 'inline-block', width: 10, height: 10, borderRadius: '50%',
              background: i % 3 === 0 ? 'var(--pink)' : i % 3 === 1 ? 'var(--rose)' : 'var(--peach)',
              flexShrink: 0,
            }} />
          </div>
        ))}
      </div>
    </div>
  );
}

function Manifesto({ t }) {
  const ref = useRef2(null);
  const [inView, setInView] = useState2(false);
  useEffect2(() => {
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setInView(true), { threshold: 0.2 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <section ref={ref} className="section" id="manifesto" style={{ position: 'relative' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)', gap: 'clamp(40px, 6vw, 96px)', alignItems: 'start' }}>
          <div>
            <span className={`eyebrow reveal ${inView ? 'in' : ''}`}>{t.manifesto.eyebrow}</span>
            <div className={`reveal d1 ${inView ? 'in' : ''}`} style={{ marginTop: 32, position: 'sticky', top: 120 }}>
              <div style={{
                aspectRatio: '4/5',
                background: 'linear-gradient(160deg, #120a0e 0%, #0a0608 100%)',
                borderRadius: 4,
                position: 'relative', overflow: 'hidden',
                border: '1px solid var(--rule)',
              }}>
                {/* Faint crosshairs, editorial diagram style */}
                <svg viewBox="0 0 400 500" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                  <defs>
                    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(251,244,240,0.04)" strokeWidth="1"/>
                    </pattern>
                    <filter id="soft">
                      <feGaussianBlur stdDeviation="0.3" />
                    </filter>
                  </defs>
                  <rect width="400" height="500" fill="url(#grid)" />

                  {/* Three overlapping circles — true Venn */}
                  <g style={{ mixBlendMode: 'screen', transformOrigin: '200px 250px', animation: 'orbit-c 22s ease-in-out infinite' }}>
                    <circle cx="160" cy="220" r="110" fill="#f4a8b8" opacity="0.78" filter="url(#soft)" />
                  </g>
                  <g style={{ mixBlendMode: 'screen', transformOrigin: '200px 250px', animation: 'orbit-a 20s ease-in-out infinite' }}>
                    <circle cx="240" cy="220" r="110" fill="#f06b8f" opacity="0.78" filter="url(#soft)" />
                  </g>
                  <g style={{ mixBlendMode: 'screen', transformOrigin: '200px 250px', animation: 'orbit-b 24s ease-in-out infinite' }}>
                    <circle cx="200" cy="300" r="110" fill="#e85a5a" opacity="0.78" filter="url(#soft)" />
                  </g>

                  {/* Labels for each circle */}
                  <g fontFamily="'Geist Mono', monospace" fontSize="10" letterSpacing="1.4" fill="rgba(251,244,240,0.85)">
                    <text x="70" y="140" textAnchor="middle">EDUCATION</text>
                    <line x1="70" y1="148" x2="130" y2="190" stroke="rgba(251,244,240,0.3)" strokeWidth="0.75" />

                    <text x="330" y="140" textAnchor="middle">AMBITION</text>
                    <line x1="330" y1="148" x2="270" y2="190" stroke="rgba(251,244,240,0.3)" strokeWidth="0.75" />

                    <text x="200" y="425" textAnchor="middle">EQUITY</text>
                    <line x1="200" y1="412" x2="200" y2="345" stroke="rgba(251,244,240,0.3)" strokeWidth="0.75" />
                  </g>

                  {/* Center pin — the overlap */}
                  <g>
                    <circle cx="200" cy="250" r="3" fill="#fbf4f0" />
                    <circle cx="200" cy="250" r="8" fill="none" stroke="rgba(251,244,240,0.4)" strokeWidth="0.75" />
                  </g>

                  <text x="216" y="254" fontFamily="'Cormorant Garamond', serif" fontStyle="italic" fontSize="14" fill="#fbf4f0">
                    sisterhood
                  </text>
                </svg>

                {/* Corner meta */}
                <div style={{
                  position: 'absolute', top: 16, left: 16, right: 16,
                  display: 'flex', justifyContent: 'space-between',
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.14em',
                  textTransform: 'uppercase', color: 'var(--text-faint)',
                }}>
                  <span>Fig. 01</span>
                  <span>FQ / 2024 — ∞</span>
                </div>

                <div style={{
                  position: 'absolute', bottom: 16, left: 16, right: 16,
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.14em',
                  textTransform: 'uppercase', color: 'var(--text-faint)',
                  display: 'flex', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap',
                }}>
                  <span>Sisterhood as overlap</span>
                  <span style={{ color: 'var(--pink)' }}>● three sets, one set</span>
                </div>
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
            <h2 className={`h2 reveal ${inView ? 'in' : ''}`}>
              {t.manifesto.l1} <em style={{ fontStyle: 'italic' }}>{t.manifesto.l2}</em> {t.manifesto.l3} <span className="gradient-text">{t.manifesto.l4}</span>.
            </h2>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 32, borderTop: '1px solid var(--rule)', paddingTop: 32 }}>
              {t.manifesto.pillars.map((p, i) => (
                <div key={i} className={`reveal d${i + 1} ${inView ? 'in' : ''}`}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--pink)', letterSpacing: '.14em', marginBottom: 12 }}>
                    0{i + 1}
                  </div>
                  <h3 style={{ fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 10 }}>
                    {p.title}
                  </h3>
                  <p style={{ color: 'var(--text-dim)', fontSize: 14.5, lineHeight: 1.55 }}>{p.body}</p>
                </div>
              ))}
            </div>

            <div className={`reveal d2 ${inView ? 'in' : ''}`} style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
              <a href="#founder" className="btn btn-ghost">{t.manifesto.cta} <span className="arrow">→</span></a>
              <span className="mono" style={{ fontSize: 11, letterSpacing: '.12em', color: 'var(--text-faint)', textTransform: 'uppercase' }}>
                {t.manifesto.since}
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Marquee = Marquee;
window.Manifesto = Manifesto;