// home.jsx — Purna Web homepage sections
const { useState: uS, useEffect: uE } = React;

function EngineDemo() {
  const steps = [
    { icon: "📥", text: "Lead captured", sub: "Website form · 9:47 PM Sunday", time: "+0s" },
    { icon: "🤖", text: "AI responded in customer's voice", sub: "SMS + email · scheduling link sent", time: "+47s" },
    { icon: "📅", text: "Appointment booked", sub: "Tuesday 8 AM · auto-added to calendar", time: "+3m" },
    { icon: "🔔", text: "Owner notified", sub: "Slack · ready for the visit", time: "+3m" },
    { icon: "✓", text: "Job closed · review requested", sub: "Auto-pinged 24h after completion", time: "+24h" },
  ];
  const [n, setN] = uS(0);
  uE(() => {
    const speed = (window.PW_ENGINE_SPEED || 900);
    if (n >= steps.length) { const r = setTimeout(() => setN(0), speed * 3); return () => clearTimeout(r); }
    const t = setTimeout(() => setN(n + 1), speed);
    return () => clearTimeout(t);
  }, [n]);
  return (
    <div className="engine">
      <div className="engine-callout tl"><span className="badge">+1</span><span>New lead captured</span></div>
      <div className="engine-callout br"><span>Revenue recovered</span><span style={{color:"#22C55E"}}>$2,340</span></div>
      <div className="engine-head">
        <div className="engine-title"><span className="engine-dot"/> AutoGrowthBase</div>
        <div className="engine-meta">LIVE · Phoenix HVAC</div>
      </div>
      <div className="engine-body">
        {steps.slice(0, n).map((s, i) => (
          <div key={i} className={`engine-step ${i < n - 1 || n === steps.length ? "done" : ""}`} style={{animationDelay: `${i * 0.05}s`}}>
            <div className="engine-icon">
              {(i < n - 1 || n === steps.length) ? (
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7l3 3 5-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              ) : (
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="4" stroke="currentColor" strokeWidth="1.6"/><circle cx="7" cy="7" r="1.6" fill="currentColor"/></svg>
              )}
            </div>
            <div className="engine-text">{s.text}<span className="sub">{s.sub}</span></div>
            <div className="engine-time">{s.time}</div>
          </div>
        ))}
      </div>
      <div className="engine-foot">
        <span className="label">Recovered this week</span>
        <span className="val">$11,420 · 23 leads</span>
      </div>
    </div>
  );
}

function MetricPanel() {
  return (
    <div className="metric-panel">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: 16, paddingBottom: 16, borderBottom: "1px solid var(--line)"}}>
        <div style={{display:"flex", alignItems:"center", gap:8, fontWeight:600, color:"var(--navy)", fontSize: 14}}>
          <span className="engine-dot"/> Phoenix HVAC · Live
        </div>
        <div className="label-mono">This week</div>
      </div>
      <div className="metric-row"><div><div className="lbl">Recovered revenue</div><span className="delta">+ $4,210 today</span></div><div className="val"><span className="accent">$11,420</span></div></div>
      <div className="metric-row"><div><div className="lbl">Leads answered &lt; 60s</div><span className="delta">100% on-time</span></div><div className="val"><span className="teal">23 / 23</span></div></div>
      <div className="metric-row"><div><div className="lbl">Booking conversion</div><span className="delta">+ 18 pts vs prev</span></div><div className="val">61%</div></div>
      <div className="metric-row"><div><div className="lbl">Median response</div><span className="delta">faster than human</span></div><div className="val">47s</div></div>
    </div>
  );
}

function TerminalPanel() {
  return (
    <div className="terminal-panel">
      <div className="terminal-head">
        <span className="terminal-dot" style={{background:"#FF5F56"}}/>
        <span className="terminal-dot" style={{background:"#FFBD2E"}}/>
        <span className="terminal-dot" style={{background:"#27C93F"}}/>
        <span style={{marginLeft:12, fontSize:11, color:"#5C6B7E", letterSpacing:"0.1em", textTransform:"uppercase"}}>autogrowthbase ~ phoenix-hvac</span>
      </div>
      <div><span className="prompt">$</span> autogrowthbase status</div>
      <div className="dim">  reading inbound channels...</div>
      <div><span className="ok">✓</span> Web forms <span className="dim">— online</span></div>
      <div><span className="ok">✓</span> Google Business <span className="dim">— online</span></div>
      <div><span className="ok">✓</span> Inbound SMS <span className="dim">— online</span></div>
      <div><span className="ok">✓</span> Voice deflection <span className="dim">— online</span></div>
      <div style={{marginTop:12}}><span className="prompt">$</span> tail -f leads.log</div>
      <div className="dim">[23:47:02] new lead · Sarah K · "AC not cooling"</div>
      <div className="dim">[23:47:49] reply sent · 47s · scheduling link</div>
      <div className="dim">[23:48:36] booked · Tue 08:00 · $4,210 est</div>
      <div className="dim">[23:48:37] notified owner · slack</div>
      <div style={{marginTop:12}}><span className="prompt">$</span> _<span style={{animation:"blink 1s infinite", color:"var(--teal-3)"}}>▎</span></div>
      <div style={{marginTop:18, padding:"10px 12px", background:"rgba(34,197,94,0.1)", border:"1px solid rgba(34,197,94,0.25)", borderRadius:8, color:"#22C55E", fontSize:12}}>
        Recovered this week: <span className="hi">$11,420 · 23 leads</span>
      </div>
    </div>
  );
}

// Lead-gen / chat & voice agent visual (slide 1)
function LeadGenPanel() {
  const [step, setStep] = uS(0);
  const lines = [
    { who: "voice", t: "Hi, this is Ava from Phoenix HVAC. I see you have AC trouble — can I get you booked?" },
    { who: "lead", t: "Yes — earliest you have?" },
    { who: "voice", t: "Tuesday 8 AM works. Texting confirmation now." },
    { who: "sys", t: "📅 Booked · Tue 08:00 · est. $4,210" },
    { who: "sys", t: "🎯 Lead qualified · routed to owner" },
  ];
  uE(() => {
    const speed = (window.PW_ENGINE_SPEED || 900);
    if (step >= lines.length) { const r = setTimeout(() => setStep(0), speed * 3); return () => clearTimeout(r); }
    const t = setTimeout(() => setStep(step + 1), speed);
    return () => clearTimeout(t);
  }, [step]);
  return (
    <div className="engine">
      <div className="engine-head">
        <div className="engine-title"><span className="engine-dot"/> AI Voice + Chat Agent</div>
        <div className="engine-meta">LIVE · inbound call</div>
      </div>
      <div className="engine-body" style={{minHeight: 320}}>
        {lines.slice(0, step).map((l, i) => (
          <div key={i} className={`chat-bubble chat-${l.who}`} style={{animationDelay: `${i * 0.05}s`}}>
            {l.who === "voice" && <div className="chat-who">🎙️ AI · Ava</div>}
            {l.who === "lead" && <div className="chat-who">👤 Sarah K.</div>}
            <div className="chat-text">{l.t}</div>
          </div>
        ))}
      </div>
      <div className="engine-foot">
        <span className="label">Captured · nurtured · booked</span>
        <span className="val">23/23 leads · 47s avg</span>
      </div>
    </div>
  );
}

// Enterprise / cloud architecture visual (slide 2)
function EnterprisePanel() {
  return (
    <div className="enterprise">
      <div className="ent-head">
        <span className="engine-dot"/> Enterprise AI Stack
        <span className="ent-meta">prod · multi-region</span>
      </div>
      <div className="ent-stack">
        <div className="ent-row ent-row-cloud">
          <div className="ent-cloud">GCP</div>
          <div className="ent-cloud">AWS</div>
          <div className="ent-cloud">Azure</div>
        </div>
        <div className="ent-pipe"/>
        <div className="ent-row ent-row-data">
          <div className="ent-card ent-snow">
            <div className="ent-card-tag">DATA WAREHOUSE</div>
            <div className="ent-card-name">❄️ Snowflake</div>
            <div className="ent-bars"><i style={{height: "60%"}}/><i style={{height: "85%"}}/><i style={{height: "45%"}}/><i style={{height: "92%"}}/><i style={{height: "70%"}}/></div>
          </div>
          <div className="ent-card ent-rag">
            <div className="ent-card-tag">RAG · VECTOR</div>
            <div className="ent-card-name">Embeddings + LLM</div>
            <div className="ent-vec"><span/><span/><span/><span/><span/><span/><span/><span/></div>
          </div>
        </div>
        <div className="ent-pipe"/>
        <div className="ent-row ent-row-app">
          <div className="ent-app">
            <span className="ent-app-dot"/> Custom AI Copilot
            <span className="ent-app-meta">deployed · 2,140 users</span>
          </div>
        </div>
      </div>
      <div className="engine-foot">
        <span className="label">SOC2 · VPC-isolated · BYOK</span>
        <span className="val">99.98% uptime</span>
      </div>
    </div>
  );
}

// TheraNote AI visual (slide 3)
function TheraPanel() {
  return (
    <div className="thera-panel">
      <div className="thera-bar">
        <div className="thera-bar-l"><span className="thera-lock">🔒</span> TheraNote AI · On-device</div>
        <div className="thera-bar-r">●●●</div>
      </div>
      <div className="thera-body">
        <div className="thera-section">
          <div className="thera-h">Session · Client A · 50 min</div>
          <div className="thera-row">
            <span className="thera-pill">SOAP</span>
            <span className="thera-pill thera-pill-on">Generated</span>
            <span className="thera-pill">100% local</span>
          </div>
        </div>
        <div className="thera-note">
          <div className="thera-tag">S — Subjective</div>
          <div className="thera-line">Client reports increased anxiety around work deadlines<span className="thera-cursor">▎</span></div>
          <div className="thera-tag">O — Objective</div>
          <div className="thera-line thera-dim">Affect congruent · cooperative · oriented x3</div>
          <div className="thera-tag">A — Assessment</div>
          <div className="thera-line thera-dim">GAD symptoms persist; mild improvement w/ CBT homework</div>
        </div>
        <div className="thera-priv">
          <div className="thera-priv-row"><span>📡</span> Network calls<span className="thera-zero">0</span></div>
          <div className="thera-priv-row"><span>💾</span> Data leaves device<span className="thera-zero">0</span></div>
          <div className="thera-priv-row"><span>✓</span> HIPAA-safe by architecture<span className="thera-ok">✓</span></div>
        </div>
      </div>
    </div>
  );
}

const HERO_SLIDES = [
  {
    id: "leadgen",
    eyebrow: "AI Lead Generation",
    badge: "01 · Lead capture & nurture",
    headline: "Capture every lead. Nurture with chat and voice agents.",
    accent: "voice agents.",
    body: "AI agents that answer the phone, reply to forms, and follow up — in under 60 seconds, 24/7. They sound like your business and book directly into your calendar.",
    cta: "See it in action",
    href: "growth-engine.html",
    stats: [
      { v: "<60s", l: "Response, 24/7", c: "accent" },
      { v: "+38%", l: "Booking rate lift", c: "green" },
      { v: "100%", l: "Inbound captured" },
    ],
    visual: LeadGenPanel,
  },
  {
    id: "enterprise",
    eyebrow: "Enterprise AI Software",
    badge: "02 · Custom AI products",
    headline: "Enterprise AI products on the cloud you already trust.",
    accent: "cloud you already trust.",
    body: "Custom AI applications on Snowflake, hosted on GCP, AWS, or Azure. SOC2-ready, VPC-isolated, BYOK. We build it on your stack — you own the IP.",
    cta: "Talk to engineering",
    href: "growth-engine.html",
    stats: [
      { v: "GCP·AWS·Azure", l: "Cloud-agnostic", c: "" },
      { v: "❄ Snowflake", l: "Data warehouse-native", c: "accent" },
      { v: "SOC2", l: "Security baseline", c: "green" },
    ],
    visual: EnterprisePanel,
  },
  {
    id: "thera",
    eyebrow: "TheraNote AI",
    badge: "03 · For therapists",
    headline: "Clinical notes, generated on-device. Private by design.",
    accent: "Private by design.",
    body: "TheraNote AI writes SOAP notes from session audio without anything leaving the laptop. No cloud upload, no third-party processing, no HIPAA exposure.",
    cta: "Explore TheraNote",
    href: "theranote.html",
    stats: [
      { v: "0", l: "Network calls", c: "green" },
      { v: "100%", l: "On-device", c: "accent" },
      { v: "HIPAA-safe", l: "By architecture" },
    ],
    visual: TheraPanel,
  },
];

function Hero() {
  const t = window.PW_TWEAKS_NOW || {};
  const [idx, setIdx] = uS(0);
  const [paused, setPaused] = uS(false);
  const slide = HERO_SLIDES[idx];

  uE(() => {
    if (paused) return;
    const dur = 6500;
    const id = setTimeout(() => setIdx((idx + 1) % HERO_SLIDES.length), dur);
    return () => clearTimeout(id);
  }, [idx, paused]);

  const renderHeadline = (h, a) => {
    if (!a || !h.includes(a)) return <>{h}</>;
    const i = h.lastIndexOf(a);
    return <>{h.slice(0, i)}<span className="accent">{a}</span>{h.slice(i + a.length)}</>;
  };

  const Visual = slide.visual;

  return (
    <section className="hero hero-slider"
             onMouseEnter={() => setPaused(true)}
             onMouseLeave={() => setPaused(false)}>
      <video
        className="hero-bg-video"
        autoPlay loop muted playsInline preload="auto"
        aria-hidden="true"
      >
        <source src="images/header-bg/ai-bg-video.mp4" type="video/mp4"/>
      </video>
      <div className="hero-bg-overlay" aria-hidden="true"/>
      <div className="container">
        <div className="hero-tabs">
          {HERO_SLIDES.map((s, i) => (
            <button key={s.id}
                    className={`hero-tab ${i === idx ? "is-active" : ""}`}
                    onClick={() => setIdx(i)}>
              <span className="hero-tab-num">0{i + 1}</span>
              <span className="hero-tab-lbl">{s.eyebrow}</span>
              {i === idx && !paused && <span className="hero-tab-prog"/>}
            </button>
          ))}
        </div>
        <div className="hero-slides">
          {HERO_SLIDES.map((s, i) => (
            <div key={s.id} className={`hero-slide ${i === idx ? "is-active" : ""}`} aria-hidden={i !== idx}>
              <div className="hero-grid">
                <div>
                  <span className="eyebrow">{s.badge}</span>
                  <h1 className="h1" style={{margin: "20px 0 24px"}}>{renderHeadline(s.headline, s.accent)}</h1>
                  <p className="lead" style={{marginBottom: 32}}>{s.body}</p>
                  <div className="hero-cta" style={{display:"flex", gap:12, flexWrap:"wrap"}}>
                    <a href={s.href} className="btn btn-primary btn-arr">
                      {s.cta}
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </a>
                    <a href="contact.html" className="btn btn-ghost">{t.ctaCopy || "Book a free demo"}</a>
                  </div>
                  <a href="https://www.bbb.org/ca/on/orillia/profile/digital-marketing/purna-web-agency-inc-0107-1418208#sealclick"
                     target="_blank" rel="noopener noreferrer"
                     className="hero-trust"
                     aria-label="BBB Accredited Business — view Purna Web Agency profile">
                    <span className="hero-trust-badge">
                      <img src="logo/bbb-logo.png" alt="BBB Accredited Business"/>
                    </span>
                    <span className="hero-trust-text">
                      <strong>BBB Accredited</strong>
                      <span>Verified profile · Orillia, ON</span>
                    </span>
                  </a>
                  <div className="hero-stats">
                    {s.stats.map((st, j) => (
                      <div key={j}>
                        <div className="hero-stat-num"><span className={st.c || ""}>{st.v}</span></div>
                        <div className="hero-stat-lbl">{st.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
                <div>
                  {i === idx && <Visual/>}
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="hero-controls">
          <button className="hero-nav" onClick={() => setIdx((idx - 1 + HERO_SLIDES.length) % HERO_SLIDES.length)} aria-label="Previous">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 3L5 7l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <div className="hero-dots">
            {HERO_SLIDES.map((s, i) => (
              <button key={s.id} className={`hero-dot ${i === idx ? "is-active" : ""}`} onClick={() => setIdx(i)} aria-label={`Slide ${i+1}`}/>
            ))}
          </div>
          <button className="hero-nav" onClick={() => setIdx((idx + 1) % HERO_SLIDES.length)} aria-label="Next">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
    </section>
  );
}

function Logos() {
  return (
    <section className="logos">
      <div className="container">
        <div className="logos-row">
          <div className="label-mono">Systems deployed for</div>
          <div className="logos-list">
            {["Phoenix HVAC", "BrightHome Plumbing", "Crisp Cleaning Co.", "Northstar Air", "Rapid Rooter", "Clearwater Pros"].map(l => (
              <div key={l} className="logo">{l}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Leak() {
  const items = [
    { num: "01", pct: "30–40%", title: "Leads lost after hours", body: "A form fill at 9 PM on Sunday is gone by Monday morning. They called your competitor first." },
    { num: "02", pct: "5–8 hrs", title: "Manual follow-up gap", body: "Even when leads are captured, busy owner-operators don't have time to chase every inquiry." },
    { num: "03", pct: "0", title: "Automation infrastructure", body: "Scheduling, reminders, reviews, upsells — all running on the owner's memory and Post-it notes." },
  ];
  return (
    <section className="sec">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow">The problem</span>
          <h2 className="h2">You're not losing a sales problem.<br/>You're losing a <span className="accent">systems problem.</span></h2>
          <p className="lead">Most home services businesses lose 30–40% of their inbound leads — not because the service is bad, but because nothing answers the phone at 2 AM on a Sunday.</p>
        </div>
        <div className="leak-grid reveal">
          {items.map(i => (
            <div className="leak-card" key={i.num}>
              <div className="leak-num"><span>{i.num}</span><span className="pct">{i.pct}</span></div>
              <h3 className="h3">{i.title}</h3>
              <p>{i.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  const svcs = [
    { num: "01", icon: "engine", title: "AutoGrowthBase", desc: "Custom AI infrastructure that captures, responds to, and converts every inbound lead. Installed into your business, owned by your business.", tags: ["Lead capture", "Auto-response <60s", "Booking", "Reviews"], featured: true, href: "growth-engine.html" },
    { num: "02", icon: "marketing", title: "AI Digital Marketing", desc: "Marketing systems that compound. AI-assisted content, ad optimization, and pipeline reporting — engineered to keep working after the budget changes.", tags: ["SEO", "Ads", "Content", "Reporting"], featured: false, href: "marketing.html" },
    { num: "03", icon: "software", title: "Custom AI Software", desc: "Bespoke AI applications for businesses outside home services. Built in-house, on your stack, scoped to your workflow — not assembled from third-party tools.", tags: ["Copilots", "Workflow", "RAG", "Integrations"], featured: false, href: "growth-engine.html" },
    { num: "04", icon: "shield", title: "TheraNote AI", desc: "Privacy-first note-taking for healthcare professionals. 100% on-device — no patient data leaves the screen. AI productivity without HIPAA risk.", tags: ["On-device", "HIPAA-safe", "SOAP notes"], featured: false, href: "theranote.html" },
  ];
  const Icon = ({ k }) => {
    const common = { width: 22, height: 22, viewBox: "0 0 22 22", fill: "none", strokeWidth: 1.8, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" };
    if (k === "engine") return <svg {...common}><circle cx="11" cy="11" r="3"/><path d="M11 1v3M11 18v3M21 11h-3M4 11H1M17.7 4.3l-2.1 2.1M6.4 15.6l-2.1 2.1M17.7 17.7l-2.1-2.1M6.4 6.4L4.3 4.3"/></svg>;
    if (k === "marketing") return <svg {...common}><path d="M3 13l5-5 4 4 7-7M14 5h5v5"/></svg>;
    if (k === "software") return <svg {...common}><rect x="2" y="3" width="18" height="14" rx="2"/><path d="M7 21h8M11 17v4M7 9l-2 2 2 2M15 9l2 2-2 2M13 8l-4 6"/></svg>;
    if (k === "shield") return <svg {...common}><path d="M11 1l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V4l8-3z"/><path d="M8 11l2 2 4-4"/></svg>;
    return null;
  };
  return (
    <section className="sec sec-grey" id="systems">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow">Four systems · One company</span>
          <h2 className="h2">Built in-house. <span className="accent">Owned by you.</span></h2>
          <p className="lead">We engineer the infrastructure. You run the business. Every system below is custom-built for your workflow — never resold from a third-party platform.</p>
        </div>
        <div className="svc-grid reveal">
          {svcs.map(s => (
            <div className={`svc-card ${s.featured ? "feat" : ""}`} key={s.num}>
              <div className="svc-icon"><Icon k={s.icon}/></div>
              <div className="svc-num">{s.num} · {s.featured ? "Flagship" : "System"}</div>
              <h3 className="h3">{s.title}</h3>
              <p>{s.desc}</p>
              <div className="svc-tags">{s.tags.map(t => <span key={t} className="svc-tag">{t}</span>)}</div>
              <a href={s.href} className="svc-link">
                Explore the system
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: "1", t: "Discovery", d: "We analyze your inbound channels and project exactly how much revenue you're currently leaking.", time: "Week 0 · Free" },
    { n: "2", t: "Build", d: "We engineer your AutoGrowthBase deployment — integrations, AI flows, scheduling, reviews. You stay focused on the job.", time: "Weeks 1–3" },
    { n: "3", t: "Deploy", d: "System goes live. Tested across your real channels. Owner walked through the dashboard in 30 minutes.", time: "Week 4" },
    { n: "4", t: "Optimize", d: "We tune response copy, escalation rules, and integrations as your business grows. You don't manage it.", time: "Ongoing" },
  ];
  return (
    <section className="sec" id="how">
      <div className="container">
        <div className="sec-head-row reveal">
          <div>
            <span className="eyebrow">How it works</span>
            <h2 className="h2" style={{marginTop: 16}}>From kickoff to a system that pays for <span className="accent">itself.</span></h2>
          </div>
          <p className="lead" style={{marginBottom: 8}}>AutoGrowthBase is infrastructure, not software. We install it. You run your business. The typical client recovers their investment in the first 30 days.</p>
        </div>
        <div className="process-grid reveal">
          {steps.map(s => (
            <div className="process-step" key={s.n}>
              <div className="process-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
              <div className="process-time">{s.time}</div>
            </div>
          ))}
        </div>
        <div className="process-cta reveal">
          <a href="contact.html" className="btn btn-primary btn-arr">
            Book a demo
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

function Outcomes() {
  return (
    <section className="sec sec-navy">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow">By the numbers</span>
          <h2 className="h2">Real systems. <span className="accent">Real recovered revenue.</span></h2>
        </div>
        <div className="outcome-grid reveal">
          <div className="outcome-cell"><div className="outcome-num"><span className="accent">$60k</span></div><div className="outcome-lbl">Recovered first-month pipeline · top client</div></div>
          <div className="outcome-cell"><div className="outcome-num"><span className="teal">47s</span></div><div className="outcome-lbl">Median response time across deployments</div></div>
          <div className="outcome-cell"><div className="outcome-num"><span className="accent">94%</span></div><div className="outcome-lbl">Client retention after year one</div></div>
          <div className="outcome-cell"><div className="outcome-num"><span className="teal">24/7</span></div><div className="outcome-lbl">Always-on. Nights, weekends, holidays.</div></div>
        </div>
      </div>
    </section>
  );
}

function Audience() {
  return (
    <section className="sec">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow">Who we build for</span>
          <h2 className="h2">Two audiences. <span className="accent">One philosophy.</span></h2>
          <p className="lead">We build privacy-first AI infrastructure for businesses that need to capture more revenue — and clinicians who can't put patient data in the cloud.</p>
        </div>
        <div className="aud-grid reveal">
          <div className="aud-card">
            <div className="aud-tag">Primary</div>
            <h3>Home services owner-operators</h3>
            <p>HVAC, plumbing, cleaning, and adjacent trades — 3 to 30 employees. You're great at the trade, generating real inbound demand, and watching too many leads slip through manual follow-up.</p>
            <ul className="aud-list">
              <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8l3 3 7-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>Recover 23–60 leads in first 30 days</li>
              <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8l3 3 7-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>Works while you're on the job</li>
              <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8l3 3 7-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>No new staff. No new tabs to manage.</li>
            </ul>
            <a href="growth-engine.html" className="btn btn-dark btn-arr">
              AutoGrowthBase
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
            </a>
          </div>
          <div className="aud-card alt">
            <div className="aud-tag">Secondary</div>
            <h3>Healthcare & clinical practitioners</h3>
            <p>Therapists, psychologists, and small clinical practices who want AI productivity but can't legally or ethically send patient data to the cloud. TheraNote AI keeps everything on-device.</p>
            <ul className="aud-list">
              <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8l3 3 7-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>100% on-device — no cloud, ever</li>
              <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8l3 3 7-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>SOAP notes, summaries, drafts</li>
              <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8l3 3 7-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>HIPAA-safe by architecture</li>
            </ul>
            <a href="theranote.html" className="btn btn-dark btn-arr">
              TheraNote AI
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="sec sec-grey">
      <div className="container">
        <div className="quote-card reveal">
          <div>
            <blockquote>The system answered a lead at 11:47 PM on a Saturday and had the appointment booked before I even saw the notification. We recovered $18,400 in the first month. It paid for itself before our second invoice.</blockquote>
            <div className="quote-author">
              <div className="quote-avatar">MR</div>
              <div>
                <div className="quote-name">Marcus Reyes</div>
                <div className="quote-role">Owner · Phoenix HVAC · 14-truck operation</div>
              </div>
            </div>
          </div>
          <div className="quote-stat">
            <div className="quote-stat-num">$18.4k</div>
            <div className="quote-stat-lbl">Recovered · first 30 days</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Thera() {
  return (
    <section className="sec">
      <div className="container">
        <div className="thera-card reveal">
          <div>
            <span className="eyebrow" style={{color: "var(--teal-3)"}}>TheraNote AI · Healthcare</span>
            <h2 className="h2" style={{marginTop: 16}}>AI notes that <span className="accent">never leave the device.</span></h2>
            <p className="lead">A privacy-first note-taking app built for therapists and clinicians who can't put patient data in the cloud. Local AI models. Zero transmission. HIPAA-safe by architecture, not by policy.</p>
            <ul className="thera-features">
              <li><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 9l4 4 8-9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg><span>SOAP notes, summaries, and clinical writing — generated locally</span></li>
              <li><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 9l4 4 8-9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg><span>No internet required. No account. No upload.</span></li>
              <li><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 9l4 4 8-9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg><span>Built for solo practitioners and small practices</span></li>
            </ul>
            <a href="theranote.html" className="btn btn-primary btn-arr">
              Try TheraNote free
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
            </a>
          </div>
          <div className="thera-mock">
            <div className="thera-mock-head">
              <div style={{fontFamily: "var(--mono)", fontSize: 11, color: "rgba(255,255,255,0.5)", letterSpacing: "0.1em", textTransform: "uppercase"}}>Session · 47 min</div>
              <div className="privacy">
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2 2 4-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                On-device
              </div>
            </div>
            <div className="thera-mock-section-label">Subjective</div>
            <div className="thera-mock-line long"/>
            <div className="thera-mock-line med"/>
            <div className="thera-mock-section-label">Objective</div>
            <div className="thera-mock-line long"/>
            <div className="thera-mock-line short"/>
            <div className="thera-mock-section-label">Assessment</div>
            <div className="thera-mock-line teal long"/>
            <div className="thera-mock-line med"/>
            <div className="thera-mock-section-label">Plan</div>
            <div className="thera-mock-line long"/>
            <div className="thera-mock-line short"/>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: "How is this different from a CRM or marketing tool?", a: "Off-the-shelf tools require manual operation — they organize leads but don't respond to them. AutoGrowthBase works on top of (or instead of) those tools to eliminate the response gap. Leads get answered in under 60 seconds, automatically, around the clock." },
    { q: "How quickly can we go live?", a: "Onboarding and system build take 2–4 weeks. After that, the system runs autonomously. Clients spend roughly 2–3 hours total during onboarding — we handle the build, integrations, and tuning." },
    { q: "How does pricing work?", a: "AutoGrowthBase is structured as an upfront build fee plus a monthly retainer for maintenance and optimization. Pricing is scoped per business based on lead volume and integration complexity. Most clients recover the cost in the first 30 days through recovered leads." },
    { q: "Will this work with our existing CRM and phone system?", a: "Yes. We integrate with the tools you already use — HouseCall Pro, ServiceTitan, Jobber, HubSpot, and standard phone/SMS providers. AutoGrowthBase sits on top of your stack, not in place of it." },
    { q: "We don't have time to manage another tool.", a: "You won't. AutoGrowthBase is infrastructure, not software you log into. After installation, the owner gets a weekly dashboard email and a Slack notification when something needs human attention. That's it." },
    { q: "Why 'systems company' and not 'agency'?", a: "Agencies sell ongoing creative and management work. We engineer infrastructure that belongs to your business — it keeps working even if our relationship ends. You own the asset; we maintain it." },
  ];
  const [open, setOpen] = uS(0);
  return (
    <section className="sec sec-grey">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow">Common questions</span>
          <h2 className="h2">Honest answers to the questions <span className="accent">we hear most.</span></h2>
        </div>
        <div className="faq-list reveal">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-row">
                <h4 className="faq-q">{it.q}</h4>
                <button className="faq-toggle" aria-label="Toggle">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                </button>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Logos, Leak, Services, Process, Outcomes, Audience, Quote, Thera, FAQ });