/* Page sections — Pronto */
const { useState: useS } = React;

function Stat({ size = "med", num, unit, body, src, srcUrl, year }) {
  return (
    <div className={`stat ${size}`}>
      <div className="num">{num}{unit && <span className="unit">{unit}</span>}</div>
      <div className="body">{body}</div>
      <div className="src">
        {year && <span style={{ marginRight: 6, color: "var(--accent)", fontWeight: 500 }}>{year}</span>}
        Source · <a href={srcUrl} target="_blank" rel="noreferrer">{src}</a> ↗
      </div>
    </div>
  );
}

function ProblemSection() {
  return (
    <section id="problem">
      <div className="container">
        <div className="sec-head">
          <div className="sec-num">01 — The problem</div>
          <h2 className="sec-title">Every missed call is a lead <em>already leaving.</em></h2>
        </div>
        <div className="stats-grid">
          <Stat size="big"
            num="62" unit="%"
            year="2024"
            body={<>of calls to small businesses go unanswered. Only 37.8% are picked up by a live person — the rest hit voicemail or ring out entirely. That's the majority of your inbound, gone.</>}
            src="411 Locals — 85-business study across 58 industries"
            srcUrl="https://411locals.us/small-business-owners-dont-answer-62-of-phone-calls/"
          />
          <Stat size="med"
            num="85" unit="%"
            year="2024"
            body="of callers who reach voicemail never call back. They don't leave a message — they dial the next result on Google."
            src="AIRA — Missed Business Calls Data"
            srcUrl="https://www.getaira.io/blog/missed-business-calls-statistics"
          />
          <Stat size="sm"
            num="47" unit="hrs"
            year="2025"
            body="Average business response time to a new lead. The 5-minute window is empty almost everywhere."
            src="HubSpot Sales Benchmark Report"
            srcUrl="https://greetnow.com/blog/lead-response-time-statistics"
          />
          <Stat size="sm"
            num="52" unit="%"
            year="2025"
            body="of leads arrive outside business hours — after 5pm, weekends, lunch. When no one's there to answer."
            src="HubSpot — Lead Timing Research"
            srcUrl="https://greetnow.com/blog/lead-response-time-statistics"
          />
          <Stat size="sm"
            num="63" unit="%"
            year="2024"
            body="of companies never respond to a new lead at all — up from 23% in 2011. The gap is getting worse, not better."
            src="RevenueHero — 1,000+ Company Study"
            srcUrl="https://verse.ai/blog/speed-to-lead-statistics"
          />
        </div>
        <p style={{
          marginTop: 32, maxWidth: "70ch",
          color: "var(--ink-dim)", fontSize: 14, lineHeight: 1.6,
          fontFamily: "var(--mono)"
        }}>
          For a single-location med spa or a 4-person law firm, missing even one call a day is thousands
          of dollars in lost revenue a year. Speed isn't a differentiator anymore — it's the baseline.
        </p>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    {
      n: "01",
      t: "Your phone rings.",
      b: "You're with a patient, on a job site, or simply unavailable. The call goes unanswered — where 85% of leads disappear forever.",
      icon: "📵",
    },
    {
      n: "02",
      t: "We text them back in seconds.",
      b: "Pronto detects the missed call and fires an instant SMS — before they dial the next number. We also send a Google Calendar booking link so they can grab a time right then.",
      icon: "💬",
    },
    {
      n: "03",
      t: "They book. You show up.",
      b: "The lead picks a slot. It lands on your Google Calendar automatically — confirmed, with a Meet link. You walk into a full day, not a full inbox.",
      icon: "📅",
    },
  ];
  return (
    <section id="how">
      <div className="container">
        <div className="sec-head">
          <div className="sec-num">02 — How it works</div>
          <h2 className="sec-title">Missed call in. <em>Booked appointment out.</em></h2>
        </div>
        <div className="steps">
          {steps.map(s => (
            <div className="step" key={s.n}>
              <div className="ico">{s.icon}</div>
              <div className="stepnum">STEP {s.n}</div>
              <div className="stept">{s.t}</div>
              <div className="stepb">{s.b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features() {
  return (
    <section id="features">
      <div className="container">
        <div className="sec-head">
          <div className="sec-num">03 — Product</div>
          <h2 className="sec-title">Miss the call. <em>Never miss the lead.</em></h2>
        </div>

        <div className="features">
          {/* Feature 1: Instant text-back */}
          <div className="feat huge">
            <div className="ftag">Instant text-back · Live now</div>
            <div className="ftitle" style={{ fontSize: 36, maxWidth: "22ch" }}>
              Someone calls. You miss it. They get a text in seconds.
            </div>
            <div className="fbody" style={{ maxWidth: "60ch" }}>
              Connect your business phone number once. Every missed call triggers an automatic,
              personalized SMS — keeping the lead warm and the conversation open until you're free.
              No script to write. No app to check. Just incoming replies from people who want to hear from you.
            </div>
            <div className="sms-mock" style={{ maxWidth: 380, marginTop: 18 }}>
              <div className="sms-head">
                <span className="pulse"/>
                <span>Pronto · outbound SMS · 9:52 PM</span>
              </div>
              <div className="sms-body">
                <div className="sms-msg out">
                  Hey! Sorry we missed your call. How can we help? You can also book a time directly: cal.getpronto.tech/shiv
                </div>
                <div className="sms-msg in">
                  Just booked Tuesday 2pm — thanks!
                </div>
                <div className="sms-msg out">
                  ✓ Confirmed! Google Calendar invite sent. See you Tuesday.
                </div>
              </div>
            </div>
          </div>

          {/* Feature 2: Google Calendar — LIVE NOW */}
          <div className="feat wide">
            <div className="ftag">Google Calendar · Live now</div>
            <div className="ftitle">They book themselves. You just show up.</div>
            <div className="fbody">
              Every text-back includes your personal booking link. Leads pick a slot, and it lands
              directly on your Google Calendar — confirmed, no back-and-forth. Expanding to multi-staff
              routing and buffer time management soon.
            </div>
            <div className="cal-mini" style={{ marginTop: "auto" }}>
              <div className="row"><span>Tue · 10:00 AM</span><span className="t">— Already booked</span></div>
              <div className="row on"><span>Tue · 2:00 PM</span><span className="t">+ Sarah M. (inbound call)</span></div>
              <div className="row"><span>Tue · 3:30 PM</span><span className="t">— Already booked</span></div>
              <div className="row on"><span>Wed · 11:00 AM</span><span className="t">+ David R. (inbound call)</span></div>
            </div>
          </div>

          <div className="feat wide">
            <div className="ftag">You stay in control</div>
            <div className="ftitle">You write the message. We send it.</div>
            <div className="fbody">
              Set a custom reply text that matches your voice. Update it anytime from a simple dashboard.
              No AI generating things you didn't approve — just your words, sent instantly.
            </div>
          </div>

          {/* Coming soon */}
          <div className="feat soon">
            <div className="ftag soon-tag">Coming soon</div>
            <div className="ftitle">Multi-channel</div>
            <div className="fbody">
              Extend to web forms, DMs, and email. One inbox for every inbound channel you already use.
            </div>
          </div>

          <div className="feat soon">
            <div className="ftag soon-tag">Coming soon</div>
            <div className="ftitle">Multi-staff routing</div>
            <div className="fbody">
              Route inbound leads to the right team member automatically, with smart calendar availability checking.
            </div>
          </div>

          <div className="feat soon">
            <div className="ftag soon-tag">Coming soon</div>
            <div className="ftitle">AI qualification</div>
            <div className="fbody">
              Let the SMS thread qualify budget, service type, and timeline before a human steps in.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Founder() {
  return (
    <section id="about">
      <div className="container">
        <div className="sec-head">
          <div className="sec-num">04 — Why we built this</div>
          <h2 className="sec-title">The problem is embarrassingly simple.</h2>
        </div>
        <div className="founder">
          <div className="founder-img">
            {/* Large italic initial — replace with real photo when ready */}
            <span className="initial">S</span>
            {/* Abstract geometric avatar */}
            <svg className="portrait-shape" viewBox="0 0 160 200" fill="none" xmlns="http://www.w3.org/2000/svg">
              {/* Head */}
              <ellipse cx="80" cy="72" rx="46" ry="50" fill="currentColor" style={{ color: "var(--ink)", opacity: 0.12 }}/>
              <ellipse cx="80" cy="70" rx="40" ry="44" fill="currentColor" style={{ color: "var(--bg-2)", opacity: 1 }}/>
              {/* Collar / shoulders */}
              <path d="M34 148 Q50 120 80 132 Q110 120 126 148 L140 200 H20 Z" fill="currentColor" style={{ color: "var(--accent)", opacity: 0.15 }}/>
              {/* Eyes — minimal */}
              <circle cx="65" cy="66" r="4" fill="currentColor" style={{ color: "var(--ink)", opacity: 0.18 }}/>
              <circle cx="95" cy="66" r="4" fill="currentColor" style={{ color: "var(--ink)", opacity: 0.18 }}/>
              {/* Mouth */}
              <path d="M68 88 Q80 96 92 88" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" style={{ color: "var(--ink)", opacity: 0.16 }} fill="none"/>
            </svg>
            <span className="tag" style={{ position: "absolute", bottom: 18, left: 18 }}>SHIV · FOUNDER · PHOTO COMING</span>
          </div>
          <div className="founder-letter">
            <p>Small businesses spend real money on ads, referrals, and word-of-mouth to get their phone to ring. And then nobody picks up.</p>
            <p>Not because they don't care — because they're busy doing the actual work. You can't answer every call when you're mid-appointment or on a job site.</p>
            <p>Pronto is the simplest possible fix: the moment a call goes unanswered, the lead gets a text — and a link to book a time on your calendar. The conversation stays open. The appointment gets made.</p>
            <p>We're going to keep expanding it. But we'd rather ship something real and honest today than promise features that don't exist yet.</p>
            <div className="sig">— Shiv</div>
            <div className="role">Founder, Pronto · Early access</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA({ onBook }) {
  return (
    <section className="cta">
      <div className="container">
        <h2>
          Stop losing leads<br/>
          <em>to your voicemail.</em><br/>
          <span className="lime">Start today.</span>
        </h2>
        <div className="cta-sub">15-minute call · we connect to your phone live · no slides, no pressure.</div>
        <div className="cta-row">
          <button className="btn btn-primary" onClick={onBook}>
            Get early access <span className="arrow">→</span>
          </button>
          <a className="btn btn-ghost" href="#how">See how it works</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-row">
          <div>© 2026 PRONTO · EARLY ACCESS</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="privacy.html">Privacy</a>
            <a href="terms.html">Terms</a>
            <a href="mailto:hi@getpronto.tech">hi@getpronto.tech</a>
          </div>
          <div>GETPRONTO.TECH · MVP</div>
        </div>
      </div>
    </footer>
  );
}

function Marquee() {
  const items = [
    "Instant text-back for missed calls",
    "Google Calendar booking · Live now",
    "Works with any phone number",
    "SMS reply in under 60 seconds",
    "You write the message · we send it",
    "Coming soon: AI qualification",
    "Early access — join the waitlist",
  ];
  const row = (
    <span>
      {items.flatMap((t, i) => [
        <span key={"t" + i}>{t}</span>,
        <span key={"s" + i} className="sep">★</span>,
      ])}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">{row}{row}{row}{row}</div>
    </div>
  );
}

window.ProblemSection = ProblemSection;
window.HowItWorks = HowItWorks;
window.Features = Features;
window.Founder = Founder;
window.CTA = CTA;
window.Footer = Footer;
window.Marquee = Marquee;