// CieloCell — eSIM setup guide: copy + screenshots (V2 brand, US English)
// Prose is lowercase (brand voice). Labels that appear on the phone keep their exact case, in bold.
const IMG = 'assets/esim-guide/';
const SHOT = {
  app:        { src: IMG + 'app-congrats-us.jpg',      w: 850,  h: 1851, alt: 'CieloCell app: congrats screen with the Activate eSIM button' },
  iosContinue:{ src: IMG + 'ios-connect-continue.jpg', w: 942,  h: 2048, alt: 'iPhone: Activate eSIM — your new eSIM from Connect is ready to activate, with a Continue button' },
  iosAdd:     { src: IMG + 'ios-add-esim-us.png',      w: 640,  h: 1324, alt: 'iPhone: Set Up eSIM menu with the Use QR Code option' },
  iosWhere:   { src: IMG + 'ios-home-abroad-us.jpg',   w: 851,  h: 1849, alt: 'iPhone: Where will you use this eSIM? Home selected, Abroad below' },
  iosPlan:    { src: IMG + 'ios-data-only.jpg',        w: 942,  h: 2048, alt: 'iPhone: Which type of plan do you have? Data Only selected' },
  iosLines:   { src: IMG + 'ios-current-sim-us.jpg',   w: 851,  h: 1848, alt: 'iPhone: Turn On Travel eSIM — Travel eSIM and Current SIM selected' },
  iosLow:     { src: IMG + 'ios-low-data.jpg',         w: 942,  h: 2048, alt: 'iPhone: Low Data Mode — Turn On Low Data Mode or Not Now' },
  iosLine:    { src: IMG + 'ios-line-roaming-us.jpg',  w: 851,  h: 1849, alt: 'iPhone: Connect line settings with Turn On This Line and Data Roaming switched on' },
  iosData:    { src: IMG + 'ios-data-selected-us.jpg', w: 851,  h: 1848, alt: 'iPhone: Cellular Data — Travel - Connect selected, Allow Cellular Data Switching off' },
  iosApn:     { src: IMG + 'ios-apn-us.jpg',           w: 1536, h: 1024, wide: true, max: 520, alt: 'iPhone: Cellular Data Network — APN globaldata, Username and Password blank' },
  samAdd:     { src: IMG + 'samsung-add-esim.jpg',     w: 420,  h: 325,  wide: true, max: 380, alt: 'Samsung SIM manager: Add eSIM' },
  samQr:      { src: IMG + 'samsung-scan-qr.jpg',      w: 420,  h: 325,  wide: true, max: 380, alt: 'Samsung: Scan QR code option' },
  samScan:    { src: IMG + 'samsung-scanner.jpg',      w: 685,  h: 1600, alt: 'Samsung QR scanner with Enter activation code link and a gallery button' },
  samSim:     { src: IMG + 'samsung-sim-manager.jpg',  w: 821,  h: 1916, alt: 'Samsung SIM manager: CieloCell eSIM on, Mobile data set to CieloCell, Calls and Messages on Primary' },
  samPrimary: { src: IMG + 'samsung-primary-sim.jpg',  w: 420,  h: 325,  wide: true, max: 380, alt: 'Samsung US menu showing Primary SIM' },
  samRoam:    { src: IMG + 'samsung-roaming.jpg',      w: 821,  h: 1916, alt: 'Samsung Mobile networks: Data roaming on, Access Point Names below' },
  apnEdit:    { src: IMG + 'android-apn-edit.jpg',     w: 821,  h: 1916, alt: 'Android Edit access point: Name CieloCell, APN globaldata, Save at the bottom' },
  apnPick:    { src: IMG + 'android-apn-selected.jpg', w: 2172, h: 724,  wide: true, max: 600, alt: 'Android Access Point Names: CieloCell globaldata selected' },
  pixSetup:   { src: IMG + 'pixel-set-up.jpg',         w: 720,  h: 1600, alt: 'Pixel: Connect to mobile network — Set up an eSIM button' },
  pixQr:      { src: IMG + 'pixel-qr.jpg',             w: 720,  h: 1600, alt: 'Pixel: Scan QR code from operator, with a Scan from photo link' }
};

// Settings path: Settings › Cellular › CieloCell
const Path = ({ items }) => <span style={{ fontWeight: 700 }}>{items.map((it, i) => <React.Fragment key={i}>{i > 0 && <span style={{ opacity: 0.45, margin: '0 5px' }}>›</span>}<span style={{ whiteSpace: 'nowrap' }}>{it}</span></React.Fragment>)}</span>;

// The APN value with a copy button
const Apn = () => {
  const [ok, setOk] = React.useState(false);
  const copy = async () => {
    try { await navigator.clipboard.writeText('globaldata'); }
    catch (e) { const ta = document.createElement('textarea'); ta.value = 'globaldata'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); } catch (_) {} ta.remove(); }
    setOk(true); setTimeout(() => setOk(false), 1600);
  };
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, verticalAlign: 'middle' }}><b>globaldata</b><button type="button" onClick={copy} aria-label="copy globaldata" style={{ fontFamily: CC.font, fontWeight: 700, fontSize: 12, background: ok ? CC.ink : CC.lime, color: ok ? CC.cream : CC.ink, border: `1.5px solid ${CC.ink}`, borderRadius: 999, padding: '3px 10px', cursor: 'pointer', lineHeight: 1.4 }}>{ok ? 'copied' : 'copy'}</button></span>;
};

const PRE = [
  { t: 'use the phone you\'ll keep', d: <>this esim stays with the phone it's installed on. it can't move to another one later.</> },
  { t: 'esim-ready and unlocked', d: <>dial <b>*#06#</b> — an <b>EID</b> line means your phone has an esim. iphone: <Path items={['Settings', 'General', 'About', 'Carrier Lock']} /> should say <b>No SIM Restrictions</b>. android: check unlocking with your carrier or seller.</> },
  { t: 'stay on wi-fi', d: <>installing needs internet, and your new esim can't provide it yet.</> },
  { t: 'have the right plan', d: <>check it covers where you'll use it and still has data. your plan's dates are in the app.</> },
  { t: 'your number stays put', d: <>cielocell is internet only. calls and texts stay on your usual sim — whatsapp and other apps work over cielocell data.</> }
];

const SHORT = {
  iphone: {
    note: <>some iphones say <b>Mobile Service</b> and <b>Mobile Data</b> instead of <b>Cellular</b> and <b>Cellular Data</b>. same screens, same taps.</>,
    items: [
      { t: 'start in cielocell', d: <>tap <b>Install</b> on home, <b>Activate eSIM</b> if your app shows that button, or the install button in your setup email.</> },
      { t: 'add the esim', d: <>follow the iphone prompts. if asked, choose <b>Data Only</b>. choose <b>Home</b> in the country where you live, <b>Abroad</b> when visiting another country.</> },
      { t: 'keep your usual number', d: <>your usual sim keeps calls, texts, imessage and facetime. cielocell supplies the internet.</> },
      { t: 'turn on cielocell', d: <><Path items={['Settings', 'Cellular', 'CieloCell']} /> — switch on <b>Turn On This Line</b> and <b>Data Roaming</b>. the line may be named <b>Connect</b> or <b>Travel - Connect</b>.</> },
      { t: 'choose it for data', d: <><Path items={['Settings', 'Cellular', 'Cellular Data']} /> — select cielocell and turn off <b>Allow Cellular Data Switching</b>.</> },
      { t: 'try a web page', d: <>wi-fi off for a moment, load a new page. it loads? you're connected. wi-fi back on.</> }]
  },
  samsung: {
    note: <>menus differ a little by model and software version. we show a us galaxy. if a name doesn't match, look for the same function.</>,
    items: [
      { t: 'install', d: <>tap the install button in cielocell or your setup email. or <Path items={['Settings', 'Connections', 'SIM manager', 'Add eSIM']} /> and scan your cielocell QR code.</> },
      { t: 'choose the line for data', d: <>in <b>SIM manager</b>, switch cielocell on. <b>Mobile data</b> → cielocell. <b>Calls</b> and <b>Messages</b> → your usual sim.</> },
      { t: 'see Primary SIM instead?', d: <>choose cielocell there to use its data. keep using your usual line in the Phone and Messages apps.</> },
      { t: 'turn on roaming', d: <><Path items={['Settings', 'Connections', 'Mobile networks']} /> — <b>Data roaming</b> on for cielocell. needed even at home.</> },
      { t: 'check the apn', d: <><b>Access Point Names</b> for the cielocell sim. <b>globaldata</b> selected? done. if not, add it, save it, select it.</> },
      { t: 'try a web page', d: <>data switching off, wi-fi off for a moment, load a new page.</> }]
  },
  pixel: {
    note: <>menus differ a little by android version. if a name doesn't match, look for the same function.</>,
    items: [
      { t: 'install', d: <>tap the install button in cielocell or your setup email. or <Path items={['Settings', 'Network & internet', 'SIMs', 'Add SIM', 'Set up an eSIM']} /> and scan your QR code.</> },
      { t: 'turn it on', d: <><b>Use SIM</b> on for cielocell.</> },
      { t: 'choose it for data', d: <>under <b>SIM preferences</b>: <b>Mobile data</b> → cielocell. <b>Calls</b> and <b>Texts</b> → your usual sim. leave <b>Automatic data switching</b> off.</> },
      { t: 'turn on roaming', d: <><b>Roaming</b> on for cielocell. needed even at home.</> },
      { t: 'check the apn', d: <><Path items={['Network & internet', 'SIMs', 'CieloCell', 'Access Point Names']} /> — <b>globaldata</b> selected? done. if not, add it, save it, select it.</> },
      { t: 'try a web page', d: <>wi-fi off for a moment, load a new page.</> }]
  }
};

// ── iPhone ──
const IOS_INSTALL = { id: 'install', short: 'install', title: 'install the esim', sub: 'saves the esim on your phone. it doesn\'t use any data yet.',
  steps: [
    { title: 'tap Install (or Activate eSIM) in the app', body: <>open cielocell on this iphone. tap <b>Install</b> on home — or <b>Activate eSIM</b> if your app shows the congrats screen. got our setup email instead? tap the install button in it.</>, shot: 'app', cap: 'the congrats screen in the app. Activate eSIM starts the install.' },
    { title: 'if your iphone asks for permission, tap Activate', body: <>your iphone shares its EID with the network to download the esim. that's normal and takes a second.</> },
    { title: 'on Activate eSIM, tap Continue', body: <>the provider shows as <b>Connect</b> — that's cielocell. stay on wi-fi and keep the screen open. it can take a few minutes.</>, shot: 'iosContinue', cap: '"Connect" is your cielocell esim.' }],
  more: [
    { title: 'install with a QR code instead', body: <><Path items={['Settings', 'Cellular', 'Add eSIM']} /> then <b>Use QR Code</b> (or <b>Scan QR Code</b>). scan your private cielocell QR code from another screen or a printout. skip the transfer options — those move a different sim.</>, shot: 'iosAdd', cap: 'pick Use QR Code.' },
    { title: 'only have this one phone?', body: <>on iphones with ios 17.4 or later, touch and hold the QR code in your email or browser and choose <b>Add eSIM</b>. don't see it? use the install button, or the manual details below.</> },
    { title: 'enter the details manually', body: <><Path items={['Settings', 'Cellular', 'Add eSIM', 'Use QR Code', 'Enter Details Manually']} />. your setup details include an <b>SM-DP+ Address</b> (looks like a web address) and an <b>Activation Code</b> (a long mix of letters and numbers). each goes in its own field — don't paste the whole line into Activation Code. <b>Confirmation Code</b> only if we gave you one. tap <b>Next</b> and finish the prompts.</> }]
};
const IOS_PROMPTS = { id: 'prompts', short: 'questions', title: 'answer your iphone\'s questions', sub: 'some ios versions ask these after installing. don\'t see them? skip to step 3.',
  steps: [
    { title: 'Home or Abroad', body: <>choose <b>Home</b> if you're in the country where you live. choose <b>Abroad</b> if you're visiting another country. either way, data roaming still needs to be on — that's step 3.</>, shot: 'iosWhere', cap: 'Home is selected here. a visitor picks Abroad.' },
    { title: 'Data Only', body: <>cielocell gives you internet — no new number, calls or texts. never pick Voice and Data.</>, shot: 'iosPlan', cap: 'always Data Only.' },
    { title: 'Travel eSIM and Current SIM', body: <>keeps your usual line on for calls and texts while cielocell handles data. <b>Travel eSIM Only</b> switches your other lines off instead. abroad, your usual carrier may still charge for calls or texts — turn <b>Data Roaming</b> off for that line if you want data to stay on cielocell.</>, shot: 'iosLines', cap: 'keep your usual sim on.' },
    { title: 'Low Data Mode — your call', body: <><b>Turn On Low Data Mode</b> pauses background updates to stretch your data. <b>Not Now</b> keeps things as they are. cielocell connects either way.</>, shot: 'iosLow', cap: 'optional.' }]
};
const IOS_CONNECT = { id: 'connect', short: 'connect', title: 'get connected', sub: 'the two settings that make data flow.',
  steps: [
    { hot: true, title: 'turn on the line and Data Roaming', body: <><Path items={['Settings', 'Cellular']} /> → tap your cielocell line — it's called <b>Connect</b> or <b>Travel - Connect</b>. switch on <b>Turn On This Line</b> and <b>Data Roaming</b>. yes, even at home: without roaming, cielocell can't reach its partner networks.</>, shot: 'iosLine', cap: 'both switches on. green means on.' },
    { title: 'choose cielocell for data', body: <>back in <b>Cellular</b>, tap <b>Cellular Data</b> and select your cielocell line. turn off <b>Allow Cellular Data Switching</b> so data stays on the line you chose and never quietly uses your other sim.</>, shot: 'iosData', cap: 'Travel - Connect selected, switching off.' },
    { title: 'give it a moment', body: <>leave <b>Network Selection</b> on <b>Automatic</b>. a first connection can take a few minutes. tip: rename the line to cielocell under <b>Cellular Plan Label</b> so it's easy to spot.</> }],
  more: [
    { title: 'still offline? check the apn', body: <>cielocell's apn is <Apn /> — it normally sets itself on iphone. to check: <Path items={['Settings', 'Cellular', 'CieloCell', 'Cellular Data Network']} />. under <b>Cellular Data</b>, APN should read <b>globaldata</b>; leave Username and Password blank. can't see this menu? if your data works, there's nothing to change. if not, contact us.</>, shot: 'iosApn', cap: 'globaldata, lowercase. nothing else.' }]
};
const IOS_MANAGE = { id: 'manage', short: 'manage', title: 'manage your esim', sub: 'switch, pause, remove or reinstall — without starting over.', numbered: false,
  steps: [
    { title: 'use cielocell for data', body: <><Path items={['Settings', 'Cellular', 'Cellular Data']} /> → select your cielocell line.</>, shot: 'iosData', cap: 'tap the line you want to use.' },
    { title: 'go back to your usual data', body: <>same place — choose <b>Primary</b>, or the name of your usual sim. you don't need to delete cielocell.</> },
    { title: 'both sims on at once?', body: <>yes, on supported phones. keep your usual number for calls and texts and pick one line for data — the two allowances don't merge. <b>Allow Cellular Data Switching</b> lets your iphone jump between lines by itself: leave it off if you want data to stay on cielocell. on some phones, data pauses during a call on the other line.</> },
    { title: 'turn it off for a while', body: <><Path items={['Settings', 'Cellular', 'CieloCell']} /> → switch <b>Turn On This Line</b> off. it stays installed. when you're back, switch it on and reselect it for data.</> },
    { title: 'remove it from this phone', body: <>only if you mean to. <Path items={['Settings', 'Cellular', 'CieloCell']} /> → <b>Delete eSIM</b>. this disconnects cielocell on this phone — it doesn't cancel your account or pause a plan's dates.</> },
    { title: 'reinstall on the same phone', body: <>you can. connect to wi-fi and use your installation details again, or <b>Reinstall</b> in the app if you see it. changed phones? this esim can't move — contact us.</> },
    { title: 'need more data?', body: <>add a plan in the app. your esim stays exactly as it is.</> }]
};

// ── Samsung ──
const APP_STEP_ANDROID = { title: 'tap Install (or Activate eSIM) in the app', body: <>open cielocell on this phone and tap the install button — or use the one in your setup email. when your phone asks to add the esim, confirm. stay on wi-fi.</>, shot: 'app', cap: 'the congrats screen in the app. Activate eSIM starts the install.' };
const SAM_INSTALL = { id: 'install', short: 'install', title: 'install the esim', sub: 'from the app, or with your QR code.',
  steps: [
    APP_STEP_ANDROID,
    { title: 'no button? open SIM manager', body: <><Path items={['Settings', 'Connections', 'SIM manager']} /> → tap <b>Add eSIM</b>.</>, shot: 'samAdd', cap: 'Add eSIM.' },
    { title: 'tap Scan QR code', body: <>not a transfer option — those move an existing line from another phone.</>, shot: 'samQr', cap: 'Scan QR code.' },
    { title: 'scan your cielocell QR code', body: <>point the camera at the QR code on another screen or a printout. same phone only? tap the gallery icon to pick a saved image of it, or <b>Enter activation code</b> and paste your code. confirm <b>Add</b> (or <b>Download</b>) and wait.</>, shot: 'samScan', cap: 'gallery icon bottom right. Enter activation code under the frame.' }],
  more: [
    { title: 'enter the activation code manually', body: <><Path items={['Settings', 'Connections', 'SIM manager', 'Add eSIM', 'Scan QR code', 'Enter activation code']} />. paste the complete code from your setup details, including <b>LPA:1$</b> if it's there. <b>Done</b> or <b>Next</b>, then <b>Add</b> or <b>Download</b>.<br /><br />two different codes: your <b>installation code</b> downloads your private esim. <b>globaldata</b> is the apn — a shared data setting you check in step 3. they go in different places.</> },
    { title: 'after the download', body: <>back in <b>SIM manager</b> your new line may be called <b>Connect</b>. tap it to rename it cielocell so it's easy to spot. restart only if your phone asks you to.</> }]
};
const SAM_DATALINE = { id: 'dataline', short: 'data line', title: 'choose your data line', sub: 'keep your number, send data through cielocell.',
  steps: [
    { title: 'in SIM manager, switch cielocell on', body: <><Path items={['Settings', 'Connections', 'SIM manager']} /> → under <b>eSIMs</b>, switch cielocell on.</> },
    { title: 'Mobile data → cielocell. Calls and Messages → your usual sim', body: <>under <b>Preferred SIMs</b>. then turn off <b>Data switching and backup calling</b> (or <b>Auto data switching</b>) if you see it, so data stays on cielocell.</>, shot: 'samSim', cap: 'cielocell on · Mobile data → CieloCell · switching off.' },
    { title: 'see Primary SIM instead?', body: <>some us galaxy phones show one <b>Primary SIM</b> selector. choose cielocell there to use its data. it can also change call and text defaults — pick your usual sim in the Phone and Messages apps when they offer a choice. cielocell can't make regular calls or send sms.</>, shot: 'samPrimary', cap: 'the Primary SIM menu on us models.' }]
};
const SAM_CONNECT = { id: 'connect', short: 'connect', title: 'get connected', sub: 'roaming on, apn checked. that\'s what makes data flow.',
  steps: [
    { hot: true, title: 'turn on Data roaming for cielocell', body: <><Path items={['Settings', 'Connections', 'Mobile networks']} />. if there's a sim selector, make sure cielocell is selected. switch <b>Data roaming</b> on. your phone shows a general roaming warning — expected. cielocell needs roaming to reach its partner networks, even at home, and usage comes from your cielocell plan.</>, shot: 'samRoam', cap: 'Data roaming on. leave the other switches as they are.' },
    { title: 'check the apn: globaldata', body: <>on the same screen, tap <b>Access Point Names</b> for the cielocell sim. an entry with apn <Apn /> selected? you're done here.</>, shot: 'apnPick', cap: 'this is what "done" looks like: filled circle, globaldata.' },
    { title: 'missing? add it', body: <>tap <b>+</b> or <b>Add</b>. <b>Name:</b> CieloCell · <b>APN:</b> globaldata. leave every other field as it is — no username or password. tap <b>Save</b>, at the bottom or in the <b>⋮</b> menu.</>, shot: 'apnEdit', cap: 'only Name and APN change.' },
    { title: 'then select it', body: <>back on the list, tap the circle next to CieloCell so it's filled — saving alone isn't enough. no connection yet? airplane mode on for 10 seconds, then off.</> }]
};
const SAM_MANAGE = { id: 'manage', short: 'manage', title: 'manage your esim', sub: 'switch, pause, remove or reinstall — without starting over.', numbered: false,
  steps: [
    { title: 'use cielocell for data', body: <><Path items={['Settings', 'Connections', 'SIM manager']} /> → <b>Mobile data</b> (or <b>Primary SIM</b>) → cielocell.</>, shot: 'samSim', cap: 'Mobile data → CieloCell.' },
    { title: 'go back to your usual data', body: <>same place — choose <b>Primary</b>, or the name of your usual sim. no need to remove cielocell.</> },
    { title: 'both sims on at once?', body: <>yes. keep your usual number for calls and texts and pick one line for data — the allowances don't merge. <b>Data switching and backup calling</b> lets your phone jump between lines by itself: leave it off if you want data to stay on cielocell.</> },
    { title: 'turn it off for a while', body: <><Path items={['Settings', 'Connections', 'SIM manager']} /> → switch cielocell off. it stays installed. switch it on and reselect it for data when you're back.</> },
    { title: 'remove it from this phone', body: <>only if you mean to. <Path items={['Settings', 'Connections', 'SIM manager', 'CieloCell']} /> → switch it off, then <b>Remove</b>. this disconnects cielocell on this phone — it doesn't cancel your account or pause a plan's dates.</> },
    { title: 'reinstall on the same phone', body: <>you can. connect to wi-fi and use your installation details again, or <b>Reinstall</b> in the app if you see it. changed phones? this esim can't move — contact us.</> },
    { title: 'need more data?', body: <>add a plan in the app. your esim stays exactly as it is.</> }]
};

// ── Google Pixel ──
const PIX_INSTALL = { id: 'install', short: 'install', title: 'install the esim', sub: 'from the app, or with your QR code.',
  steps: [
    APP_STEP_ANDROID,
    { title: 'no button? add a sim in settings', body: <><Path items={['Settings', 'Network & internet', 'SIMs', 'Add SIM']} /> → <b>Set up an eSIM</b>. older versions may say <b>Download a SIM instead?</b> or show a <b>+</b> button.</>, shot: 'pixSetup', cap: 'Set up an eSIM.' },
    { title: 'scan your cielocell QR code', body: <>point the camera at the QR code on another screen or a printout. same phone only? tap <b>Scan from photo</b> if you see it, or <b>Try these troubleshooting steps</b> → <b>Enter activation code</b> and paste your code. follow the prompts and wait for the download.</>, shot: 'pixQr', cap: 'Scan from photo, when offered.' }],
  more: [
    { title: 'enter the activation code manually', body: <>from the scanner, tap <b>Need help?</b> or <b>Try these troubleshooting steps</b>, then <b>Enter activation code</b>. paste the complete code from your setup details, including <b>LPA:1$</b> if it's there.<br /><br />two different codes: your <b>installation code</b> downloads your private esim. <b>globaldata</b> is the apn — a data setting you check in step 3.</> }]
};
const PIX_DATALINE = { id: 'dataline', short: 'data line', title: 'choose your data line', sub: 'keep your number, send data through cielocell.',
  steps: [
    { title: 'turn on Use SIM for cielocell', body: <><Path items={['Settings', 'Network & internet', 'SIMs', 'CieloCell']} /> → <b>Use SIM</b> on. your new line may be called <b>Connect</b> — tap the pencil to rename it.</> },
    { title: 'Mobile data → cielocell. Calls and Texts → your usual sim', body: <>under <b>SIM preferences</b>. leave <b>Automatic data switching</b> (or <b>Automatically switch mobile data</b>) off so data stays on cielocell.</> }]
};
const PIX_CONNECT = { id: 'connect', short: 'connect', title: 'get connected', sub: 'roaming on, apn checked. that\'s what makes data flow.',
  steps: [
    { hot: true, title: 'turn on Roaming for cielocell', body: <><Path items={['Settings', 'Network & internet', 'SIMs', 'CieloCell']} /> → <b>Roaming</b> on. yes, even at home: cielocell needs roaming to reach its partner networks. usage comes from your cielocell plan.</> },
    { title: 'check the apn: globaldata', body: <><Path items={['Settings', 'Network & internet', 'SIMs', 'CieloCell', 'Access Point Names']} />. an entry with apn <Apn /> selected? done. missing? tap <b>+</b>: <b>Name</b> CieloCell, <b>APN</b> globaldata, save from the <b>⋮</b> menu, then tap the circle to select it. no connection yet? airplane mode on for 10 seconds, then off.</> }]
};
const PIX_MANAGE = { id: 'manage', short: 'manage', title: 'manage your esim', sub: 'switch, pause, remove or reinstall — without starting over.', numbered: false,
  steps: [
    { title: 'use cielocell for data', body: <><Path items={['Settings', 'Network & internet', 'SIMs', 'CieloCell']} /> → <b>Mobile data</b> on.</> },
    { title: 'go back to your usual data', body: <>open your usual sim in the same list and turn <b>Mobile data</b> on there instead. no need to erase cielocell.</> },
    { title: 'both sims on at once?', body: <>yes. keep your usual number for calls and texts and pick one line for data — the allowances don't merge. <b>Automatic data switching</b> lets your phone jump between lines by itself: leave it off if you want data to stay on cielocell.</> },
    { title: 'turn it off for a while', body: <><Path items={['Settings', 'Network & internet', 'SIMs', 'CieloCell']} /> → <b>Use SIM</b> off. it stays installed. switch it on and reselect it for data when you're back.</> },
    { title: 'remove it from this phone', body: <>only if you mean to. <Path items={['Settings', 'Network & internet', 'SIMs', 'CieloCell']} /> → <b>Erase eSIM</b>. on some pixels, <b>Mobile network</b> replaces SIMs in this path. read the confirmation and remove only the cielocell profile. it doesn't cancel your account or pause a plan's dates.</> },
    { title: 'reinstall on the same phone', body: <>you can. connect to wi-fi and use your installation details again, or <b>Reinstall</b> in the app if you see it. changed phones? this esim can't move — contact us.</> },
    { title: 'need more data?', body: <>add a plan in the app. your esim stays exactly as it is.</> }]
};

const CHECK = { id: 'check', short: 'check', title: 'check your connection', sub: 'one small test. it uses a little data.',
  body: <>make sure cielocell is selected for data, roaming is on and data switching is off. now turn <b>wi-fi off</b> for a moment and load a new web page. you can turn wi-fi back on after.</>,
  yes: { title: 'you\'re ready to go.', body: 'keep your esim installed. when you need more data, add a plan in cielocell — nothing to reinstall.' },
  no: { title: 'let\'s check a few settings.', body: 'make sure cielocell is selected for data, roaming is on, and your plan covers where you are right now.' },
  note: 'setting up ahead of a trip? you can finish later — your plan\'s start and end dates are in the app.'
};

const FIX = {
  iphone: [
    { q: 'i can\'t install the esim', a: <>check your internet, and that the phone is esim-ready and unlocked. look in <Path items={['Settings', 'Cellular']} /> first — the esim may already be there. if so, jump to <b>get connected</b>. if not, try the QR or manual method. code rejected? send us the exact error.</> },
    { q: 'i have no signal', a: <>is the cielocell line on? does your plan cover where you are? airplane mode on for 10 seconds, then off. still nothing — restart the phone. leave <b>Network Selection</b> on <b>Automatic</b>; a first connection can take a while.</> },
    { q: 'i have bars or 5g, but no internet', a: <>in this order: a usable plan · cielocell selected for data · <b>Data Roaming</b> on · apn <b>globaldata</b>. then wi-fi off and try a web page.</> },
    { q: 'it worked, then stopped', a: <>check remaining data and expiry first, then coverage, roaming and apn — recheck the apn after a software update or a new country. don't delete the esim as a first fix.</> }],
  samsung: [
    { q: 'i can\'t install the esim', a: <>check your internet, and that the phone is esim-ready and unlocked. look in <b>SIM manager</b> first — the esim may already be there. if so, jump to <b>choose your data line</b>. if not, try the QR or manual method. code rejected? send us the exact error.</> },
    { q: 'i have no signal', a: <>is cielocell switched on in <b>SIM manager</b>? does your plan cover where you are? airplane mode on for 10 seconds, then off. still nothing — restart the phone. keep <b>Network operators</b> on automatic; a first connection can take a while.</> },
    { q: 'i have bars or 5g, but no internet', a: <>in this order: a usable plan · cielocell selected for data · <b>Data roaming</b> on · apn <b>globaldata</b> saved <i>and</i> selected. then wi-fi off and try a web page.</> },
    { q: 'it worked, then stopped', a: <>check remaining data and expiry first, then coverage, roaming and apn — recheck the apn after a software update or a new country. don't remove the esim as a first fix.</> }],
  pixel: [
    { q: 'i can\'t install the esim', a: <>check your internet, and that the phone is esim-ready and unlocked. look in <Path items={['Settings', 'Network & internet', 'SIMs']} /> first — the esim may already be there. if so, jump to <b>choose your data line</b>. if not, try the QR or manual method. code rejected? send us the exact error.</> },
    { q: 'i have no signal', a: <>is <b>Use SIM</b> on for cielocell? does your plan cover where you are? airplane mode on for 10 seconds, then off. still nothing — restart the phone. keep network selection automatic; a first connection can take a while.</> },
    { q: 'i have bars or 5g, but no internet', a: <>in this order: a usable plan · cielocell selected for data · <b>Roaming</b> on · apn <b>globaldata</b> saved <i>and</i> selected. then wi-fi off and try a web page.</> },
    { q: 'it worked, then stopped', a: <>check remaining data and expiry first, then coverage, roaming and apn — recheck the apn after a software update or a new country. don't erase the esim as a first fix.</> }]
};

const SECTIONS = {
  iphone:  [IOS_INSTALL, IOS_PROMPTS, IOS_CONNECT, CHECK, IOS_MANAGE],
  samsung: [SAM_INSTALL, SAM_DATALINE, SAM_CONNECT, CHECK, SAM_MANAGE],
  pixel:   [PIX_INSTALL, PIX_DATALINE, PIX_CONNECT, CHECK, PIX_MANAGE]
};

const GUIDE = { SHOT, PRE, SHORT, SECTIONS, CHECK, FIX };
Object.assign(window, { Path, Apn, GUIDE });