// About page — Ciao Bella

function AboutPage({ navigate, currentRoute = '/about' }) {
  return (
    <main className="about-page" style={{ paddingTop: 40, paddingBottom: 80, position: 'relative', overflow: 'hidden' }}>
      <img src="assets/envelope-doodle.svg" alt="" aria-hidden="true"
        className="about-doodle about-doodle-r" />

      {/* ── HERO ─────────────────────────────────────────── */}
      <section className="about-hero">
        <Pill>Our story</Pill>
        <h1>
          Two Australian mums.<br/>
          <em>One ringing phone.</em>
        </h1>
        <div className="about-byline">
          <div className="about-byline-dot"></div>
          <div>
            <div className="about-byline-name">Jasmin &amp; Sophie</div>
            <div className="about-byline-sub">Founders of Ciao Bella · Australia</div>
          </div>
        </div>
      </section>

      {/* ── PROSE BLOCK 1 — the spark ───────────────────── */}
      <section className="about-section">
        <div className="container-narrow">
          <div className="about-prose">
            <p>
              Remember calling your best friend after school? Hearing the phone ring and
              sprinting to answer it? Settling into your beanbag for a chat that would stretch
              until your mum called you for dinner? We have amazing memories of twirling that
              spiral cord and laughing until our faces hurt.
            </p>

            <p className="about-prose-emphasis">
              That was us — and somewhere along the way, we became parents.
            </p>

            <p>
              Our kids crave connection just like we did. They love calling Nanny on our
              smartphones, but they get distracted by the screens, the apps, the notifications.
              We watched them lose focus mid-conversation and thought —
              <em> there has to be a better way</em>.
            </p>

            <blockquote className="about-pullquote">
              We didn&apos;t want to say no to connection.<br/>
              We just wanted to say no to everything that came packaged with it.
            </blockquote>
          </div>
        </div>
      </section>

      {/* ── PHOTOS ───────────────────────────────────────── */}
      <section className="about-photos-section">
        <div className="container">
          <div className="about-photos">
            <div className="about-photo about-photo-l">
              <CordFrame color="red">
                <img src="assets/about-grandma.jpg" alt="A grandma on a Ciao Bella phone" />
              </CordFrame>
            </div>
            <div className="about-photo about-photo-r">
              <CordFrame color="blue">
                <img src="assets/about-girl-rainbow.jpg" alt="A little girl smiling on a Ciao Bella phone in her bedroom" />
              </CordFrame>
            </div>
          </div>
        </div>
      </section>

      {/* ── PROSE BLOCK 2 — two mums, post-it notes ─────── */}
      <section className="about-section">
        <div className="container-narrow">
          <div className="about-prose">
            <p>
              That&apos;s how Ciao Bella was born. We&apos;re <strong>Jasmin and Sophie, two Australian
              mums</strong> who started this business with ideas sketched on Post-it notes and
              built something much bigger than we imagined.
            </p>

            <p>
              We wanted our kids to have the joy of staying connected to the people they love —
              without handing them a device that opens up the entire internet. We figured other
              Aussie families felt the same way, so we decided to build the solution ourselves.
            </p>

            <p className="about-prose-emphasis">
              For Australian families, by Australian families.
            </p>
          </div>
        </div>
      </section>

      {/* ── THE NAME ─────────────────────────────────────── */}
      <section className="about-name-section">
        <div className="container-narrow">
          <h2 className="about-name-h2">The name says it all.</h2>

          <div className="about-name-grid">
            <div className="about-name-block">
              <div className="about-name-word about-name-word-ciao">Ciao,</div>
              <p>The warm Italian greeting that begins every great conversation.</p>
            </div>
            <div className="about-name-block">
              <div className="about-name-word about-name-word-bella">Bella.</div>
              <p>Meaning beautiful — and the word an Italian grandmother exclaims when her grandchild calls.</p>
            </div>
          </div>

          <p className="about-name-summary">
            Put them together and you have exactly the feeling we set out to create —
            a phone call that begins with warmth and ends with connection.
          </p>
        </div>
      </section>

      {/* ── CLOSER ──────────────────────────────────────── */}
      <section className="about-section">
        <div className="container-narrow">
          <div className="about-prose">
            <p>
              That&apos;s the world we wanted to bring back. Families calling each other just
              to talk. Kids growing up knowing how to have a real conversation —
              one phone call at a time.
            </p>
          </div>

          <div className="about-signoff">
            <div className="about-signoff-line">Ciao for now,</div>
            <div className="about-signoff-sub">— Jasmin &amp; Sophie</div>
          </div>

          <div style={{ textAlign: 'center', marginTop: 48 }}>
            <CTA onClick={() => goToConfigurator(navigate, currentRoute)}>Reserve for $25</CTA>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { AboutPage });