// For Parents page — Ciao Bella
// Hub for parents: how it works, the parent app, safety, FAQ

function ForParentsPage({ navigate, currentRoute = '/for-parents' }) {
  return (
    <main className="forparents-page" style={{ position: 'relative' }}>
      {/* ── Page hero ─────────────────────────────────────── */}
      <section className="fp-hero">
        <div className="container">
          <div className="fp-hero-inner">
            <Pill>For parents</Pill>
            <h1 className="fp-hero-title">
              The phone <em>you</em> can trust.<br/>
              The phone they love to answer.
            </h1>
            <p className="fp-hero-sub">
              Everything you need to know — how Ciao Bella sets up, the app you&apos;ll use to
              manage it, the way we keep your child&apos;s line private, and the questions every
              parent asks before they hit reserve.
            </p>
          </div>
        </div>
      </section>

      <SectionDivider color="blue" />

      {/* ── How It Works — 5-step journey weaves the parent app in ─── */}
      <div id="how"><HowItWorks navigate={navigate} /></div>

      <SectionDivider color="yellow" />

      {/* ── Safety & privacy ─────────────────────────────── */}
      <section id="safety" className="section fp-safety">
        <div className="container" style={{ position: 'relative' }}>
          <div className="section-head-wrap">
            <EyebrowRow eyebrow="Safety &amp; privacy" />
            <SectionHeading underlineWord="for parents">Built by parents, for parents.</SectionHeading>
            <p className="fp-section-sub">
              No SIM card. No GPS tracker. No public number to share. Ciao Bella is built
              from the ground up to keep your child&apos;s line small, private, and yours.
            </p>
          </div>

          <div className="fp-safety-grid">
            <div className="fp-safety-card">
              <span className="fp-safety-num">01</span>
              <h3>Whitelist-only contacts</h3>
              <p>
                Only people you&apos;ve approved in the parent app can ring through. Everyone
                else? Not a chance. No telemarketers, no scammers, no unknown numbers.
              </p>
            </div>

            <div className="fp-safety-card">
              <span className="fp-safety-num">02</span>
              <h3>No screen, no internet</h3>
              <p>
                It&apos;s a phone. That&apos;s it. There&apos;s no browser, no app store, no notifications,
                no algorithm trying to keep them hooked. Pick up, talk, hang up.
              </p>
            </div>

            <div className="fp-safety-card">
              <span className="fp-safety-num">03</span>
              <h3>Quiet hours, on your terms</h3>
              <p>
                Set a do-not-disturb window so calls don&apos;t come through during dinner, school
                or bedtime. Emergency contacts can still get through if you want them to.
              </p>
            </div>

            <div className="fp-safety-card">
              <span className="fp-safety-num">04</span>
              <h3>A private number, kept private</h3>
              <p>
                Your child gets their own Ciao Bella number. We never publish it, sell it,
                or use it for anything except the calls you approve.
              </p>
            </div>

            <div className="fp-safety-card">
              <span className="fp-safety-num">05</span>
              <h3>Lives at home, stays at home</h3>
              <p>
                Plugs into your home internet. Doesn&apos;t leave the house. No location data,
                no tracking, nothing for a stranger to ping or follow.
              </p>
            </div>

            <div className="fp-safety-card">
              <span className="fp-safety-num">06</span>
              <h3>000 always works</h3>
              <p>
                Emergency services are reachable from every Ciao Bella, regardless of your
                contact list settings. Always.
              </p>
            </div>
          </div>
        </div>
      </section>

      <SectionDivider color="red" />

      {/* ── FAQ (relocated from home) ────────────────────── */}
      <div id="faq"><FAQ /></div>

      {/* ── Closing CTA ──────────────────────────────────── */}
      <section className="section fp-close">
        <div className="container">
          <div className="fp-close-inner">
            <h2>
              Ready to <em>say ciao</em>?
            </h2>
            <p>Fully refundable until your phone ships. $25 today, balance later.</p>
            <CTA onClick={() => goToConfigurator(navigate, currentRoute)}>Reserve for $25</CTA>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ForParentsPage });