/* global React, ReactDOM, window */
// Simsimsim — Home page (Yesim-inspired layout)

const { useState, useEffect, useMemo, useRef } = React;
const { TopNav, Footer, Logo, FAQ, Skel, I, CountrySearch, HeroSearch, TweaksPanel, TweakSection, TweakRadio, TweakToggle, useTweaks } = window;

/* ---------- Star rating ---------- */
function Stars({ value = 5, size = 14 }) {
  return (
    <span style={{ display: 'inline-flex', gap: 1, color: '#FACC15' }}>
      {[...Array(5)].map((_, i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill={i < value ? '#FACC15' : '#E5E7EB'}>
          <path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4.5L6 21l1.5-7.5L2 9h7z" />
        </svg>
      ))}
    </span>
  );
}

/* ---------- HERO ---------- */
function PayBadge({ children, dark, accent, title }) {
  return (
    <span title={title} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      height: 28, padding: '0 9px',
      background: dark ? '#0E0726' : 'rgba(255,255,255,0.85)',
      border: accent ? '1px solid var(--accent)' : '1px solid rgba(255,255,255,0.9)',
      borderRadius: 7,
      boxShadow: '0 1px 2px rgba(20,16,43,0.06)',
      backdropFilter: 'blur(6px)',
    }}>{children}</span>
  );
}

function Hero({ go, onOpenSearch }) {
  return (
    <section className="aurora noise" style={{ position: 'relative', overflow: 'hidden', paddingTop: 16, paddingBottom: 0 }}>
      <div className="container-wide" style={{ paddingTop: 56, paddingBottom: 120, position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 40, alignItems: 'center' }} className="hero-grid">
          {/* Left */}
          <div>
            {/* Hero chip removed — '$5 welcome credit' is already the
                primary CTA button in the top-nav (Get $5 credit). */}

            <h1 style={{
              fontSize: 'clamp(48px, 6.5vw, 76px)',
              lineHeight: 1.02,
              letterSpacing: '-0.04em',
              fontWeight: 600,
              margin: 0,
              color: 'var(--fg)',
              maxWidth: 640,
            }}>
              {window.t('hero_h1_l1').replace(/\.$/, '')}<span style={{ color: 'var(--accent)' }}>.</span><br />
              {window.t('hero_h1_l2').replace(/\.$/, '')}<span style={{ color: 'var(--accent)' }}>.</span>
            </h1>

            <p style={{ marginTop: 22, fontSize: 18, lineHeight: 1.55, color: 'var(--fg-muted)', maxWidth: 540 }}>
              {window.t('hero_sub_a')} <span className="mono tnum" style={{ color: 'var(--fg)', fontWeight: 500 }}>$2.90</span>{window.t('hero_sub_b')}
            </p>

            {/* Big country search */}
            <div style={{ marginTop: 28 }}>
              <HeroSearch onOpen={onOpenSearch} />
              {/* 'Popular: Japan/Spain/UAE/Thailand/Turkey' pills removed —
                  same countries already shown with prices inside phone
                  mockup (right) and again in PopularDestinations section
                  below. Search bar alone is enough discovery in hero. */}
            </div>

            {/* trust pills removed — they duplicated sub-headline copy
                (186 countries / 30-second install already stated above);
                '7-day refund' lives in Guarantees section below where it
                pairs naturally with the other guarantees. */}

            <div style={{ marginTop: 32, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-lg btn-accent" onClick={() => go('rates')}>{window.t('hero_browse')} {I.arrowSm}</button>
              <button className="btn btn-lg btn-white" onClick={() => document.getElementById('countries')?.scrollIntoView({ behavior: 'smooth' })}>{window.t('hero_destinations')}</button>
            </div>

            {/* '$5 welcome credit — applied on first $5+ plan' microcopy
                removed — it's the third repeat of the same message
                (top-nav button → hero chip → here). The full condition
                lives in the FAQ ("What is the $5 welcome credit?"). */}

            {/* Payment methods strip */}
            <div style={{ marginTop: 22, paddingTop: 22, borderTop: '1px dashed rgba(20,16,43,0.12)', display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <span className="eyebrow" style={{ fontSize: 10.5, color: 'var(--fg-muted)' }}>{window.t('we_accept')}</span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                <PayBadge>
                  <span style={{ padding: '3px 7px', borderRadius: 4, background: '#1A1F71', color: '#fff', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.04em' }}>VISA</span>
                </PayBadge>
                <PayBadge title="Mastercard">
                  <span style={{ display: 'inline-flex', alignItems: 'center' }}>
                    <span style={{ width: 14, height: 14, borderRadius: 999, background: '#EB001B' }} />
                    <span style={{ width: 14, height: 14, borderRadius: 999, background: '#F79E1B', marginLeft: -6, mixBlendMode: 'multiply' }} />
                  </span>
                </PayBadge>
                <PayBadge>
                  <span style={{ padding: '3px 6px', borderRadius: 4, background: '#1F72CD', color: '#fff', fontWeight: 700, fontSize: 9.5 }}>AMEX</span>
                </PayBadge>
                <PayBadge dark title="Apple Pay">
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, color: '#fff', fontSize: 12, fontWeight: 600 }}>
                    <svg viewBox="0 0 24 24" width="13" height="13" fill="#fff" aria-hidden="true"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
                    Pay
                  </span>
                </PayBadge>
                <PayBadge title="Google Pay">
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 500 }}>
                    <svg viewBox="0 0 48 48" width="15" height="15" aria-hidden="true">
                      <path fill="#4285F4" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
                      <path fill="#34A853" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
                      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
                      <path fill="#EA4335" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
                    </svg>
                    <span style={{ color: '#3C4043' }}>Pay</span>
                  </span>
                </PayBadge>
                <PayBadge title="PayPal">
                  <span style={{ display: 'inline-flex', alignItems: 'baseline', fontWeight: 700, fontSize: 12, letterSpacing: '-0.02em', fontStyle: 'italic' }}>
                    <span style={{ color: '#003087' }}>Pay</span>
                    <span style={{ color: '#0070BA' }}>Pal</span>
                  </span>
                </PayBadge>
                <PayBadge title="Crypto: BTC, ETH, USDT, USDC" accent>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                    {[
                      { c: '₿', bg: '#F7931A', svg: null },
                      { c: null, bg: '#627EEA', svg: (
                          <svg viewBox="0 0 256 417" width="10" height="11" aria-hidden="true">
                            <path fill="#fff" d="M127.96 0l-2.79 9.49v275.67l2.79 2.79 127.96-75.64z" opacity=".7"/>
                            <path fill="#fff" d="M127.96 0L0 212.32l127.96 75.64V154.16z"/>
                            <path fill="#fff" d="M127.96 312.19l-1.57 1.91v98.21l1.57 4.58 128.04-180.39z" opacity=".7"/>
                            <path fill="#fff" d="M127.96 416.9v-104.7L0 232.49z"/>
                            <path fill="#fff" d="M127.96 287.96l127.96-75.64-127.96-58.16z" opacity=".4"/>
                            <path fill="#fff" d="M0 212.32l127.96 75.64v-133.8z" opacity=".5"/>
                          </svg>
                        ) },
                      { c: null, bg: '#26A17B', svg: (
                          <svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true">
                            <path fill="#fff" d="M13.4 12.6v-1.7h3.9V8.3H6.7v2.6h3.9v1.7c-3.2.1-5.6.8-5.6 1.5s2.4 1.4 5.6 1.5v5.4h2.8v-5.4c3.2-.1 5.6-.8 5.6-1.5s-2.4-1.4-5.6-1.5zm0 2.5v-.1c-.1 0-.4 0-1.4 0-.8 0-1.3 0-1.4 0v.1c-2.6-.1-4.6-.6-4.6-1.1s2-1 4.6-1.1v1.7c.2 0 .7 0 1.4 0 1 0 1.3 0 1.4 0v-1.7c2.6.1 4.6.6 4.6 1.1s-2 1-4.6 1.1z"/>
                          </svg>
                        ) },
                    ].map((c, i) => (
                      <span key={i} style={{
                        width: 18, height: 18, borderRadius: 999,
                        background: c.bg, color: '#fff',
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 10, fontWeight: 700,
                        border: '1.5px solid #fff',
                        marginLeft: i ? -8 : 0,
                      }}>{c.svg || c.c}</span>
                    ))}
                    <span style={{ fontSize: 11.5, fontWeight: 500, marginLeft: 4, color: 'var(--accent-deep)' }}>Crypto</span>
                  </span>
                </PayBadge>
              </div>
            </div>
          </div>

          {/* Right: phone + floating cards */}
          <div style={{ position: 'relative', minHeight: 540 }} className="hero-right">
            <HeroPhoneMockup />

            {/* All 4 floating cards — hidden on mobile (≤900px) to keep
                phone-mockup clean and centered */}
            <div className="hero-floats">
              {/* floating card 1 — country pick */}
              <div style={{
                position: 'absolute', top: 30, left: -10,
                background: '#fff', borderRadius: 14, padding: '12px 14px',
                boxShadow: 'var(--shadow-lg)', display: 'flex', alignItems: 'center', gap: 10,
                transform: 'rotate(-4deg)',
              }}>
                <span style={{ fontSize: 24 }}>🇯🇵</span>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>Japan</div>
                  <div className="mono tnum" style={{ fontSize: 11, color: 'var(--accent)' }}>from $4.90</div>
                </div>
              </div>

              {/* floating card 2 — install success */}
              <div style={{
                position: 'absolute', bottom: 60, left: -20,
                background: '#fff', borderRadius: 14, padding: '12px 14px',
                boxShadow: 'var(--shadow-lg)', display: 'flex', alignItems: 'center', gap: 10,
                transform: 'rotate(3deg)',
                maxWidth: 220,
              }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, borderRadius: 999, background: '#ECFDF5', color: 'var(--success)' }}>{I.check}</span>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>eSIM installed</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>in 28 seconds</div>
                </div>
              </div>

              {/* floating card 3 — referral */}
              <div style={{
                position: 'absolute', top: 90, right: -10,
                background: '#fff', borderRadius: 14, padding: '12px 14px',
                boxShadow: 'var(--shadow-lg)', display: 'flex', alignItems: 'center', gap: 10,
                transform: 'rotate(4deg)',
                maxWidth: 220,
              }}>
                <span style={{ fontSize: 22 }}>🎁</span>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>+$5 credit</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>Lena P. joined</div>
                </div>
              </div>

              {/* floating card 4 — signal */}
              <div style={{
                position: 'absolute', bottom: 100, right: -20,
                background: '#fff', borderRadius: 14, padding: '12px 14px',
                boxShadow: 'var(--shadow-lg)', display: 'flex', alignItems: 'center', gap: 10,
                transform: 'rotate(-3deg)',
              }}>
                <span style={{ color: 'var(--brand)' }}>{I.signal}</span>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>5G · Docomo</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-muted)' }} className="mono">142 Mbps</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Wave divider */}
      <svg style={{ display: 'block', width: '100%', height: 60, position: 'relative', marginTop: -2 }} viewBox="0 0 1440 60" preserveAspectRatio="none">
        <path d="M0,30 C240,60 480,0 720,30 C960,60 1200,0 1440,30 L1440,60 L0,60 Z" fill="#fff" />
      </svg>
      <style>{`@media (max-width: 900px) {
        .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        .hero-right { min-height: auto !important; display: flex; justify-content: center; }
        .hero-floats { display: none !important; }
      }`}</style>
    </section>
  );
}

function HeroPhoneMockup() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <div style={{
        width: 280, height: 540, borderRadius: 40, padding: 7,
        background: 'linear-gradient(180deg, #1a1233 0%, #14102B 100%)',
        boxShadow: '0 30px 70px rgba(58, 31, 176, 0.32), 0 0 0 1px rgba(255,255,255,0.04) inset',
        position: 'relative',
      }}>
        <div style={{ position: 'absolute', top: 16, left: '50%', transform: 'translateX(-50%)', width: 100, height: 24, background: '#0a0720', borderRadius: 14, zIndex: 2 }} />
        <div style={{ width: '100%', height: '100%', borderRadius: 33, background: '#fff', overflow: 'hidden', position: 'relative' }}>
          {/* Status bar */}
          <div style={{ padding: '14px 22px 8px', display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--fg)' }}>
            <span className="mono">9:41</span>
            <span style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
              <span style={{ fontSize: 9 }}>●●●</span>
              <span style={{ fontSize: 9 }}>📶</span>
              <span style={{ fontSize: 9, padding: '0 3px', border: '1px solid var(--fg)', borderRadius: 3 }}>87</span>
            </span>
          </div>
          {/* App header */}
          <div style={{ padding: '20px 20px 0' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <Logo size={16} />
              <span style={{ width: 28, height: 28, borderRadius: 999, background: 'var(--bg-muted)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: 'var(--fg)' }}>L</span>
            </div>
            <div style={{ marginTop: 18 }} className="eyebrow">balance</div>
            <div style={{ marginTop: 2, fontSize: 28, fontWeight: 600, letterSpacing: '-0.025em' }} className="tnum">$5.00</div>
            <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>welcome credit</div>
          </div>
          {/* Active eSIM card */}
          <div style={{ margin: '18px 16px 0', padding: 14, borderRadius: 14, background: 'linear-gradient(135deg, #FFE5F0 0%, #E9DDFE 100%)', border: '1px solid rgba(255,255,255,0.7)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontSize: 22 }}>🇯🇵</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: 500 }}>Japan · 5GB</div>
                <div style={{ fontSize: 10, color: 'var(--fg-muted)' }} className="mono">NTT Docomo · 5G</div>
              </div>
              <span style={{ fontSize: 9, padding: '2px 7px', borderRadius: 4, background: '#fff', color: 'var(--success)', fontWeight: 600 }}>ACTIVE</span>
            </div>
            <div style={{ marginTop: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--fg-muted)', marginBottom: 4 }}>
                <span>3.2 / 5 GB</span>
                <span>12 days left</span>
              </div>
              <div style={{ height: 5, background: 'rgba(255,255,255,0.6)', borderRadius: 999, overflow: 'hidden' }}>
                <div style={{ width: '64%', height: '100%', background: 'var(--brand)' }} />
              </div>
            </div>
          </div>
          {/* Recent list */}
          <div style={{ margin: '14px 16px 0' }}>
            <div className="eyebrow" style={{ fontSize: 10 }}>recent destinations</div>
            {[
              ['🇪🇸', 'Spain', '5G · 3GB', '$4.90'],
              ['🇹🇷', 'Turkey', 'LTE · 1GB', '$2.90'],
              ['🇦🇪', 'UAE', '5G · 5GB', '$5.90'],
            ].map((r, i) => (
              <div key={i} style={{ marginTop: 8, padding: '8px 10px', borderRadius: 10, background: '#fff', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 18 }}>{r[0]}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11.5, fontWeight: 500 }}>{r[1]}</div>
                  <div style={{ fontSize: 9.5, color: 'var(--fg-muted)' }}>{r[2]}</div>
                </div>
                <span className="mono tnum" style={{ fontSize: 11, color: 'var(--accent)' }}>{r[3]}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- DAY PASS PROMO ---------- */
function DayPassPromo({ go }) {
  return (
    <section style={{ padding: '24px 0 64px' }}>
      <div className="container-wide">
        <div className="noise" style={{
          position: 'relative', overflow: 'hidden',
          borderRadius: 28, padding: '48px 56px',
          background: 'linear-gradient(120deg, #2D1B69 0%, #4A2387 45%, #7E1D6E 100%)',
          color: '#fff',
          minHeight: 280,
          display: 'grid',
          gridTemplateColumns: '1.2fr 1fr',
          gap: 32,
          alignItems: 'center',
        }} className="daypass-card">
          {/* glows */}
          <div style={{ position: 'absolute', top: -80, right: -80, width: 320, height: 320, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255, 80, 160, 0.55) 0%, transparent 70%)', pointerEvents: 'none' }} />
          <div style={{ position: 'absolute', bottom: -100, left: -40, width: 260, height: 260, borderRadius: '50%', background: 'radial-gradient(circle, rgba(196, 181, 253, 0.32) 0%, transparent 70%)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative', zIndex: 2 }}>
            <span className="chip" style={{ background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.25)', color: '#fff', backdropFilter: 'blur(6px)' }}>
              ✦ new
            </span>
            <h2 style={{ marginTop: 18, fontSize: 'clamp(36px, 4.5vw, 52px)', lineHeight: 1.02, letterSpacing: '-0.035em', fontWeight: 600 }}>
              Unlim Day Pass
            </h2>
            <p style={{ marginTop: 14, fontSize: 17, color: 'rgba(255,255,255,0.78)', maxWidth: 460, lineHeight: 1.55 }}>
              One annual eSIM. Unlimited data. You pay only for the days you go online — $4.90/day in 100+ countries.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-lg btn-accent" onClick={() => go('rates')}>Learn more {I.arrowSm}</button>
              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', fontFamily: 'var(--mono)' }}>$0/year · pay-per-day</span>
            </div>
          </div>
          <div style={{ position: 'relative', zIndex: 2, display: 'flex', justifyContent: 'center' }}>
            <div style={{
              width: 220, padding: '22px 22px 24px', borderRadius: 22,
              background: 'rgba(255,255,255,0.08)',
              border: '1px solid rgba(255,255,255,0.18)',
              backdropFilter: 'blur(10px)',
              boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)' }} className="eyebrow">today</span>
                <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)' }} className="mono">14 may</span>
              </div>
              <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontSize: 32, fontWeight: 600 }} className="tnum">$4.90</span>
                <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>/ day</span>
              </div>
              <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.18)', fontSize: 12, color: 'rgba(255,255,255,0.7)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                  <span>Unlimited data</span>
                  <span style={{ color: 'var(--success)' }}>{I.check}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                  <span>Hotspot</span>
                  <span style={{ color: 'var(--success)' }}>{I.check}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span>Days idle</span>
                  <span className="mono">$0.00</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 820px) { .daypass-card { grid-template-columns: 1fr !important; padding: 36px 28px !important; } }`}</style>
    </section>
  );
}

/* ---------- POPULAR DESTINATIONS (with tabs) ---------- */
function PopularDestinations({ go }) {
  const [tab, setTab] = useState('countries');
  const [query, setQuery] = useState('');
  const tabs = [
    { id: 'countries', label: window.t('tab_countries') },
    { id: 'regions',   label: window.t('tab_regions') },
    { id: 'global',    label: window.t('tab_global') },
    { id: 'cities',    label: window.t('tab_cities') },
  ];
  const regions = [
    { iso: 'eu', flag: '🇪🇺', name: 'Europe (39 countries)',  from: 1.72 },
    { iso: 'as', flag: '🌏', name: 'Asia (28 countries)',      from: 1.68 },
    { iso: 'me', flag: '🕌', name: 'Middle East (12)',          from: 2.20 },
    { iso: 'am', flag: '🌎', name: 'Americas (24)',             from: 2.36 },
    { iso: 'af', flag: '🦁', name: 'Africa (40)',               from: 2.92 },
    { iso: 'oc', flag: '🏝️', name: 'Oceania (8)',              from: 1.96 },
    { iso: 'cis',flag: '🇷🇺', name: 'CIS (9)',                  from: 1.44 },
    { iso: 'bal',flag: '🌊', name: 'Balkans (10)',              from: 1.72 },
  ];
  const cities = [
    { iso: 'jp-tokyo', flag: '🗼', name: 'Tokyo',     from: 4.90 },
    { iso: 'fr-par',   flag: '🗼', name: 'Paris',     from: 3.20 },
    { iso: 'ae-dxb',   flag: '🌇', name: 'Dubai',     from: 3.90 },
    { iso: 'us-nyc',   flag: '🗽', name: 'New York',  from: 5.90 },
    { iso: 'sg-sg',    flag: '🌆', name: 'Singapore', from: 4.50 },
    { iso: 'gb-lon',   flag: '🎡', name: 'London',    from: 3.50 },
    { iso: 'es-bcn',   flag: '⛪', name: 'Barcelona', from: 3.20 },
    { iso: 'th-bkk',   flag: '🛕', name: 'Bangkok',   from: 2.90 },
  ];
  const global = window.ESIMDA_COUNTRIES.slice(0, 8).map((c) => ({ ...c, from: c.from / 7 }));

  // Tab-specific full dataset (before search-filter)
  const fullData = tab === 'countries' ? window.ESIMDA_COUNTRIES :  // all 186 for search
                   tab === 'regions'  ? regions :
                   tab === 'cities'   ? cities  :
                   global;

  // When no search query: show top-N per tab (default discovery)
  // When search query: filter from full dataset
  const q = query.trim().toLowerCase();
  const data = q
    ? fullData.filter((c) => c.name.toLowerCase().includes(q))
    : (tab === 'countries' ? fullData.slice(0, 24) : fullData);

  return (
    <section id="countries" className="section">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 22 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>{window.t('popular_eyebrow')}</div>
            <h2 style={{ fontSize: 'clamp(34px, 4.5vw, 52px)', letterSpacing: '-0.035em', lineHeight: 1.02, margin: 0, fontWeight: 600 }}>
              {window.t('popular_h')}
            </h2>
          </div>
          <div className="tab-row">
            {tabs.map((t) => (
              <button key={t.id} className={tab === t.id ? 'active' : ''} onClick={() => { setTab(t.id); setQuery(''); }}>{t.label}</button>
            ))}
          </div>
        </div>

        {/* Search filter — narrows visible cards by country name */}
        <div style={{ position: 'relative', marginBottom: 20, maxWidth: 480 }}>
          <span style={{ position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)', color: 'var(--fg-muted)', pointerEvents: 'none', display: 'inline-flex' }}>{I.search}</span>
          <input
            type="search"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder={
              tab === 'regions' ? window.t('popular_search_regions') :
              tab === 'cities'  ? window.t('popular_search_cities')  :
              tab === 'global'  ? window.t('popular_search_global')  :
              window.t('popular_search')
            }
            style={{ width: '100%', padding: '12px 16px 12px 46px', border: '1px solid var(--border-strong)', borderRadius: 12, fontSize: 15, fontFamily: 'var(--sans)', background: '#fff', outline: 'none', boxSizing: 'border-box' }}
            aria-label="Search countries"
          />
        </div>

        {data.length === 0 ? (
          <p style={{ textAlign: 'center', color: 'var(--fg-muted)', fontSize: 15, padding: '32px 0', margin: 0 }}>
            {window.t('popular_no_match')} "{query}".
          </p>
        ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }} className="dest-grid">
          {data.map((c) => (
            <button key={c.iso} className="dest-chip" onClick={() => c.iso.length === 2 ? go(`country/${c.iso}`) : alert('Demo — only Japan country page is built')}>
              <span className="flag">{c.flag}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="name" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.name}</div>
                <div className="price mono tnum">{window.t('popular_from')} ${c.from.toFixed(2)} {tab === 'global' || tab === 'regions' ? '/ day' : ''}</div>
              </div>
              <span style={{ color: 'var(--fg-faint)' }}>{I.chevR}</span>
            </button>
          ))}
        </div>
        )}

        <div style={{ marginTop: 32, textAlign: 'center' }}>
          <a href={window.LANG === 'ru' ? '/ru/strany/' : '/countries/'} className="btn btn-white btn-lg" style={{ textDecoration: 'none' }}>
            {window.t('popular_show_all')} {tabs.find(t => t.id === tab)?.label.toLowerCase() || tab} {I.arrowSm}
          </a>
        </div>

        <style>{`
          @media (max-width: 980px) { .dest-grid { grid-template-columns: repeat(3, 1fr) !important; } }
          @media (max-width: 720px) {
            .dest-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
            .dest-chip { padding: 10px 12px !important; gap: 8px !important; }
            .dest-chip .flag { font-size: 18px !important; }
            .dest-chip .name { font-size: 13.5px !important; }
            .dest-chip .price { font-size: 11.5px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ---------- REFERRAL PROMO ---------- */
function ReferralPromo({ go }) {
  return (
    <section style={{ padding: '0 0 96px' }}>
      <div className="container">
        <div className="bigcard" style={{
          padding: 0,
          background: 'linear-gradient(120deg, #FFE5F0 0%, #E9DDFE 60%, #DCE7FF 100%)',
          border: 'none',
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr',
          gap: 0,
          overflow: 'hidden',
        }} className="ref-card">
          <div style={{ padding: '48px 56px' }}>
            <div className="eyebrow" style={{ marginBottom: 12, color: 'var(--brand-deep)' }}>referral program</div>
            <h2 style={{ fontSize: 'clamp(32px, 4vw, 44px)', letterSpacing: '-0.035em', lineHeight: 1.05, margin: 0, fontWeight: 600 }}>
              Invite friends.<br />Earn up to <span style={{ color: 'var(--accent)' }}>$75</span> in credit.
            </h2>
            <p style={{ marginTop: 16, fontSize: 16, color: 'var(--fg-muted)', maxWidth: 460, lineHeight: 1.6 }}>
              <span style={{ color: 'var(--fg)' }}>$5 for them, $5 for you</span> on their first plan.
              Hit 5 friends → extra <span style={{ color: 'var(--fg)' }}>$50 bonus</span>. Travel pro badge at 10.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-lg btn-dark" onClick={() => alert('Refer & Earn page lives in the dashboard — round 2')}>Get your link {I.arrowSm}</button>
              <span style={{ fontSize: 13, color: 'var(--brand-deep)' }}>{I.copy} simsimsim.app/r/lena2026</span>
            </div>
            {/* milestones row */}
            <div style={{ marginTop: 32, padding: 16, background: 'rgba(255,255,255,0.5)', backdropFilter: 'blur(8px)', borderRadius: 16, border: '1px solid rgba(255,255,255,0.6)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }} className="milestones">
              {[
                { n: '1', l: 'First $5', s: '✓' },
                { n: '5', l: 'Travel pro', s: '4/5' },
                { n: '10', l: 'Free 5GB', s: '—' },
                { n: '25', l: 'Insider 15%', s: '—' },
              ].map((m, i) => (
                <div key={i} style={{ borderRight: i < 3 ? '1px solid rgba(20,16,43,0.08)' : 'none', paddingRight: 10 }}>
                  <div style={{ fontSize: 11, color: 'var(--fg-muted)' }} className="mono">{m.n} {m.n === '1' ? 'friend' : 'friends'}</div>
                  <div style={{ marginTop: 4, fontSize: 13, fontWeight: 500 }}>{m.l}</div>
                  <div style={{ marginTop: 2, fontSize: 11, color: m.s === '✓' ? 'var(--success)' : 'var(--fg-faint)' }} className="mono">{m.s}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative', overflow: 'hidden', minHeight: 320 }}>
            {/* placeholder illustration */}
            <RefIllustration />
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .ref-card { grid-template-columns: 1fr !important; } .milestones { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } }`}</style>
      </div>
    </section>
  );
}

function RefIllustration() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 300 320" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
      <defs>
        <radialGradient id="rg-a" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#FF80B0" stopOpacity="0.6"/>
          <stop offset="100%" stopColor="#FF80B0" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <circle cx="220" cy="80" r="80" fill="url(#rg-a)" />
      {/* People circles */}
      <g>
        {[
          { x: 70,  y: 90,  flag: '🇯🇵' },
          { x: 200, y: 110, flag: '🇪🇸' },
          { x: 130, y: 180, flag: '🇹🇷' },
          { x: 220, y: 220, flag: '🇦🇪' },
          { x: 90,  y: 250, flag: '🇫🇷' },
        ].map((p, i) => (
          <g key={i}>
            <circle cx={p.x} cy={p.y} r={28} fill="#fff" stroke="#FFB8D6" strokeWidth="2" />
            <text x={p.x} y={p.y + 8} textAnchor="middle" fontSize="26">{p.flag}</text>
          </g>
        ))}
      </g>
      {/* connecting lines */}
      <g stroke="#FF3D8B" strokeWidth="1.5" strokeDasharray="3 4" fill="none" opacity="0.5">
        <path d="M70,90 Q150,40 200,110" />
        <path d="M200,110 Q220,150 220,220" />
        <path d="M130,180 Q160,160 220,220" />
        <path d="M70,90 Q100,180 130,180" />
        <path d="M130,180 Q100,220 90,250" />
      </g>
      {/* center gift */}
      <g transform="translate(150 160)">
        <circle r="42" fill="#fff" stroke="#FFE4EF" strokeWidth="3" />
        <text textAnchor="middle" y="14" fontSize="44">🎁</text>
      </g>
      {/* $5 marks */}
      <g fontFamily="Geist Mono, monospace" fontSize="12" fontWeight="500" fill="#9B0F4F">
        <text x={70} y={140}>+$5</text>
        <text x={186} y={158}>+$5</text>
        <text x={115} y={230}>+$5</text>
        <text x={232} y={266}>+$5</text>
      </g>
    </svg>
  );
}

/* ---------- BENEFITS GRID (6 cards) ---------- */
function Benefits() {
  const items = [
    {
      title: 'EN + RU support',
      body: 'Email help in English and Russian. We reply within hours, not days.',
      tile: <Tile bg="linear-gradient(135deg, #FFE5F0 0%, #FFCBE0 100%)"><span style={{ fontSize: 44 }}>💬</span></Tile>,
    },
    {
      title: 'One eSIM, 186 countries',
      body: 'Install once. Top up the same profile every trip — no new QR to scan.',
      tile: <Tile bg="linear-gradient(135deg, #E9DDFE 0%, #C4B5FD 100%)"><span style={{ fontSize: 44 }}>🌍</span></Tile>,
    },
    {
      title: '30-second install',
      body: 'Scan one QR or use Direct Activation on iOS 17.4+. No app to download.',
      tile: <Tile bg="linear-gradient(135deg, #DCE7FF 0%, #93C5FD 100%)"><span style={{ fontSize: 44 }}>⚡</span></Tile>,
    },
    {
      title: '180-day refund',
      body: 'Full refund anytime before activation. Credit-only after — see refund policy for details.',
      tile: <Tile bg="linear-gradient(135deg, #FFE4D4 0%, #FFB088 100%)"><span style={{ fontSize: 44 }}>🛡️</span></Tile>,
    },
    {
      title: 'Auto-switch networks',
      body: 'Connects to the strongest local partner in real time — Docomo, Vodafone, Orange, whichever has best signal.',
      tile: <Tile bg="linear-gradient(135deg, #DBFBE0 0%, #86EFAC 100%)"><span style={{ fontSize: 44 }}>📡</span></Tile>,
    },
    {
      title: 'Hotspot included',
      body: 'Share data with other devices via Personal Hotspot. No extra fees on any plan.',
      tile: <Tile bg="linear-gradient(135deg, #FEF3C7 0%, #FACC15 100%)"><span style={{ fontSize: 44 }}>📶</span></Tile>,
    },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg-muted)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>{window.t('benefits_eyebrow')}</div>
          <h2 style={{ fontSize: 'clamp(34px, 4.5vw, 56px)', letterSpacing: '-0.035em', lineHeight: 1.02, margin: 0, fontWeight: 600, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' }}>
            {window.t('benefits_h_a')}<br />{window.t('benefits_h_b')} <span style={{ color: 'var(--brand)' }}>{window.t('benefits_h_c')}</span>{window.t('benefits_h_dot')}
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="bnf-grid">
          {items.map((b) => (
            <div key={b.title} className="card lift" style={{ padding: 28, background: '#fff' }}>
              {b.tile}
              <h3 style={{ marginTop: 22, fontSize: 19, letterSpacing: '-0.015em', fontWeight: 600, margin: '22px 0 6px' }}>{b.title}</h3>
              <p style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.55, margin: 0 }}>{b.body}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56, textAlign: 'center' }}>
          <button className="btn btn-lg btn-accent">Get my eSIM now {I.arrowSm}</button>
        </div>
        <style>{`@media (max-width: 900px) { .bnf-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          @media (max-width: 600px) { .bnf-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
}

function Tile({ bg, children }) {
  return (
    <div className="bnf-tile" style={{ background: bg, boxShadow: '0 8px 22px rgba(20, 16, 43, 0.08), inset 0 1px 0 rgba(255,255,255,0.55)' }}>
      {children}
    </div>
  );
}

/* ---------- HONEST GUARANTEES (replaces fake reviews + trust badges) ---------- */
function Guarantees() {
  const items = [
    { ic: I.shield,  l: '180-day refund',       s: 'Full refund any time before activation. Credit-only after. See refund policy.' },
    { ic: I.globe,   l: '186 countries',         s: 'One eSIM profile, top up forever — no new QR for the next trip.' },
    { ic: I.gift,    l: '$5 welcome credit',     s: 'Auto-applied on your first $5+ plan. First 1,000 signups.' },
    { ic: I.zap,     l: 'Browser activation',    s: 'No app to install. Scan QR from any phone with eSIM (iPhone XS or later, Pixel 3 or later, Galaxy S20 or later).' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ marginBottom: 32 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>{window.t('guarantees_eyebrow')}</div>
          <h2 style={{ fontSize: 'clamp(34px, 4.5vw, 52px)', letterSpacing: '-0.035em', lineHeight: 1.02, margin: 0, fontWeight: 600, maxWidth: 720 }}>
            {window.t('guarantees_h_a')} <span style={{ color: 'var(--brand)' }}>{window.t('guarantees_h_b')}</span>
          </h2>
          <p style={{ marginTop: 16, fontSize: 16, color: 'var(--fg-muted)', maxWidth: 600, lineHeight: 1.55 }}>
            {window.t('guarantees_lead')}
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="grnt-grid">
          {items.map((b) => (
            <div key={b.l} className="card" style={{ padding: 22, background: '#fff' }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 36, height: 36, borderRadius: 10, background: 'var(--brand-soft)', color: 'var(--brand)', marginBottom: 14 }}>{b.ic}</div>
              <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em' }}>{b.l}</div>
              <div style={{ marginTop: 6, fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.5 }}>{b.s}</div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 760px) { .grnt-grid { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
      </div>
    </section>
  );
}

/* ---------- WHAT IS AN eSIM ---------- */
function WhatIsEsim() {
  return (
    <section className="section" style={{ background: 'var(--bg-muted)' }}>
      <div className="container wht-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{window.t('whatis_eyebrow')}</div>
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.035em', lineHeight: 1.05, margin: 0, fontWeight: 600 }}>
            {window.t('whatis_h_a')}<span style={{ color: 'var(--brand)' }}>{window.t('whatis_h_b')}</span>{window.t('whatis_h_dot')}
          </h2>
          <p style={{ marginTop: 20, fontSize: 16.5, color: 'var(--fg-muted)', lineHeight: 1.65, maxWidth: 480 }}>
            {window.t('whatis_lead_a')}
          </p>
          <ul style={{ marginTop: 24, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              window.t('whatis_li_1'),
              window.t('whatis_li_2'),
              window.t('whatis_li_3'),
            ].map((t, i) => (
              <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 15, color: 'var(--fg)' }}>
                <span style={{ flex: '0 0 22px', height: 22, borderRadius: 999, background: 'var(--brand-soft)', color: 'var(--brand)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{I.check}</span>
                {t}
              </li>
            ))}
          </ul>
          <button className="btn btn-lg btn-white" style={{ marginTop: 28 }}>{window.t('whatis_learn')} {I.arrowSm}</button>
        </div>
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
          <PlanetVisual />
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .wht-grid { grid-template-columns: 1fr !important; gap: 36px !important; } }`}</style>
    </section>
  );
}

function PlanetVisual() {
  // Stylized planet with eSIM card orbiting
  return (
    <div style={{ width: 380, height: 380, position: 'relative' }}>
      <svg viewBox="0 0 380 380" width="100%" height="100%">
        <defs>
          <radialGradient id="planet" cx="35%" cy="30%" r="80%">
            <stop offset="0%" stopColor="#FFD1DC" />
            <stop offset="40%" stopColor="#C4B5FD" />
            <stop offset="100%" stopColor="#6F4FF5" />
          </radialGradient>
          <radialGradient id="glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#FF3D8B" stopOpacity="0.25" />
            <stop offset="100%" stopColor="#FF3D8B" stopOpacity="0" />
          </radialGradient>
        </defs>
        <circle cx="190" cy="190" r="180" fill="url(#glow)" />
        <circle cx="190" cy="190" r="120" fill="url(#planet)" />
        {/* continent dots */}
        {Array.from({ length: 140 }).map((_, i) => {
          const t = (i / 140) * Math.PI * 2;
          const r = 60 + (i % 7) * 6;
          const x = 190 + Math.cos(t * (1 + (i % 3) * 0.2)) * r;
          const y = 190 + Math.sin(t * (1 + (i % 5) * 0.2)) * r * 0.85;
          const d2 = (x - 190) ** 2 + (y - 190) ** 2;
          if (d2 > 110 * 110) return null;
          return <circle key={i} cx={x} cy={y} r={1.2} fill="#fff" opacity="0.6" />;
        })}
        {/* orbit */}
        <ellipse cx="190" cy="190" rx="160" ry="60" fill="none" stroke="#FF3D8B" strokeOpacity="0.35" strokeDasharray="3 5" transform="rotate(-18 190 190)" />
      </svg>
      {/* SIM card chip */}
      <div style={{ position: 'absolute', top: 30, right: 0, width: 130, padding: 14, background: '#fff', borderRadius: 14, boxShadow: 'var(--shadow-lg)', transform: 'rotate(-6deg)' }}>
        <div style={{ width: 26, height: 22, borderRadius: 4, background: 'linear-gradient(135deg, #FACC15 0%, #F59E0B 100%)', position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 3, background: 'transparent', border: '1px solid #B45309', borderRadius: 3 }} />
        </div>
        <div style={{ marginTop: 10, fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--fg-muted)' }}>SIMSIMSIM<br/>186 countries</div>
      </div>
      {/* QR card */}
      <div style={{ position: 'absolute', bottom: 10, left: 0, padding: 12, background: '#fff', borderRadius: 14, boxShadow: 'var(--shadow-lg)', transform: 'rotate(6deg)' }}>
        <div style={{ width: 60, height: 60, background: '#0E0726', borderRadius: 8, padding: 6 }}>
          <svg width="48" height="48" viewBox="0 0 7 7">
            {[
              '#####.#',
              '#...#.#',
              '#.#.#..',
              '#.#....',
              '#...#.#',
              '.#.#.##',
              '#.#.###',
            ].map((row, y) => row.split('').map((c, x) => c === '#' ? <rect key={`${x}-${y}`} x={x} y={y} width="1" height="1" fill="#fff" /> : null))}
          </svg>
        </div>
      </div>
    </div>
  );
}

/* ---------- HOW TO START (3 phones) ---------- */
function HowToStart() {
  const steps = [
    { n: 1, title: 'Choose destination & plan', body: 'Pick from 186 countries and the data you need. From $2.90.', screen: <PStep1 /> },
    { n: 2, title: 'Pay & get your QR',           body: 'Apple Pay, card, or your $5 welcome credit. Sent to your inbox.',     screen: <PStep2 /> },
    { n: 3, title: 'Install & go online',          body: 'Tap the install link, follow 2 prompts. 30 seconds end-to-end.',      screen: <PStep3 /> },
  ];
  return (
    <section id="how" className="section">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>{window.t('hts_eyebrow')}</div>
          <h2 style={{ fontSize: 'clamp(34px, 4.5vw, 52px)', letterSpacing: '-0.035em', lineHeight: 1.02, margin: 0, fontWeight: 600 }}>
            {window.t('hts_h_a')}<br />{window.t('hts_h_b')} <span style={{ color: 'var(--accent)' }}>{window.t('hts_h_c')}</span>{window.t('hts_h_dot')}
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="hts-grid">
          {steps.map((s) => (
            <div key={s.n} style={{ position: 'relative' }}>
              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
                <div style={{
                  width: 240, height: 460, borderRadius: 36, padding: 6, background: '#0E0726',
                  boxShadow: '0 20px 50px rgba(20, 16, 43, 0.15)',
                  position: 'relative',
                }}>
                  <div style={{ position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)', width: 84, height: 20, background: '#0E0726', borderRadius: 12, zIndex: 2 }} />
                  <div style={{ width: '100%', height: '100%', borderRadius: 30, background: '#F6F4FB', overflow: 'hidden' }}>
                    {s.screen}
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                <div style={{
                  flex: '0 0 38px', width: 38, height: 38, borderRadius: 999,
                  background: 'var(--brand)', color: '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 600, fontSize: 15,
                }}>{s.n}</div>
                <div>
                  <h3 style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.015em', margin: '4px 0 4px' }}>{s.title}</h3>
                  <p style={{ color: 'var(--fg-muted)', fontSize: 14, lineHeight: 1.55, margin: 0 }}>{s.body}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 900px) { .hts-grid { grid-template-columns: 1fr !important; gap: 56px !important; } }`}</style>
      </div>
    </section>
  );
}

function PStep1() {
  return (
    <div style={{ padding: '40px 14px 14px' }}>
      <div className="eyebrow" style={{ fontSize: 9.5, paddingLeft: 4 }}>destination</div>
      <div style={{ marginTop: 8, padding: '10px 12px', background: '#fff', borderRadius: 12, border: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontSize: 22 }}>🇯🇵</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 500 }}>Japan</div>
          <div style={{ fontSize: 9.5, color: 'var(--fg-muted)' }}>NTT Docomo · 5G</div>
        </div>
        <span style={{ color: 'var(--fg-faint)', fontSize: 14 }}>▾</span>
      </div>
      <div className="eyebrow" style={{ fontSize: 9.5, paddingLeft: 4, marginTop: 14 }}>pick a plan</div>
      {[
        ['1 GB', '7 days', '$4.90'],
        ['5 GB', '30 days', '$9.90', true],
        ['Unlim', '30 days', '$49.90'],
      ].map((r, i) => (
        <div key={i} style={{
          marginTop: 8, padding: 12, borderRadius: 12,
          background: r[3] ? 'linear-gradient(135deg, #FFE5F0 0%, #E9DDFE 100%)' : '#fff',
          border: r[3] ? '1.5px solid var(--accent)' : '1px solid var(--border)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600 }} className="tnum">{r[0]}</div>
            <div style={{ fontSize: 10, color: 'var(--fg-muted)' }}>{r[1]}</div>
          </div>
          <div className="mono tnum" style={{ fontSize: 13, color: r[3] ? 'var(--accent-deep)' : 'var(--fg)' }}>{r[2]}</div>
        </div>
      ))}
    </div>
  );
}
function PStep2() {
  return (
    <div style={{ padding: '40px 14px 14px' }}>
      <div className="eyebrow" style={{ fontSize: 9.5, paddingLeft: 4 }}>checkout</div>
      <div style={{ marginTop: 8, padding: 12, background: '#fff', borderRadius: 12, border: '1px solid var(--border)', fontFamily: 'var(--mono)', fontSize: 11, lineHeight: 2 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ color: 'var(--fg-muted)' }}>5 GB Japan</span>
          <span>$9.90</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ color: 'var(--success)' }}>Welcome credit</span>
          <span style={{ color: 'var(--success)' }}>−$5.00</span>
        </div>
        <div style={{ borderTop: '1px dashed var(--border-strong)', margin: '4px 0' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 600 }}>
          <span>Pay</span>
          <span>$4.90</span>
        </div>
      </div>
      <button style={{ marginTop: 12, width: '100%', padding: '11px 0', borderRadius: 10, background: 'var(--accent)', color: '#fff', border: 0, fontSize: 12, fontWeight: 500, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
        <svg viewBox="0 0 24 24" width="12" height="12" fill="#fff" aria-hidden="true"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
        Pay with Apple Pay
      </button>
      <div style={{ marginTop: 8, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
        {[
          {key: 'gpay', el: <><svg viewBox="0 0 48 48" width="10" height="10" aria-hidden="true" style={{verticalAlign:'-1px',marginRight:3}}><path fill="#4285F4" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#34A853" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#EA4335" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>Pay</>},
          {key: 'card', el: 'Card'},
          {key: 'crypto', el: '₿ Crypto'},
        ].map((p) => (
          <div key={p.key} style={{ padding: '7px 0', textAlign: 'center', background: '#fff', borderRadius: 7, fontSize: 10, fontWeight: 500, border: '1px solid var(--border)' }}>{p.el}</div>
        ))}
      </div>
      <div style={{ marginTop: 12, padding: 12, background: '#fff', borderRadius: 12, border: '1px solid var(--border)', textAlign: 'center' }}>
        <div style={{ fontSize: 10, color: 'var(--fg-muted)', marginBottom: 8 }}>or scan QR</div>
        <div style={{ display: 'inline-block', padding: 6, background: '#fff', border: '1px solid var(--border)', borderRadius: 8 }}>
          <svg width="80" height="80" viewBox="0 0 12 12" style={{ display: 'block' }}>
            {Array.from({ length: 144 }).map((_, i) => {
              const x = i % 12, y = (i / 12) | 0;
              if ((x < 3 && y < 3) || (x > 8 && y < 3) || (x < 3 && y > 8)) {
                return <rect key={i} x={x} y={y} width="1" height="1" fill="#0E0726" />;
              }
              return (i * 7 % 5 === 0) ? <rect key={i} x={x} y={y} width="1" height="1" fill="#0E0726" /> : null;
            })}
          </svg>
        </div>
      </div>
    </div>
  );
}
function PStep3() {
  return (
    <div style={{ padding: '40px 14px 14px' }}>
      <div style={{ marginTop: 8, padding: 14, background: 'linear-gradient(135deg, #DBFBE0 0%, #BBF7D0 100%)', borderRadius: 12, textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', width: 44, height: 44, borderRadius: 999, background: '#fff', color: 'var(--success)', alignItems: 'center', justifyContent: 'center' }}>{I.check}</div>
        <div style={{ marginTop: 10, fontSize: 13, fontWeight: 600 }}>You're online!</div>
        <div style={{ marginTop: 2, fontSize: 10.5, color: 'var(--fg-muted)' }}>NTT Docomo 5G · 142 Mbps</div>
      </div>
      <div style={{ marginTop: 12, padding: 14, background: '#fff', borderRadius: 12, border: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 18 }}>🇯🇵</span>
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 500 }}>Japan · 5GB</div>
              <div style={{ fontSize: 9.5, color: 'var(--fg-muted)' }} className="mono">30 days</div>
            </div>
          </div>
        </div>
        <div style={{ marginTop: 12 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9.5, color: 'var(--fg-muted)', marginBottom: 4 }}>
            <span>Data</span><span className="tnum">0.1 / 5 GB</span>
          </div>
          <div style={{ height: 5, background: 'var(--bg-muted)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ width: '2%', height: '100%', background: 'var(--brand)' }} />
          </div>
        </div>
      </div>
      <button style={{ marginTop: 12, width: '100%', padding: '11px 0', borderRadius: 10, background: '#0E0726', color: '#fff', border: 0, fontSize: 12, fontWeight: 500 }}>Top up</button>
    </div>
  );
}

/* ---------- PAYMENT METHODS ---------- */
function PaymentMethods() {
  const methods = [
    {
      key: 'card',
      name: 'Card',
      sub: 'Visa · Mastercard · Amex',
      bgGrad: 'linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%)',
      icon: (
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ padding: '6px 10px', borderRadius: 6, background: '#1A1F71', color: '#fff', fontWeight: 700, fontSize: 13, letterSpacing: '0.04em' }}>VISA</span>
          <span style={{ display: 'inline-flex', alignItems: 'center' }}>
            <span style={{ width: 18, height: 18, borderRadius: 999, background: '#EB001B' }} />
            <span style={{ width: 18, height: 18, borderRadius: 999, background: '#F79E1B', marginLeft: -8, mixBlendMode: 'multiply' }} />
          </span>
          <span style={{ padding: '6px 8px', borderRadius: 6, background: '#1F72CD', color: '#fff', fontWeight: 700, fontSize: 11 }}>AMEX</span>
        </div>
      ),
    },
    {
      key: 'applepay',
      name: 'Apple Pay',
      sub: 'One-tap on iOS',
      bgGrad: 'linear-gradient(135deg, #0E0726 0%, #1f1538 100%)',
      darkText: true,
      icon: (
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '8px 14px', borderRadius: 8, background: '#fff', color: '#0E0726', fontWeight: 600, fontSize: 14 }}>
          <svg viewBox="0 0 24 24" width="16" height="16" fill="#0E0726" aria-hidden="true"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
          <span>Pay</span>
        </div>
      ),
    },
    {
      key: 'googlepay',
      name: 'Google Pay',
      sub: 'Android · Chrome',
      bgGrad: 'linear-gradient(135deg, #FAFAFA 0%, #F1F3F4 100%)',
      icon: (
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 8, background: '#fff', boxShadow: '0 1px 2px rgba(20,16,43,0.12)' }}>
          <svg viewBox="0 0 48 48" width="18" height="18" aria-hidden="true">
            <path fill="#4285F4" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
            <path fill="#34A853" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
            <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
            <path fill="#EA4335" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
          </svg>
          <span style={{ fontWeight: 500, fontSize: 14, color: '#3C4043' }}>Pay</span>
        </div>
      ),
    },
    {
      key: 'paypal',
      name: 'PayPal',
      sub: 'Balance or linked card',
      bgGrad: 'linear-gradient(135deg, #F0F6FF 0%, #DCE9FB 100%)',
      icon: (
        <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 1, fontWeight: 700, fontSize: 22, letterSpacing: '-0.03em' }}>
          <span style={{ color: '#003087', fontStyle: 'italic' }}>Pay</span>
          <span style={{ color: '#0070BA', fontStyle: 'italic' }}>Pal</span>
        </div>
      ),
    },
    {
      key: 'crypto',
      name: 'Crypto',
      sub: 'BTC · ETH · USDT · USDC',
      featured: true,
      bgGrad: 'linear-gradient(135deg, #FFE5F0 0%, #C4B5FD 60%, #93C5FD 100%)',
      icon: (
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          {[
            { c: '₿', bg: '#F7931A', svg: null },
            { c: null, bg: '#627EEA', svg: (
                <svg viewBox="0 0 256 417" width="17" height="20" aria-hidden="true">
                  <path fill="#fff" d="M127.96 0l-2.79 9.49v275.67l2.79 2.79 127.96-75.64z" opacity=".7"/>
                  <path fill="#fff" d="M127.96 0L0 212.32l127.96 75.64V154.16z"/>
                  <path fill="#fff" d="M127.96 312.19l-1.57 1.91v98.21l1.57 4.58 128.04-180.39z" opacity=".7"/>
                  <path fill="#fff" d="M127.96 416.9v-104.7L0 232.49z"/>
                  <path fill="#fff" d="M127.96 287.96l127.96-75.64-127.96-58.16z" opacity=".4"/>
                  <path fill="#fff" d="M0 212.32l127.96 75.64v-133.8z" opacity=".5"/>
                </svg>
              ) },
            { c: null, bg: '#26A17B', svg: (
                <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
                  <path fill="#fff" d="M13.4 12.6v-1.7h3.9V8.3H6.7v2.6h3.9v1.7c-3.2.1-5.6.8-5.6 1.5s2.4 1.4 5.6 1.5v5.4h2.8v-5.4c3.2-.1 5.6-.8 5.6-1.5s-2.4-1.4-5.6-1.5zm0 2.5v-.1c-.1 0-.4 0-1.4 0-.8 0-1.3 0-1.4 0v.1c-2.6-.1-4.6-.6-4.6-1.1s2-1 4.6-1.1v1.7c.2 0 .7 0 1.4 0 1 0 1.3 0 1.4 0v-1.7c2.6.1 4.6.6 4.6 1.1s-2 1-4.6 1.1z"/>
                </svg>
              ) },
            { c: '$', bg: '#2775CA', svg: null },
          ].map((c, i) => (
            <span key={i} style={{
              width: 34, height: 34, borderRadius: 999,
              background: c.bg, color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, fontSize: 15,
              boxShadow: '0 2px 6px rgba(20,16,43,0.18)',
              marginLeft: i ? -10 : 0,
              border: '2px solid #fff',
            }}>{c.svg || c.c}</span>
          ))}
        </div>
      ),
    },
  ];

  return (
    <section className="section" style={{ background: 'var(--bg-muted)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>payment</div>
          <h2 style={{ fontSize: 'clamp(34px, 4.5vw, 52px)', letterSpacing: '-0.035em', lineHeight: 1.02, margin: 0, fontWeight: 600 }}>
            Pay your way.
          </h2>
          <p style={{ marginTop: 18, fontSize: 17, color: 'var(--fg-muted)', maxWidth: 540, margin: '18px auto 0', lineHeight: 1.6 }}>
            Card, wallet or crypto — checkout in seconds. <span style={{ color: 'var(--fg)' }}>Stripe-secured</span> on the fiat side, on-chain settlement for crypto.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }} className="pay-grid">
          {methods.map((m) => (
            <div
              key={m.key}
              className="lift"
              style={{
                position: 'relative',
                padding: 24,
                borderRadius: 16,
                background: m.bgGrad,
                color: m.darkText ? '#fff' : 'var(--fg)',
                minHeight: 168,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                border: '1px solid rgba(20,16,43,0.05)',
                boxShadow: 'var(--shadow-sm)',
                overflow: 'hidden',
              }}
            >
              {m.featured && (
                <span style={{
                  position: 'absolute', top: 14, right: 14,
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.05em',
                  padding: '3px 7px', borderRadius: 4,
                  background: 'var(--accent)', color: '#fff',
                }}>NEW</span>
              )}
              <div style={{ minHeight: 44, display: 'flex', alignItems: 'center' }}>
                {m.icon}
              </div>
              <div>
                <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.015em' }}>{m.name}</div>
                <div style={{ marginTop: 4, fontSize: 12.5, opacity: m.darkText ? 0.7 : 0.65, fontFamily: 'var(--mono)' }}>{m.sub}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Reassurance row */}
        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="pay-reassure">
          {[
            { i: I.shield, t: 'Stripe-secured', s: 'PCI DSS Level 1 · 3-D Secure on cards' },
            { i: I.refresh, t: '180-day refund', s: 'Money back if not activated. See refund policy' },
            { i: I.lightning, t: 'Instant settlement', s: 'eSIM delivered the moment payment clears' },
          ].map((r) => (
            <div key={r.t} className="card" style={{ padding: 18, display: 'flex', gap: 12, alignItems: 'flex-start', background: '#fff' }}>
              <span style={{ color: 'var(--brand)', flex: '0 0 auto' }}>{r.i}</span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{r.t}</div>
                <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginTop: 2 }}>{r.s}</div>
              </div>
            </div>
          ))}
        </div>

        <style>{`
          @media (max-width: 1040px) { .pay-grid { grid-template-columns: repeat(3, 1fr) !important; } }
          @media (max-width: 720px)  { .pay-grid { grid-template-columns: repeat(2, 1fr) !important; } .pay-reassure { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

/* ---------- CARRIERS ---------- */
function Carriers() {
  // Verified partner networks we connect to.
  const carriers = ['Vodafone', 'T-Mobile', 'Telefónica', 'Orange', 'NTT Docomo', 'SoftBank', 'O2', 'Movistar', 'Airtel', 'Tele2', 'EE', 'Etisalat', 'Optus'];
  return (
    <section style={{ padding: '64px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', background: '#fff', overflow: 'hidden' }}>
      <div className="container" style={{ textAlign: 'center', marginBottom: 36 }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>{window.t('carriers_eyebrow')}</div>
        <h2 style={{ fontSize: 'clamp(24px, 3vw, 32px)', letterSpacing: '-0.025em', margin: 0, fontWeight: 500, color: 'var(--fg-muted)', maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' }}>
          {window.t('carriers_h')}
        </h2>
      </div>
      <div style={{ position: 'relative', overflow: 'hidden', maxWidth: '100%', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)', maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)' }}>
        <div className="marquee-track">
          {[...carriers, ...carriers].map((c, i) => (
            <span key={i} className="carrier-mark">{c}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- DOWNLOAD APP ---------- */
function DownloadApp() {
  return (
    <section className="section">
      <div className="container">
        <div className="bigcard noise" style={{
          position: 'relative', overflow: 'hidden',
          padding: '64px 56px',
          background: 'linear-gradient(135deg, #FFE5F0 0%, #C4B5FD 50%, #93C5FD 100%)',
          border: 'none',
          display: 'grid',
          gridTemplateColumns: '1.2fr 1fr',
          gap: 32,
          alignItems: 'center',
        }} className="dl-card">
          <div>
            <div className="eyebrow" style={{ marginBottom: 12, color: 'var(--brand-deep)' }}>get the app</div>
            <h2 style={{ fontSize: 'clamp(34px, 4.5vw, 52px)', letterSpacing: '-0.035em', lineHeight: 1.02, margin: 0, fontWeight: 600 }}>
              Take Simsimsim<br />in your pocket.
            </h2>
            <p style={{ marginTop: 16, fontSize: 16.5, color: 'var(--fg-muted)', maxWidth: 460, lineHeight: 1.6 }}>
              Manage every eSIM, top up on the go, track data usage. iOS and Android (coming soon — for now everything works in your browser).
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#" className="card" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '10px 18px', background: '#0E0726', color: '#fff', borderRadius: 12, border: 0 }}>
                <span style={{ fontSize: 22 }}></span>
                <span style={{ textAlign: 'left' }}>
                  <div style={{ fontSize: 10, opacity: 0.7 }}>Download on the</div>
                  <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>App Store</div>
                </span>
              </a>
              <a href="#" className="card" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '10px 18px', background: '#0E0726', color: '#fff', borderRadius: 12, border: 0 }}>
                <span style={{ fontSize: 22 }}>▶</span>
                <span style={{ textAlign: 'left' }}>
                  <div style={{ fontSize: 10, opacity: 0.7 }}>Get it on</div>
                  <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>Google Play</div>
                </span>
              </a>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 18 }}>
            <div style={{ padding: 14, background: '#fff', borderRadius: 16, boxShadow: 'var(--shadow-lg)' }}>
              <div style={{ width: 130, height: 130, background: '#0E0726', borderRadius: 8, padding: 10 }}>
                <svg width="110" height="110" viewBox="0 0 13 13">
                  {Array.from({ length: 169 }).map((_, i) => {
                    const x = i % 13, y = (i / 13) | 0;
                    if ((x < 3 && y < 3) || (x > 9 && y < 3) || (x < 3 && y > 9)) {
                      return <rect key={i} x={x} y={y} width="1" height="1" fill="#fff" />;
                    }
                    return (i * 11 % 7 < 3) ? <rect key={i} x={x} y={y} width="1" height="1" fill="#fff" /> : null;
                  })}
                </svg>
              </div>
              <div style={{ marginTop: 8, fontSize: 11, color: 'var(--fg-muted)', textAlign: 'center', fontFamily: 'var(--mono)' }}>scan to install</div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 820px) { .dl-card { grid-template-columns: 1fr !important; padding: 40px 28px !important; } }`}</style>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQSection() {
  const items = [
    { q: 'What is an eSIM and how does Simsimsim use it?', a: 'eSIM is a digital SIM card built into your phone — no physical card to swap. With Simsimsim, you pick a plan, scan one QR, and stay connected. Same eSIM works for every trip; just top up.' },
    { q: 'How do I activate Simsimsim?', a: 'Go to Mobile Data settings, turn on the Simsimsim line, activate Data Roaming, and select Simsimsim as your data line. Don’t tap "Remove Data Plan" — that deletes the profile.' },
    { q: 'Will my phone work with eSIM?', a: 'iPhone XS or later, Pixel 3 or later, Galaxy S20 or later, and most modern unlocked Androids. Type *#06# on your dialer to confirm EID support.' },
    { q: 'Can I keep my home number?', a: 'Yes. Simsimsim installs as a second profile alongside your home SIM. Your home number stays active for calls and SMS while Simsimsim handles data abroad.' },
    { q: 'When does my data plan start counting?', a: 'The moment you complete checkout. Not traveling yet? Tap "Activate later" during purchase and you have up to 12 months to start the clock.' },
    { q: 'Can I tether / use Personal Hotspot?', a: 'Yes — included on every plan, no extra fees. Share with up to 5 devices.' },
    { q: 'How do refunds work?', a: 'Full refund any time within 180 days if you never installed the eSIM, or 30 days if installed but never activated. Activated plans get Simsimsim credit (not cash) — full policy at /refund.' },
    { q: 'What is the $5 welcome credit?', a: 'Real credit, applied automatically on your first plan of $5 or more. Smaller plans don’t consume it; the credit stays in your account for 30 days.' },
  ];
  return (
    <section id="faq" className="section">
      <div className="container" style={{ maxWidth: 920 }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{window.t('faq_eyebrow')}</div>
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.035em', lineHeight: 1.05, margin: 0, fontWeight: 600 }}>
            {window.t('faq_h')}
          </h2>
        </div>
        <FAQ items={items} />
      </div>
    </section>
  );
}

/* ---------- PAGE ---------- */
function HomePage() {
  const [tweaks, setTweak] = useTweaks({
    palette: 'aurora',  // aurora | sunset | deep
    showRef: false,     // hide until referral backend exists ($5/$75 promises)
    showDayPass: false, // hide until "Unlim Day Pass" product exists in catalog
  });

  const [searchOpen, setSearchOpen] = useState(false);
  const openSearch = () => setSearchOpen(true);
  const closeSearch = () => setSearchOpen(false);

  // Listen for global ⌘K event from CountrySearch
  useEffect(() => {
    const onOpen = () => setSearchOpen(true);
    window.addEventListener('esimda:opensearch', onOpen);
    return () => window.removeEventListener('esimda:opensearch', onOpen);
  }, []);

  const go = (path) => {
    if (path.startsWith('country/')) {
      window.location.href = `country.html?iso=${path.split('/')[1]}`;
      return;
    }
    if (path === 'rates' || path === 'home') {
      const el = document.getElementById(path === 'rates' ? 'countries' : 'home');
      el ? el.scrollIntoView({ behavior: 'smooth' }) : window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
  };

  // apply palette tweak via CSS vars
  useEffect(() => {
    const root = document.documentElement;
    if (tweaks.palette === 'sunset') {
      root.style.setProperty('--accent', '#F97316');
      root.style.setProperty('--accent-hover', '#EA580C');
      root.style.setProperty('--accent-soft', '#FFEDD5');
      root.style.setProperty('--accent-deep', '#9A3412');
      root.style.setProperty('--brand', '#F472B6');
      root.style.setProperty('--brand-hover', '#EC4899');
      root.style.setProperty('--brand-soft', '#FCE7F3');
      root.style.setProperty('--brand-deep', '#9D174D');
    } else if (tweaks.palette === 'deep') {
      root.style.setProperty('--accent', '#22D3EE');
      root.style.setProperty('--accent-hover', '#06B6D4');
      root.style.setProperty('--accent-soft', '#CFFAFE');
      root.style.setProperty('--accent-deep', '#155E75');
      root.style.setProperty('--brand', '#4F46E5');
      root.style.setProperty('--brand-hover', '#4338CA');
      root.style.setProperty('--brand-soft', '#E0E7FF');
      root.style.setProperty('--brand-deep', '#312E81');
    } else {
      root.style.setProperty('--accent', '#FF3D8B');
      root.style.setProperty('--accent-hover', '#E11D74');
      root.style.setProperty('--accent-soft', '#FFE4EF');
      root.style.setProperty('--accent-deep', '#9B0F4F');
      root.style.setProperty('--brand', '#6F4FF5');
      root.style.setProperty('--brand-hover', '#5A37E8');
      root.style.setProperty('--brand-soft', '#EEE9FE');
      root.style.setProperty('--brand-deep', '#3A1FB0');
    }
  }, [tweaks.palette]);

  return (
    <>
      <TopNav onNav={go} onOpenSearch={openSearch} />
      <main id="home">
        <Hero go={go} onOpenSearch={openSearch} />
        {tweaks.showDayPass && <DayPassPromo go={go} />}
        <PopularDestinations go={go} />
        {tweaks.showRef && <ReferralPromo go={go} />}
        <Benefits />
        <Guarantees />
        <WhatIsEsim />
        <HowToStart />
        <Carriers />
        <PaymentMethods />
        <FAQSection />
        {/* DownloadApp omitted — we have no native app yet, "60K+ ratings" was fake */}
      </main>
      <Footer />

      <CountrySearch open={searchOpen} onClose={closeSearch} onPick={(c) => { closeSearch(); go(`country/${c.iso}`); }} />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio
          label="Direction"
          value={tweaks.palette}
          onChange={(v) => setTweak('palette', v)}
          options={['aurora', 'sunset', 'deep']}
        />
        <p style={{ fontSize: 12, color: '#9a9690', margin: '4px 14px 12px', lineHeight: 1.45 }}>
          aurora = violet + pink · sunset = magenta + orange · deep = indigo + cyan
        </p>
        <TweakSection label="Sections" />
        <TweakToggle label="Day Pass promo" value={tweaks.showDayPass} onChange={(v) => setTweak('showDayPass', v)} />
        <TweakToggle label="Referral promo" value={tweaks.showRef} onChange={(v) => setTweak('showRef', v)} />
      </TweaksPanel>
    </>
  );
}
window.HomePage = HomePage;