// Landing sections — hero variants, features, how, story, privacy, faq, final, footer
const T = () => window.LANDING_TOKENS;

// ══════════════ shared UI ══════════════
function Chip({ children, kind = 'default' }) {
  const { primary, primarySoft, ink, line } = T();
  const styles = {
    default: { bg: '#fff', color: ink, border: `1px solid ${line}` },
    soft:    { bg: primarySoft, color: '#B04A5F', border: '1px solid transparent' },
  };
  const s = styles[kind];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '8px 14px', borderRadius: 999,
      fontSize: 13, fontWeight: 500, letterSpacing: '0.02em',
      background: s.bg, color: s.color, border: s.border,
      fontFamily: T().sans,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: T().primary }}/>
      {children}
    </span>
  );
}

function BtnPrimary({ children, onClick, size = 'md' }) {
  const pad = size === 'lg' ? '16px 28px' : '12px 22px';
  const fs  = size === 'lg' ? 16 : 14;
  return (
    <button onClick={onClick} style={{
      padding: pad, borderRadius: 999, border: 'none',
      background: T().ink, color: '#fff',
      fontFamily: T().sans, fontSize: fs, fontWeight: 600,
      cursor: 'pointer', letterSpacing: '0.01em',
      boxShadow: '0 8px 20px -6px rgba(42,26,30,0.25)',
    }}>{children}</button>
  );
}

function BtnGhost({ children, onClick }) {
  return (
    <button onClick={onClick} style={{
      padding: '12px 20px', borderRadius: 999,
      background: 'transparent', border: `1px solid ${T().lineStrong}`,
      color: T().ink, fontFamily: T().sans, fontSize: 14, fontWeight: 500,
      cursor: 'pointer',
    }}>{children}</button>
  );
}

function SectionLabel({ eyebrow, title, center, sub }) {
  return (
    <div style={{ textAlign: center ? 'center' : 'left', marginBottom: 56, maxWidth: 720, marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }}>
      <div style={{
        fontFamily: T().sans, fontSize: 12, fontWeight: 600,
        letterSpacing: '0.14em', textTransform: 'uppercase',
        color: T().primaryDeep, marginBottom: 16,
      }}>{eyebrow}</div>
      <h2 style={{
        fontFamily: T().serif, fontSize: 'clamp(32px, 4.5vw, 56px)',
        fontWeight: 500, lineHeight: 1.1, letterSpacing: '-0.02em',
        color: T().ink, margin: 0,
      }}>{title}</h2>
      {sub && <p style={{
        fontFamily: T().sans, fontSize: 17, lineHeight: 1.6,
        color: T().inkSoft, marginTop: 16, maxWidth: 560,
        marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0,
      }}>{sub}</p>}
    </div>
  );
}

// ══════════════ NAV ══════════════
function Nav({ copy, lang, setLang, onCTA }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      padding: '18px 40px',
      background: scrolled ? 'rgba(251,243,238,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(1.4)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(1.4)' : 'none',
      borderBottom: scrolled ? `1px solid ${T().line}` : '1px solid transparent',
      transition: 'all 0.3s',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <WordmarkLogo/>
        </div>

        <div style={{ display: 'flex', gap: 36, alignItems: 'center' }} className="nav-links">
          {copy.nav.map((n, i) => (
            <a key={i} href={`#${['features','how','story','privacy','faq'][i]}`} style={{
              fontFamily: T().sans, fontSize: 14, color: T().inkSoft,
              textDecoration: 'none', fontWeight: 500,
            }}>{n}</a>
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 2,
            background: 'rgba(42,26,30,0.05)', padding: 3, borderRadius: 999,
          }}>
            {['vi','en'].map(l => (
              <button key={l} onClick={() => setLang(l)} style={{
                padding: '5px 12px', fontSize: 11, fontWeight: 600,
                fontFamily: T().sans, border: 'none', cursor: 'pointer',
                background: lang === l ? '#fff' : 'transparent',
                color: lang === l ? T().ink : T().inkMute,
                borderRadius: 999, letterSpacing: '0.08em',
                boxShadow: lang === l ? '0 1px 2px rgba(0,0,0,0.05)' : 'none',
              }}>{l.toUpperCase()}</button>
            ))}
          </div>
          <BtnPrimary onClick={onCTA}>{copy.ctaPrimary}</BtnPrimary>
        </div>
      </div>
    </nav>
  );
}

function WordmarkLogo() {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 2 }}>
      <span style={{
        fontFamily: T().serif, fontSize: 24, fontWeight: 500,
        fontStyle: 'italic', color: T().ink, letterSpacing: '-0.02em',
      }}>Memoura</span>
      <span style={{ color: T().primary, fontSize: 20 }}>.</span>
    </div>
  );
}

// ══════════════ HERO — 3 variants ══════════════
function HeroA({ copy, lang, scrollY }) {
  // Variant A: Scrapbook parallax — tilted polaroids + centered headline
  const parallax = scrollY * 0.3;

  return (
    <section style={{ position: 'relative', padding: '140px 40px 120px', overflow: 'hidden' }}>
      {/* Soft bg wash */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        background: `radial-gradient(ellipse at 20% 30%, ${T().primarySoft}55, transparent 50%), radial-gradient(ellipse at 80% 70%, ${T().secondary}22, transparent 55%)`,
      }}/>

      <div style={{
        position: 'relative', zIndex: 2, maxWidth: 1200, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'center',
      }} className="hero-grid">
        <div>
          <Chip kind="soft">{copy.heroEyebrow}</Chip>
          <h1 style={{
            fontFamily: T().serif, fontSize: 'clamp(44px, 6vw, 84px)',
            fontWeight: 400, lineHeight: 1.02, letterSpacing: '-0.03em',
            color: T().ink, margin: '24px 0 20px',
          }}>
            {copy.heroTitleA}<br/>
            <span style={{ fontStyle: 'italic', color: T().primaryDeep }}>{copy.heroTitleB}</span>
          </h1>
          <p style={{
            fontFamily: T().sans, fontSize: 19, lineHeight: 1.55,
            color: T().inkSoft, maxWidth: 480, margin: '0 0 36px',
          }}>{copy.heroSub}</p>

          <EmailCapture copy={copy}/>

          <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 14 }}>
            <AvatarStack/>
            <div style={{
              fontFamily: T().sans, fontSize: 14, color: T().inkSoft,
            }}>{copy.waitlistCount}</div>
          </div>
        </div>

        {/* Polaroid stack — parallax */}
        <div style={{ position: 'relative', height: 560, transform: `translateY(${-parallax}px)` }}>
          <Polaroid style={{ top: 20, left: '8%', rotate: -8, w: 260, h: 320, grad: [T().heroA, T().heroB] }}
            caption="Đà Lạt · 03/24" script img="img/hero-dalat.jpg"/>
          <Polaroid style={{ top: 80, right: 0, rotate: 6, w: 240, h: 300, grad: [T().secondary, '#C17A3A'] }}
            caption="morning coffee" script img="img/hero-coffee.jpg"/>
          <Polaroid style={{ bottom: 20, left: '20%', rotate: -3, w: 280, h: 340, grad: [T().accent, '#4A9A85'] }}
            caption="em say lắm rồi" script img="img/hero-saylam.jpg"/>
          {/* ticket stub */}
          <div style={{
            position: 'absolute', bottom: 60, right: '5%',
            width: 180, padding: '12px 14px',
            background: '#fff', border: `1px dashed ${T().lineStrong}`,
            transform: 'rotate(4deg)',
            fontFamily: T().sans, fontSize: 11, color: T().inkSoft,
            boxShadow: '0 4px 12px rgba(0,0,0,0.06)',
          }}>
            <div style={{ fontWeight: 700, letterSpacing: '0.12em', fontSize: 10, color: T().primaryDeep, marginBottom: 6 }}>ADMIT TWO</div>
            <div style={{ fontFamily: T().script, fontSize: 20, color: T().ink, lineHeight: 1 }}>14.11</div>
            <div style={{ marginTop: 4, color: T().inkMute }}>kỷ niệm 1 năm</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroB({ copy, lang }) {
  // Variant B: Editorial — massive serif, single centered phone, quiet
  return (
    <section style={{ padding: '160px 40px 80px', textAlign: 'center' }}>
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        <Chip kind="soft">{copy.heroEyebrow}</Chip>
        <h1 style={{
          fontFamily: T().serif, fontSize: 'clamp(48px, 8vw, 112px)',
          fontWeight: 400, lineHeight: 1, letterSpacing: '-0.035em',
          color: T().ink, margin: '28px 0 28px',
        }}>
          {copy.heroTitleA} <span style={{ fontStyle: 'italic', color: T().primaryDeep }}>{copy.heroTitleB.replace('.','')}</span>
          <span style={{ color: T().primary }}>.</span>
        </h1>
        <p style={{
          fontFamily: T().sans, fontSize: 19, lineHeight: 1.55,
          color: T().inkSoft, maxWidth: 560, margin: '0 auto 36px',
        }}>{copy.heroSub}</p>

        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <EmailCapture copy={copy}/>
        </div>
      </div>

      {/* Single phone beneath */}
      <div style={{ marginTop: 80, display: 'flex', justifyContent: 'center' }}>
        <PhoneMock which="home"/>
      </div>
    </section>
  );
}

function HeroC({ copy, lang, scrollY }) {
  // Variant C: Cinematic — gradient wash + letter motif + 2 phones
  const parallax = scrollY * 0.4;

  return (
    <section style={{
      position: 'relative', padding: '140px 40px 100px', overflow: 'hidden',
      background: `linear-gradient(170deg, ${T().heroA}55 0%, ${T().bg} 50%, ${T().bg} 100%)`,
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center',
      }} className="hero-grid">
        <div>
          <Chip kind="soft">{copy.heroEyebrow}</Chip>
          <h1 style={{
            fontFamily: T().serif, fontSize: 'clamp(44px, 6vw, 80px)',
            fontWeight: 400, lineHeight: 1.05, letterSpacing: '-0.03em',
            color: T().ink, margin: '24px 0 20px',
          }}>
            {copy.heroTitleA} <span style={{ fontStyle: 'italic', color: T().primaryDeep }}>{copy.heroTitleB}</span>
          </h1>
          <p style={{
            fontFamily: T().sans, fontSize: 19, lineHeight: 1.55,
            color: T().inkSoft, maxWidth: 480, margin: '0 0 36px',
          }}>{copy.heroSub}</p>
          <EmailCapture copy={copy}/>
          <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 14 }}>
            <AvatarStack/>
            <div style={{ fontFamily: T().sans, fontSize: 14, color: T().inkSoft }}>{copy.waitlistCount}</div>
          </div>
        </div>

        {/* Envelope + 2 phones */}
        <div style={{ position: 'relative', height: 600 }}>
          <div style={{
            position: 'absolute', top: 40, right: '5%',
            transform: `translateY(${-parallax * 0.5}px)`,
          }}>
            <PhoneMock which="letter" w={220}/>
          </div>
          <div style={{
            position: 'absolute', bottom: 20, left: '5%',
            transform: `translateY(${-parallax * 0.3}px) rotate(-6deg)`,
          }}>
            <PhoneMock which="home" w={240}/>
          </div>
          {/* envelope */}
          <div style={{
            position: 'absolute', top: '40%', left: '30%', transform: 'rotate(-12deg)',
            width: 180, height: 120,
            background: '#fff', border: `1px solid ${T().lineStrong}`,
            boxShadow: '0 12px 24px rgba(0,0,0,0.08)',
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, transparent 50%, rgba(42,26,30,0.03) 50%)',
            }}/>
            <div style={{
              position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
              width: 40, height: 40, borderRadius: 999,
              background: `radial-gradient(circle, ${T().primaryDeep}, ${T().primary})`,
              fontFamily: T().serif, fontStyle: 'italic', fontSize: 22,
              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 4px 10px rgba(201,79,101,0.4)',
            }}>M</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ══════════════ EmailCapture ══════════════
function EmailCapture({ copy }) {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <div>
      <form onSubmit={e => { e.preventDefault(); setSubmitted(true); }} style={{
        display: 'flex', gap: 8, background: '#fff',
        padding: 6, borderRadius: 999, border: `1px solid ${T().line}`,
        boxShadow: '0 8px 24px -10px rgba(42,26,30,0.12)',
        maxWidth: 440,
      }}>
        <input type="email" required placeholder={copy.emailPh} style={{
          flex: 1, border: 'none', background: 'transparent', outline: 'none',
          padding: '12px 20px', fontFamily: T().sans, fontSize: 15, color: T().ink,
        }}/>
        <button type="submit" style={{
          padding: '12px 22px', borderRadius: 999, border: 'none',
          background: submitted ? T().accent : T().ink, color: '#fff',
          fontFamily: T().sans, fontSize: 14, fontWeight: 600, cursor: 'pointer',
          transition: 'background 0.2s',
        }}>{submitted ? '✓' : copy.emailBtn}</button>
      </form>
      <div style={{
        marginTop: 12, fontFamily: T().sans, fontSize: 12,
        color: T().inkMute, maxWidth: 440,
      }}>{copy.emailNote}</div>
    </div>
  );
}

function AvatarStack() {
  const colors = [[T().heroA, T().heroB], [T().secondary, '#C17A3A'], [T().accent, '#4A9A85'], ['#C1A5D4','#6C4D8C']];
  return (
    <div style={{ display: 'flex' }}>
      {colors.map((g, i) => (
        <div key={i} style={{
          width: 32, height: 32, borderRadius: 999,
          background: `linear-gradient(135deg, ${g[0]}, ${g[1]})`,
          border: '2px solid #fff',
          marginLeft: i === 0 ? 0 : -10,
          boxShadow: '0 2px 6px rgba(0,0,0,0.08)',
        }}/>
      ))}
    </div>
  );
}

// ══════════════ Polaroid + PhoneMock ══════════════
function Polaroid({ style, caption, script, img }) {
  const { top, left, right, bottom, rotate, w, h, grad } = style;
  return (
    <div style={{
      position: 'absolute', top, left, right, bottom,
      width: w, transform: `rotate(${rotate}deg)`,
      background: '#fff', padding: 12, paddingBottom: 44,
      boxShadow: '0 20px 40px -16px rgba(42,26,30,0.25), 0 0 0 1px rgba(42,26,30,0.04)',
    }}>
      <div style={{
        width: '100%', height: h - 60,
        background: `linear-gradient(135deg, ${grad[0]}, ${grad[1]})`,
        position: 'relative', overflow: 'hidden',
      }}>
        {img && (
          <img src={img} alt={caption || ''} loading="lazy" style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', display: 'block',
          }}/>
        )}
        {/* simulated grain */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(circle at 30% 20%, rgba(255,255,255,0.3), transparent 40%)',
        }}/>
      </div>
      <div style={{
        position: 'absolute', bottom: 10, left: 0, right: 0, textAlign: 'center',
        fontFamily: script ? T().script : T().sans, fontSize: script ? 18 : 11,
        color: T().ink,
      }}>{caption}</div>
    </div>
  );
}

function PhoneMock({ which = 'home', w = 280 }) {
  const h = w * 2.05;
  const { primary, primaryDeep, heroA, heroB, heroC, ink, bg, sans, serif, script, secondary, accent } = T();

  return (
    <div style={{
      position: 'relative', width: w, height: h,
      borderRadius: w * 0.14,
      background: '#0A0608', padding: w * 0.028,
      boxShadow: '0 40px 80px -24px rgba(42,26,30,0.4), 0 0 0 2px rgba(255,255,255,0.05), inset 0 0 0 1px rgba(255,255,255,0.06)',
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: w * 0.12,
        background: bg, overflow: 'hidden', position: 'relative',
      }}>
        {/* Dynamic island */}
        <div style={{
          position: 'absolute', top: w * 0.035, left: '50%', transform: 'translateX(-50%)',
          width: w * 0.32, height: w * 0.09, background: '#000', borderRadius: w * 0.05, zIndex: 10,
        }}/>
        {/* Status bar time */}
        <div style={{
          position: 'absolute', top: w * 0.05, left: w * 0.08,
          fontSize: w * 0.04, fontWeight: 600, fontFamily: sans, color: ink, zIndex: 5,
        }}>9:41</div>

        {which === 'home' && <PhoneContentHome w={w}/>}
        {which === 'letter' && <PhoneContentLetter w={w}/>}
        {which === 'moments' && <PhoneContentMoments w={w}/>}
      </div>
    </div>
  );
}

function PhoneContentHome({ w }) {
  const { heroA, heroB, heroC, ink, inkSoft, primary, bg, sans, serif, script } = T();
  return (
    <div style={{ padding: `${w * 0.18}px ${w * 0.06}px ${w * 0.1}px` }}>
      <div style={{ fontFamily: serif, fontSize: w * 0.07, fontWeight: 500, color: ink, fontStyle: 'italic' }}>Chào Linh,</div>
      <div style={{ fontFamily: sans, fontSize: w * 0.04, color: inkSoft, marginTop: 2 }}>sáng nay trời đẹp ghê</div>

      {/* Timer hero */}
      <div style={{
        marginTop: w * 0.05, borderRadius: w * 0.05,
        padding: w * 0.05, minHeight: w * 0.72, position: 'relative', overflow: 'hidden',
        background: `linear-gradient(155deg, ${heroA}, ${heroB}, ${heroC})`,
      }}>
        <div style={{ fontFamily: sans, fontSize: w * 0.028, color: 'rgba(255,255,255,0.85)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Chúng mình đã bên nhau</div>
        <div style={{
          fontFamily: serif, fontSize: w * 0.22, fontWeight: 400, color: '#fff',
          lineHeight: 1, marginTop: w * 0.03, letterSpacing: '-0.03em',
        }}>1,254</div>
        <div style={{ fontFamily: script, fontSize: w * 0.055, color: 'rgba(255,255,255,0.95)', marginTop: w * 0.01 }}>ngày yêu nhau</div>

        {/* two avatars */}
        <div style={{ position: 'absolute', bottom: w * 0.05, right: w * 0.05, display: 'flex' }}>
          {[[heroA, heroB], ['#F4A261', '#C17A3A']].map((g, i) => (
            <div key={i} style={{
              width: w * 0.1, height: w * 0.1, borderRadius: 999,
              background: `linear-gradient(135deg, ${g[0]}, ${g[1]})`,
              border: '2px solid #fff', marginLeft: i === 0 ? 0 : -w * 0.03,
            }}/>
          ))}
        </div>
      </div>

      {/* Partner moment card */}
      <div style={{
        marginTop: w * 0.04, borderRadius: w * 0.05,
        background: '#fff', padding: w * 0.04,
        boxShadow: `0 0 0 1px rgba(42,26,30,0.06)`,
      }}>
        <div style={{ fontFamily: sans, fontSize: w * 0.028, color: inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase' }}>MINH · VỪA THÊM</div>
        <div style={{
          marginTop: w * 0.02, height: w * 0.4, borderRadius: w * 0.035,
          background: `linear-gradient(135deg, #F4A261, #C17A3A)`,
        }}/>
        <div style={{ fontFamily: serif, fontStyle: 'italic', fontSize: w * 0.045, color: ink, marginTop: w * 0.025 }}>Sáng nay ở quán quen</div>
      </div>
    </div>
  );
}

function PhoneContentLetter({ w }) {
  const { heroA, heroB, heroC, ink, bg, sans, serif, script } = T();
  return (
    <div style={{
      height: '100%', padding: `${w * 0.18}px ${w * 0.07}px ${w * 0.1}px`,
      background: `linear-gradient(180deg, ${heroA} 0%, #F9E5DC 100%)`,
    }}>
      <div style={{ fontFamily: sans, fontSize: w * 0.028, color: T().inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase', textAlign: 'center' }}>Thư từ Minh</div>
      <div style={{ fontFamily: serif, fontStyle: 'italic', fontSize: w * 0.08, color: ink, textAlign: 'center', marginTop: w * 0.02, lineHeight: 1.1 }}>Gửi em,</div>

      <div style={{
        marginTop: w * 0.06, padding: w * 0.05,
        background: 'rgba(255,255,255,0.7)', borderRadius: w * 0.04,
        backdropFilter: 'blur(6px)',
        fontFamily: script, fontSize: w * 0.055, color: ink, lineHeight: 1.4,
      }}>
        Hôm nay anh đi ngang cafe Tùng, nhớ lại cái chiều hai đứa ngồi chờ mưa. Trời Đà Lạt lạnh mà em cứ đòi kem…
      </div>

      <div style={{
        marginTop: w * 0.05, display: 'flex', alignItems: 'center', gap: w * 0.025,
        padding: w * 0.035, borderRadius: w * 0.03,
        background: 'rgba(255,255,255,0.5)',
      }}>
        <div style={{ width: w * 0.08, height: w * 0.08, borderRadius: w * 0.015, background: '#1DB954' }}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: sans, fontSize: w * 0.03, fontWeight: 600, color: ink }}>Em của ngày hôm qua</div>
          <div style={{ fontFamily: sans, fontSize: w * 0.025, color: T().inkSoft }}>Sơn Tùng M-TP</div>
        </div>
      </div>
    </div>
  );
}

function PhoneContentMoments({ w }) {
  const { ink, bg, sans, serif, heroA, heroB, accent, secondary } = T();
  return (
    <div style={{ padding: `${w * 0.18}px ${w * 0.06}px`, background: bg, height: '100%' }}>
      <div style={{ fontFamily: serif, fontSize: w * 0.075, fontStyle: 'italic', color: ink }}>Khoảnh khắc</div>

      <div style={{
        marginTop: w * 0.05, display: 'grid',
        gridTemplateColumns: '1fr 1fr', gap: w * 0.025,
      }}>
        {[
          [heroA, heroB, 'Đà Lạt'],
          [secondary, '#C17A3A', 'Cafe'],
          [accent, '#4A9A85', 'Biển'],
          ['#C1A5D4', '#6C4D8C', 'Tối nay'],
        ].map((m, i) => (
          <div key={i} style={{
            aspectRatio: '1', borderRadius: w * 0.035,
            background: `linear-gradient(135deg, ${m[0]}, ${m[1]})`,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', bottom: w * 0.015, left: w * 0.025,
              fontFamily: sans, fontSize: w * 0.028, color: '#fff', fontWeight: 500,
              textShadow: '0 1px 3px rgba(0,0,0,0.3)',
            }}>{m[2]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ══════════════ FEATURES ══════════════
function Features({ copy }) {
  const icons = [
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8" cy="10" r="1.5"/><path d="M3 16l5-4 4 3 3-2 6 4"/></svg>,
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 8l8 5 8-5M4 8v10a1 1 0 001 1h14a1 1 0 001-1V8M4 8l8-4 8 4"/></svg>,
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="9"/><path d="M8 11a4 4 0 018 0v1a4 4 0 01-4 4v3"/><circle cx="12" cy="8" r="0.8" fill="currentColor"/></svg>,
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="8" width="18" height="12" rx="2"/><path d="M7 8V6a2 2 0 012-2h6a2 2 0 012 2v2"/><circle cx="12" cy="14" r="3"/></svg>,
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></svg>,
  ];
  return (
    <section id="features" style={{ padding: '120px 40px', background: T().bg }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionLabel eyebrow={copy.featuresEyebrow} title={copy.featuresTitle} center/>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }} className="features-grid">
          {copy.f.map((f, i) => (
            <div key={i} style={{
              padding: 32, background: '#fff', borderRadius: 20,
              border: `1px solid ${T().line}`, position: 'relative',
              transition: 'transform 0.3s, box-shadow 0.3s',
            }} className="feature-card">
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: T().primarySoft, color: T().primaryDeep,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 20,
              }}>
                <div style={{ width: 24, height: 24 }}>{icons[i]}</div>
              </div>
              <h3 style={{
                fontFamily: T().serif, fontSize: 22, fontWeight: 500,
                color: T().ink, margin: '0 0 10px', letterSpacing: '-0.01em',
              }}>{f.t}</h3>
              <p style={{
                fontFamily: T().sans, fontSize: 15, lineHeight: 1.55,
                color: T().inkSoft, margin: 0,
              }}>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ══════════════ HOW IT WORKS ══════════════
function How({ copy }) {
  return (
    <section id="how" style={{ padding: '120px 40px', background: T().bgAlt, position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionLabel eyebrow={copy.howEyebrow} title={copy.howTitle} center/>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
          position: 'relative',
        }} className="how-grid">
          {copy.steps.map((s, i) => (
            <div key={i} style={{ textAlign: 'center' }}>
              <div style={{
                fontFamily: T().serif, fontStyle: 'italic', fontSize: 80, fontWeight: 400,
                color: T().primary, lineHeight: 1, letterSpacing: '-0.03em',
                opacity: 0.55,
              }}>{s.n}</div>
              <h3 style={{
                fontFamily: T().serif, fontSize: 26, fontWeight: 500,
                color: T().ink, margin: '12px 0 10px', letterSpacing: '-0.01em',
              }}>{s.t}</h3>
              <p style={{
                fontFamily: T().sans, fontSize: 15, lineHeight: 1.55,
                color: T().inkSoft, margin: 0, maxWidth: 280, marginLeft: 'auto', marginRight: 'auto',
              }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ══════════════ STORY — quote-driven ══════════════
function Story({ copy }) {
  return (
    <section id="story" style={{ padding: '140px 40px', background: T().bg }}>
      <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
        <div style={{
          fontFamily: T().sans, fontSize: 12, fontWeight: 600,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: T().primaryDeep, marginBottom: 20,
        }}>{copy.storyEyebrow}</div>
        <h2 style={{
          fontFamily: T().serif, fontSize: 'clamp(32px, 4vw, 48px)',
          fontWeight: 400, lineHeight: 1.2, letterSpacing: '-0.02em',
          fontStyle: 'italic', color: T().ink, margin: '0 0 32px',
        }}>
          <span style={{ color: T().primary }}>“</span>
          {copy.storyTitle}
          <span style={{ color: T().primary }}>”</span>
        </h2>
        <p style={{
          fontFamily: T().sans, fontSize: 18, lineHeight: 1.65,
          color: T().inkSoft, margin: '0 0 28px',
        }}>{copy.storyBody}</p>
        <div style={{
          fontFamily: T().script, fontSize: 22, color: T().primaryDeep,
        }}>— {copy.storySign}</div>
      </div>
    </section>
  );
}

// ══════════════ PRIVACY ══════════════
function Privacy({ copy }) {
  return (
    <section id="privacy" style={{
      padding: '120px 40px',
      background: `linear-gradient(170deg, ${T().bgDark}, #0F0A0C)`,
      color: '#FBEDE8',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64, maxWidth: 680, marginLeft: 'auto', marginRight: 'auto' }}>
          <div style={{
            fontFamily: T().sans, fontSize: 12, fontWeight: 600,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: T().primary, marginBottom: 16,
          }}>{copy.privacyEyebrow}</div>
          <h2 style={{
            fontFamily: T().serif, fontSize: 'clamp(32px, 4.5vw, 56px)',
            fontWeight: 400, lineHeight: 1.1, letterSpacing: '-0.02em',
            color: '#FBEDE8', margin: 0,
          }}>{copy.privacyTitle}</h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
        }} className="privacy-grid">
          {copy.privacyPoints.map((p, i) => (
            <div key={i} style={{
              padding: 32, borderRadius: 20,
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid rgba(255,255,255,0.08)',
              backdropFilter: 'blur(12px)',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: 'rgba(232,120,138,0.18)',
                color: T().primary,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 18,
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                  {i === 0 && <><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></>}
                  {i === 1 && <><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></>}
                  {i === 2 && <><path d="M12 3v18M4 12h16"/></>}
                </svg>
              </div>
              <h3 style={{
                fontFamily: T().serif, fontSize: 22, fontWeight: 500,
                color: '#FBEDE8', margin: '0 0 10px',
              }}>{p.t}</h3>
              <p style={{
                fontFamily: T().sans, fontSize: 14, lineHeight: 1.55,
                color: 'rgba(251,237,232,0.65)', margin: 0,
              }}>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ══════════════ FAQ ══════════════
function FAQ({ copy }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: '120px 40px', background: T().bg }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <SectionLabel eyebrow={copy.faqEyebrow} title={copy.faqTitle} center/>
        <div>
          {copy.faq.map((item, i) => (
            <div key={i} style={{ borderTop: `1px solid ${T().line}` }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', padding: '24px 0', display: 'flex',
                alignItems: 'center', justifyContent: 'space-between',
                background: 'transparent', border: 'none', cursor: 'pointer',
                textAlign: 'left', fontFamily: T().sans,
              }}>
                <span style={{
                  fontFamily: T().serif, fontSize: 21, fontWeight: 500,
                  color: T().ink, letterSpacing: '-0.01em',
                }}>{item.q}</span>
                <span style={{
                  width: 32, height: 32, borderRadius: 999,
                  background: open === i ? T().ink : T().primarySoft,
                  color: open === i ? '#fff' : T().primaryDeep,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 18, fontWeight: 400, flexShrink: 0,
                  transition: 'all 0.2s',
                }}>{open === i ? '−' : '+'}</span>
              </button>
              {open === i && (
                <div style={{
                  paddingBottom: 24,
                  fontFamily: T().sans, fontSize: 16, lineHeight: 1.65,
                  color: T().inkSoft, maxWidth: 640,
                }}>{item.a}</div>
              )}
            </div>
          ))}
          <div style={{ borderTop: `1px solid ${T().line}` }}/>
        </div>
      </div>
    </section>
  );
}

// ══════════════ FINAL CTA ══════════════
function FinalCTA({ copy }) {
  return (
    <section style={{
      padding: '140px 40px',
      background: `radial-gradient(ellipse at center, ${T().primarySoft}88, ${T().bgAlt} 70%)`,
      textAlign: 'center',
    }}>
      <div style={{ maxWidth: 700, margin: '0 auto' }}>
        <h2 style={{
          fontFamily: T().serif, fontSize: 'clamp(36px, 5vw, 64px)',
          fontWeight: 400, lineHeight: 1.1, letterSpacing: '-0.02em',
          color: T().ink, margin: '0 0 20px', fontStyle: 'italic',
        }}>{copy.finalTitle}</h2>
        <p style={{
          fontFamily: T().sans, fontSize: 18, lineHeight: 1.55,
          color: T().inkSoft, margin: '0 0 40px',
        }}>{copy.finalSub}</p>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <EmailCapture copy={copy}/>
        </div>
      </div>
    </section>
  );
}

// ══════════════ FOOTER ══════════════
function Footer({ copy }) {
  return (
    <footer style={{ padding: '80px 40px 40px', background: T().bgDark, color: '#FBEDE8' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40,
          paddingBottom: 48, borderBottom: '1px solid rgba(255,255,255,0.08)',
        }} className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 2 }}>
              <span style={{
                fontFamily: T().serif, fontSize: 28, fontWeight: 500,
                fontStyle: 'italic', color: '#FBEDE8', letterSpacing: '-0.02em',
              }}>Memoura</span>
              <span style={{ color: T().primary, fontSize: 24 }}>.</span>
            </div>
            <p style={{
              fontFamily: T().sans, fontSize: 15, lineHeight: 1.55,
              color: 'rgba(251,237,232,0.6)', marginTop: 14, maxWidth: 300,
            }}>{copy.footer.tag}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 20 }}>
              {['IG','TT','TW'].map(s => (
                <div key={s} style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: 'rgba(255,255,255,0.06)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: T().sans, fontSize: 11, fontWeight: 600, color: '#FBEDE8',
                  cursor: 'pointer',
                }}>{s}</div>
              ))}
            </div>
          </div>
          {copy.footer.cols.map((col, i) => (
            <div key={i}>
              <div style={{
                fontFamily: T().sans, fontSize: 12, fontWeight: 600,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'rgba(251,237,232,0.4)', marginBottom: 16,
              }}>{col.h}</div>
              {col.links.map((l, j) => (
                <div key={j} style={{
                  fontFamily: T().sans, fontSize: 14, color: 'rgba(251,237,232,0.75)',
                  marginBottom: 10, cursor: 'pointer',
                }}>{l}</div>
              ))}
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 32, display: 'flex', justifyContent: 'space-between',
          fontFamily: T().sans, fontSize: 13, color: 'rgba(251,237,232,0.5)',
        }}>
          <div>{copy.footer.legal}</div>
          <div>memoura.app</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, HeroA, HeroB, HeroC, Features, How, Story, Privacy, FAQ, FinalCTA, Footer,
  Polaroid, PhoneMock, EmailCapture, SectionLabel, BtnPrimary,
});
