// Subscriptions page — Ciao Bella
// Free vs Plus — framed as "Plus is more", not "Free is less"

function SubscriptionsPage({ navigate, currentRoute = '/subscriptions' }) {
  return (
    <main className="subs-page" style={{ position: 'relative' }}>
      {/* ── Page hero ─────────────────────────────────────── */}
      <section className="subs-hero">
        <div className="container">
          <div className="subs-hero-inner">
            <Pill>Subscriptions</Pill>
            <h1 className="subs-hero-title">
              Two plans.<br/>
              One <em>promise</em>: no surprises.
            </h1>
            <p className="subs-hero-sub">
              Every Ciao Bella comes with free unlimited calls to other Ciao Bella phones — forever.
            </p>
            <p className="subs-hero-sub">
              Want Nana to ring in from her mobile? Want your kid to call Grandad on his?
              Bella Plus opens up two-way calling with everyone on your approved list.
            </p>
          </div>
        </div>
      </section>

      <SectionDivider color="blue" />

      {/* ── Plan cards ──────────────────────────────────── */}
      <section className="section subs-plans-section">
        <div className="container">
          <div className="subs-plans">
            {/* FREE */}
            <article className="subs-plan subs-plan-free">
              <header className="subs-plan-head">
                <span className="subs-plan-eyebrow">Included with every phone</span>
                <h2 className="subs-plan-name">Free</h2>
                <div className="subs-plan-price">
                  <span className="subs-plan-amt">$0</span>
                  
                </div>
                <p className="subs-plan-pitch">
                  The everyday plan. Kids ringing other kids, grandparents ringing back, parents
                  reaching in — all on the house.
                </p>
              </header>

              <ul className="subs-features">
                <li>
                  <span className="subs-check" aria-hidden="true">✓</span>
                  <div>
                    <strong>Unlimited Ciao-to-Ciao calls</strong>
                    <em>Every other Ciao Bella phone. Forever. No usage caps.</em>
                  </div>
                </li>
                <li>
                  <span className="subs-check" aria-hidden="true">✓</span>
                  <div>
                    <strong>One approved parent line</strong>
                    <em>You call them from the app. They call you back from their Ciao Bella.</em>
                  </div>
                </li>
                <li>
                  <span className="subs-check" aria-hidden="true">✓</span>
                  <div>
                    <strong>Full parent app</strong>
                    <em>Whitelist contacts, quiet hours, voicemail, call log — every feature.</em>
                  </div>
                </li>
                <li>
                  <span className="subs-check" aria-hidden="true">✓</span>
                  <div>
                    <strong>000 emergency calling</strong>
                    <em>Always on. No exceptions, on any plan.</em>
                  </div>
                </li>
              </ul>

              <div className="subs-plan-foot">
                <span className="subs-plan-foot-line">Active from day one. No card required.</span>
              </div>
            </article>

            {/* PLUS */}
            <article className="subs-plan subs-plan-plus">
              <header className="subs-plan-head">
                <span className="subs-plan-eyebrow subs-plan-eyebrow-plus">Most flexible</span>
                <h2 className="subs-plan-name">Bella Plus</h2>
                <div className="subs-plan-price">
                  <span className="subs-plan-amt">$14.99</span>
                  <span className="subs-plan-period">/month</span>
                </div>
                <p className="subs-plan-pitch">
                  When you want the whole circle in. Nanny on the landline, the cousins on their
                  mobiles, the babysitter ringing in — all from one tidy whitelist.
                </p>
              </header>

              <ul className="subs-features">
                <li>
                  <span className="subs-check subs-check-plus" aria-hidden="true">✓</span>
                  <div>
                    <strong>All the best parts of the free plan included</strong>
                    <em>Build out the contacts for more chats!</em>
                  </div>
                </li>
                <li>
                  <span className="subs-check subs-check-plus" aria-hidden="true">✓</span>
                  <div>
                    <strong>Call out to anyone on your list</strong>
                    <em>Landlines and mobiles, anywhere in Australia. Nana on her mobile, Uncle Tom on his.</em>
                  </div>
                </li>
                <li>
                  <span className="subs-check subs-check-plus" aria-hidden="true">✓</span>
                  <div>
                    <strong>Calls come in too</strong>
                    <em>Anyone on your approved list can ring directly — not just other Ciao Bellas.</em>
                  </div>
                </li>
                <li>
                  <span className="subs-check subs-check-plus" aria-hidden="true">✓</span>
                  <div>
                    <strong>Cancel any time</strong>
                    <em>Month to month. No contract, no exit fees, no friction.</em>
                  </div>
                </li>
              </ul>

              <div className="subs-plan-foot subs-plan-foot-plus">
                <span className="subs-plan-foot-line">Add Bella Plus from the parent app any time after setup.</span>
              </div>
            </article>
          </div>
        </div>
      </section>

      <SectionDivider color="red" />

      {/* ── Quick clarity strip ─────────────────────────── */}
      <section className="section subs-clarity">
        <div className="container">
          <div className="subs-clarity-inner">
            <div className="section-head-wrap">
              <EyebrowRow eyebrow="Plain talk" />
              <SectionHeading underlineWord="catches">No catches.</SectionHeading>
              <p className="fp-section-sub">
                A handful of questions parents ask before they hit reserve.
              </p>
            </div>

            <div className="subs-clarity-grid">
              <div className="subs-clarity-card">
                <h3>Can I start on Free and add Bella Plus later?</h3>
                <p>
                  Yes. Most families do. Set up your phone, see how the calling-circle feels,
                  add Bella Plus from the parent app the day you decide you want it.
                </p>
              </div>

              <div className="subs-clarity-card">
                <h3>What happens if I cancel Bella Plus?</h3>
                <p>
                  You drop back to the Free plan instantly. Nothing breaks — Ciao-to-Ciao calls
                  and your one parent line keep working exactly as they did.
                </p>
              </div>

              <div className="subs-clarity-card">
                <h3>Are calls to landlines &amp; mobiles ever billed by the minute?</h3>
                <p>
                  No. Bella Plus is one flat fee, unlimited Australian calling. No per-minute
                  surprises, no bill shock at the end of the month.
                </p>
              </div>

              <div className="subs-clarity-card">
                <h3>Is the parent app extra?</h3>
                <p>
                  Never. The parent app is free on every plan, on iOS and Android. It&apos;s how you
                  set up the phone, manage contacts, and listen to voicemail.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <SectionDivider color="blue" />

      {/* ── Closing CTA ──────────────────────────────────── */}
      {/* TODO at launch: when Plus becomes purchasable, retire this soft-land
          framing in favour of a Plus-forward CTA. Pre-launch we deliberately
          de-emphasise Plus to reduce friction at the $25 deposit step. */}
      <section className="section subs-close">
        <div className="container">
          <div className="subs-close-inner">
            <h2>
              Start with <em>Free</em>.<br/>
              Add Bella Plus when <em>you&apos;re</em> ready.
            </h2>
            <p>Every Ciao Bella ships with the Free plan switched on. No card needed.</p>
            <CTA onClick={() => goToConfigurator(navigate, currentRoute)}>Reserve for $25</CTA>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { SubscriptionsPage });