// Parent App page — Ciao Bella
// Marketing tour for the parent app. All mockups are redesigned in the
// website's editorial brand language (line icons, cream + ink, no emoji).

const PA_GREEN = 'var(--cta)';
const PA_INK = 'var(--ink)';

// ── Reusable phone-bezel container ──
function PhoneBezel({ children, variant = 'default', className = '' }) {
  return (
    <div className={`pa-bezel pa-bezel-${variant} ${className}`}>
      <div className="pa-bezel-notch" aria-hidden="true"></div>
      <div className="pa-bezel-screen">
        {children}
      </div>
    </div>
  );
}

// ── Line icons (no emoji) ──
const Icons = {
  People: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" transform="translate(2 0)"/>
      <circle cx="11" cy="7" r="4"/>
      <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
      <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
    </svg>
  ),
  Moon: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
    </svg>
  ),
  ChatLog: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
      <polyline points="14 2 14 8 20 8"/>
      <line x1="8" y1="13" x2="16" y2="13"/>
      <line x1="8" y1="17" x2="14" y2="17"/>
    </svg>
  ),
  Voicemail: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="6" cy="14" r="3"/>
      <circle cx="18" cy="14" r="3"/>
      <line x1="6" y1="17" x2="18" y2="17"/>
    </svg>
  ),
  Home: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/>
    </svg>
  ),
  Settings: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="3"/>
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
    </svg>
  ),
  PhoneIn: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/>
    </svg>
  ),
  Play: () => (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <polygon points="5 3 19 12 5 21 5 3"/>
    </svg>
  ),
  Check: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  ),
  Plus: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="5" x2="12" y2="19"/>
      <line x1="5" y1="12" x2="19" y2="12"/>
    </svg>
  ),
};

// ── App Store + Google Play badges ──
function AppStoreBadge({ href = '#' }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" className="pa-store-badge" aria-label="Download on the App Store">
      <svg viewBox="0 0 168 50" xmlns="http://www.w3.org/2000/svg">
        <rect width="168" height="50" rx="8" fill="#000"/>
        {/* Apple logo */}
        <path d="M27.6 26.4c0-3.4 2.8-5.1 2.9-5.2-1.6-2.3-4.1-2.6-5-2.6-2.1-.2-4.1 1.3-5.2 1.3-1.1 0-2.7-1.2-4.5-1.2-2.3 0-4.4 1.4-5.6 3.5-2.4 4.1-.6 10.2 1.7 13.6 1.1 1.6 2.5 3.5 4.3 3.4 1.7-.1 2.4-1.1 4.5-1.1 2.1 0 2.7 1.1 4.5 1 1.9 0 3.1-1.7 4.2-3.3 1.3-1.9 1.9-3.7 1.9-3.8-.1-.1-3.7-1.4-3.7-5.6zm-3.4-10.3c.9-1.2 1.6-2.8 1.4-4.4-1.4.1-3 .9-4 2.1-.9 1-1.7 2.7-1.5 4.3 1.6.1 3.2-.8 4.1-2z" fill="#fff"/>
        {/* "Download on the" small */}
        <text x="44" y="20" fontFamily="-apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif" fontSize="8" fill="#fff" letterSpacing="0.2">Download on the</text>
        {/* "App Store" big */}
        <text x="44" y="38" fontFamily="-apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif" fontSize="18" fontWeight="500" fill="#fff" letterSpacing="-0.3">App Store</text>
      </svg>
    </a>
  );
}

function GooglePlayBadge({ href = '#' }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" className="pa-store-badge" aria-label="Get it on Google Play">
      <svg viewBox="0 0 168 50" xmlns="http://www.w3.org/2000/svg">
        <rect width="168" height="50" rx="8" fill="#000"/>
        {/* Play triangle — official 4-color */}
        <g transform="translate(12 12)">
          <path d="M0 0v26l13-13z" fill="#00D7FE"/>
          <path d="M0 0l13 13 5-5L3 0z" fill="#00F076" opacity=".95"/>
          <path d="M0 26l3 0 15-8-5-5z" fill="#FFC900"/>
          <path d="M13 13l5-5 6 5-6 5z" fill="#FC3032"/>
        </g>
        {/* "GET IT ON" small */}
        <text x="42" y="20" fontFamily="-apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif" fontSize="8" fill="#fff" letterSpacing="0.6">GET IT ON</text>
        {/* "Google Play" big */}
        <text x="42" y="38" fontFamily="-apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif" fontSize="18" fontWeight="500" fill="#fff" letterSpacing="-0.2">Google Play</text>
      </svg>
    </a>
  );
}

// ── Reusable status bar (time + signal) for every parent-app mockup ──
function StatusBar() {
  return (
    <div className="pa-statusbar">
      <span>9:41</span>
      <span className="pa-statusbar-icons">
        <svg width="18" height="11" viewBox="0 0 18 11" fill="currentColor"><path d="M1 5h2v6H1zM5 3h2v8H5zM9 1h2v10H9zM13 5h2v6h-2z"/></svg>
      </span>
    </div>
  );
}

// ── Hero mockup: full Home screen redesign ──
function HomeMockup() {
  return (
    <PhoneBezel>
      <div className="pa-screen pa-home">
        <div className="pa-statusbar">
          <span>9:41</span>
          <span className="pa-statusbar-icons">
            <svg width="18" height="11" viewBox="0 0 18 11" fill="currentColor"><path d="M1 5h2v6H1zM5 3h2v8H5zM9 1h2v10H9zM13 5h2v6h-2z"/></svg>
          </span>
        </div>

        <header className="pa-home-greeting">
          <div>
            <p className="pa-eyebrow">Tuesday, 17 March</p>
            <h2>Evening, Jasmin.</h2>
          </div>
          <div className="pa-avatar">J</div>
        </header>

        <div className="pa-child-pills">
          <button className="pa-child-pill">
            <span className="pa-child-pill-letter">T</span>
            <span className="pa-child-pill-name">Tom</span>
          </button>
          <button className="pa-child-pill active">
            <span className="pa-child-pill-letter">S</span>
            <span className="pa-child-pill-name">Sophie</span>
          </button>
          <button className="pa-child-pill">
            <span className="pa-child-pill-letter">M</span>
            <span className="pa-child-pill-name">Mia</span>
          </button>
        </div>

        <div className="pa-status-row">
          <span className="pa-status-dot" aria-hidden="true"></span>
          <span className="pa-status-text">Sophie&apos;s phone is online</span>
        </div>

        <div className="pa-card-grid">
          <div className="pa-card pa-card-mint">
            <span className="pa-card-icon" style={{ color: PA_INK }}><Icons.People /></span>
            <h3>Sophie&apos;s people</h3>
            <p>3 good people</p>
          </div>
          <div className="pa-card">
            <span className="pa-card-icon" style={{ color: PA_INK }}><Icons.Moon /></span>
            <h3>Shh time</h3>
            <p>Not set</p>
          </div>
          <div className="pa-card">
            <span className="pa-card-icon" style={{ color: PA_INK }}><Icons.ChatLog /></span>
            <h3>Chat log</h3>
            <p>5 calls today</p>
          </div>
          <div className="pa-card pa-card-cream">
            <span className="pa-card-icon" style={{ color: PA_INK }}><Icons.Voicemail /></span>
            <h3>Voicemail</h3>
            <p>1 new from Nanny</p>
          </div>
        </div>

        <p className="pa-section-label">Recent calls</p>

        <div className="pa-recent">
          <div className="pa-recent-row">
            <div className="pa-recent-avatar pa-recent-avatar-blue">N</div>
            <div className="pa-recent-meta">
              <strong>Nanny</strong>
              <span>Missed · 6:42 pm</span>
            </div>
            <span className="pa-recent-time">12 min</span>
          </div>
          <div className="pa-recent-row">
            <div className="pa-recent-avatar pa-recent-avatar-green">G</div>
            <div className="pa-recent-meta">
              <strong>Grandad</strong>
              <span>Incoming · 5:14 pm</span>
            </div>
            <span className="pa-recent-time">8 min</span>
          </div>
        </div>

        <div className="pa-tabbar">
          <span className="pa-tab active"><Icons.Home /></span>
          <span className="pa-tab"><Icons.People /></span>
          <span className="pa-tab"><Icons.ChatLog /></span>
          <span className="pa-tab"><Icons.Moon /></span>
          <span className="pa-tab"><Icons.Settings /></span>
        </div>
      </div>
    </PhoneBezel>
  );
}

// ── Feature mockups (smaller, focused on one feature each) ──

function PeopleMockup() {
  return (
    <PhoneBezel variant="compact">
      <div className="pa-screen pa-mini">
        <StatusBar />
        <header className="pa-mini-head">
          <h3>Sophie&apos;s people</h3>
          <button className="pa-mini-add" aria-label="Add"><Icons.Plus /></button>
        </header>
        <div className="pa-mini-info">
          Only these good people can ring through. Everyone else? No chance.
        </div>
        <ul className="pa-contact-list">
          <li>
            <div className="pa-contact-avatar pa-contact-avatar-blue">N</div>
            <div className="pa-contact-meta">
              <strong>Nanny</strong>
              <span>Ciao Bella · connected</span>
            </div>
            <span className="pa-contact-badge"><Icons.Check /></span>
          </li>
          <li>
            <div className="pa-contact-avatar pa-contact-avatar-green">G</div>
            <div className="pa-contact-meta">
              <strong>Grandad</strong>
              <span>Landline · 0418 …</span>
            </div>
            <span className="pa-contact-badge"><Icons.Check /></span>
          </li>
          <li>
            <div className="pa-contact-avatar pa-contact-avatar-orange">B</div>
            <div className="pa-contact-meta">
              <strong>Best friend Bea</strong>
              <span>Ciao Bella · pending</span>
            </div>
            <span className="pa-contact-badge pa-contact-badge-pending">…</span>
          </li>
        </ul>
        <div className="pa-tabbar">
          <span className="pa-tab"><Icons.Home /></span>
          <span className="pa-tab active"><Icons.People /></span>
          <span className="pa-tab"><Icons.ChatLog /></span>
          <span className="pa-tab"><Icons.Moon /></span>
          <span className="pa-tab"><Icons.Settings /></span>
        </div>
      </div>
    </PhoneBezel>
  );
}

function ShhMockup() {
  return (
    <PhoneBezel variant="compact">
      <div className="pa-screen pa-mini">
        <StatusBar />
        <header className="pa-mini-head">
          <h3>Shh time</h3>
          <span className="pa-mini-icon"><Icons.Moon /></span>
        </header>
        <div className="pa-mini-info">
          Quiet hours mean no calls come through. Emergency contacts still can.
        </div>
        <div className="pa-shh-toggle">
          <div>
            <strong>Tonight, 7:30 pm — 7 am</strong>
            <span>Repeats school nights</span>
          </div>
          <div className="pa-toggle active" aria-hidden="true"><span></span></div>
        </div>
        <div className="pa-shh-row">
          <div>
            <strong>Homework window</strong>
            <span>4:00 — 5:30 pm</span>
          </div>
          <div className="pa-toggle" aria-hidden="true"><span></span></div>
        </div>
        <div className="pa-shh-row">
          <div>
            <strong>Saturday lie-in</strong>
            <span>Until 9 am</span>
          </div>
          <div className="pa-toggle active" aria-hidden="true"><span></span></div>
        </div>
        <div className="pa-tabbar">
          <span className="pa-tab"><Icons.Home /></span>
          <span className="pa-tab"><Icons.People /></span>
          <span className="pa-tab"><Icons.ChatLog /></span>
          <span className="pa-tab active"><Icons.Moon /></span>
          <span className="pa-tab"><Icons.Settings /></span>
        </div>
      </div>
    </PhoneBezel>
  );
}

function VoicemailMockup() {
  return (
    <PhoneBezel variant="compact">
      <div className="pa-screen pa-mini">
        <StatusBar />
        <header className="pa-mini-head">
          <h3>Voicemail</h3>
          <span className="pa-mini-pill">1 new</span>
        </header>
        <ul className="pa-vm-list">
          <li className="pa-vm-row pa-vm-new">
            <button className="pa-vm-play" aria-label="Play"><Icons.Play /></button>
            <div className="pa-vm-meta">
              <strong>Nanny</strong>
              <span>Today · 6:42 pm · 18 sec</span>
            </div>
          </li>
          <li className="pa-vm-row">
            <button className="pa-vm-play" aria-label="Play"><Icons.Play /></button>
            <div className="pa-vm-meta">
              <strong>Aunty Sal</strong>
              <span>Yesterday · 21 sec</span>
            </div>
          </li>
          <li className="pa-vm-row">
            <button className="pa-vm-play" aria-label="Play"><Icons.Play /></button>
            <div className="pa-vm-meta">
              <strong>Grandad</strong>
              <span>Sat · 9 sec</span>
            </div>
          </li>
        </ul>
        <p className="pa-mini-foot">Messages are kept for 30 days, then auto-deleted.</p>
        <div className="pa-tabbar">
          <span className="pa-tab active"><Icons.Home /></span>
          <span className="pa-tab"><Icons.People /></span>
          <span className="pa-tab"><Icons.ChatLog /></span>
          <span className="pa-tab"><Icons.Moon /></span>
          <span className="pa-tab"><Icons.Settings /></span>
        </div>
      </div>
    </PhoneBezel>
  );
}

function ChatLogMockup() {
  return (
    <PhoneBezel variant="compact">
      <div className="pa-screen pa-mini">
        <StatusBar />
        <header className="pa-mini-head">
          <h3>Chat log</h3>
          <span className="pa-mini-pill">Today</span>
        </header>
        <ul className="pa-log-list">
          <li className="pa-log-row">
            <div className="pa-log-dot pa-log-dot-in"></div>
            <div className="pa-log-meta">
              <strong>Nanny</strong>
              <span>Incoming · 6:42 pm</span>
            </div>
            <span className="pa-log-len">12 min</span>
          </li>
          <li className="pa-log-row">
            <div className="pa-log-dot pa-log-dot-out"></div>
            <div className="pa-log-meta">
              <strong>Grandad</strong>
              <span>Outgoing · 5:14 pm</span>
            </div>
            <span className="pa-log-len">8 min</span>
          </li>
          <li className="pa-log-row">
            <div className="pa-log-dot pa-log-dot-in"></div>
            <div className="pa-log-meta">
              <strong>Aunty Sal</strong>
              <span>Incoming · 3:02 pm</span>
            </div>
            <span className="pa-log-len">3 min</span>
          </li>
          <li className="pa-log-row">
            <div className="pa-log-dot pa-log-dot-miss"></div>
            <div className="pa-log-meta">
              <strong>Unknown number</strong>
              <span>Blocked · 2:18 pm</span>
            </div>
            <span className="pa-log-len">—</span>
          </li>
        </ul>
        <div className="pa-tabbar">
          <span className="pa-tab"><Icons.Home /></span>
          <span className="pa-tab"><Icons.People /></span>
          <span className="pa-tab active"><Icons.ChatLog /></span>
          <span className="pa-tab"><Icons.Moon /></span>
          <span className="pa-tab"><Icons.Settings /></span>
        </div>
      </div>
    </PhoneBezel>
  );
}

// ── Speed Dial mockup (no tab bar — used as feature highlight) ──
function SpeedDialMockup() {
  return (
    <PhoneBezel variant="compact">
      <div className="pa-screen pa-mini pa-mini-flush">
        <StatusBar />
        <header className="pa-mini-head">
          <h3>Speed dial</h3>
          <span className="pa-mini-icon"><Icons.PhoneIn /></span>
        </header>
        <div className="pa-mini-info">
          Three quick-call buttons on the phone. One press, straight to the person who matters.
        </div>
        <ul className="pa-speed-list">
          <li className="pa-speed-row">
            <div className="pa-speed-num pa-speed-num-1">1</div>
            <div className="pa-speed-meta">
              <strong>Nanny</strong>
              <span>Always on</span>
            </div>
          </li>
          <li className="pa-speed-row">
            <div className="pa-speed-num pa-speed-num-2">2</div>
            <div className="pa-speed-meta">
              <strong>Grandad</strong>
              <span>Always on</span>
            </div>
          </li>
          <li className="pa-speed-row">
            <div className="pa-speed-num pa-speed-num-3">3</div>
            <div className="pa-speed-meta">
              <strong>Bea</strong>
              <span>Always on</span>
            </div>
          </li>
        </ul>
        <p className="pa-mini-foot">Tap any slot in the app to swap, rename or remove.</p>
      </div>
    </PhoneBezel>
  );
}

// ── Page ────────────────────────────────────────────────
function ParentAppPage({ navigate, currentRoute = '/parent-app' }) {
  return (
    <main className="parentapp-page" style={{ position: 'relative' }}>
      {/* ── Hero ─────────────────────────────────────────── */}
      <section className="pa-hero">
        <div className="container">
          <div className="pa-hero-grid">
            <div className="pa-hero-copy">
              <Pill>The parent app</Pill>
              <h1 className="pa-hero-title">
                Their phone.<br/>
                <em>Your</em> peace of mind.
              </h1>
              <p className="pa-hero-sub">
                Free, included with every Ciao Bella. Add contacts, set quiet hours, listen to voicemail
                and see every call — all without standing over your child&apos;s shoulder.
              </p>
              <div className="pa-hero-meta">
                <span className="pa-hero-meta-item">Free with every Ciao Bella</span>
                <span className="pa-hero-meta-divider" aria-hidden="true">·</span>
                <span className="pa-hero-meta-item">iOS &amp; Android</span>
                <span className="pa-hero-meta-divider" aria-hidden="true">·</span>
                <span className="pa-hero-meta-item">Set up in 5 minutes</span>
              </div>

              <div className="pa-hero-ctas">
                <CTA onClick={() => goToConfigurator(navigate, currentRoute)}>Reserve for $25</CTA>
                <a href="#" className="pa-link" onClick={(e) => { e.preventDefault(); navigate('/for-parents'); }}>
                  More for parents
                  <span aria-hidden="true" style={{ marginLeft: 4 }}>→</span>
                </a>
              </div>
            </div>
            <div className="pa-hero-mock">
              <HomeMockup />
            </div>
          </div>
        </div>
      </section>

      <SectionDivider color="blue" />

      {/* ── FEATURE 1 — People ──────────────────────────── */}
      <section className="section pa-feat">
        <div className="container">
          <div className="pa-feat-grid">
            <div className="pa-feat-copy">
              <span className="pa-feat-num">i.</span>
              <h2>Their world,<br/>handpicked by you.</h2>
              <p>
                Add the people your child loves — Nanny, the best friend, the cousins — and only
                they can ring through. Everyone else stays out by default.
              </p>
              <ul className="pa-feat-list">
                <li><Icons.Check /> Approve or remove anyone in a tap</li>
                <li><Icons.Check /> Works for Ciao Bella phones <em>and</em> regular numbers</li>
                <li><Icons.Check /> Connection requests need your sign-off</li>
              </ul>
            </div>
            <div className="pa-feat-mock"><PeopleMockup /></div>
          </div>
        </div>
      </section>

      <SectionDivider color="yellow" />

      {/* ── FEATURE 2 — Shh time ────────────────────────── */}
      <section className="section pa-feat">
        <div className="container">
          <div className="pa-feat-grid reverse">
            <div className="pa-feat-mock"><ShhMockup /></div>
            <div className="pa-feat-copy">
              <span className="pa-feat-num">ii.</span>
              <h2>Quiet, on <em>your</em> schedule.</h2>
              <p>
                Set quiet hours for dinner, homework, sleep. The phone goes still — no rings,
                no buzz — until you let it back in. Emergency contacts can always get through.
              </p>
              <ul className="pa-feat-list">
                <li><Icons.Check /> Recurring schedules for school nights, weekends</li>
                <li><Icons.Check /> One-tap &ldquo;pause now&rdquo; for unscheduled quiet</li>
                <li><Icons.Check /> Always-allowed list for grandparents &amp; co-parent</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <SectionDivider color="red" />

      {/* ── FEATURE 3 — Voicemail ───────────────────────── */}
      <section className="section pa-feat">
        <div className="container">
          <div className="pa-feat-grid">
            <div className="pa-feat-copy">
              <span className="pa-feat-num">iii.</span>
              <h2>The little voices you&apos;ll want to keep.</h2>
              <p>
                Missed a call? The phone blinks gently. Your child presses
                <strong> 0 </strong>and there&apos;s Nanny — all on their own. The same message
                lands in your parent app, ready to save or share whenever you like.
              </p>
              <ul className="pa-feat-list">
                <li><Icons.Check /> Phone blinks when a message is waiting</li>
                <li><Icons.Check /> Kids press <strong>0</strong> to listen — no help needed</li>
                <li><Icons.Check /> Same messages in your parent app</li>
                <li><Icons.Check /> Stored for 30 days; one-tap delete sooner</li>
              </ul>
            </div>
            <div className="pa-feat-mock"><VoicemailMockup /></div>
          </div>
        </div>
      </section>

      <SectionDivider color="blue" />

      {/* ── FEATURE 4 — Chat log ────────────────────────── */}
      <section className="section pa-feat">
        <div className="container">
          <div className="pa-feat-grid reverse">
            <div className="pa-feat-mock"><ChatLogMockup /></div>
            <div className="pa-feat-copy">
              <span className="pa-feat-num">iv.</span>
              <h2>Every call, logged.<br/>No surprises.</h2>
              <p>
                See who called, when, how long they spoke. Blocked attempts show up too —
                so you know who&apos;s tried to ring through, and why we said no.
              </p>
              <ul className="pa-feat-list">
                <li><Icons.Check /> Incoming, outgoing, and blocked, in one place</li>
                <li><Icons.Check /> Tap any row for a full detail view</li>
                <li><Icons.Check /> Search by name, date, or contact</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <SectionDivider color="red" />

      {/* ── Closing CTA ─────────────────────────────────── */}
      <section className="section pa-close">
        <div className="container">
          <div className="pa-close-inner">
            <h2>One <em>phone</em>. One app. One small team behind both.</h2>
            <p>The parent app is free, included with every Ciao Bella. iOS and Android, ready when your phone arrives.</p>
            <CTA onClick={() => goToConfigurator(navigate, currentRoute)}>Reserve for $25</CTA>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ParentAppPage, HomeMockup, PeopleMockup, ShhMockup, SpeedDialMockup });
