// Home page sections — Ciao Bella

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// ── HERO ──
function Hero({ navigate, headline = 'a', currentRoute = '/' }) {
  const headlineNodes = headline === 'a' ? (
    <>
      iPhones can wait.<br />
      Telling Grandad <em>I love you</em> can&apos;t.
    </>
  ) : headline === 'b' ? (
    <>
      A first phone.<br />
      Made for <em>connection</em>,<br />
      not screens.
    </>
  ) : (
    <>
      Hello, <em>again</em>.
    </>
  );

  return (
    <section className="hero hero-split" style={{ position: 'relative' }}>
      <div className="hero-split-grid">
        <div className="hero-copy">
          <h1 className="h-hero">{headlineNodes}</h1>
          <p className="hero-sub">
            The screen-free Australian home phone for kids. Rings only for the people you choose — no apps, no screen, no internet.
          </p>
          <div className="hero-cta-row">
            <CTA onClick={() => goToConfigurator(navigate, currentRoute)}>Reserve for $25</CTA>
            <span className="hero-cta-meta">
              <span className="hero-cta-meta-icon" aria-hidden="true">✓</span>
              Fully refundable until shipping
            </span>
          </div>
        </div>

        <div className="hero-photos hero-photos-split">
          <div className="hero-photo hero-photo-primary">
            <CordFrame color="yellow">
              <picture className="hero-primary-picture">
                <source media="(max-width: 640px)" srcSet="assets/hero-pat-tight.jpg" />
                <img src="assets/hero-pat-threequarter.jpg" alt="A boy with a Ciao Bella phone at home" />
              </picture>
            </CordFrame>
            <img
              src="assets/stickers/pack-c-02.png"
              alt=""
              aria-hidden="true"
              style={{
                position: 'absolute',
                bottom: '8%',
                right: '-3%',
                width: '110px',
                height: '110px',
                maxWidth: '110px',
                maxHeight: '110px',
                transform: 'rotate(14deg)',
                zIndex: 10,
                pointerEvents: 'none',
                userSelect: 'none',
              }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

// ── HOW IT WORKS — 5-step journey weaving phone + parent app ──
function HowItWorks({ navigate }) {
  // Mockups live in app/parentapp.jsx and are exposed on window. They render
  // null if that script hasn't booted yet — safe.
  const PeopleMockup = window.PeopleMockup;
  const ShhMockup = window.ShhMockup;
  const HomeMockup = window.HomeMockup;

  return (
    <section id="how-it-works" className="hiw" style={{ position: 'relative' }}>
      <div className="container" style={{ position: 'relative' }}>
        <div className="section-head-wrap">
          <SectionHeading underlineWord="works">How Ciao Bella works</SectionHeading>
          <p className="hiw-sub">From the box to the first call — and how you stay in the loop.</p>
        </div>

        {/* i. Add their people — parent app */}
        <div className="hiw-row pa-feat-grid reverse">
          <div className="pa-feat-mock">{PeopleMockup ? <PeopleMockup /> : null}</div>
          <div className="pa-feat-copy">
            <span className="pa-feat-num">1.</span>
            <h2>Add their <em>people</em>.</h2>
            <p>Open the parent app and invite Grandma, the best friend, the aunties. Everyone else is blocked by default — no approved number, no ring.</p>
          </div>
        </div>

        {/* ii. Quiet hours — parent app */}
        <div className="hiw-row pa-feat-grid">
          <div className="pa-feat-copy">
            <span className="pa-feat-num">2.</span>
            <h2>Set <em>quiet</em> hours.</h2>
            <p>Dinner, homework, sleep — the phone goes still until you let it back in. Emergency contacts always get through.</p>
          </div>
          <div className="pa-feat-mock">{ShhMockup ? <ShhMockup /> : null}</div>
        </div>

        {/* iii. They call */}
        <div className="hiw-row pa-feat-grid reverse">
          <div className="pa-feat-mock">{window.SpeedDialMockup ? <window.SpeedDialMockup /> : null}</div>
          <div className="pa-feat-copy">
            <span className="pa-feat-num">3.</span>
            <h2>They call who <em>matters</em>.</h2>
            <p>Three speed-dial buttons on the phone. One press connects them straight to Nanny, Grandad, or their best friend — no dialling required.</p>
          </div>
        </div>

        {/* iv. You see every call — parent app */}
        <div className="hiw-row pa-feat-grid">
          <div className="pa-feat-copy">
            <span className="pa-feat-num">4.</span>
            <h2>You see <em>every</em> call.</h2>
            <p>Incoming, outgoing, blocked attempts — all in your parent app. No standing over their shoulder, no surprises.</p>
            {navigate ? (
              <p className="hiw-deeper">
                <a href="#" onClick={(e) => { e.preventDefault(); navigate('/parent-app'); }}>
                  Tour the full parent app
                  <span aria-hidden="true" style={{ marginLeft: 4 }}>→</span>
                </a>
              </p>
            ) : null}
          </div>
          <div className="pa-feat-mock">{HomeMockup ? <HomeMockup /> : null}</div>
        </div>

      </div>
    </section>
  );
}

// ── FEATURE PANELS ──
function FeaturePanels() {
  return (
    <section className="section" style={{ position: 'relative', overflow: 'visible' }}>
      <div className="container" style={{ position: 'relative' }}>
        <div className="section-head-wrap" style={{ position: 'relative' }}>
          <SectionHeading underlineWord="love">Why people are falling in love with Ciao Bella</SectionHeading>
        </div>

        <div className="feature-panels">
          <div className="feature-panel feature-panel-coral">
            <div className="feature-content">
              <img src="assets/icon-diamond.svg" alt="" className="icon" aria-hidden="true" />
              <h3>Only the people you trust</h3>
              <p>You decide exactly who can call your child — grandparents, aunties, best friends. No strangers, no spam, no surprises. Just the people who matter most.</p>
            </div>
            <div className="feature-image">
              <CordFrame color="yellow">
                <img src="assets/feature-1.webp" alt="Only the people you trust" style={{ width: '100%', height: '100%', display: 'block', objectFit: 'cover', objectPosition: 'center 30%', borderRadius: '12px' }} />
              </CordFrame>
            </div>
          </div>

          <div className="feature-panel feature-panel-blue">
            <div className="feature-content">
              <img src="assets/icon-cube.svg" alt="" className="icon" aria-hidden="true" />
              <h3>Screen-free by design</h3>
              <p>Ciao Bella is a phone that&apos;s just a phone. No apps, no internet, no doom-scrolling. Kids pick it up, talk to someone they love, and put it down.</p>
            </div>
            <div className="feature-image">
              <CordFrame color="orange">
                <img src="assets/feature-2.webp" alt="No screens, no distractions" style={{ width: '100%', height: '100%', display: 'block', objectFit: 'cover', borderRadius: '12px' }} />
              </CordFrame>
            </div>
          </div>

          <div className="feature-panel feature-panel-teal">
            <div className="feature-content">
              <img src="assets/trust-icon.svg" alt="" className="icon" aria-hidden="true" />
              <h3>Built like a phone, not an app</h3>
              <p>One-press speed dial to their top three friends. A voicemail from Nanny when they missed her call. Quiet hours when it&apos;s time to read. All the good bits of a home phone — every one made for small hands.</p>
            </div>
            <div className="feature-image">
              <CordFrame color="red">
                <img src="assets/feature-3.webp" alt="Built like a phone, not an app" style={{ width: '100%', height: '100%', display: 'block', objectFit: 'cover', borderRadius: '12px' }} />
              </CordFrame>
            </div>
          </div>

          <div className="feature-panel feature-panel-orange" style={{ background: '#D4561F' }}>
            <div className="feature-content">
              <img src="assets/icon-cube.svg" alt="" className="icon" aria-hidden="true" />
              <h3>Three friends, one call</h3>
              <p>Ciao Bella does three-way calls, so the whole gang can natter at once. One press pulls a second friend onto the line — best friends, cousins, Nanny <em>and</em> Grandad — all talking together. It&apos;s the group chat, minus the screens.</p>
            </div>
            <div className="feature-image">
              <CordFrame color="yellow">
                <img src="assets/feature-threeway.png" alt="Three Ciao Bella handsets — black, cream and pink" style={{ width: '100%', height: '100%', display: 'block', objectFit: 'contain', objectPosition: 'center center', borderRadius: '12px' }} />
              </CordFrame>
            </div>
          </div>

          <div className="feature-panel feature-panel-sun" style={{ background: '#F2A93B' }}>
            <div className="feature-content">
              <img src="assets/icon-diamond.svg" alt="" className="icon" aria-hidden="true" />
              <h3>Make it unmistakably theirs</h3>
              <p>Every phone comes with a sheet of peel-and-stick stickers. Kids deck theirs out however they like — so it&apos;s unmistakably theirs the moment it&apos;s out of the box, and no two phones end up quite the same.</p>
            </div>
            <div className="feature-image">
              <CordFrame color="red">
                <img src="assets/feature-stickers.jpg" alt="A pink Ciao Bella phone decorated with stickers" style={{ width: '100%', height: '100%', display: 'block', objectFit: 'cover', objectPosition: 'center center', borderRadius: '12px' }} />
              </CordFrame>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FOUNDERS — "Two Sydney mums" credibility moat ──
function Founders({ navigate }) {
  return (
    <section className="founders-section section" style={{ position: 'relative' }}>
      <div className="container" style={{ position: 'relative' }}>
        <div className="founders-inner">
          <h2 className="founders-headline">
            Two Australian <em>mums.</em>
          </h2>

          <p className="founders-names-small">
            <span className="founders-role">Founders</span>
            <span className="founders-divider" aria-hidden="true">·</span>
            Jasmin <span className="founders-amp-sm">&amp;</span> Sophie
          </p>

          <div className="founders-bio">
            <p>
              We&apos;re Australian founders who&apos;ve spent our careers building products that
              make a real difference in people&apos;s lives — Jasmin in technology and product,
              Sophie in e-commerce, brand and marketing.
            </p>
            <p>
              We built Ciao Bella because we believed our own kids deserved the magic of a
              phone call — their own little device, their own sense of independence — without
              a screen full of everything else that comes with it.
            </p>
          </div>

          <div className="founders-pills">
            <span className="founders-pill">100% Australian-owned</span>
            <span className="founders-pill">Small business</span>
            <span className="founders-pill">Designed in Australia</span>
          </div>

          <a
            href="#"
            className="founders-link"
            onClick={(e) => { e.preventDefault(); navigate('/about'); }}
          >
            Read our story
            <span aria-hidden="true" style={{ marginLeft: 6 }}>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ── BUNDLES ──
function MiniPhone({ colour, rotation = 0, offset = 0, z = 1 }) {
  // Real product photo per shell colour — use the branded photo-phone-* set
  const photos = {
    flamingo:    'assets/photo-phone-flamingo.png',
    buttercream: 'assets/photo-phone-buttercream.png',
    afterdark:   'assets/photo-phone-afterdark.png',
  };
  const src = photos[colour] || photos.buttercream;
  return (
    <img
      src={src}
      alt=""
      aria-hidden="true"
      className="bundle-mini-phone"
      style={{
        '--rot': rotation + 'deg',
        '--off': offset + 'px',
        zIndex: z,
      }}
    />
  );
}

function Bundles({ navigate, currentRoute = '/' }) {
  return (
    <section className="section">
      <div className="container" style={{ position: 'relative' }}>
        <div className="section-head-wrap">
          <Pill>Pre-order pricing</Pill>
          <SectionHeading underlineWord="crew">One phone, two, or a whole crew</SectionHeading>
          <p style={{ fontFamily: 'var(--hand)', fontWeight: 500, color: 'var(--sub-2)', textAlign: 'center', maxWidth: 540, fontSize: 16 }}>
            Save more when you order for siblings, cousins, or best friends. Same phone every time — pricing just gets better when they have someone to call.
          </p>
        </div>

        <div className="reserve-banner" role="note">
          <span className="reserve-banner-amt">$25</span>
          <span className="reserve-banner-text">
            reserves any bundle today — balance only when your phone ships
          </span>
        </div>

        <div className="bundles-grid">
          {/* One phone */}
          <div className="bundle-card">
            <div className="bundle-name">Solo</div>
            <div className="bundle-tag">For your one and only.</div>
            <div className="bundle-phones bundle-phones-solo">
              <ImageSlot
                id="bundle-solo"
                src="assets/photo-phone-flamingo-solo.png"
                shape="rect"
                fit="cover"
                position="60% 60%"
                placeholder="Drop Solo product photo"
              />
            </div>
            <div className="bundle-price-row">
              <div className="bundle-price">$109</div>
              <div className="bundle-rrp">$139</div>
              <span className="bundle-gst">incl. GST</span>
            </div>
            <div className="bundle-save">You save $30</div>
            <ul className="bundle-features">
              <li>One Ciao Bella phone, your colour</li>
              <li>Free parent app + setup</li>
              <li>Free shipping in Australia</li>
              <li>30-day money-back guarantee</li>
            </ul>
            <CTA className="bundle-cta" onClick={() => goToConfigurator(navigate, currentRoute)}>Reserve for $25</CTA>
            <div className="bundle-cancel">Cancel anytime before shipping</div>
          </div>

          {/* BFF — featured */}
          <div className="bundle-card featured">
            <div className="bundle-badge">Best value</div>
            <div className="bundle-name">BFF Bundle</div>
            <div className="bundle-tag">Two phones for the closest pair.</div>
            <div className="bundle-phones bundle-phones-bff">
              <ImageSlot
                id="bundle-bff"
                src="assets/photo-phone-bff-bundle.png"
                shape="rect"
                fit="contain"
                position="70% 50%"
                placeholder="Drop BFF Bundle composite photo (drag-drop a 2-phone image)"
              />
            </div>
            <div className="bundle-price-row">
              <div className="bundle-price">$199</div>
              <div className="bundle-rrp">$278</div>
              <span className="bundle-gst">incl. GST</span>
            </div>
            <div className="bundle-save" style={{ color: '#9b3a23' }}>You save $79</div>
            <ul className="bundle-features">
              <li>Two phones, mix and match colours</li>
              <li>Free calls between Ciao Bellas, forever</li>
              <li>Free parent app + setup</li>
              <li>Free shipping + 30-day returns</li>
            </ul>
            <CTA className="bundle-cta bundle-cta-dark" onClick={() => goToConfigurator(navigate, currentRoute, 2)}>Reserve for $25</CTA>
            <div className="bundle-cancel">Cancel anytime before shipping</div>
          </div>

          {/* Trio */}
          <div className="bundle-card">
            <div className="bundle-name">Talking Trio</div>
            <div className="bundle-tag">Three phones, one little crew.</div>
            <div className="bundle-phones bundle-phones-trio">
              <ImageSlot
                id="bundle-trio"
                src="assets/photo-phone-trio.png"
                shape="rect"
                fit="contain"
                position="70% 50%"
                placeholder="Drop Talking Trio composite photo (drag-drop a 3-phone image)"
              />
            </div>
            <div className="bundle-price-row">
              <div className="bundle-price">$279</div>
              <div className="bundle-rrp">$417</div>
              <span className="bundle-gst">incl. GST</span>
            </div>
            <div className="bundle-save">You save $138</div>
            <ul className="bundle-features">
              <li>Three phones, any combo of colours</li>
              <li>Free calls between Ciao Bellas, forever</li>
              <li>Free parent app + setup</li>
              <li>Free shipping + 30-day returns</li>
            </ul>
            <CTA className="bundle-cta" onClick={() => goToConfigurator(navigate, currentRoute, 3)}>Reserve for $25</CTA>
            <div className="bundle-cancel">Cancel anytime before shipping</div>
          </div>
        </div>

        <p className="bundles-footnote">
          Reserve any bundle for $25 today — full balance charged when your phone ships. Cancel anytime before then. Every phone includes: choice of colour · free parent app · free shipping · 30-day money-back guarantee · 12-month warranty
        </p>
      </div>
    </section>
  );
}

// ── WHY CIAO BELLA — closing argument before the FAQ ──
// Three variants, switchable via Tweaks panel:
//   'why'     — confident 4-pillar grid (default)
//   'founder' — warm, signed founder note
//   'off'     — hidden
function Testimonials({ variant = 'why' }) {
  if (variant === 'off') return null;

  if (variant === 'founder') {
    return (
      <section className="section">
        <div className="container" style={{ position: 'relative' }}>
          <div className="section-head-wrap">
            <EyebrowRow>From the makers</EyebrowRow>
            <SectionHeading underlineWord="hand">Built by hand, in small batches</SectionHeading>
          </div>
          <div className="founder-note">
            <p>
              We&apos;re a small Australian team building Ciao Bella for our own kids first.
              Every phone in this first run is mixed, matched and packed by us — not stacked
              in a warehouse waiting for an algorithm to ship it.
            </p>
            <p>
              When your order lands at your door, you&apos;ll have one of us on email — usually
              within the hour. Setup hiccup, wrong colour, change of plan? Just tell us. We&apos;ll
              fix it.
            </p>
            <p>
              That&apos;s the company we want to buy from. We hope it&apos;s the kind of company you
              want your kids&apos; first phone to come from too.
            </p>
            <p className="founder-sig">— The Ciao Bella team</p>
          </div>
        </div>
      </section>
    );
  }

  // default — 'why'
  return (
    <section className="section">
      <div className="container" style={{ position: 'relative' }}>
        <div className="section-head-wrap">
          <SectionHeading underlineWord="Ciao Bella">Why families pick Ciao Bella</SectionHeading>
          <p className="why-sub">
            There are a handful of kid-phone options out there now. Here&apos;s what makes ours
            the one to bring home.
          </p>
        </div>

        <div className="why-grid">
          <div className="why-pillar">
            <span className="why-pillar-num">1.</span>
            <h3>An Australian family team.</h3>
            <p>
              Designed, set up and supported from here. Local stock, local warranty, and a real
              person on the other end of every email — usually one of the founders.
            </p>
          </div>

          <div className="why-pillar">
            <span className="why-pillar-num">2.</span>
            <h3>A home phone — not a wearable.</h3>
            <p>
              It lives on a desk or bench, not strapped to a wrist. No SIM, no cellular plan,
              no GPS tracker. Plug it in once and it just rings.
            </p>
          </div>

          <div className="why-pillar">
            <span className="why-pillar-num">3.</span>
            <h3>Free Ciao-Bella-to-Ciao-Bella calls. Forever.</h3>
            <p>
              Grandma&apos;s place, the best friend down the road, the cousins interstate — every
              call between Ciao Bellas costs nothing. Always will.
            </p>
          </div>

          <div className="why-pillar">
            <span className="why-pillar-num">4.</span>
            <h3>Hand-finished, one batch at a time.</h3>
            <p>
              Nine two-tone colour combos, hand-matched before they ship. A small object made
              to be loved — and left out — not stuffed in a drawer and outgrown.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FAQ ──
function FAQ() {
  return (
    <section id="faq" className="section">
      <div className="container" style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div className="section-head-wrap">
          <EyebrowRow>FAQs</EyebrowRow>
          <SectionHeading underlineWord="questions">Frequently asked questions</SectionHeading>
          <p style={{ fontFamily: 'var(--hand)', fontWeight: 500, color: 'var(--sub-2)', textAlign: 'center', maxWidth: 420, fontSize: 16 }}>
            Everything you need to know about Ciao Bella and keeping your kids connected safely.
          </p>
        </div>

        <div className="faq-list">
          <FaqItem defaultOpen
            q="What age is Ciao Bella designed for?"
            a="Ciao Bella is designed for kids from 4 years to smartphone-ready. It's simple enough for little ones to use independently, and gives older kids a sense of independence without the risks of a smartphone." />
          <FaqItem
            q="How do I control who can call my child?"
            a="Through the Ciao Bella parent app, you add approved contacts to your child's phone. Only those numbers can ring through — everyone else is blocked automatically. You can update the list any time." />
          <FaqItem
            q="Does it connect to the internet?"
            a="It plugs into your home internet router with the included Ethernet cable. The phone uses that connection only to make calls — there's no browser, no apps, no social media, and no Wi-Fi for your child to roam onto. Plug it in once and forget about it." />
          <FaqItem
            q="What if the power or internet goes out?"
            a="Like any home phone, Ciao Bella needs power and an internet connection to make calls. If either goes down, calls won't connect — and as soon as they're back, the phone is ready again automatically. Emergency calls in a blackout should be made on a mobile." />
          <FaqItem
            q="Can I take it to a friend's house or grandma's?"
            a="Ciao Bella is designed to live in one home. It needs to be plugged into power and internet to work, so it isn't a phone to take with you. Many families set up a second phone at grandparents' so the kids can call each other directly." />
          <FaqItem
            q="Can my child call emergency services?"
            a="Yes. 000 always works, no matter what's on the contact list." />
          <FaqItem
            q="When will Ciao Bella ship?"
            a="First phones ship from June 2026. Pre-orders are dispatched in the order they were placed, and you'll get a tracking number the moment yours is on its way." />
          <FaqItem
            q="Is there a monthly fee?"
            a={<>
              <p style={{ margin: '0 0 10px' }}><strong>Free, forever:</strong> unlimited calls between Ciao Bella phones, plus one approved parent line through the parent app. No subscription required.</p>
              <p style={{ margin: 0 }}><strong>Bella Plus — $14.99/month:</strong> unlimited calls to any landline or mobile, and everyone on your whitelist can call in. Cancel any time.</p>
            </>} />
          <FaqItem
            q="What's the refund policy?"
            a="30-day money-back guarantee, full stop. If it isn't right for your family, send it back for a full refund. Phones also come with a 12-month warranty against defects." />
        </div>

        <div className="faq-still-got">
          <span className="faq-still-got-label">Still got questions?</span>
          <a className="faq-still-got-mail" href="mailto:info@ciaobellaphone.com.au">info@ciaobellaphone.com.au</a>
        </div>
      </div>
    </section>
  );
}

// ── Home FAQ teaser — top 3 questions + "See all FAQs →" ──
function HomeFaqTeaser({ navigate }) {
  return (
    <section className="section home-faq-teaser">
      <div className="container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div className="section-head-wrap">
          <EyebrowRow>FAQs</EyebrowRow>
          <SectionHeading underlineWord="answers">A few quick answers.</SectionHeading>
        </div>

        <div className="faq-list home-faq-list">
          <FaqItem
            q="What age is Ciao Bella designed for?"
            a="Ciao Bella is designed for kids from 4 years to smartphone-ready. It's simple enough for little ones to use independently, and gives older kids a sense of independence without the risks of a smartphone." />
          <FaqItem
            q="Is there a monthly fee?"
            a={<>
              <p style={{ margin: '0 0 10px' }}><strong>Free, forever:</strong> unlimited calls between Ciao Bella phones, plus one approved parent line through the parent app. No subscription required.</p>
              <p style={{ margin: 0 }}><strong>Bella Plus — $14.99/month:</strong> unlimited calls to any landline or mobile, and everyone on your whitelist can call in. Cancel any time.</p>
            </>} />
          <FaqItem
            q="What's the refund policy?"
            a="30-day money-back guarantee, full stop. If it isn't right for your family, send it back for a full refund. Phones also come with a 12-month warranty against defects." />
        </div>

        <button
          type="button"
          className="home-faq-cta"
          onClick={() => {
            navigate('/for-parents');
            setTimeout(() => document.getElementById('faq')?.scrollIntoView({ behavior: 'smooth' }), 100);
          }}
        >
          See all FAQs
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <path d="M5 12h14m-6-6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>

        <div className="faq-still-got" style={{ marginTop: 24 }}>
          <span className="faq-still-got-label">Still got questions?</span>
          <a className="faq-still-got-mail" href="mailto:info@ciaobellaphone.com.au">info@ciaobellaphone.com.au</a>
        </div>
      </div>
    </section>
  );
}


// ── HOME PAGE wrapper ──
function HomePage({ navigate, tweaks }) {
  return (
    <>
      <Hero navigate={navigate} headline={tweaks.headline} />
      <SectionDivider color="blue" />
      <FeaturePanels />
      <SectionDivider color="red" />
      <HowItWorks navigate={navigate} />
      <SectionDivider color="blue" />
      <AboutStrip navigate={navigate} />
      <SectionDivider color="red" />
      <Bundles navigate={navigate} />
    </>
  );
}

// ── Marquee strip — "Ciao, Nanna · Ciao, Dad · …" ──
function CiaoMarquee() {
  const items = [
    'Ciao, Nanna.',
    'Ciao, Dad.',
    'Ciao, best friend.',
    'Ciao, Aunty Sal.',
    'Ciao, Grandad.',
    'Ciao, cousin Tom.',
    'Ciao, Mum.',
  ];
  // duplicate the loop so the slide is seamless
  return (
    <div className="ciao-marquee" aria-hidden="true">
      <div className="ciao-marquee-track">
        {[0, 1].map(i => (
          <div className="ciao-marquee-row" key={i}>
            {items.map((t, j) => (
              <React.Fragment key={j}>
                <span className="ciao-marquee-item">{t}</span>
                <span className="ciao-marquee-star">✦</span>
              </React.Fragment>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

// ── About strip — pull quote + founders credit in one ──
function AboutStrip({ navigate }) {
  return (
    <section className="about-strip section" style={{ position: 'relative' }}>
      <div className="container">
        <div className="about-strip-inner">
          <EyebrowRow eyebrow="A letter from the founders" />

          <p className="about-pull">
            <span className="about-quote-mark" aria-hidden="true">“</span>
            Remember calling your best friend after school? Not <em>texting</em> — actually calling.
            Twirling the cord, talking about nothing, staying on until your mum called you for dinner.
            <span className="about-quote-mark right" aria-hidden="true">”</span>
          </p>

          <p className="about-sig">— that&apos;s where Ciao Bella was born.</p>

          <div className="about-strip-attribution">
            <div className="about-strip-signature">
              Jasmin <span className="about-strip-amp">&amp;</span> Sophie
            </div>
            <div className="about-strip-credit">
              Two Australian mums <span className="about-strip-dot" aria-hidden="true">·</span> Founders of Ciao Bella
            </div>
          </div>

          <div className="about-strip-pills">
            <span className="about-strip-pill">100% Australian-owned</span>
            <span className="about-strip-pill">Small business</span>
            <span className="about-strip-pill">Designed in Australia</span>
          </div>

          <a href="#" className="about-link" onClick={(e) => { e.preventDefault(); navigate('/about'); }}>
            Read our full story
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M5 12h14m-6-6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, HowItWorks, FeaturePanels, Founders, Bundles, Testimonials, FAQ, HomePage, MiniPhone, CiaoMarquee, AboutStrip });
