// CieloCell — Help / Support page (V2 brand)
const HelpPage = ({ onBack, onNav }) => {
  const D = CC.display;
  const F = CC.font;
  const [openFaq, setOpenFaq] = React.useState(0);

  // Same FAQs as the landing page home. `slug` enables deep links like /help/roaming.
  const faqs = [
  { slug: 'compatible', q: 'is my phone compatible?', a: "most modern smartphones support esim. dial *#06# — if you see an eid number, your phone likely supports esim. your phone also needs to be carrier-unlocked." },
  { slug: 'free', q: 'is it actually free?', a: "yes. you can earn free data by watching ads, completing offers, or collecting points in the app. you can also buy data if you want more, faster." },
  { slug: 'credit-card', q: 'do i need a credit card?', a: "no. you can start earning data without a credit card. paid options are available if you want to buy a data pack or skip the ads." },
  { slug: 'connect', q: 'how do i get connected?', a: "download the app, choose how you want to start, get your esim, and turn it on. that's it." },
  { slug: 'roaming', q: 'why do i need to enable roaming?', a: (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <p style={{ margin: 0 }}>cielocell uses a travel esim. to connect to local mobile networks, <b>data roaming</b> must be turned <b>on</b> for your cielocell esim. this lets the esim use mobile data in the country where you're connected.</p>
      <p style={{ margin: 0 }}>to avoid unexpected charges from your normal mobile provider, make sure cielocell is selected for mobile data and keep data roaming <b>off</b> on your personal sim — unless you intentionally want to use it.</p>
      <div>
        <div style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 15, marginBottom: 8 }}>iphone / ios</div>
        <ol style={{ margin: 0, paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 4 }}>
          <li>open <b>settings</b></li>
          <li>tap <b>cellular</b> or <b>mobile data</b></li>
          <li>select your cielocell esim</li>
          <li>turn <b>on</b> data roaming</li>
          <li>go back to cellular data / mobile data and select cielocell as the data line</li>
        </ol>
      </div>
      <div>
        <div style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 15, marginBottom: 8 }}>android</div>
        <p style={{ margin: '0 0 8px' }}>the exact menu can vary by phone brand. for many android phones:</p>
        <ol style={{ margin: 0, paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 4 }}>
          <li>open <b>settings</b></li>
          <li>go to <b>network &amp; internet</b> or <b>connections</b></li>
          <li>tap <b>sims</b>, <b>sim manager</b>, or <b>mobile network</b></li>
          <li>select your cielocell esim</li>
          <li>turn <b>on</b> mobile data</li>
          <li>turn <b>on</b> data roaming</li>
        </ol>
        <p style={{ margin: '10px 0 0' }}>for samsung phones, this is usually:<br />settings → connections → sim manager / mobile networks → data roaming <b>on</b></p>
      </div>
    </div>
  ) },
  { slug: 'disabled-esim', q: 'why does my esim show as disabled or off?', a: (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <p style={{ margin: 0 }}>your esim can be installed correctly but still be turned off in your phone settings. if the cielocell esim is disabled, your phone can't use it for mobile data.</p>
      <p style={{ margin: 0 }}><b>do not delete the esim to fix this.</b> first, check that the esim is turned on and selected for mobile data.</p>
      <div>
        <div style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 15, marginBottom: 8 }}>iphone / ios</div>
        <ol style={{ margin: 0, paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 4 }}>
          <li>open <b>settings</b></li>
          <li>tap <b>cellular</b> or <b>mobile data</b></li>
          <li>select your cielocell esim</li>
          <li>turn <b>on</b> turn on this line</li>
          <li>go to cellular data / mobile data</li>
          <li>select cielocell as the line for mobile data</li>
        </ol>
      </div>
      <div>
        <div style={{ fontFamily: CC.display, fontWeight: 900, fontSize: 15, marginBottom: 8 }}>android</div>
        <ol style={{ margin: 0, paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 4 }}>
          <li>open <b>settings</b></li>
          <li>go to <b>network &amp; internet</b>, <b>connections</b>, or <b>sim manager</b></li>
          <li>select your cielocell esim</li>
          <li>turn <b>on</b> the esim / use this sim</li>
          <li>select cielocell for mobile data</li>
          <li>make sure data roaming is <b>on</b> for the cielocell esim</li>
        </ol>
      </div>
    </div>
  ) },
  { slug: 'location', q: 'how does cielocell know where i am?', a: "cielocell detects your current region and shows the data options available there. in some cases, you may be able to choose a broader region." },
  { slug: 'number', q: 'do i keep my regular number?', a: "yes. cielocell gives you mobile data through an esim. your regular sim and phone number can stay active." },
  { slug: 'coverage', q: 'how does coverage work?', a: "cielocell connects through partner mobile networks. coverage depends on your location, device, and local network availability." }];

  // Deep link support: /help/roaming, ?topic=roaming, or #roaming opens + scrolls
  // to the matching FAQ so the answer is readable immediately.
  React.useEffect(() => {
    let target = '';
    try {
      const params = new URLSearchParams(window.location.search);
      target = (params.get('topic') || '').toLowerCase();
      if (!target) {
        const seg = (window.location.pathname.split('/').filter(Boolean).pop() || '').toLowerCase();
        if (seg && seg !== 'help' && seg.indexOf('help.htm') !== 0) target = seg;
      }
      if (!target && window.location.hash) target = window.location.hash.slice(1).toLowerCase();
    } catch (e) {}
    if (!target) return;
    const idx = faqs.findIndex((f) => f.slug === target);
    if (idx < 0) return;
    setOpenFaq(idx);
    // Wait for the panel to expand before measuring, so we land on the question.
    const jump = () => {
      const el = document.getElementById('faq-' + target);
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 16, behavior: 'auto' });
    };
    setTimeout(jump, 250);
    setTimeout(jump, 600);
  }, []);

  return (
    <div style={{ background: CC.cream, color: CC.ink, fontFamily: F, minHeight: '100vh' }}>

      {/* NAV — same as landing / legal */}
      {!CC.appMode &&
      <nav data-cc-chrome="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 28px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <a href="index.html" onClick={(e) => { e.preventDefault(); onBack(); }} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'none', border: 'none', cursor: 'pointer', padding: 0, 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="index.html" onClick={(e) => { e.preventDefault(); onBack(); }} style={{ background: CC.ink, color: CC.cream, border: 'none', borderRadius: 999, padding: '10px 18px', fontFamily: F, fontSize: 13, fontWeight: 700, cursor: 'pointer', textTransform: 'lowercase', display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none' }}>
            ← back
          </a>
        </div>
      </nav>
      }

      {/* HERO */}
      <section style={{ padding: 'clamp(56px, 8vw, 96px) 28px clamp(40px, 6vw, 72px)', background: CC.pinkSoft, borderBottom: `1.5px solid ${CC.ink}` }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <h1 style={{ fontFamily: D, fontWeight: 900, fontSize: 'clamp(44px, 8vw, 104px)', lineHeight: 0.92, letterSpacing: -0.04 + 'em', margin: 0, textTransform: 'lowercase', color: CC.ink, maxWidth: '12ch', overflowWrap: 'break-word' }}>
            need a hand?<br /><span style={{ color: CC.pink }}>we've got you.</span>
          </h1>
          <p style={{ fontFamily: F, fontSize: 'clamp(16px, 1.6vw, 21px)', fontWeight: 500, color: CC.ink, opacity: 0.78, margin: 'clamp(20px, 2.5vw, 32px) 0 0', textTransform: 'lowercase', maxWidth: '50ch' }}>
            stuck on something or have a question we haven't answered? click the support icon and our agent will get you sorted.
          </p>
        </div>
      </section>

      {/* FAQ — same as landing home */}
      <section id="faq" style={{ padding: 'clamp(48px, 7vw, 96px) 28px clamp(64px, 8vw, 120px)', background: CC.cream }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          <h2 style={{ fontFamily: D, fontWeight: 900, fontSize: 'clamp(40px, 7vw, 96px)', lineHeight: 0.95, letterSpacing: -0.04 + 'em', margin: '0 0 clamp(32px, 5vw, 56px)', textTransform: 'lowercase', color: CC.ink }}>
            ask us <span style={{ color: CC.pink }}>anything.</span>
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {faqs.map(({ slug, q, a }, i) => {
              const open = openFaq === i;
              return (
                <details key={q} id={'faq-' + slug} 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(); setOpenFaq(open ? null : i); }} 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: D, fontSize: 18, fontWeight: 900, color: CC.ink, textTransform: 'lowercase', letterSpacing: -0.3 }}>
                    <span>{q}</span>
                    <span 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: F, fontSize: 15, color: CC.ink, lineHeight: 1.6, opacity: 0.85 }}>
                      {a}
                    </div>
                </details>);

            })}
          </div>
        </div>
      </section>

      {/* CTA strip */}
      <section style={{ padding: 'clamp(48px, 6vw, 80px) 28px', 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, textTransform: 'lowercase', letterSpacing: -0.04 + 'em', 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={{ background: CC.lime, color: CC.ink, border: 'none', borderRadius: 999, padding: '14px 22px', fontFamily: F, fontSize: 14, fontWeight: 700, textTransform: 'lowercase', whiteSpace: 'nowrap', cursor: 'pointer' }}>chat with us →</button>
            <a href="mailto:support@cielocell.com" style={{ background: CC.pink, color: CC.ink, border: 'none', borderRadius: 999, padding: '14px 22px', fontFamily: F, fontSize: 14, fontWeight: 700, textDecoration: 'none', textTransform: 'lowercase', whiteSpace: 'nowrap' }}>support@cielocell.com →</a>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      {!CC.appMode &&
      <footer data-cc-chrome="1" style={{ padding: '48px 28px 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, background: 'none', border: 'none', cursor: 'pointer', padding: 0, 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={{ background: 'none', border: 'none', fontFamily: F, fontSize: 13, color: CC.ink, fontWeight: 500, cursor: 'pointer', padding: '6px 10px', textTransform: 'lowercase', textDecoration: 'none' }}>terms</a>
            <a href="privacy.html" onClick={(e) => { e.preventDefault(); onNav && onNav('privacy'); }} style={{ background: 'none', border: 'none', fontFamily: F, fontSize: 13, color: CC.ink, fontWeight: 500, cursor: 'pointer', padding: '6px 10px', textTransform: 'lowercase', textDecoration: 'none' }}>privacy</a>
            <a href="help.html" onClick={(e) => { e.preventDefault(); onNav && onNav('support'); }} style={{ background: 'none', border: 'none', fontFamily: F, fontSize: 13, color: CC.ink, fontWeight: 500, cursor: 'pointer', padding: '6px 10px', textTransform: 'lowercase', 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', textTransform: 'lowercase' }}>contact</a>
          </div>
          <div style={{ fontFamily: F, fontSize: 12, color: CC.inkMuted, textTransform: 'lowercase' }}>© 2026

          </div>
        </div>
      </footer>
      }

    </div>);

};

Object.assign(window, { HelpPage });
