// CieloCell — shared FAQ copy for the homepage (F01–F14) and support page (F + S01–S20).
// Single source of truth so both pages show identical answers.
const GUIDE_URL = 'install-esim.html'; // resolves to https://www.cielocell.com/install-esim.html on the live site
const SUPPORT_EMAIL = 'support@cielocell.com';

const openSupportChat = () => { try { if (window.Ebbot && !window.Ebbot.isChatWindowOpened()) window.Ebbot.openChatWindow(); } catch (e) {} };

const GuideLink = ({ children = 'follow our installation guide' }) => <a href={GUIDE_URL} className="cc-link">{children}</a>;
const SupportMail = () => <a href={`mailto:${SUPPORT_EMAIL}`} className="cc-link">{SUPPORT_EMAIL}</a>;
const ChatLink = () => <button type="button" className="cc-link cc-link-btn" onClick={openSupportChat}>chat with us</button>;

const EARN_NOTE = '*earning options and their availability can vary by country and over time. check the app for what is currently available to you.';

const P = ({ children }) => <p style={{ margin: 0 }}>{children}</p>;
const OL = ({ items }) => <ol style={{ margin: 0, paddingLeft: 22, display: 'flex', flexDirection: 'column', gap: 4 }}>{items.map((it, i) => <li key={i}>{it}</li>)}</ol>;
const Sub = ({ children }) => <div style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 15, marginBottom: 8 }}>{children}</div>;
const Stack = ({ children }) => <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>{children}</div>;

const FAQ_F = {
  F01: { slug: 'free', q: 'is it actually free?', a: 'yes. earn points and exchange them for eligible data packs. getting started depends on your country: you may be able to watch ads, or there may be a one-off activation payment. the app shows your options before you continue.' },
  F02: { slug: 'earn', q: 'how do i earn free data?', a: (<Stack><P>watch ads or complete tasks to earn points, then exchange them for eligible data packs. the ads and tasks available to you are shown in the app.* you can also buy a pack whenever you need more data.</P><P><span style={{ fontSize: 14, opacity: 0.9 }}>{EARN_NOTE}</span></P></Stack>) },
  F03: { slug: 'speed', q: 'is free data as fast as paid data?', a: "yes. free and paid data use the same available network speeds. we don't cap your speed because your data is free. actual speeds depend on coverage, your phone and network conditions." },
  F04: { slug: 'unlimited', q: 'is free data unlimited?', a: 'each pack includes a set amount of data. when you need more, earn points for another eligible pack or buy one in the app. earning limits and availability may vary.' },
  F05: { slug: 'why-buy', q: 'why would i buy a data pack?', a: 'buying a pack gives you more data without spending time earning points. choose the pack that suits you and get back to what you were doing.' },
  F06: { slug: 'compatible', q: 'is my phone compatible?', a: 'your phone needs to support eSIM and be carrier-unlocked. dial *#06# and look for an EID number as a useful first check. compatibility can vary by model and regional version, so check your exact phone before getting a plan. your mobile provider can confirm whether it is unlocked.' },
  F07: { slug: 'credit-card', q: 'do i need a credit card?', a: 'you can earn points without a credit card. paid data packs and any paid activation option require payment. the app shows the options available in your country.' },
  F08: { slug: 'connect', q: 'how do i get connected?', a: (<>download the app, sign in and choose your first data pack. follow the steps to get and install your eSIM, turn it on, select CieloCell for mobile data and enable Data Roaming. need a hand? <GuideLink />.</>) },
  F09: { slug: 'install', q: 'how do i install my eSIM?', a: (<><GuideLink /> and use the installation button, QR code or manual details provided for your eSIM. use an internet connection during setup, and install it on the phone you want to use. once installed, turn it on, select CieloCell for mobile data and enable Data Roaming.</>) },
  F10: { slug: 'at-home', q: 'can i use CieloCell at home?', a: 'yes. use it for everyday data, as a backup connection or when travelling. just choose a pack that covers the country where you need data.' },
  F11: { slug: 'number', q: 'do i keep my regular number?', a: "yes. your regular SIM and phone number can stay active while CieloCell provides mobile data. you can keep using your existing WhatsApp account too. calls and SMS through your regular SIM remain subject to your provider's charges." },
  F12: { slug: 'calls-sms', q: 'does CieloCell include calls or SMS?', a: "CieloCell provides mobile data only. it doesn't include a phone number, ordinary calls or SMS. internet calling and messaging apps, such as WhatsApp, work using your data." },
  F13: { slug: 'coverage', q: 'how does coverage work?', a: "CieloCell connects through partner mobile networks. check that your pack covers the country where you need data. coverage and speeds depend on your location, phone and local network conditions. free earning options and paid packs can differ by country; the app shows what's available." },
  F14: { slug: 'location', q: 'how does CieloCell know where i am?', a: 'the app uses your current region to show available data options. before getting a pack, check that its country or region matches where you want to use it. available packs and earning options can vary by country.' },
};

const HOME_FAQ_ORDER = ['F01', 'F02', 'F03', 'F04', 'F05', 'F06', 'F07', 'F08', 'F09', 'F10', 'F11', 'F12', 'F13', 'F14'];
const HOME_FAQS = HOME_FAQ_ORDER.map((k) => FAQ_F[k]);

const FAQ_S = {
  S01: { slug: 'install-button', q: "what if the installation button doesn't work?", a: (<>try the QR code or manual installation details in your installation email. <GuideLink /> for help. if you can't find the email or still can't install your eSIM, contact support before deleting anything.</>) },
  S02: { slug: 'no-ads', q: 'why are there no ads available?', a: 'ad availability can vary by country and over time. check your internet connection and try again later. if you need data now, you can buy a pack in the app. contact support if the problem keeps happening.' },
  S03: { slug: 'greyed-out', q: 'why are some earning options greyed out?', a: "options marked “coming soon” haven't launched yet. that message doesn't mean your account is restricted. check the app for the earning options currently available to you." },
  S04: { slug: 'points-cost', q: 'how many points do i need for data?', a: 'each eligible pack shows its points cost in the app. the amount of data you can get depends on the pack and country, so check the current options before redeeming your points.' },
  S05: { slug: 'missing-points', q: "what if my points haven't appeared?", a: "check your points balance again. if you've completed an activity and the reward is still missing, contact support with the activity details and when you completed it so we can check." },
  S06: { slug: 'new-esim', q: 'do i need a new eSIM for every pack or country?', a: "no. new packs use your existing CieloCell eSIM on the same phone. choose a pack that covers the country where you need data; you don't need to reinstall your eSIM for each pack." },
  S07: { slug: 'data-runs-out', q: 'what happens when my data runs out?', a: "get another eligible pack using points, or purchase one in the app. there isn't an extra low-speed allowance after your pack runs out. your existing eSIM stays on your phone, ready for another pack." },
  S08: { slug: 'hotspot', q: 'can i share my data through a hotspot?', a: "yes. you can share your CieloCell data through your phone's hotspot feature. shared usage comes out of your pack's data allowance." },
  S09: { slug: 'new-phone', q: 'can i move my eSIM to a new phone?', a: "an existing CieloCell eSIM can't move to another phone, even if you delete it. contact support before switching phones. we can help arrange a replacement while keeping your existing account and points." },
  S10: { slug: 'deleted-esim', q: 'what if i delete my eSIM?', a: "it can only be reinstalled on the phone where it was first installed. deleting it doesn't make it transferable to another device. contact support if you need help reinstalling it." },
  S11: { slug: 'two-phones', q: 'can i use one account on two phones?', a: "each phone needs its own CieloCell account and eSIM. if you're replacing your phone and want to keep your existing account, contact support first." },
  S12: { slug: 'validity', q: 'how long does my data pack last?', a: 'each pack has its own validity period. check the details and expiry date shown in the app. unused data expires when the pack expires.' },
  S13: { slug: 'no-internet', q: "my eSIM is installed. why don't i have internet?", a: (
    <Stack>
      <P>start with these checks:</P>
      <OL items={[
        'you have an active pack that covers your current country.',
        "your pack has data remaining and hasn't expired.",
        'your CieloCell eSIM is turned on.',
        'CieloCell is selected for mobile data.',
        'Data Roaming is on for your CieloCell eSIM.']} />
      <P><GuideLink /> to check your setup. if you still can't connect, contact support with your phone model, country and a screenshot of the error or relevant settings. don't delete your eSIM to troubleshoot the connection.</P>
    </Stack>) },
  S14: { slug: 'roaming', q: 'why do i need to enable roaming?', a: (
    <Stack>
      <P>your CieloCell eSIM needs Data Roaming switched on to connect through our partner networks. select CieloCell for mobile data and keep data roaming off on your regular SIM when you don't want to use your provider's roaming service.</P>
      <div><Sub>iPhone</Sub><OL items={[
        <>open Settings → Cellular or Mobile Data.</>,
        <>select your CieloCell eSIM and turn on Data Roaming.</>,
        <>go back to Cellular Data or Mobile Data and select CieloCell.</>]} /></div>
      <div><Sub>Android</Sub><OL items={[
        <>open Settings → Network &amp; Internet or Connections.</>,
        <>open SIMs, SIM Manager or Mobile Networks and select your CieloCell eSIM.</>,
        <>enable the eSIM and Data Roaming, and select CieloCell for mobile data.</>]} /></div>
      <P>menus vary by phone and software version. <GuideLink /> for help with your setup.</P>
    </Stack>) },
  S15: { slug: 'disabled-esim', q: 'why does my eSIM show as disabled or off?', a: (
    <Stack>
      <P>your eSIM can be installed correctly but switched off in your phone settings. turn it on and select CieloCell for mobile data. don't delete it to fix this.</P>
      <div><Sub>iPhone</Sub><P>open Settings → Cellular or Mobile Data → your CieloCell eSIM → Turn On This Line. then select CieloCell for Cellular Data or Mobile Data and enable Data Roaming.</P></div>
      <div><Sub>Android</Sub><P>open Settings → Network &amp; Internet, Connections or SIM Manager. select your CieloCell eSIM, enable it, select it for mobile data and turn on Data Roaming. menus vary by phone.</P></div>
      <P>need a hand? <GuideLink />.</P>
    </Stack>) },
  S16: { slug: 'avoid-charges', q: 'how do i avoid charges from my regular SIM?', a: "select CieloCell for mobile data, keep data roaming off on your regular SIM and turn off automatic mobile data switching where your phone offers it. calls and SMS through your regular SIM can still incur your provider's charges. check with your provider, or switch that SIM off if you want to avoid using it while abroad." },
  S17: { slug: 'balance', q: "why hasn't my data balance updated?", a: 'your balance normally refreshes about every minute. pull down in the app to refresh it. a short reporting delay can happen between using data and seeing the updated balance.' },
  S18: { slug: 'account', q: 'how do i create an account?', a: 'use “Continue with Apple” or “Continue with Google”. separate email-and-password registration is coming soon.' },
  S19: { slug: 'refund', q: 'how do i request a refund?', a: (<>email <SupportMail /> with your purchase details and account email. our support team will check your purchase and explain the refund options that apply.</>) },
  S20: { slug: 'contact', q: 'how do i contact support?', a: (<><ChatLink /> or email <SupportMail />. include your account email, phone model, country and a short description of the problem. screenshots can help, but keep your eSIM QR code, activation details and passwords private.</>) },
};

const pick = (keys) => keys.map((k) => FAQ_F[k] || FAQ_S[k]);
const SUPPORT_FAQ_GROUPS = [
  { label: 'getting started', items: pick(['F06', 'F07', 'F08', 'F09', 'S01']) },
  { label: 'earning and getting data', items: pick(['F01', 'F02', 'F03', 'F04', 'F05', 'S02', 'S03', 'S04', 'S05']) },
  { label: 'using your eSIM', items: pick(['F10', 'F13', 'F14', 'F11', 'F12', 'S06', 'S07', 'S08', 'S09', 'S10', 'S11', 'S12']) },
  { label: 'connection help', items: pick(['S13', 'S14', 'S15', 'S16', 'S17']) },
  { label: 'your account and payments', items: pick(['S18', 'S19', 'S20']) },
];

// Shared accordion item — identical look on both pages. Native <details>/<summary> for keyboard + screen readers.
const FaqItem = ({ id, q, a, open, onToggle }) => (
  <details id={id} open={open} style={{ background: open ? CC.lime : CC.cream, border: `1.5px solid ${CC.ink}`, borderRadius: 22, overflow: 'hidden', transition: 'background 0.2s', scrollMarginTop: 16 }}>
    <summary onClick={(e) => { e.preventDefault(); onToggle(); }} aria-expanded={open} style={{ listStyle: 'none', boxSizing: 'border-box', width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '22px 26px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: CC.display, fontSize: 18, fontWeight: 900, color: CC.ink, textTransform: 'lowercase', letterSpacing: -0.3 }}>
      <span>{q}</span>
      <span aria-hidden="true" style={{ width: 32, height: 32, borderRadius: 999, background: CC.ink, color: CC.cream, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginLeft: 16, transform: open ? 'rotate(45deg)' : 'rotate(0deg)', transition: 'transform 0.22s' }}>
        <CCIcon.Plus size={16} color={CC.cream} strokeWidth={2.5} />
      </span>
    </summary>
    <div style={{ padding: '0 26px 24px', fontFamily: CC.font, fontSize: 15, color: CC.ink, lineHeight: 1.6, opacity: 0.85, overflowWrap: 'anywhere' }}>{a}</div>
  </details>
);

// Understated inline help link, used below the steps / FAQ. Same size as FAQ body copy.
const HelpLink = ({ href, children, onClick }) => (
  <a href={href} onClick={onClick} className="cc-link" style={{ fontFamily: CC.font, fontSize: 15, fontWeight: 700, color: CC.ink, textTransform: 'lowercase' }}>{children} →</a>
);

Object.assign(window, { GUIDE_URL, SUPPORT_EMAIL, openSupportChat, GuideLink, SupportMail, ChatLink, EARN_NOTE, FAQ_F, FAQ_S, HOME_FAQS, SUPPORT_FAQ_GROUPS, FaqItem, HelpLink });