// CieloCell — eSIM setup guide page (V2 brand). Copy lives in cc-esim-guide-content.jsx.
const WHITE = '#FFFFFF';
const gD = () => CC.display, gF = () => CC.font;

// Screenshot with tap-to-enlarge
const Shot = ({ shot, cap, onZoom }) => (
  <figure className="cc-shot" style={{ margin: 0, maxWidth: shot.max || 300 }}>
    <button type="button" onClick={() => onZoom(shot)} aria-label={'enlarge: ' + shot.alt} style={{ display: 'block', width: '100%', padding: 0, border: `1.5px solid ${CC.ink}`, borderRadius: 18, overflow: 'hidden', background: '#F2F2F7', cursor: 'zoom-in', position: 'relative', aspectRatio: `${shot.w} / ${shot.h}` }}>
      <img src={shot.src} alt={shot.alt} loading="lazy" decoding="async" style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }} />
      <span aria-hidden="true" style={{ position: 'absolute', right: 10, bottom: 10, width: 32, height: 32, borderRadius: 999, background: CC.ink, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: `1.5px solid ${CC.cream}` }}><CCIcon.Plus size={14} color={CC.cream} strokeWidth={2.5} /></span>
    </button>
    {cap && <figcaption style={{ fontFamily: CC.font, fontSize: 13.5, lineHeight: 1.5, color: CC.inkMuted, marginTop: 8 }}>{cap}</figcaption>}
  </figure>);

// One step: action → why → screenshot
const StepCard = ({ n, s, numbered, onZoom }) => {
  const shot = s.shot ? GUIDE.SHOT[s.shot] : null;
  const hot = !!s.hot;
  return (
    <article style={{ background: hot ? CC.pink : WHITE, border: `1.5px solid ${CC.ink}`, borderRadius: 24, padding: 'clamp(18px, 3vw, 26px)' }}>
      <div className={'cc-step' + (shot ? ' has-shot' : '') + (shot && shot.wide ? ' wide' : '')}>
        <div style={{ minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            {numbered !== false && <span style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 30, lineHeight: 1, color: hot ? CC.ink : CC.pink, letterSpacing: -1 }}>{n}</span>}
            {hot && <span style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 11, background: CC.ink, color: CC.cream, borderRadius: 999, padding: '5px 10px', letterSpacing: 0.2 }}>don't skip this</span>}
          </div>
          <h3 style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 'clamp(17px, 2.2vw, 21px)', lineHeight: 1.18, letterSpacing: '-0.02em', margin: 0, color: CC.ink, textWrap: 'pretty' }}>{s.title}</h3>
          <p style={{ fontFamily: CC.font, fontSize: 16, lineHeight: 1.6, margin: '10px 0 0', color: CC.ink, overflowWrap: 'anywhere' }}>{s.body}</p>
        </div>
        {shot && <Shot shot={shot} cap={s.cap} onZoom={onZoom} />}
      </div>
    </article>);
};

// Optional extras — collapsed by default
const More = ({ items, onZoom }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
    {items.map((m, i) => {
      const shot = m.shot ? GUIDE.SHOT[m.shot] : null;
      return (
        <details key={i} style={{ background: WHITE, border: `1.5px solid ${CC.ink}`, borderRadius: 18, overflow: 'hidden' }}>
          <summary style={{ cursor: 'pointer', padding: '14px 18px', fontFamily: CC.font, fontWeight: 700, fontSize: 15.5, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, minHeight: 50 }}>
            <span>{m.title}</span><span className="cc-more-icon" style={{ width: 28, height: 28, borderRadius: 999, background: CC.lime, border: `1.5px solid ${CC.ink}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><CCIcon.ChevronDown size={14} color={CC.ink} strokeWidth={2.5} /></span>
          </summary>
          <div style={{ padding: '0 18px 18px' }}>
            <div className={'cc-step' + (shot ? ' has-shot' : '') + (shot && shot.wide ? ' wide' : '')}>
              <p style={{ fontFamily: CC.font, fontSize: 15.5, lineHeight: 1.65, margin: 0, color: CC.ink, overflowWrap: 'anywhere' }}>{m.body}</p>
              {shot && <Shot shot={shot} cap={m.cap} onZoom={onZoom} />}
            </div>
          </div>
        </details>);
    })}
  </div>);

const SectionHead = ({ n, title, sub }) => (
  <header style={{ display: 'flex', gap: 'clamp(12px, 2vw, 20px)', alignItems: 'flex-start', marginBottom: 18 }}>
    <span style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 'clamp(40px, 6vw, 60px)', lineHeight: 0.9, color: CC.pink, letterSpacing: -2, flexShrink: 0 }}>{n}</span>
    <div style={{ minWidth: 0, paddingTop: 2 }}>
      <h2 style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 'clamp(24px, 3.6vw, 36px)', lineHeight: 1, letterSpacing: '-0.03em', margin: 0, color: CC.ink, textWrap: 'pretty' }}>{title}</h2>
      {sub && <p style={{ fontFamily: CC.font, fontSize: 16, lineHeight: 1.5, color: CC.inkMuted, margin: '8px 0 0', maxWidth: '56ch' }}>{sub}</p>}
    </div>
  </header>);

const pill = (variant) => ({ fontFamily: CC.font, fontWeight: 700, fontSize: 15, borderRadius: 999, padding: '13px 20px', minHeight: 48, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, textDecoration: 'none', whiteSpace: 'nowrap',
  ...(variant === 'ink' ? { background: CC.ink, color: CC.cream, border: `1.5px solid ${CC.ink}` } : variant === 'lime' ? { background: CC.lime, color: CC.ink, border: `1.5px solid ${CC.ink}` } : variant === 'pink' ? { background: CC.pink, color: CC.ink, border: `1.5px solid ${CC.ink}` } : { background: WHITE, color: CC.ink, border: `1.5px solid ${CC.ink}` }) });

// The Wi-Fi-off test, with a user-confirmed result
const CheckSection = ({ n, jump }) => {
  const C = GUIDE.CHECK;
  const [res, setRes] = React.useState(null);
  return (
    <section id="sec-check" style={{ scrollMarginTop: 150 }}>
      <SectionHead n={n} title={C.title} sub={C.sub} />
      <article style={{ background: WHITE, border: `1.5px solid ${CC.ink}`, borderRadius: 24, padding: 'clamp(18px, 3vw, 26px)' }}>
        <p style={{ fontFamily: CC.font, fontSize: 16.5, lineHeight: 1.6, margin: 0, color: CC.ink }}>{C.body}</p>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 18 }}>
          <button type="button" onClick={() => setRes('yes')} aria-pressed={res === 'yes'} style={pill(res === 'yes' ? 'ink' : 'lime')}>my internet works</button>
          <button type="button" onClick={() => setRes('no')} aria-pressed={res === 'no'} style={pill(res === 'no' ? 'ink' : 'white')}>it doesn't load</button>
        </div>
        {res === 'yes' && (
          <div style={{ marginTop: 18, background: CC.lime, border: `1.5px solid ${CC.ink}`, borderRadius: 20, padding: '20px 22px', display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
            <img src="assets/mascot-cloud.png" alt="" style={{ width: 72, height: 'auto', flexShrink: 0 }} />
            <div style={{ flex: '1 1 240px', minWidth: 0 }}>
              <div style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 'clamp(22px, 3vw, 28px)', lineHeight: 1, letterSpacing: '-0.03em' }}>{C.yes.title}</div>
              <p style={{ fontFamily: CC.font, fontSize: 15.5, lineHeight: 1.55, margin: '8px 0 14px' }}>{C.yes.body}</p>
              <button type="button" onClick={() => jump('manage')} style={{ ...pill('ink'), minHeight: 44, padding: '10px 18px', fontSize: 14 }}>manage my esim →</button>
            </div>
          </div>)}
        {res === 'no' && (
          <div style={{ marginTop: 18, background: CC.pinkSoft, border: `1.5px solid ${CC.ink}`, borderRadius: 20, padding: '20px 22px' }}>
            <div style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 'clamp(20px, 3vw, 26px)', lineHeight: 1, letterSpacing: '-0.03em' }}>{C.no.title}</div>
            <p style={{ fontFamily: CC.font, fontSize: 15.5, lineHeight: 1.55, margin: '8px 0 14px' }}>{C.no.body}</p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <button type="button" onClick={() => jump('fix')} style={{ ...pill('ink'), minHeight: 44, padding: '10px 18px', fontSize: 14 }}>show connection fixes →</button>
              <a href="mailto:hello@cielocell.com" style={{ ...pill('white'), minHeight: 44, padding: '10px 18px', fontSize: 14 }}>contact support</a>
            </div>
          </div>)}
        <p style={{ fontFamily: CC.font, fontSize: 14, lineHeight: 1.55, margin: '16px 0 0', color: CC.inkMuted }}>{C.note}</p>
      </article>
    </section>);
};

const ESimGuidePage = ({ onBack, onNav }) => {
  const D = CC.display, F = CC.font;
  const { PRE, SHORT, SECTIONS, FIX } = GUIDE;
  const ALL_IDS = ['install', 'prompts', 'dataline', 'connect', 'check', 'manage', 'fix', 'roaming'];
  const readUrl = () => {
    let platform = null, brand = null, target = '';
    try {
      const q = new URLSearchParams(window.location.search);
      const h = (window.location.hash || '').slice(1).toLowerCase();
      const p = (q.get('platform') || '').toLowerCase();
      if (p === 'android' || h === 'android' || h === 'samsung' || h === 'pixel') platform = 'android'; else if (p === 'iphone' || p === 'ios' || h === 'iphone') platform = 'iphone';
      const b = (q.get('brand') || '').toLowerCase();
      if (b === 'pixel' || h === 'pixel') brand = 'pixel'; else if (b === 'samsung' || h === 'samsung') brand = 'samsung';
      if (ALL_IDS.indexOf(h) >= 0) target = h;
      const t = (q.get('step') || '').toLowerCase(); if (ALL_IDS.indexOf(t) >= 0) target = t;
      if (!platform || !brand) { const saved = JSON.parse(localStorage.getItem('cc-esim-guide-pick') || 'null'); if (saved) { platform = platform || saved.platform; brand = brand || saved.brand; } }
    } catch (e) {}
    return { platform: platform || 'iphone', brand: brand || 'samsung', target };
  };
  const init = React.useMemo(readUrl, []);
  const [platform, setPlatform] = React.useState(init.platform);
  const [brand, setBrand] = React.useState(init.brand);
  const [zoom, setZoom] = React.useState(null);
  const stickyRef = React.useRef(null);

  const offsetTop = () => {
    const nav = document.querySelector('[data-cc-nav]');
    return (nav ? nav.offsetHeight : 0) + (stickyRef.current ? stickyRef.current.offsetHeight : 0) + 14;
  };
  const jump = (id) => {
    const el = document.getElementById('sec-' + id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - offsetTop(), behavior: 'smooth' });
  };
  React.useEffect(() => { if (init.target) setTimeout(() => jump(init.target), 400); }, []);
  React.useEffect(() => { try { localStorage.setItem('cc-esim-guide-pick', JSON.stringify({ platform, brand })); } catch (e) {} }, [platform, brand]);
  React.useEffect(() => {
    if (!zoom) return;
    const onKey = (e) => { if (e.key === 'Escape') setZoom(null); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow; document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [zoom]);
  const pick = (p) => { setPlatform(p); try { history.replaceState(null, '', '#' + (p === 'android' ? brand : 'iphone')); } catch (e) {} };
  const pickBrand = (b) => { setBrand(b); try { history.replaceState(null, '', '#' + b); } catch (e) {} };

  const key = platform === 'iphone' ? 'iphone' : brand;
  const sections = SECTIONS[key];
  const short = SHORT[key];
  const jumps = sections.map((s) => ({ id: s.id, label: s.short })).concat([{ id: 'fix', label: 'fix it' }]);
  const label = platform === 'iphone' ? 'iphone' : (brand === 'pixel' ? 'google pixel' : 'samsung');

  const tab = (active, big) => ({ fontFamily: D, fontWeight: 900, fontSize: big ? 16 : 13.5, letterSpacing: -0.2, borderRadius: 999, border: `1.5px solid ${CC.ink}`, padding: big ? '14px 26px' : '8px 14px', minHeight: big ? 50 : 38, cursor: 'pointer', background: active ? CC.ink : (big ? WHITE : 'transparent'), color: active ? CC.cream : CC.ink, whiteSpace: 'nowrap' });
  const sub = (active, big) => ({ fontFamily: F, fontWeight: 700, fontSize: big ? 14.5 : 13, borderRadius: 999, border: `1.5px solid ${CC.ink}`, padding: big ? '10px 18px' : '7px 13px', minHeight: big ? 44 : 36, cursor: 'pointer', background: active ? CC.pink : (big ? WHITE : 'transparent'), color: CC.ink, whiteSpace: 'nowrap' });

  return (
    <div style={{ background: CC.cream, color: CC.ink, fontFamily: F, minHeight: '100vh' }}>
      {!CC.appMode &&
      <nav data-cc-chrome="1" data-cc-nav="1" style={{ position: 'sticky', top: 0, zIndex: 50, background: CC.cream, borderBottom: `1.5px solid ${CC.ink}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
          <a href="index.html" onClick={(e) => { e.preventDefault(); onBack(); }} style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
            <img src="assets/mascot-cloud.png" alt="" style={{ height: 36, width: 'auto', display: 'block' }} />
            <span style={{ fontFamily: D, fontWeight: 900, fontSize: 24, color: CC.ink, textTransform: 'lowercase', letterSpacing: -0.8, lineHeight: 1 }}>cielocell</span>
          </a>
          <a href="help.html" onClick={(e) => { e.preventDefault(); onNav && onNav('support'); }} style={{ background: CC.ink, color: CC.cream, borderRadius: 999, padding: '10px 18px', fontFamily: F, fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none', whiteSpace: 'nowrap' }}>← support</a>
        </div>
      </nav>}

      {/* HERO */}
      <section style={{ padding: 'clamp(36px, 6vw, 72px) 20px clamp(28px, 4vw, 44px)' }}>
        <div className="cc-hero" style={{ maxWidth: 1080, margin: '0 auto' }}>
          <div style={{ minWidth: 0 }}>
            <h1 style={{ fontFamily: D, fontWeight: 900, fontSize: 'clamp(40px, 7.5vw, 92px)', lineHeight: 0.92, letterSpacing: '-0.04em', margin: 0, color: CC.ink, maxWidth: '12ch', textWrap: 'pretty' }}>let's get you <span style={{ color: CC.pink }}>connected.</span></h1>
            <p style={{ fontFamily: F, fontSize: 'clamp(17px, 1.7vw, 21px)', fontWeight: 500, color: CC.ink, margin: 'clamp(18px, 2.5vw, 26px) 0 0', maxWidth: '46ch', lineHeight: 1.5 }}>install your cielocell esim, choose it for data, and turn on roaming. use it at home or on your next trip.</p>
            <div style={{ marginTop: 28 }}>
              <div style={{ fontFamily: F, fontWeight: 700, fontSize: 14, marginBottom: 10 }}>which phone?</div>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
                <button type="button" onClick={() => pick('iphone')} aria-pressed={platform === 'iphone'} style={tab(platform === 'iphone', true)}>iphone</button>
                <button type="button" onClick={() => pick('android')} aria-pressed={platform === 'android'} style={tab(platform === 'android', true)}>android</button>
                {platform === 'android' && <>
                  <button type="button" onClick={() => pickBrand('samsung')} aria-pressed={brand === 'samsung'} style={sub(brand === 'samsung', true)}>samsung</button>
                  <button type="button" onClick={() => pickBrand('pixel')} aria-pressed={brand === 'pixel'} style={sub(brand === 'pixel', true)}>google pixel</button>
                </>}
              </div>
            </div>
            <div style={{ marginTop: 22 }}>
              <div style={{ fontFamily: F, fontWeight: 700, fontSize: 14, marginBottom: 10 }}>what would you like to do?</div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {[['install', 'install my esim'], ['connect', 'my esim is installed'], ['fix', 'fix a connection problem']].map(([id, t]) => <button key={id} type="button" onClick={() => jump(id)} style={{ ...pill('white'), minHeight: 44, padding: '10px 16px', fontSize: 14 }}>{t} <CCIcon.ArrowRight size={14} color={CC.ink} strokeWidth={2.5} /></button>)}
              </div>
            </div>
          </div>
          <img className="cc-hero-mascot" src="assets/mascot-cloud.png" alt="" style={{ width: 'clamp(110px, 16vw, 200px)', height: 'auto', display: 'block' }} />
        </div>
      </section>

      {/* STICKY: platform + jumps */}
      <div ref={stickyRef} className="cc-sticky" style={{ background: CC.cream, borderTop: `1.5px solid ${CC.ink}`, borderBottom: `1.5px solid ${CC.ink}` }}>
        <div style={{ maxWidth: 1080, margin: '0 auto', padding: '10px 20px', display: 'flex', gap: 10, alignItems: 'center' }}>
          <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
            <button type="button" onClick={() => pick('iphone')} style={tab(platform === 'iphone')}>iphone</button>
            <button type="button" onClick={() => pick('android')} style={tab(platform === 'android')}>android</button>
            {platform === 'android' && <>
              <button type="button" onClick={() => pickBrand('samsung')} style={sub(brand === 'samsung')}>samsung</button>
              <button type="button" onClick={() => pickBrand('pixel')} style={sub(brand === 'pixel')}>pixel</button>
            </>}
          </div>
          <div className="cc-jumps" style={{ marginLeft: 'auto' }}>
            {jumps.map((j, i) => <button key={j.id} type="button" onClick={() => jump(j.id)} style={{ fontFamily: F, fontWeight: 700, fontSize: 13, border: 'none', background: 'transparent', color: CC.ink, cursor: 'pointer', padding: '8px 8px', whiteSpace: 'nowrap', minHeight: 36, display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ fontFamily: D, fontWeight: 900, fontSize: 12, color: CC.pink }}>{i + 1}</span>{j.label}</button>)}
          </div>
        </div>
      </div>

      {/* BODY */}
      <section style={{ padding: 'clamp(28px, 4vw, 48px) 20px clamp(56px, 7vw, 96px)' }}>
        <div style={{ maxWidth: 880, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 'clamp(36px, 5vw, 56px)' }}>

          {/* ROAMING — the one thing */}
          <div id="sec-roaming" style={{ background: CC.pink, border: `1.5px solid ${CC.ink}`, borderRadius: 28, padding: 'clamp(22px, 3.5vw, 36px)', color: CC.ink, scrollMarginTop: 150 }}>
            <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
              <span style={{ width: 48, height: 48, borderRadius: 999, background: CC.ink, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><CCIcon.Globe size={24} color={CC.lime} strokeWidth={2} /></span>
              <div style={{ minWidth: 0 }}>
                <h2 style={{ fontFamily: D, fontWeight: 900, fontSize: 'clamp(24px, 3.8vw, 38px)', lineHeight: 1, letterSpacing: '-0.03em', margin: 0, textWrap: 'pretty' }}>turn on data roaming. even at home.</h2>
                <p style={{ fontFamily: F, fontSize: 16.5, lineHeight: 1.6, margin: '14px 0 0', fontWeight: 500 }}>cielocell connects through partner networks, so your phone treats it as roaming — wherever you are. if <b>Data Roaming</b> is off for the cielocell line, nothing loads. it's the number one reason an esim looks broken. your usage comes from your cielocell plan; your usual carrier's charges are separate.</p>
                <p style={{ fontFamily: F, fontSize: 15.5, lineHeight: 1.6, margin: '10px 0 0' }}><b>data only.</b> cielocell gives you internet. keep your usual sim for calls and texts — whatsapp and other apps work over cielocell data.</p>
              </div>
            </div>
          </div>

          {/* THE SHORT VERSION */}
          <div>
            <SectionHead n="" title={<>the short version <span style={{ color: CC.pink }}>· {label}</span></>} sub="six things. read these first — if a screen below looks different on your phone, the bold names are still what to tap." />
            <div style={{ background: WHITE, border: `1.5px solid ${CC.ink}`, borderRadius: 24, padding: 'clamp(6px, 1vw, 10px) clamp(18px, 3vw, 26px)' }}>
              {short.items.map((it, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '34px minmax(0,1fr)', gap: 12, padding: '16px 0', borderTop: i ? `1.5px solid ${CC.border}` : 'none', alignItems: 'start' }}>
                  <span style={{ fontFamily: D, fontWeight: 900, fontSize: 24, lineHeight: 1, color: CC.pink, marginTop: 1 }}>{i + 1}</span>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontFamily: D, fontWeight: 900, fontSize: 16.5, letterSpacing: '-0.01em', lineHeight: 1.2 }}>{it.t}</div>
                    <p style={{ fontFamily: F, fontSize: 15.5, lineHeight: 1.6, margin: '6px 0 0', color: CC.ink, overflowWrap: 'anywhere' }}>{it.d}</p>
                  </div>
                </div>))}
            </div>
            <p style={{ fontFamily: F, fontSize: 14, lineHeight: 1.55, color: CC.inkMuted, margin: '12px 4px 0' }}>{short.note}</p>
          </div>

          {/* BEFORE YOU START */}
          <div style={{ border: `1.5px solid ${CC.ink}`, borderRadius: 24, padding: 'clamp(20px, 3vw, 28px)', background: CC.lime }}>
            <h2 style={{ fontFamily: D, fontWeight: 900, fontSize: 'clamp(20px, 2.6vw, 24px)', margin: '0 0 14px', letterSpacing: '-0.02em' }}>before you start</h2>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {PRE.map((p, i) => <li key={i} style={{ display: 'grid', gridTemplateColumns: '22px minmax(0,1fr)', gap: 10, fontFamily: F, fontSize: 15.5, lineHeight: 1.55, alignItems: 'start' }}><span style={{ width: 22, height: 22, borderRadius: 999, background: CC.ink, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginTop: 1 }}><CCIcon.Check size={13} color={CC.lime} strokeWidth={3} /></span><span style={{ overflowWrap: 'anywhere' }}><b>{p.t}.</b> {p.d}</span></li>)}
            </ul>
          </div>

          {/* SECTIONS */}
          {sections.map((sec, i) => {
            const n = String(i + 1).padStart(2, '0');
            if (sec.id === 'check') return <CheckSection key={key + 'check'} n={n} jump={jump} />;
            return (
              <section key={key + sec.id} id={'sec-' + sec.id} style={{ scrollMarginTop: 150 }}>
                <SectionHead n={n} title={sec.title} sub={sec.sub} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {sec.steps.map((s, j) => <StepCard key={j} n={j + 1} s={s} numbered={sec.numbered} onZoom={setZoom} />)}
                  {sec.more && <More items={sec.more} onZoom={setZoom} />}
                </div>
              </section>);
          })}

          {/* FIX */}
          <section id="sec-fix" style={{ scrollMarginTop: 150 }}>
            <SectionHead n={String(sections.length + 1).padStart(2, '0')} title="if something doesn't work" sub="find your situation. nine times out of ten it's roaming." />
            <More items={FIX[key].map((f) => ({ title: f.q, body: f.a }))} onZoom={setZoom} />
            <div style={{ marginTop: 12, background: WHITE, border: `1.5px solid ${CC.ink}`, borderRadius: 18, padding: '16px 18px', fontFamily: F, fontSize: 14.5, lineHeight: 1.6, color: CC.ink }}>
              <b>still stuck?</b> chat with us in the app or email <a href="mailto:hello@cielocell.com" style={{ fontWeight: 700 }}>hello@cielocell.com</a>. tell us your phone model, software version, country and the exact error. hide personal details in screenshots — and never share your QR or activation code publicly.
            </div>
          </section>
        </div>
      </section>

      {/* CTA strip */}
      <section style={{ padding: 'clamp(48px, 6vw, 80px) 20px', background: CC.ink, color: CC.cream, borderTop: `1.5px solid ${CC.ink}` }}>
        <div style={{ maxWidth: 880, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <div style={{ fontFamily: D, fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 900, lineHeight: 0.95, letterSpacing: '-0.04em', maxWidth: '14ch' }}>still stuck? <span style={{ color: CC.lime }}>just ask.</span></div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <button type="button" onClick={() => { try { if (window.Ebbot && !window.Ebbot.isChatWindowOpened()) window.Ebbot.openChatWindow(); } catch (e) {} }} style={{ ...pill('lime'), border: 'none' }}>chat with us →</button>
            <a href="mailto:hello@cielocell.com" style={{ ...pill('pink'), border: 'none' }}>hello@cielocell.com →</a>
          </div>
        </div>
      </section>

      {!CC.appMode &&
      <footer data-cc-chrome="1" style={{ padding: '48px 20px 36px', background: CC.cream, borderTop: `1.5px solid ${CC.ink}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <a href="index.html" onClick={(e) => { e.preventDefault(); onBack(); }} style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
            <img src="assets/mascot-cloud.png" alt="" style={{ height: 36, width: 'auto', display: 'block' }} />
            <span style={{ fontFamily: D, fontWeight: 900, fontSize: 24, color: CC.ink, textTransform: 'lowercase', letterSpacing: -0.8, lineHeight: 1 }}>cielocell</span>
          </a>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <a href="terms.html" onClick={(e) => { e.preventDefault(); onNav && onNav('terms'); }} style={{ fontFamily: F, fontSize: 13, color: CC.ink, fontWeight: 500, padding: '6px 10px', textDecoration: 'none' }}>terms</a>
            <a href="privacy.html" onClick={(e) => { e.preventDefault(); onNav && onNav('privacy'); }} style={{ fontFamily: F, fontSize: 13, color: CC.ink, fontWeight: 500, padding: '6px 10px', textDecoration: 'none' }}>privacy</a>
            <a href="help.html" onClick={(e) => { e.preventDefault(); onNav && onNav('support'); }} style={{ fontFamily: F, fontSize: 13, color: CC.ink, fontWeight: 500, padding: '6px 10px', textDecoration: 'none' }}>support</a>
            <a href="mailto:hello@cielocell.com" style={{ fontFamily: F, fontSize: 13, color: CC.ink, fontWeight: 500, textDecoration: 'none', padding: '6px 10px' }}>contact</a>
          </div>
          <div style={{ fontFamily: F, fontSize: 12, color: CC.inkMuted }}>© 2026</div>
        </div>
      </footer>}

      {/* LIGHTBOX */}
      {zoom && (
        <div role="dialog" aria-modal="true" aria-label={zoom.alt} onClick={() => setZoom(null)} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(14,31,24,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, cursor: 'zoom-out' }}>
          <img src={zoom.src} alt={zoom.alt} style={{ maxWidth: zoom.wide ? 'min(94vw, 1000px)' : 'min(94vw, 520px)', maxHeight: '92vh', width: 'auto', height: 'auto', borderRadius: 18, border: `1.5px solid ${CC.cream}`, background: '#F2F2F7', display: 'block' }} />
          <button type="button" onClick={() => setZoom(null)} aria-label="close" style={{ position: 'absolute', top: 16, right: 16, width: 44, height: 44, borderRadius: 999, background: CC.cream, border: `1.5px solid ${CC.ink}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}><CCIcon.X size={18} color={CC.ink} strokeWidth={2.5} /></button>
        </div>)}
    </div>);
};

Object.assign(window, { ESimGuidePage });