/* global React */
const { useState } = React;

// =================================================================
// SHARED — iPhone frame
// =================================================================
function IPhone({ landscape = false, scale = 1, children, className = "" }) {
  return (
    <div
      className={"iphone " + (landscape ? "landscape " : "") + className}
      style={{ transform: scale !== 1 ? `scale(${scale})` : undefined }}
    >
      <span className="iphone-side l-vol-1" />
      <span className="iphone-side l-vol-2" />
      <span className="iphone-side l-vol-3" />
      <span className="iphone-side r-pwr" />
      <div className="iphone-screen">
        <div className="iphone-notch" />
        {children}
        <div className="ios-home-bar" />
      </div>
    </div>
  );
}

function IOSStatus({ time = "9:41", dark = false }) {
  return (
    <div className="ios-status" style={dark ? { color: "#000" } : {}}>
      <span>{time}</span>
      <span style={{ width: 90 }} />
      <span className="icons">
        <svg viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="9" width="3" height="3" rx="0.5"/><rect x="5" y="6" width="3" height="6" rx="0.5"/><rect x="10" y="3" width="3" height="9" rx="0.5"/><rect x="15" y="0" width="3" height="12" rx="0.5"/></svg>
        <svg viewBox="0 0 16 12" fill="currentColor"><path d="M8 3c2 0 4 1 5 2l1-1c-2-2-4-3-6-3s-4 1-6 3l1 1c1-1 3-2 5-2zm0 3c1 0 2 0 3 1l1-1c-1-1-2-2-4-2s-3 1-4 2l1 1c1-1 2-1 3-1zm0 3a2 2 0 100 4 2 2 0 000-4z"/></svg>
        <span className="battery"><span /></span>
      </span>
    </div>
  );
}

// =================================================================
// NAV
// =================================================================
function Nav({ brand }) {
  return <SiteNav ctaHref="book.html" />;
}

// =================================================================
// §1 HERO — flipping phone
// =================================================================
const HERO_ADS = [
  {
    niche: "clinic",
    tag: "BACK PAIN AD · 2.4M VIEWS",
    headline: <>Stop the back pain — <em>without</em> surgery.</>,
    sub: "Renuva · 4.81× ROAS in 90 days",
    avatar: "R",
    name: "Renuva Pain Centre",
    label: "Sponsored",
    cta: "Book Free",
  },
  {
    niche: "home",
    tag: "SOLAR AD · 890K VIEWS",
    headline: <>Cut the power bill. <em>Forever.</em></>,
    sub: "Apricot Solar · 97 booked consults",
    avatar: "A",
    name: "Apricot Solar",
    label: "Sponsored",
    cta: "Get Quote",
  },
  {
    niche: "coach",
    tag: "COACH AD · 1.1M VIEWS",
    headline: <>From 0 to 7-figures. <em>The system.</em></>,
    sub: "Carrie June · $194K · 4.81× ROAS",
    avatar: "C",
    name: "Miss Carrie June",
    label: "Sponsored",
    cta: "Watch Free",
  },
];

const HERO_NOTIFS = [
  { app: "Boca Laser", when: "2m ago",  ttl: "+$840 booked",      desc: "Stripe · iPhone 15 Pro · Boca Raton, FL" },
  { app: "Alanis Air", when: "4m ago",  ttl: "Sarah Mendez opted in",   desc: "Lead form · 555-0142 · Calgary, AB" },
  { app: "Dr. Joey Alcantara", when: "6m ago", ttl: "+324 leads this month",   desc: "Meta · CPL $4.70 · CTR 4.86% · Reach 40,093" },
  { app: "MiniBeast", when: "8m ago",   ttl: "$1,200 closed",     desc: "Shopify · Order #38291 · Toronto, ON" },
  { app: "Permanent Lights", when: "11m ago", ttl: "Estimate booked", desc: "26.6× ROI · Calgary, AB" },
];

function Hero({ tagline }) {
  return (
    <section className="hero" id="top">
      <a href="book.html" className="hero-chip">
        <span className="badge">
          <svg viewBox="0 0 12 12" fill="white"><path d="M6 1l1.5 3 3.3.5-2.4 2.3.6 3.3L6 8.6 3 10.1l.6-3.3L1.2 4.5l3.3-.5z"/></svg>
          SIGNED GUARANTEE
        </span>
        3X in 90 days, or we work free <span style={{ color: "var(--fg-3)" }}>→</span>
      </a>
      <h1 className="display">
        3X ROAS in 90 days.<br /><span className="v">Or we work free.</span>
      </h1>
      <p className="lede">{tagline}</p>
      <div className="hero-ctas">
        <a href="book.html" className="btn btn-violet">Book my call <span className="arrow">→</span></a>
        <a href="#dashboard" className="btn btn-ghost">See the live dashboard</a>
      </div>
      <div className="hero-trust hero-trust-big">
        <div className="hero-trust-item"><div className="num">$117M+</div><div className="lab">Ad Spend</div></div>
        <div className="hero-trust-sep" />
        <div className="hero-trust-item"><div className="num">$432M+</div><div className="lab">Client Revenue</div></div>
        <div className="hero-trust-sep" />
        <div className="hero-trust-item"><div className="num">385</div><div className="lab">Active Accounts</div></div>
        <div className="hero-trust-sep" />
        <div className="hero-trust-item"><div className="num">8+ yrs</div><div className="lab">Experience</div></div>
      </div>

    </section>
  );
}

Object.assign(window, { IPhone, IOSStatus, Nav, Hero });