// Membership tiers — Free + Premium
const { useEffect: useEMem, useState: useSMem, useRef: useRMem } = React;

function Membership({ t }) {
  const ref = useRMem(null);
  const [inView, setInView] = useSMem(false);
  const [annual, setAnnual] = useSMem(true);

  useEMem(() => {
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setInView(true), { threshold: 0.15 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const tiers = t.membership.tiers;

  return (
    <section ref={ref} id="membership" className="section" style={{ position: 'relative', borderTop: '1px solid var(--rule)' }}>
      {/* ambient */}
      <div style={{
        position: 'absolute', right: '-10vw', top: '20%',
        width: '30vw', height: '30vw',
        background: 'radial-gradient(circle, rgba(240,107,143,.1), transparent 60%)',
        filter: 'blur(40px)', pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24, marginBottom: 56, alignItems: 'end' }}>
          <div style={{ gridColumn: 'span 7' }}>
            <span className={`eyebrow reveal ${inView ? 'in' : ''}`}>{t.membership.eyebrow}</span>
            <h2 className={`h2 reveal d1 ${inView ? 'in' : ''}`} style={{ marginTop: 24 }}>
              {t.membership.title1} <em style={{ fontStyle: 'italic' }}>{t.membership.title2}</em> {t.membership.title3}.
            </h2>
          </div>
          <div style={{ gridColumn: 'span 5' }}>
            <p className={`reveal d2 ${inView ? 'in' : ''}`} style={{ color: 'var(--text-dim)', fontSize: 16, lineHeight: 1.55, maxWidth: '44ch' }}>
              {t.membership.intro}
            </p>
            {/* billing toggle */}
            <div className={`reveal d3 ${inView ? 'in' : ''}`} style={{
              display: 'inline-flex', marginTop: 20,
              padding: 4, gap: 2,
              border: '1px solid var(--rule)', borderRadius: 999,
              background: 'rgba(251,244,240,.02)',
            }}>
              <button onClick={() => setAnnual(false)} style={{
                padding: '8px 16px', borderRadius: 999, fontFamily: 'var(--mono)', fontSize: 11,
                letterSpacing: '.1em', textTransform: 'uppercase',
                background: !annual ? 'var(--ivory)' : 'transparent',
                color: !annual ? 'var(--ink)' : 'var(--text-dim)',
                transition: 'all .25s',
              }}>{t.membership.monthly}</button>
              <button onClick={() => setAnnual(true)} style={{
                padding: '8px 16px', borderRadius: 999, fontFamily: 'var(--mono)', fontSize: 11,
                letterSpacing: '.1em', textTransform: 'uppercase',
                background: annual ? 'var(--ivory)' : 'transparent',
                color: annual ? 'var(--ink)' : 'var(--text-dim)',
                transition: 'all .25s',
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                {t.membership.annual}
                <span style={{
                  fontFamily: 'var(--sans)', fontSize: 9, fontWeight: 600,
                  padding: '2px 6px', borderRadius: 999,
                  background: annual ? 'var(--rose)' : 'rgba(240,107,143,.15)',
                  color: annual ? 'var(--ivory)' : 'var(--rose)',
                  letterSpacing: 0,
                }}>−20%</span>
              </button>
            </div>
          </div>
        </div>

        {/* Tier cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 24 }}>
          {tiers.map((tier, i) => {
            const isPremium = tier.premium;
            const price = annual ? tier.priceAnnual : tier.priceMonthly;
            return (
              <div key={i} className={`reveal d${i + 1} ${inView ? 'in' : ''}`} style={{
                position: 'relative',
                borderRadius: 8,
                padding: 'clamp(28px, 3vw, 40px)',
                background: isPremium ? 'var(--ivory)' : 'rgba(251,244,240,.02)',
                color: isPremium ? 'var(--ink)' : 'var(--ivory)',
                border: isPremium ? 'none' : '1px solid var(--rule)',
                display: 'flex', flexDirection: 'column', gap: 24,
                overflow: 'hidden',
                minHeight: 560,
              }}>
                {/* premium badge + gradient edge */}
                {isPremium && (
                  <>
                    <div style={{
                      position: 'absolute', top: 0, left: 0, right: 0, height: 4,
                      background: 'var(--gradient)',
                    }} />
                    <div style={{
                      position: 'absolute', top: 24, right: 24,
                      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.18em',
                      textTransform: 'uppercase', fontWeight: 600,
                      padding: '5px 10px', borderRadius: 999,
                      background: 'var(--gradient)', color: 'var(--bg)',
                    }}>
                      {t.membership.mostPopular}
                    </div>
                    {/* decorative circles in bg */}
                    <div style={{
                      position: 'absolute', right: -80, bottom: -80,
                      width: 240, height: 240, borderRadius: '50%',
                      background: 'var(--gradient)', opacity: 0.06,
                      filter: 'blur(4px)', pointerEvents: 'none',
                    }} />
                  </>
                )}

                {/* header */}
                <div>
                  <div className="mono" style={{
                    fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase',
                    color: isPremium ? 'var(--rose)' : 'var(--pink)',
                    marginBottom: 14,
                  }}>
                    {tier.kind}
                  </div>
                  <h3 className="serif" style={{
                    fontSize: 'clamp(40px, 5vw, 56px)', lineHeight: 1,
                    letterSpacing: '-0.025em', fontWeight: 300,
                    fontStyle: 'italic',
                  }}>
                    {tier.name}
                  </h3>
                  <p style={{
                    marginTop: 10,
                    fontSize: 14.5, lineHeight: 1.5,
                    color: isPremium ? 'var(--ink-dim)' : 'var(--text-dim)',
                    maxWidth: '36ch',
                  }}>
                    {tier.tagline}
                  </p>
                </div>

                {/* price */}
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
                  {tier.free ? (
                    <>
                      <span className="serif" style={{
                        fontSize: 'clamp(56px, 7vw, 88px)', lineHeight: 1,
                        letterSpacing: '-0.035em', fontWeight: 300,
                      }}>
                        <span className={isPremium ? '' : 'gradient-text'}>{t.membership.free}</span>
                      </span>
                      <span className="mono" style={{ fontSize: 12, color: isPremium ? 'var(--ink-dim)' : 'var(--text-dim)', letterSpacing: '.1em', textTransform: 'uppercase' }}>
                        {t.membership.pay}
                      </span>
                    </>
                  ) : (
                    <>
                      <span className="serif" style={{
                        fontSize: 'clamp(56px, 7vw, 88px)', lineHeight: 1,
                        letterSpacing: '-0.035em', fontWeight: 300,
                      }}>
                        <span className="gradient-text">{price}</span>
                      </span>
                      <span className="mono" style={{ fontSize: 12, color: 'var(--ink-dim)', letterSpacing: '.1em' }}>
                        SEK / {annual ? t.membership.perYear : t.membership.perMonth}
                      </span>
                    </>
                  )}
                </div>

                {/* features */}
                <ul style={{
                  listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12,
                  paddingTop: 20, borderTop: `1px solid ${isPremium ? 'var(--rule-ink)' : 'var(--rule)'}`,
                  flex: 1,
                }}>
                  {tier.features.map((f, j) => (
                    <li key={j} style={{
                      display: 'flex', gap: 12, alignItems: 'flex-start',
                      fontSize: 14, lineHeight: 1.5,
                      color: isPremium ? 'var(--ink)' : 'var(--ivory)',
                    }}>
                      <span style={{
                        flexShrink: 0, width: 18, height: 18, borderRadius: '50%',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        background: f.highlight
                          ? 'var(--gradient)'
                          : (isPremium ? 'rgba(232,90,90,.12)' : 'rgba(240,107,143,.15)'),
                        color: f.highlight
                          ? 'var(--bg)'
                          : (isPremium ? 'var(--rose)' : 'var(--pink)'),
                        fontSize: 10, fontWeight: 700,
                        marginTop: 2,
                      }}>✓</span>
                      <span>
                        {f.highlight ? (
                          <strong style={{ fontWeight: 600 }}>{f.text}</strong>
                        ) : f.text}
                      </span>
                    </li>
                  ))}
                </ul>

                {/* CTA */}
                <a href="#community" className={isPremium ? 'btn btn-primary' : 'btn btn-ghost'} style={{ justifyContent: 'center', width: '100%' }}>
                  {tier.cta} <span className="arrow">→</span>
                </a>

                {/* footnote */}
                {tier.footnote && (
                  <div className="mono" style={{
                    fontSize: 10.5, letterSpacing: '.1em',
                    color: isPremium ? 'var(--ink-dim)' : 'var(--text-faint)',
                    textAlign: 'center',
                  }}>
                    {tier.footnote}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* Comparison strip */}
        <div className={`reveal d3 ${inView ? 'in' : ''}`} style={{
          marginTop: 48,
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 24,
          padding: '32px 0',
          borderTop: '1px solid var(--rule)',
          borderBottom: '1px solid var(--rule)',
        }}>
          {t.membership.perks.map((p, i) => (
            <div key={i}>
              <div className="serif" style={{
                fontSize: 36, lineHeight: 1, letterSpacing: '-0.02em', fontWeight: 300,
                fontStyle: 'italic',
              }}>
                <span className="gradient-text">{p.value}</span>
              </div>
              <div className="mono" style={{
                fontSize: 10.5, letterSpacing: '.14em', color: 'var(--text-dim)',
                textTransform: 'uppercase', marginTop: 10,
              }}>
                {p.label}
              </div>
            </div>
          ))}
        </div>

        <p style={{
          marginTop: 24, fontSize: 13, color: 'var(--text-faint)', textAlign: 'center',
          fontFamily: 'var(--mono)', letterSpacing: '.05em',
        }}>
          {t.membership.fineprint}
        </p>
      </div>
    </section>
  );
}

window.Membership = Membership;