// Builders Lab, Founder, Join, Footer
const { useEffect: useE5, useState: useS5, useRef: useR5 } = React;

function BuildersLab({ t }) {
  const ref = useR5(null);
  const [inView, setInView] = useS5(false);
  useE5(() => {
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setInView(true), { threshold: 0.15 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <section ref={ref} id="lab" className="section" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* giant backing circle */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%',
        width: '80vmin', height: '80vmin',
        marginLeft: '-40vmin', marginTop: '-40vmin',
        background: 'radial-gradient(circle, rgba(240,107,143,.08), transparent 60%)',
        filter: 'blur(30px)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 64, display: 'flex', flexDirection: 'column', gap: 28, alignItems: 'center' }}>
          <span className={`eyebrow reveal ${inView ? 'in' : ''}`}>
            <span style={{ color: 'var(--peach)' }}>NEW</span> — {t.lab.eyebrow}
          </span>
          <h2 className={`reveal d1 ${inView ? 'in' : ''}`} style={{
            fontFamily: 'var(--serif)', fontSize: 'clamp(56px, 9vw, 140px)',
            lineHeight: 0.94, letterSpacing: '-0.035em', fontWeight: 300,
          }}>
            The <em className="gradient-text" style={{ fontStyle: 'italic' }}>Builders Lab</em>
          </h2>
          <p className={`body-lg reveal d2 ${inView ? 'in' : ''}`} style={{ maxWidth: '58ch', textAlign: 'center', margin: '0 auto' }}>
            {t.lab.sub}
          </p>
          <div className={`reveal d3 ${inView ? 'in' : ''}`} style={{
            fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.14em',
            color: 'var(--text-faint)', textTransform: 'uppercase',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            {t.lab.part} <span style={{ color: 'var(--text-faint)' }}>·</span> <span style={{ color: 'var(--ivory)' }}>Equigent</span>
          </div>
        </div>

        {/* Three-circle diagram */}
        <div className={`reveal d2 ${inView ? 'in' : ''}`} style={{
          position: 'relative', margin: '80px auto', maxWidth: 900, height: 'clamp(320px, 45vw, 520px)',
        }}>
          {[
            { label: t.lab.bubble1.t, sub: t.lab.bubble1.s, c: '#f4a8b8', x: 25, y: 50, size: 0.56 },
            { label: t.lab.bubble2.t, sub: t.lab.bubble2.s, c: '#f06b8f', x: 50, y: 30, size: 0.56 },
            { label: t.lab.bubble3.t, sub: t.lab.bubble3.s, c: '#e85a5a', x: 50, y: 68, size: 0.56 },
          ].map((b, i) => (
            <div key={i} style={{
              position: 'absolute',
              left: `${b.x}%`, top: `${b.y}%`,
              width: `${b.size * 60}%`, aspectRatio: '1',
              marginLeft: `-${b.size * 30}%`, marginTop: `-${b.size * 30}%`,
              borderRadius: '50%',
              background: b.c,
              mixBlendMode: 'screen',
              opacity: 0.88,
              animation: `orbit-${['a','b','c'][i]} ${18 + i * 2}s ease-in-out infinite`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              textAlign: 'center', padding: '12%',
            }}>
              <div style={{ mixBlendMode: 'normal', color: 'var(--bg)' }}>
                <div className="serif" style={{ fontSize: 'clamp(20px, 2.5vw, 34px)', fontStyle: 'italic', fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1 }}>
                  {b.label}
                </div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase', marginTop: 8, opacity: 0.6 }}>
                  {b.sub}
                </div>
              </div>
            </div>
          ))}
          <div style={{
            position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
            fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ivory)',
            letterSpacing: '.18em', textTransform: 'uppercase',
            background: 'var(--bg)', padding: '6px 14px', borderRadius: 999,
            border: '1px solid var(--rule)',
            pointerEvents: 'none', zIndex: 3,
          }}>
            {t.lab.overlap}
          </div>
        </div>

        <div className={`reveal d3 ${inView ? 'in' : ''}`} style={{
          display: 'flex', justifyContent: 'center', gap: 16, flexWrap: 'wrap', marginTop: 40,
        }}>
          <a href="#community" className="btn btn-primary">{t.lab.cta1} <span className="arrow">→</span></a>
          <a href="#" className="btn btn-ghost">{t.lab.cta2}</a>
        </div>
      </div>
    </section>
  );
}

function Founder({ t }) {
  const ref = useR5(null);
  const [inView, setInView] = useS5(false);
  useE5(() => {
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setInView(true), { threshold: 0.15 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <section ref={ref} id="founder" className="section" style={{ borderTop: '1px solid var(--rule)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.9fr) minmax(0, 1.3fr)', gap: 'clamp(40px, 6vw, 96px)', alignItems: 'center' }}>
          <div className={`reveal ${inView ? 'in' : ''}`}>
            <div style={{
              aspectRatio: '4/5', borderRadius: 4, overflow: 'hidden',
              background: 'linear-gradient(160deg, rgba(240,107,143,.18), rgba(240,184,122,.12))',
              position: 'relative',
            }}>
              <img src="assets/founder.jpg" alt="Sol Michaela Dominique" style={{
                width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top',
                transition: 'transform 1.2s cubic-bezier(.2,.8,.2,1)',
              }}
                onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.04)'}
                onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
              />
            </div>
            <div style={{ marginTop: 18, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--text-faint)', letterSpacing: '.12em', textTransform: 'uppercase' }}>
              <span>Founder</span>
              <span>Lund · Stockholm</span>
            </div>
          </div>

          <div>
            <span className={`eyebrow reveal ${inView ? 'in' : ''}`}>{t.founder.eyebrow}</span>
            <blockquote className={`reveal d1 ${inView ? 'in' : ''}`} style={{
              fontFamily: 'var(--serif)',
              fontSize: 'clamp(28px, 3.3vw, 48px)',
              lineHeight: 1.12,
              letterSpacing: '-0.02em',
              fontWeight: 300,
              fontStyle: 'italic',
              marginTop: 24,
              marginBottom: 32,
            }}>
              <span style={{ fontSize: '1.6em', color: 'var(--pink)', lineHeight: 0, marginRight: 8, verticalAlign: '-.25em' }}>“</span>
              {t.founder.quote}
            </blockquote>
            <div className={`reveal d2 ${inView ? 'in' : ''}`} style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 40 }}>
              <div>
                <div className="serif" style={{ fontSize: 22, fontStyle: 'italic', fontWeight: 500 }}>
                  Sol Michaela Dominique
                </div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '.14em', color: 'var(--text-dim)', textTransform: 'uppercase', marginTop: 4 }}>
                  {t.founder.role}
                </div>
              </div>
            </div>

            <div className={`reveal d3 ${inView ? 'in' : ''}`} style={{
              display: (t.founder.stats && t.founder.stats.length) ? 'grid' : 'none', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
              gap: 24, borderTop: '1px solid var(--rule)', paddingTop: 32,
            }}>
              {(t.founder.stats || []).map((s, i) => (
                <div key={i}>
                  <div className="serif" style={{ fontSize: 'clamp(36px, 4vw, 56px)', fontWeight: 300, letterSpacing: '-0.03em', lineHeight: 1 }}>
                    <span className="gradient-text">{s.n}</span>
                  </div>
                  <div className="mono" style={{ fontSize: 10.5, letterSpacing: '.14em', color: 'var(--text-dim)', textTransform: 'uppercase', marginTop: 10 }}>
                    {s.l}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Join({ t }) {
  const ref = useR5(null);
  const [inView, setInView] = useS5(false);
  const [email, setEmail] = useS5('');
  const [sent, setSent] = useS5(false);
  const [consent, setConsent] = useS5(false);
  useE5(() => {
    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} id="community" className="section" style={{
      position: 'relative',
      background: 'var(--bg)',
      overflow: 'hidden',
      borderTop: '1px solid var(--rule)',
    }}>
      {/* ambient */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.6,
        background:
          'radial-gradient(ellipse 60% 50% at 20% 30%, rgba(240,107,143,.15), transparent 60%),' +
          'radial-gradient(ellipse 60% 50% at 80% 70%, rgba(240,184,122,.1), transparent 60%)',
      }} />

      <div className="container" style={{ position: 'relative', textAlign: 'center', maxWidth: 880 }}>
        <span className={`eyebrow reveal ${inView ? 'in' : ''}`} style={{ justifyContent: 'center' }}>{t.join.eyebrow}</span>
        <h2 className={`reveal d1 ${inView ? 'in' : ''}`} style={{
          fontFamily: 'var(--serif)',
          fontSize: 'clamp(56px, 9vw, 130px)',
          lineHeight: 0.94, letterSpacing: '-0.035em', fontWeight: 300,
          margin: '28px auto 28px',
        }}>
          {t.join.l1} <em className="gradient-text" style={{ fontStyle: 'italic' }}>{t.join.l2}</em>.
        </h2>
        <p className={`body-lg reveal d2 ${inView ? 'in' : ''}`} style={{ margin: '0 auto 40px' }}>
          {t.join.sub}
        </p>

        <form
          onSubmit={(e) => {
            e.preventDefault();
            if (!consent) return;
            // Formspree endpoint — replace this URL with the one from formspree.io
            // The account should be set up with solmichaela@femquity.com
            const FORMSPREE = 'https://formspree.io/f/REPLACE_WITH_YOUR_FORMSPREE_ID';
            if (FORMSPREE.includes('REPLACE_WITH')) {
              // Fallback: open user's email client
              window.location.href = `mailto:solmichaela@femquity.com?subject=Cohort%2003%20application%20request&body=${encodeURIComponent('Hi Sol,\n\nI\'d like to request the application for Cohort 03.\n\nEmail: ' + email + '\n\n— Sent from femquity.com')}`;
              setSent(true);
              return;
            }
            fetch(FORMSPREE, {
              method: 'POST',
              headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
              body: JSON.stringify({ email, consent: true, source: 'femquity.com — join form' }),
            }).then(() => setSent(true)).catch(() => setSent(true));
          }}
          className={`reveal d3 ${inView ? 'in' : ''}`}
          style={{
            display: 'flex', flexDirection: 'column', gap: 12,
            maxWidth: 500, margin: '0 auto',
          }}
        >
          <div style={{
            display: 'flex', gap: 8, padding: 6,
            border: '1px solid var(--rule)', borderRadius: 999,
            background: 'rgba(251,244,240,.03)', backdropFilter: 'blur(10px)',
            alignItems: 'center',
          }}>
            <input
              type="email" required placeholder={t.join.placeholder} value={email}
              onChange={(e) => setEmail(e.target.value)}
              style={{
                flex: 1, background: 'transparent', border: 0, padding: '12px 20px',
                color: 'var(--ivory)', fontSize: 14, outline: 'none', fontFamily: 'var(--sans)',
              }}
            />
            <button type="submit" disabled={!consent} className="btn btn-primary" style={{ flexShrink: 0, opacity: consent ? 1 : 0.5, cursor: consent ? 'pointer' : 'not-allowed' }}>
              {sent ? '✓ ' + t.join.sent : t.join.cta}
            </button>
          </div>
          <label style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.5,
            textAlign: 'left', cursor: 'pointer', padding: '0 14px',
          }}>
            <input
              type="checkbox"
              checked={consent}
              onChange={(e) => setConsent(e.target.checked)}
              style={{
                accentColor: 'var(--pink)', marginTop: 2, flexShrink: 0, width: 14, height: 14,
              }}
            />
            <span>{t.join.consent} <a href="#privacy" style={{ color: 'var(--pink)', borderBottom: '1px solid var(--pink)' }}>{t.join.privacyLink}</a>.</span>
          </label>
        </form>

        <div className={`reveal d4 ${inView ? 'in' : ''}`} style={{
          marginTop: 32, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--text-faint)',
        }}>
          {t.join.fineprint}
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer style={{ borderTop: '1px solid var(--rule)', padding: '80px 0 40px', background: 'var(--bg)' }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1.5fr) repeat(3, minmax(0, 1fr))',
          gap: 40, marginBottom: 64,
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <img src="assets/logo-circles.png" style={{ width: 32, height: 32 }} alt="" />
              <span className="serif" style={{ fontSize: 28, fontStyle: 'italic', fontWeight: 500 }}>
                Fem<span className="gradient-text" style={{ fontFamily: 'var(--sans)', fontStyle: 'normal', fontWeight: 600 }}>Quity</span>
              </span>
            </div>
            <p className="serif" style={{ fontStyle: 'italic', fontSize: 20, color: 'var(--text-dim)', maxWidth: '26ch', lineHeight: 1.3 }}>
              {t.footer.tag}
            </p>
          </div>
          {t.footer.cols.map((c, i) => (
            <div key={i}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '.14em', color: 'var(--text-faint)', textTransform: 'uppercase', marginBottom: 16 }}>
                {c.title}
              </div>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.links.map((l, j) => (
                  <li key={j}><a href="#" style={{ fontSize: 14, color: 'var(--text-dim)', transition: 'color .2s' }}
                    onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ivory)'}
                    onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-dim)'}
                  >{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          display: 'flex', justifyContent: 'space-between', paddingTop: 32,
          borderTop: '1px solid var(--rule)', fontFamily: 'var(--mono)', fontSize: 11,
          letterSpacing: '.1em', color: 'var(--text-faint)', textTransform: 'uppercase', flexWrap: 'wrap', gap: 16,
        }}>
          <span>© 2026 FemQuity · {t.footer.location}</span>
          <span>femquity.com</span>
          <span>{t.footer.built}</span>
        </div>
      </div>
    </footer>
  );
}

window.BuildersLab = BuildersLab;
window.Founder = Founder;
window.Join = Join;
window.Footer = Footer;