// pages.jsx — Purna Web interior pages

function GrowthEnginePage() {
  const features = [
    { name: "Lead capture", desc: "Web forms, calls, Google, social — every channel feeds one pipeline. Nothing slips between platforms." },
    { name: "AI auto-response <60s", desc: "Personalized response to every inbound lead in your business's voice. 24/7, including nights, weekends, holidays." },
    { name: "Scheduling automation", desc: "Live calendar integration. The customer picks a time before your competitor calls them back." },
    { name: "Follow-up sequences", desc: "Automated nurture flows that keep working until the lead books or opts out. No manual chasing." },
    { name: "Review generation", desc: "Auto-pinged 24h after job completion. Reviews compound; reputation is infrastructure." },
    { name: "Reporting dashboard", desc: "Weekly email + live dashboard: leads captured, responded to, converted, and revenue recovered." },
  ];
  return (
    <>
      <Nav active="growth-engine"/>
      <section className="page-intro">
        <div className="container">
          <img src="crmlogo.png" alt="AutoGrowthBase" className="page-logo"/>
          <span className="eyebrow">Flagship · AutoGrowthBase</span>
          <h1 className="h1">No lead goes unanswered.<br/><span className="accent">No revenue gets left behind.</span></h1>
          <p className="lead">Custom AI infrastructure that captures, responds to, and converts every inbound lead — installed into your existing operations, owned by your business.</p>
        </div>
      </section>
      <section className="sec">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">What you get</span>
            <h2 className="h2">Six systems. <span className="accent">One installation.</span></h2>
          </div>
          <div className="offer-list reveal">
            {features.map(f => (
              <div className="offer-row" key={f.name}>
                <div className="offer-name">{f.name}</div>
                <div className="offer-desc">{f.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Process/>
      <Outcomes/>
      <FAQ/>
      <CTABanner/>
      <Footer/>
    </>
  );
}

function MarketingPage() {
  const headliners = [
    {
      id: "chat",
      tag: "01",
      name: "AI Chat Agent",
      desc: "An always-on chat agent on your website, in your tone of voice. Qualifies the visitor, answers the question, and books the appointment — in under 60 seconds, 24/7. Captures every form submission and DMs across IG, FB, and Google Business Profile.",
      bullets: ["Lead qualification + scoring", "Calendar + CRM write-back", "Multi-channel social inbox", "Trained on your offer + service area"],
    },
    {
      id: "voice",
      tag: "02",
      name: "AI Voice Agent",
      desc: "A 24/7 receptionist that picks up every overflow and after-hours call in your business's voice. Triages emergencies, books routine work, and pages your on-call team only when something needs human attention.",
      bullets: ["After-hours + overflow coverage", "Emergency vs. routine triage", "Books directly into your dispatch board", "Live transfer when stakes are high"],
    },
    {
      id: "email",
      tag: "03",
      name: "AI Email Nurturing Campaigns",
      desc: "Multi-touch email sequences with AI-personalized subject lines, AI-segmented audiences, and behavioral triggers. The campaign learns what each subscriber opens and adjusts automatically — no list-pulling, no manual segmentation.",
      bullets: ["Pre-built nurture, re-engagement, and post-visit flows", "AI-personalized subject lines + send times", "Behavioral triggers + segmentation", "Attribution from open → click → revenue"],
    },
    {
      id: "ppc",
      tag: "04",
      name: "AI PPC Ad Campaigns",
      desc: "AI-generated ad creative tested at scale across Google, Facebook, and Instagram. AI bid optimization that learns from your conversion data — not someone else's benchmarks. Every dollar tied to a lead, every lead tied to revenue.",
      bullets: ["AI-generated ad copy + creative variants", "Bid optimization on your conversion data", "Geo + demographic targeting at scale", "Pipeline-attributed reporting"],
    },
  ];
  const supporting = [
    { name: "SEO & content systems", desc: "Programmatic + editorial SEO pages that compound monthly. AI-assisted content engineered for your buyer — human-edited, machine-scaled." },
    { name: "Reputation & AI review systems", desc: "AI-prompted review requests at the perfect moment, AI-drafted responses, sentiment monitoring across Google / Facebook / Yelp." },
    { name: "Sales funnels & landing pages", desc: "AI-generated landing page variants, conversion-tested. Abandoned-cart triggers, post-purchase upsells — personalization built in from day one." },
    { name: "CRM automation", desc: "Lead scoring, triage, and follow-up handled by AI agents — your CRM becomes a 24/7 sales coordinator." },
  ];
  return (
    <>
      <Nav active="marketing"/>
      <section className="cai-hero" style={{backgroundImage: `linear-gradient(120deg, rgba(11,46,77,0.92) 0%, rgba(11,46,77,0.55) 55%, rgba(11,46,77,0.18) 100%), url(images/header-bg/hero-ai-blue.png)`}}>
        <div className="container">
          <div className="cai-hero-inner reveal">
            <span className="eyebrow eyebrow-light">AI Digital Marketing</span>
            <h1 className="h1 cai-hero-h1">Marketing infrastructure that <span className="accent">compounds.</span></h1>
            <p className="lead cai-hero-lead">Not campaigns that stop performing when the budget stops. We engineer four core AI marketing systems — chat agent, voice agent, email nurture, and PPC — that capture every lead, nurture every prospect, and attribute every dollar to revenue. Distinct from agency work. Owned by your business.</p>
            <div className="cai-hero-cta">
              <a href="contact.html" className="btn btn-primary btn-arr">
                Book a discovery call
                <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="#chat" className="btn btn-light">See the four systems</a>
            </div>
          </div>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">The four core systems</span>
            <h2 className="h2">Built for the AI era. <span className="accent">Tuned to your funnel.</span></h2>
            <p className="lead">Each system stands on its own — and gets stronger when integrated with the others. Pick what you need, deploy in weeks, scale on your stack.</p>
          </div>
          <div className="reveal" style={{display: "grid", gridTemplateColumns: "1fr", gap: 24, marginTop: 48, maxWidth: 1080, margin: "48px auto 0"}}>
            {headliners.map(h => (
              <div id={h.id} key={h.id} style={{scrollMarginTop: 100, background: "var(--white)", border: "1px solid var(--line)", borderLeft: "3px solid var(--teal)", borderRadius: "var(--r-lg)", padding: "32px 36px", display: "grid", gridTemplateColumns: "auto 1fr", gap: 28, alignItems: "start"}}>
                <div style={{width: 56, height: 56, borderRadius: 12, background: "linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%)", color: "#FFF", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 18, fontFamily: "var(--mono)", letterSpacing: "0.04em", boxShadow: "0 6px 14px rgba(46, 181, 180, 0.3)", flexShrink: 0}}>{h.tag}</div>
                <div>
                  <h3 className="h3" style={{fontSize: 22, marginBottom: 10}}>{h.name}</h3>
                  <p style={{color: "var(--text-muted)", fontSize: 15, lineHeight: 1.6, margin: "0 0 18px"}}>{h.desc}</p>
                  <ul style={{listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 24px"}}>
                    {h.bullets.map((b, i) => (
                      <li key={i} style={{display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13.5, color: "var(--navy)", lineHeight: 1.45}}>
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{flexShrink: 0, marginTop: 4, color: "#22C55E"}}><path d="M3 7l3 3 5-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                        {b}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">Plus, when you need it</span>
            <h2 className="h2">The supporting cast.</h2>
            <p className="lead">Four more systems we ship alongside the core four — picked per engagement based on what your funnel needs.</p>
          </div>
          <div className="offer-list reveal">
            {supporting.map(o => (
              <div className="offer-row" key={o.name}>
                <div className="offer-name">{o.name}</div>
                <div className="offer-desc">{o.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Outcomes/>
      <CTABanner/>
      <Footer/>
    </>
  );
}

function TheraNotePage() {
  return (
    <>
      <Nav active="theranote"/>
      <section className="page-intro">
        <div className="container">
          <span className="eyebrow">TheraNote AI · Healthcare</span>
          <h1 className="h1">AI notes that <span className="accent">never leave the device.</span></h1>
          <p className="lead">A privacy-first note-taking application for therapists, psychologists, and clinical practitioners. Built in-house. 100% on-device. HIPAA-safe by architecture, not by policy.</p>
          <div style={{display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginTop: 28}}>
            <a href="contact.html" className="btn btn-primary">Start free trial</a>
            <a href="#" className="btn btn-ghost">Read the privacy whitepaper</a>
          </div>
        </div>
      </section>
      <Thera/>
      <section className="sec sec-grey">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">Why on-device matters</span>
            <h2 className="h2">Cloud AI is a <span className="accent">compliance liability.</span></h2>
            <p className="lead">Every cloud-based AI tool requires sending sensitive data to a third-party server. For clinicians, that's a HIPAA risk waiting to happen. TheraNote eliminates the risk by eliminating the transmission.</p>
          </div>
          <div className="leak-grid reveal">
            <div className="leak-card">
              <div className="leak-num"><span>01</span><span className="pct">0</span></div>
              <h3 className="h3">Bytes leave your device</h3>
              <p>Every model runs locally. No internet required to draft notes. No account creation. No telemetry.</p>
            </div>
            <div className="leak-card">
              <div className="leak-num"><span>02</span><span className="pct">100%</span></div>
              <h3 className="h3">SOAP-format ready</h3>
              <p>Generate Subjective, Objective, Assessment, and Plan sections from session transcripts or notes.</p>
            </div>
            <div className="leak-card">
              <div className="leak-num"><span>03</span><span className="pct">14d</span></div>
              <h3 className="h3">Free trial</h3>
              <p>Try the full app on your device for two weeks. No credit card. Subscription only if it earns it.</p>
            </div>
          </div>
        </div>
      </section>
      <CTABanner/>
      <Footer/>
    </>
  );
}

function ResultsPage() {
  const cases = [
    { client: "Phoenix HVAC", industry: "HVAC · 14 trucks", title: "Recovered $18,400 in the first 30 days — including a $4,200 emergency replacement booked at 11:47 PM on a Saturday.", stat: "$18.4k", lbl: "First 30 days", body: "We deployed AutoGrowthBase across web forms, Google Business Profile inquiries, and call deflection. The system answered every after-hours lead in under 60 seconds and booked appointments before the owner had checked his phone." },
    { client: "BrightHome Plumbing", industry: "Plumbing · 8 employees", title: "From 42% lead-leak rate to under 6% in 60 days — without adding any office staff.", stat: "−86%", lbl: "Lead-leak rate", body: "Form fills, missed calls, and DM inquiries were routed into a unified pipeline. AI replied in the owner's voice, scheduled appointments live, and only escalated when human judgment was needed." },
    { client: "Crisp Cleaning Co.", industry: "Cleaning · multi-location", title: "Doubled inbound bookings in 90 days by closing the response gap — same ad spend.", stat: "2.1×", lbl: "Bookings, 90 days", body: "The marketing wasn't broken — the response time was. Once AutoGrowthBase started responding to every Facebook lead within a minute, conversion roughly doubled at the same cost-per-lead." },
    { client: "Northstar Air", industry: "HVAC · 22 trucks", title: "Eliminated weekend follow-up entirely. Owner reports the team is sleeping better.", stat: "47s", lbl: "Median response", body: "The previous workflow had the owner fielding emergency calls on Sundays. After deployment, the system handles initial response, books non-emergency jobs autonomously, and only pages the on-call tech for true urgencies." },
  ];
  return (
    <>
      <Nav active="results"/>
      <section className="page-intro">
        <div className="container">
          <span className="eyebrow">Results · Real systems · Real revenue</span>
          <h1 className="h1">What recovered revenue <span className="accent">looks like.</span></h1>
          <p className="lead">Specific numbers, specific businesses. Every system here is currently running. The names are real; the dollar amounts are not rounded up.</p>
        </div>
      </section>
      <Outcomes/>
      <section className="sec">
        <div className="container">
          <div style={{display: "flex", flexDirection: "column", gap: 24}}>
            {cases.map((c, i) => (
              <div className="reveal" key={c.client} style={{background: "var(--white)", border: "1px solid var(--line)", borderRadius: "var(--r-xl)", padding: 48, display: "grid", gridTemplateColumns: "1fr 1fr 200px", gap: 48, alignItems: "center"}}>
                <div>
                  <div className="label-mono" style={{marginBottom: 14}}>{String(i+1).padStart(2, "0")} · {c.client} · {c.industry}</div>
                  <h3 style={{fontSize: 26, fontWeight: 600, color: "var(--navy)", margin: 0, letterSpacing: "-0.015em", lineHeight: 1.2}}>{c.title}</h3>
                </div>
                <p style={{color: "var(--text-muted)", fontSize: 15, margin: 0, lineHeight: 1.6}}>{c.body}</p>
                <div style={{textAlign: "right"}}>
                  <div style={{fontSize: 56, fontWeight: 700, color: "var(--green)", letterSpacing: "-0.025em", lineHeight: 1}}>{c.stat}</div>
                  <div className="label-mono" style={{marginTop: 8}}>{c.lbl}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Quote/>
      <CTABanner/>
      <Footer/>
    </>
  );
}

function CompanyPage() {
  const values = [
    { n: "01", t: "Clarity over confusion", d: "Digital marketing is full of jargon and noise. We simplify the work so you can focus on running your business." },
    { n: "02", t: "Trust through transparency", d: "No hidden costs. No agency mark-ups. No vendor mystery. Clear scope, clear deliverables, clear results — every time." },
    { n: "03", t: "Growth through partnership", d: "We work alongside our clients, not at them. Long-term collaboration over one-off engagements." },
    { n: "04", t: "Innovation first", d: "We adopt the tools that actually move the needle — AI, automation, modern web — and stay sharp so our clients do too." },
  ];
  const timeline = [
    { y: "2006 – 2011", t: "Beginnings", d: "Front-end developer, website designer, and branding specialist roles across Canadian companies. Freelance work begins." },
    { y: "2015", t: "Full-scale projects", d: "Expanded into full-scale web design and SEO campaigns for small business clients across Ontario." },
    { y: "2021", t: "Purna Web Agency launches", d: "Relaunched as Purna Web Agency in Orillia, Ontario — focused on local small business growth." },
    { y: "2022", t: "Automation & CRM", d: "Added CRM, automation, and lead-generation funnels to the service mix." },
    { y: "2023", t: "Mental-health niche", d: "Became a trusted partner for mental-health professionals scaling their practices online." },
    { y: "2024", t: "AI-powered marketing", d: "Expanded into AI-powered content marketing, course creation funnels, and AI workflow engineering." },
    { y: "2025 +", t: "Canada's growth hub", d: "Building Canada's go-to growth hub for small business owners — AI workflows, lead generation, custom AI software." },
  ];
  return (
    <>
      <Nav active="company"/>
      <section className="page-intro">
        <div className="container">
          <span className="eyebrow">Company · Mission · Method</span>
          <h1 className="h1">AI-driven growth &amp; automation, <br/><span className="accent">from Orillia, Ontario.</span></h1>
          <p className="lead">Purna Web Agency helps small businesses, service providers, and mental-health professionals grow online — with AI workflows, web design, SEO, paid ads, CRM, and AI automation. We combine creativity with technology so our clients attract more leads, convert more customers, and run their business with less stress.</p>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">Mission · Vision · Purpose</span>
            <h2 className="h2">The one-liner version.</h2>
          </div>
          <div className="reveal" style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, maxWidth: 1080, margin: "0 auto"}}>
            {[
              { lbl: "Mission", body: "Help small businesses and mental-health professionals grow online — with creativity and AI." },
              { lbl: "Vision", body: "Become Canada's go-to growth hub for small business owners." },
              { lbl: "Purpose", body: "Simplify digital marketing so business owners can focus on what they do best." },
            ].map(b => (
              <div key={b.lbl} style={{background: "var(--white)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", padding: 32}}>
                <div className="label-mono" style={{color: "var(--teal)", marginBottom: 16}}>{b.lbl}</div>
                <p style={{fontSize: 19, fontWeight: 500, color: "var(--navy)", margin: 0, letterSpacing: "-0.01em", lineHeight: 1.4}}>{b.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">Our values</span>
            <h2 className="h2">What we believe — <span className="accent">out loud.</span></h2>
          </div>
          <div className="reveal" style={{display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24}}>
            {values.map(v => (
              <div key={v.n} style={{background: "var(--white)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", padding: 36, transition: "all 0.3s"}}
                onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--teal)"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.boxShadow = "none"; }}>
                <div className="label-mono" style={{color: "var(--teal)", marginBottom: 16}}>{v.n}</div>
                <h3 className="h3" style={{marginBottom: 12}}>{v.t}</h3>
                <p style={{color: "var(--text-muted)", fontSize: 15, margin: 0}}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">Our story</span>
            <h2 className="h2">Two decades of building <span className="accent">on the web.</span></h2>
            <p className="lead">From front-end work in 2006 to AI-powered growth systems today.</p>
          </div>
          <ol className="reveal" style={{listStyle: "none", padding: 0, margin: "48px auto 0", maxWidth: 880, display: "grid", gap: 16}}>
            {timeline.map((m, i) => (
              <li key={i} style={{display: "grid", gridTemplateColumns: "140px 1fr", gap: 24, alignItems: "start", padding: "20px 24px", background: "var(--white)", border: "1px solid var(--line)", borderLeft: "3px solid var(--teal)", borderRadius: "var(--r-lg)"}}>
                <div className="label-mono" style={{color: "var(--teal)", fontWeight: 600, fontSize: 13, paddingTop: 4}}>{m.y}</div>
                <div>
                  <div style={{fontSize: 17, fontWeight: 600, color: "var(--navy)", marginBottom: 6, letterSpacing: "-0.01em"}}>{m.t}</div>
                  <div style={{fontSize: 14, color: "var(--text-muted)", lineHeight: 1.55}}>{m.d}</div>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">Founder &amp; CEO</span>
            <h2 className="h2">Namitha Hridin.</h2>
          </div>
          <div className="reveal" style={{maxWidth: 760, margin: "32px auto 0"}}>
            <p className="lead">Digital marketing strategist, brand consultant, and automation expert. 14+ years helping businesses succeed online — from website design and SEO to paid ads, email marketing, and CRM automation. Passionate about helping mental-health professionals and small business owners transform their operations with AI. Member of the Orillia Business Women's Association and a regular local speaker on small business growth and digital strategy.</p>
            <div style={{marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap"}}>
              <a href="contact.html" className="btn btn-primary btn-arr">
                Book a discovery call
                <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="mailto:info@purnaweb.ca" className="btn btn-ghost">info@purnaweb.ca</a>
            </div>
          </div>
        </div>
      </section>

      <CTABanner/>
      <Footer/>
    </>
  );
}

function ContactPage() {
  React.useEffect(() => {
    // Load the LeadConnector form_embed.js for the booking iframe
    if (document.querySelector('script[src="https://links.purnaweb.ca/js/form_embed.js"]')) return;
    const s = document.createElement("script");
    s.src = "https://links.purnaweb.ca/js/form_embed.js";
    s.type = "text/javascript";
    s.async = true;
    document.body.appendChild(s);
  }, []);

  return (
    <>
      <Nav active="contact"/>
      <section className="page-intro">
        <div className="container">
          <span className="eyebrow">Contact Us · Book a free call</span>
          <h1 className="h1">Let's talk about your <span className="accent">growth.</span></h1>
          <p className="lead">Pick a time that works for you below. 30 minutes, no pitch deck. We'll review your current inbound flow and show you where revenue is leaking — with a specific 30-day recovery projection.</p>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container">
          <div className="contact-grid">
            <div className="contact-calendar">
              <iframe
                src="https://links.purnaweb.ca/widget/booking/z4zqE0XePI3aP4rl95IK"
                style={{width: "100%", border: "none", overflow: "hidden", minHeight: 720}}
                scrolling="no"
                id="z4zqE0XePI3aP4rl95IK_1777654784967"
                title="Book a discovery call with Purna Web"
              />
            </div>
            <aside className="contact-aside">
              <div className="contact-card">
                <h3 className="contact-card-h">Reach us directly</h3>
                <ul className="contact-list">
                  <li>
                    <span className="contact-list-label">Email</span>
                    <a href="mailto:info@purnaweb.ca" className="contact-list-link">info@purnaweb.ca</a>
                  </li>
                  <li>
                    <span className="contact-list-label">Phone</span>
                    <a href="tel:+17052420221" className="contact-list-link">(705) 242-0221</a>
                  </li>
                  <li>
                    <span className="contact-list-label">Studio</span>
                    <span className="contact-list-link" style={{cursor: "default"}}>Orillia, Ontario, Canada</span>
                  </li>
                </ul>
              </div>
              <div className="contact-card contact-card-dark">
                <div className="label-mono" style={{color: "var(--teal-3)", marginBottom: 14, fontSize: 11, letterSpacing: "0.12em"}}>What you get on the call</div>
                <ul className="contact-bullets">
                  <li>A specific projection of leads you're losing today</li>
                  <li>What we'd build, sequenced &amp; scoped</li>
                  <li>Estimated 30-day revenue recovery</li>
                  <li>Honest answer if we're not the right fit</li>
                </ul>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <Footer/>
    </>
  );
}

// ─── Careers page ───────────────────────────────────────────────────────

function CareersPage() {
  return (
    <>
      <Nav active="careers"/>
      <section className="page-intro">
        <div className="container">
          <span className="eyebrow">Careers · Join the team</span>
          <h1 className="h1">Build production AI <span className="accent">in the real world.</span></h1>
          <p className="lead">We're a small, fast-moving team in Orillia, Ontario shipping AI workflows for businesses that actually need them — home services, healthcare, professional services. No demo-ware, no AI theater. If you build for production, you'll fit right in.</p>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container" style={{maxWidth: 920}}>
          <div className="job-card">
            <div className="job-card-head">
              <span className="job-tag">Now hiring</span>
              <h2 className="h2 job-title">AI Automation Expert &amp; Developer</h2>
              <div className="job-meta">
                <span><strong>Type</strong> · Full-time</span>
                <span><strong>Location</strong> · Remote (Canada / North America) · Orillia, ON hybrid optional</span>
                <span><strong>Reports to</strong> · Founder</span>
              </div>
            </div>

            <div className="job-section">
              <h3 className="job-section-h">About the role</h3>
              <p>We're hiring an AI Automation Expert &amp; Developer to design, build, and ship custom AI workflows for our clients. You'll work directly with the founder on a small, fast-moving team — engineering AI agents, RAG systems, multi-agent orchestration, and end-to-end automation pipelines for clients across home services, healthcare, and professional services.</p>
              <p>Most engagements move from kickoff to a live system in 4–8 weeks. You ship code, not slide decks.</p>
            </div>

            <div className="job-section">
              <h3 className="job-section-h">What you'll do</h3>
              <ul className="job-list">
                <li>Design and ship production AI agents — chat, voice, and automation flows</li>
                <li>Build retrieval-augmented generation (RAG) systems on customer data with proper governance and citation</li>
                <li>Engineer multi-agent orchestration patterns — supervisor agents, structured handoffs, bounded loops</li>
                <li>Integrate with CRMs, calendars, ticketing, payment, and EHR APIs</li>
                <li>Set up monitoring, eval harnesses, and quarterly tuning cycles</li>
                <li>Work directly with clients on discovery, roadmap, and rollout</li>
              </ul>
            </div>

            <div className="job-section">
              <h3 className="job-section-h">What we're looking for</h3>
              <ul className="job-list">
                <li><strong>3+ years</strong> of professional software development experience</li>
                <li>Hands-on production experience with LLM APIs (Anthropic, OpenAI, Google)</li>
                <li>Strong TypeScript / Python — comfortable with Node, Next.js, FastAPI, or similar</li>
                <li>Built RAG systems, AI agents, or workflow automations in production</li>
                <li>Familiarity with vector databases (Pinecone, pgvector, Weaviate, Qdrant)</li>
                <li>Comfortable on at least one major cloud (AWS, GCP, or Azure)</li>
                <li>Strong on observability, evaluations, and production-grade engineering — not just prototypes</li>
                <li>Excellent written communication — you can explain why an agent made a decision to a non-technical stakeholder</li>
              </ul>
            </div>

            <div className="job-section">
              <h3 className="job-section-h">Nice-to-have</h3>
              <ul className="job-list">
                <li>Voice AI experience (Vapi, Bland.ai, Retell, ElevenLabs)</li>
                <li>Workflow platforms (n8n, Make, Zapier, Temporal)</li>
                <li>Prior client work in home services or healthcare verticals</li>
                <li>Open-source contributions to AI / automation libraries</li>
                <li>Familiarity with Microsoft's Cloud Adoption Framework for AI Agents</li>
              </ul>
            </div>

            <div className="job-section">
              <h3 className="job-section-h">What we offer</h3>
              <ul className="job-list">
                <li>Competitive salary plus performance bonuses tied to client outcomes</li>
                <li>Direct ownership of the AI engineering function — your call on architecture and tooling</li>
                <li>High-impact, real-world AI deployments (no internal-tool demoware)</li>
                <li>Remote-first with optional in-person time at our Orillia studio</li>
                <li>Top-tier equipment + paid AI tooling subscriptions (Anthropic, OpenAI, Cursor, etc.)</li>
                <li>Direct mentorship from a 14-year veteran of digital growth + automation</li>
              </ul>
            </div>

            <div className="job-apply">
              <h3 className="job-section-h">How to apply</h3>
              <p>Email your resume plus a short note (200–400 words) about a recent AI project you built — what it does, what you'd change, what shipped vs. what didn't. Send it to <a href="mailto:info@purnaweb.ca?subject=AI%20Automation%20Expert%20%26%20Developer%20%E2%80%94%20application" className="job-apply-link">info@purnaweb.ca</a> with <strong>"AI Automation Expert"</strong> in the subject line.</p>
              <p style={{marginTop: 16}}>We read every application. We respond within 5 business days, even if it's not a fit.</p>
              <a href="mailto:info@purnaweb.ca?subject=AI%20Automation%20Expert%20%26%20Developer%20%E2%80%94%20application" className="btn btn-primary btn-arr job-apply-cta">
                Apply by email
                <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 className="careers-foot">
            <h3 className="h3" style={{marginBottom: 8}}>Don't see a fit?</h3>
            <p>If you're a builder we should know about — designer, engineer, marketing strategist — drop us a note anyway. We hire ahead of need when the right person shows up.</p>
            <a href="mailto:info@purnaweb.ca?subject=General%20interest%20%E2%80%94%20careers" className="btn btn-ghost" style={{marginTop: 14}}>Send us a note</a>
          </div>
        </div>
      </section>

      <Footer/>
    </>
  );
}

// ─── Industry pages ──────────────────────────────────────────────────────

const INDUSTRY_DATA = {
  hvac: {
    name: "HVAC",
    image: "hero-hvac.png",
    eyebrow: "Industries · HVAC",
    headline: <>The emergency call at 11:47 PM is <span className="accent">your most profitable lead.</span></>,
    lead: "AutoGrowthBase answers every after-hours inquiry, books the dispatch, and texts the homeowner before your competitor's voicemail finishes playing.",
    heroStats: [
      { v: "<60s", l: "Response, 24/7" },
      { v: "$3–5k", l: "Avg. emergency ticket" },
      { v: "+38%", l: "Booking rate lift" },
    ],
    painPoints: [
      { t: "After-hours calls go to voicemail", d: "Emergency AC failures don't wait for office hours. Every missed ring is $3–5k booked by the next contractor on Google." },
      { t: "Techs in the field can't pick up", d: "Owners and dispatchers are managing crews, not phones. Lead forms pile up between truck rolls." },
      { t: "Form responses too slow to convert", d: "If you reply two hours later, the homeowner already booked someone else. The first response wins the job." },
      { t: "Reviews never get asked for", d: "After-job follow-up gets forgotten. Local SEO stalls and ad spend gets less efficient every month." },
    ],
    chat: {
      title: "Answer web forms, SMS, and Google chat in seconds",
      desc: "AI chat agent qualifies the issue (no cool air, no heat, leak), confirms the address, and offers a same-day or next-morning slot before the homeowner closes the tab.",
      bullets: ["Captures issue + address + urgency", "Confirms service area on the fly", "Books directly into your dispatch calendar"],
      image: "images/tile-image-hvac-service/industry-hvac-chat.png",
    },
    voice: {
      title: "Pick up every call — including 2 AM",
      desc: "AI voice agent answers overflow and after-hours calls in your business's voice. Triages emergencies, books normal jobs, and pages the on-call tech only when it matters.",
      bullets: ["24/7 coverage in your service area's accent", "Emergency vs. routine triage", "Pages on-call tech via SMS for true emergencies"],
      image: "images/tile-image-hvac-service/industry-hvac-voice.png",
    },
    automation: {
      title: "Lead → confirmed appointment, zero clicks from you",
      desc: "Every inbound channel feeds one pipeline. The system qualifies, books, confirms, reminds, follows up, and asks for the review — without anyone in your office touching it.",
      bullets: ["Captures from web, GBP, SMS, voice", "Reminders the day before to stop no-shows", "Auto-review request 24h after job complete"],
      image: "images/tile-image-hvac-service/industry-hvac-automation.png",
    },
    flowTitle: "From dispatch board to recovered revenue.",
    flow: [
      { t: "11:47 PM — inbound", d: "Homeowner submits web form: \"AC not cooling, kid asleep upstairs.\"" },
      { t: "11:47:47 PM — answered", d: "Chat + SMS reply confirms emergency, asks for ZIP, offers Tue 8 AM." },
      { t: "11:48 PM — booked", d: "Calendar slot reserved, address routed to dispatch board, owner pinged on Slack." },
      { t: "Tue morning — confirmed", d: "Auto SMS the night before. Tech rolls. Job done. Review request fires 24h later." },
    ],
    package: {
      tag: "Featured · Spring/Summer 2026",
      headline: <>Spring HVAC lead generation package — <span className="accent">live in 7 days.</span></>,
      lead: "A turn-key system tuned to your spring tune-up offer. Landing page, paid ads, email nurture, and AutoGrowthBase voice + chat agents — deployed in one week.",
      offer: "$89 Spring AC Tune-Up — capture before the heat",
      sub: "Pre-built creative + offer engineered for first-week ROI on HVAC contractors with 5+ trucks.",
      includes: [
        { t: "High-converting landing page", d: "Custom seasonal page wired to your dispatch calendar, A/B tested, mobile-first." },
        { t: "AI-powered Facebook ad campaign", d: "5 creative variants with geo + demographic targeting across Facebook & Instagram." },
        { t: "Top of Google Maps results", d: "Optimized GBP listing + seasonal offer post + Local Services Ads — so you show up at the moment of intent." },
        { t: "Automated lead nurturing emails", d: "5-touch sequence — confirmation, post-visit summary, referral asks — written in your voice." },
        { t: "Booked appointments, automatically", d: "AutoGrowthBase voice + chat agents close the loop. Every click tracked through to booked job and recovered revenue." },
      ],
      price: { primary: "$5,400", note: "one-time · 30-day money-back · zero retainer" },
      landing: {
        url: "phoenixhvac.com/spring-tuneup",
        tag: "Spring Special · 24 spots left",
        h1: <>Beat the heat. <span className="accent">$89 AC tune-up.</span></>,
        sub: "Lock in spring pricing before the first 95° day. 20-point inspection. Same-week scheduling.",
        ratingText: "4.9 · 382 reviews · BBB Accredited",
        form: ["Full name", "Phone", "ZIP", "Preferred date"],
        cta: "Book my $89 tune-up",
        ctaSub: "No credit card · 100% guarantee",
        includesTitle: "What's included",
        includesItems: ["20-point AC inspection", "Coil cleaning + drain flush", "Refrigerant top-off if needed", "Same-week scheduling"],
      },
      fbAd: {
        page: "Phoenix HVAC", avatar: "PH",
        meta: "Sponsored · Greater Phoenix",
        body: "Spring AC Tune-Up — $89 (reg $149). Limited slots through May 31. Catch the problem before the first 95° day.",
        likes: "142", comments: "18", shares: "6",
        cta: "Book Now",
        image: "images/fb-ad-spring.png",
        ctaDomain: "phoenixhvac.com", ctaHeadline: "$89 Spring AC Tune-Up", ctaDesc: "Limited slots · Through May 31",
      },
      gbp: {
        business: "Phoenix HVAC", avatar: "PH",
        rating: "4.9", reviews: "382",
        category: "HVAC contractor", ad: "Sponsored",
        snippet: "Spring tune-up special · $89 · 20-point inspection · Same-week",
        status: "Open · Closes 8 PM",
        actions: ["Book online", "Call", "Directions"],
        query: "hvac near me",
      },
      email: {
        from: "Phoenix HVAC", fromEmail: "hello@phoenixhvac.com", avatar: "PH",
        subject: "Your $89 tune-up is reserved, Sarah", time: "Today, 9:14 AM",
        logoIcon: "❄️", logoName: "Phoenix HVAC", logoSub: "HVAC SERVICES",
        heroPill: "🌱 Spring Tune-Up Special",
        heroH3: <>You're In, Sarah!<br/>Your $89 Spot Is Reserved.</>,
        heroP: "Let's get your AC ready before the first 95° day hits.",
        priceTag: "$89", priceSub: "20-Point Inspection · Through May 31",
        greeting: "Hey Sarah,",
        bodyP1: <>Welcome to Phoenix HVAC! We got your request and we're holding a spot for your <strong>Spring AC Tune-Up</strong>. Our team will text you within <strong>2 hours</strong> to lock in your time.</>,
        bullets: ["20-point system diagnostic", "Coil cleaning + drain flush", "Refrigerant top-off if needed", "Same-week scheduling"],
        bodyP2: <>Want to skip the wait? Lock in your slot now or call us at <strong>(555) 555-0123</strong>.</>,
        ctaText: "🗓️ Confirm My $89 Tune-Up",
        ctaSub: "🔒 No payment required · Honest service since 2009",
        signoffStrong: "— Mike & the Phoenix HVAC team",
        signoffSpan: "(555) 555-0123 · hello@phoenixhvac.com",
        footer: "📍 Serving Phoenix & Greater Phoenix · Licensed & Insured",
      },
      booked: {
        url: "phoenixhvac.com/confirmed",
        eyebrow: "✓ Appointment Confirmed",
        h: "You're booked, Sarah!",
        sub: "Your $89 Spring AC Tune-Up is locked in. We'll see you Tuesday.",
        cardH: "Appointment details",
        rows: [
          { lbl: "Date", val: "Tue, May 5, 2026" },
          { lbl: "Window", val: "8:00 – 10:00 AM" },
          { lbl: "Tech", val: "Mike R. · 4.9★", techAvatar: "MR" },
          { lbl: "Service", val: "20-pt AC Tune-Up · $89" },
        ],
        actions: [
          { primary: true, label: "Add to Calendar", icon: "cal" },
          { label: "Call (555) 555-0123", icon: "phone" },
        ],
        meta: [
          { icon: "✉️", text: "Confirmation sent to sarah@example.com" },
          { icon: "🔔", text: "Reminder will text the night before" },
          { icon: "📍", text: "Tech ETA shared 30 min before arrival" },
        ],
      },
    },
  },

  plumbing: {
    name: "Plumbing",
    image: "hero-plumbing.png",
    eyebrow: "Industries · Plumbing",
    headline: <>Burst pipe at midnight? <span className="accent">Booked before the panic call ends.</span></>,
    lead: "AutoGrowthBase triages emergency leaks, schedules routine service, and re-engages maintenance customers — while you stay on the tools.",
    heroStats: [
      { v: "24/7", l: "Emergency triage" },
      { v: "<60s", l: "Response time" },
      { v: "2.1×", l: "Recurring rebookings" },
    ],
    painPoints: [
      { t: "Emergency leaks demand instant pickup", d: "If the homeowner is standing in two inches of water, the first plumber to answer wins the job — every time." },
      { t: "Owners on tools, not on phones", d: "You can't crawl out from under a sink to take a quote request. Most quote forms sit unanswered for hours." },
      { t: "Service-area confusion costs jobs", d: "Out-of-area leads slip through. In-area leads get manually re-routed and forgotten." },
      { t: "Maintenance customers churn quietly", d: "Annual tune-ups and water heater swaps get forgotten until the customer Googles a new plumber." },
    ],
    chat: {
      title: "Triage emergencies vs. quotes in one chat",
      desc: "AI chat agent figures out if it's a flood or a faucet, validates the service area, and books accordingly — emergency dispatch or scheduled estimate.",
      bullets: ["Emergency vs. quote intent detection", "Service-area ZIP gating", "Books estimate or dispatch in one flow"],
      image: "images/tile-image-plumbing-service/industry-plumbing-chat.png",
    },
    voice: {
      title: "Answer the panic call in plain English",
      desc: "AI voice agent picks up overflow and after-hours calls calmly, gets the homeowner to shut off the main valve if needed, then books the truck.",
      bullets: ["Emergency walkthrough scripts", "Service-area routing", "Live escalation to on-call tech"],
      image: "images/tile-image-plumbing-service/industry-plumbing-voice.png",
    },
    automation: {
      title: "Re-engage every maintenance customer automatically",
      desc: "Past customers get reminded for annual maintenance, water heater age-outs, and seasonal issues — no manual list-pulling, no missed renewals.",
      bullets: ["Annual maintenance reminders", "Equipment age tracking", "Seasonal upsell flows"],
      image: "images/tile-image-plumbing-service/industry-plumbing-automation.png",
    },
    flowTitle: "From burst pipe to booked truck in under a minute.",
    flow: [
      { t: "01:12 AM — call", d: "Homeowner calls about a leaking water heater. Voice agent picks up in two rings." },
      { t: "01:12:38 AM — triaged", d: "Agent confirms it's an emergency, has them shut off the valve, gets address." },
      { t: "01:13 AM — dispatched", d: "On-call tech paged via SMS with full context. ETA texted to homeowner." },
      { t: "Next day — review + nurture", d: "Auto-review request fires post-job. Customer added to annual maintenance flow." },
    ],
    package: {
      tag: "Featured · Spring 2026",
      headline: <>Spring plumbing lead-gen package — <span className="accent">live in 7 days.</span></>,
      lead: "A turn-key system tuned to your spring pipe-check offer. Landing page, paid ads, email nurture, and AutoGrowthBase voice + chat agents — deployed in one week.",
      offer: "$79 Spring Plumbing Inspection — catch leaks before peak season",
      sub: "Pre-built creative + offer engineered for first-week ROI on plumbing operators with 4+ trucks.",
      includes: [
        { t: "High-converting landing page", d: "Custom seasonal page wired to your dispatch calendar, A/B tested, mobile-first." },
        { t: "AI-powered Facebook ad campaign", d: "5 creative variants with ZIP + demographic targeting across Facebook & Instagram." },
        { t: "Top of Google Maps results", d: "Optimized GBP listing + seasonal offer post + Local Services Ads — so emergency searches land on you." },
        { t: "Automated lead nurturing emails", d: "5-touch sequence — confirmation, post-visit summary, annual maintenance reminders — written in your voice." },
        { t: "Booked appointments, automatically", d: "AutoGrowthBase voice + chat agents triage emergencies and book routine work — 24/7." },
      ],
      price: { primary: "$5,400", note: "one-time · 30-day money-back · zero retainer" },
      landing: {
        url: "flowrightplumbing.com/spring-check",
        tag: "Spring Special · 18 spots left",
        h1: <>Catch the leak. <span className="accent">$79 plumbing inspection.</span></>,
        sub: "12-point inspection of supply lines, drains, water heater, and shut-offs. Same-week scheduling.",
        ratingText: "4.8 · 314 reviews · BBB Accredited",
        form: ["Full name", "Phone", "ZIP", "Best time to come"],
        cta: "Book my $79 inspection",
        ctaSub: "No credit card · Licensed master plumber",
        includesTitle: "What's included",
        includesItems: ["12-point system inspection", "Water heater health check", "Shut-off valve test", "Leak + camera pre-screen"],
      },
      fbAd: {
        page: "FlowRight Plumbing", avatar: "FR",
        meta: "Sponsored · Austin metro",
        body: "Spring Plumbing Inspection — $79 (reg $149). Catch leaks, water heater issues, and slow drains before they become emergencies. Limited spots through May 31.",
        likes: "118", comments: "21", shares: "9",
        cta: "Book Now",
        image: "images/fb-ad-plumbing.png",
        ctaDomain: "flowrightplumbing.com", ctaHeadline: "$79 Spring Plumbing Inspection", ctaDesc: "Limited slots · Through May 31",
      },
      gbp: {
        business: "FlowRight Plumbing", avatar: "FR",
        rating: "4.8", reviews: "314",
        category: "Plumber · Emergency service",
        ad: "Sponsored",
        snippet: "Spring inspection · $79 · 12-point check · 24/7 emergency",
        status: "Open · 24/7",
        actions: ["Book online", "Call", "Directions"],
        query: "plumber near me",
      },
      email: {
        from: "FlowRight Plumbing", fromEmail: "hello@flowrightplumbing.com", avatar: "FR",
        subject: "Your $79 plumbing inspection is reserved, Dave", time: "Today, 10:32 AM",
        logoIcon: "🔧", logoName: "FlowRight", logoSub: "PLUMBING SERVICES",
        heroPill: "🌱 Spring Plumbing Special",
        heroH3: <>You're In, Dave!<br/>Your $79 Spot Is Reserved.</>,
        heroP: "Let's catch the small problems before they become weekend emergencies.",
        priceTag: "$79", priceSub: "12-Point Inspection · Through May 31",
        greeting: "Hey Dave,",
        bodyP1: <>Thanks for choosing FlowRight Plumbing. We're holding a spot for your <strong>Spring Plumbing Inspection</strong>. Our dispatcher will text you within <strong>2 hours</strong> to lock in your time.</>,
        bullets: ["12-point system inspection", "Water heater age + health check", "Main shut-off valve test", "Slow-drain camera pre-screen"],
        bodyP2: <>Want to skip the wait? Confirm your slot now or call <strong>(555) 555-0188</strong> — a real human, 24/7.</>,
        ctaText: "🗓️ Confirm My $79 Inspection",
        ctaSub: "🔒 No payment required · Licensed master plumber on every job",
        signoffStrong: "— Tom &amp; the FlowRight team",
        signoffSpan: "(555) 555-0188 · hello@flowrightplumbing.com",
        footer: "📍 Serving Austin & surrounding metro · Licensed &amp; Insured · 24/7 Emergency",
      },
      booked: {
        url: "flowrightplumbing.com/confirmed",
        eyebrow: "✓ Appointment Confirmed",
        h: "You're booked, Dave!",
        sub: "Your $79 Spring Plumbing Inspection is locked in. We'll see you Wednesday.",
        cardH: "Appointment details",
        rows: [
          { lbl: "Date", val: "Wed, May 6, 2026" },
          { lbl: "Window", val: "10:00 AM – 12:00 PM" },
          { lbl: "Plumber", val: "Tom B. · Master Plumber", techAvatar: "TB" },
          { lbl: "Service", val: "12-pt Plumbing Inspection · $79" },
        ],
        actions: [
          { primary: true, label: "Add to Calendar", icon: "cal" },
          { label: "Call (555) 555-0188", icon: "phone" },
        ],
        meta: [
          { icon: "✉️", text: "Confirmation sent to dave@example.com" },
          { icon: "🔔", text: "Reminder will text the morning of" },
          { icon: "📍", text: "Plumber ETA shared 30 min before arrival" },
        ],
      },
    },
  },

  cleaning: {
    name: "Cleaning & Restoration",
    image: "hero-cleaning-restoration.png",
    eyebrow: "Industries · Cleaning & Restoration",
    headline: <>Insurance claim or weekly clean — <span className="accent">quoted in minutes.</span></>,
    lead: "AutoGrowthBase qualifies inbound, scopes the job, and books the walk-through before the customer talks to a competitor.",
    heroStats: [
      { v: "2.1×", l: "Bookings, 90 days" },
      { v: "<60s", l: "Quote response" },
      { v: "+47%", l: "Recurring conversion" },
    ],
    painPoints: [
      { t: "Restoration quotes are time-sensitive", d: "Water and fire damage claims need same-hour response. Slow replies mean the insurance adjuster recommends someone else." },
      { t: "Quote forms drown in detail", d: "Square footage, frequency, pets, special requests — by the time you read it, the lead has called three other companies." },
      { t: "Recurring bookings churn", d: "Weekly and bi-weekly clients silently drop off. There's no system catching the dip in frequency." },
      { t: "Multi-location ops are messy", d: "Routing leads to the right crew based on city, zone, and availability is a daily fire drill." },
    ],
    chat: {
      title: "Scope the job in chat, not on the phone",
      desc: "AI chat agent walks the lead through square footage, frequency, and special needs — then offers a price range and books the walk-through.",
      bullets: ["Scope sizing in conversation", "Insurance vs. consumer routing", "Books estimate or first cleaning"],
      image: "images/tile-image-cleaning-service/industry-cleaning-chat.png",
    },
    voice: {
      title: "Catch insurance restoration calls live",
      desc: "AI voice agent answers 24/7, gets the policy info and address, escalates emergencies, and confirms the on-site assessment before the adjuster moves on.",
      bullets: ["Insurance claim intake", "Emergency vs. scheduled triage", "On-site assessment booking"],
      image: "images/tile-image-cleaning-service/industry-cleaning-voice.png",
    },
    automation: {
      title: "Re-book every recurring client without lifting a finger",
      desc: "Weekly, bi-weekly, and monthly clients get re-confirmed automatically. Skipped weeks get caught. Reviews get asked for after every clean.",
      bullets: ["Auto re-confirmation flows", "Skipped-week detection + outreach", "Per-clean review request"],
      image: "images/tile-image-cleaning-service/industry-cleaning-automation.png",
    },
    flowTitle: "From insurance call to scoped walk-through.",
    flow: [
      { t: "Inbound — claim", d: "Adjuster calls about a water-damaged basement. Voice agent picks up, gets policy + address." },
      { t: "Triaged", d: "Job tagged as restoration, routed to the closest restoration crew lead." },
      { t: "Booked", d: "Walk-through scheduled in next available slot. Adjuster + homeowner both texted confirmation." },
      { t: "Closed loop", d: "Estimate sent within 24h. Once approved, recurring monitoring + final review request fire automatically." },
    ],
    package: {
      tag: "Featured · Spring 2026",
      headline: <>Spring deep-clean lead-gen package — <span className="accent">live in 7 days.</span></>,
      lead: "A turn-key system tuned to your spring deep-clean offer. Landing page, paid ads, email nurture, and AutoGrowthBase voice + chat agents — deployed in one week.",
      offer: "$179 Spring Whole-Home Deep Clean — refresh before guests visit",
      sub: "Pre-built creative + offer engineered for first-week ROI on cleaning operators with 5+ crews or restoration companies.",
      includes: [
        { t: "High-converting landing page", d: "Custom seasonal page with square-footage form, A/B tested, mobile-first." },
        { t: "AI-powered Facebook ad campaign", d: "5 creative variants with neighborhood + lifestyle targeting across Facebook & Instagram." },
        { t: "Top of Google Maps results", d: "Optimized GBP listing + seasonal offer post + Local Services Ads — so 'cleaner near me' lands on you." },
        { t: "Automated lead nurturing emails", d: "5-touch sequence — confirmation, prep guide, post-clean review request, recurring offer — written in your voice." },
        { t: "Booked appointments, automatically", d: "AutoGrowthBase voice + chat agents scope the job, route to the right crew, and book — without the back-and-forth." },
      ],
      price: { primary: "$5,400", note: "one-time · 30-day money-back · zero retainer" },
      landing: {
        url: "sparklecleanpro.com/spring-deep",
        tag: "Spring Special · 12 slots left",
        h1: <>Refresh your home. <span className="accent">$179 spring deep clean.</span></>,
        sub: "Whole-home deep clean. Kitchens, bathrooms, baseboards, and floors. Eco-safe products. Bonded + insured.",
        ratingText: "4.9 · 627 reviews · BBB Accredited",
        form: ["Full name", "Phone", "Square footage", "Preferred date"],
        cta: "Book my $179 deep clean",
        ctaSub: "No credit card · 100% satisfaction guarantee",
        includesTitle: "What's included",
        includesItems: ["Kitchen deep clean", "Bathroom + tile scrub", "Baseboard + window sill detail", "Vacuum + mop all floors"],
      },
      fbAd: {
        page: "SparkleClean Pro", avatar: "SC",
        meta: "Sponsored · Greater Denver",
        body: "Spring Whole-Home Deep Clean — $179 (reg $299). Eco-safe products, bonded crews, 100% satisfaction. Limited slots through May 31.",
        likes: "204", comments: "31", shares: "12",
        cta: "Book Now",
        image: "images/fb-ad-cleaning.png",
        ctaDomain: "sparklecleanpro.com", ctaHeadline: "$179 Spring Deep Clean", ctaDesc: "Eco-safe · Through May 31",
      },
      gbp: {
        business: "SparkleClean Pro", avatar: "SC",
        rating: "4.9", reviews: "627",
        category: "House cleaning service",
        ad: "Sponsored",
        snippet: "Spring deep clean · $179 · Whole-home · Eco-safe · Bonded",
        status: "Open · Closes 7 PM",
        actions: ["Book online", "Call", "Directions"],
        query: "house cleaner near me",
      },
      email: {
        from: "SparkleClean Pro", fromEmail: "hello@sparklecleanpro.com", avatar: "SC",
        subject: "Your $179 spring deep clean is reserved, Amanda", time: "Today, 11:08 AM",
        logoIcon: "✨", logoName: "SparkleClean", logoSub: "PROFESSIONAL CLEANING",
        heroPill: "🌱 Spring Deep-Clean Special",
        heroH3: <>You're In, Amanda!<br/>Your $179 Spot Is Reserved.</>,
        heroP: "Time to get the winter dust out — top to bottom, eco-safe.",
        priceTag: "$179", priceSub: "Whole-Home Deep Clean · Through May 31",
        greeting: "Hey Amanda,",
        bodyP1: <>Welcome to SparkleClean Pro! We're holding a spot for your <strong>Spring Whole-Home Deep Clean</strong>. Our coordinator will text you within <strong>2 hours</strong> to confirm your time and crew.</>,
        bullets: ["Kitchen deep clean (inside appliances on request)", "Bathroom + tile + grout scrub", "Baseboards, window sills, light fixtures", "Vacuum + mop all floors"],
        bodyP2: <>Want to skip the wait? Confirm your slot or call us at <strong>(555) 555-0210</strong> — friendly humans, every time.</>,
        ctaText: "🗓️ Confirm My $179 Deep Clean",
        ctaSub: "🔒 No payment required · 100% satisfaction or we re-clean free",
        signoffStrong: "— Maria &amp; the SparkleClean team",
        signoffSpan: "(555) 555-0210 · hello@sparklecleanpro.com",
        footer: "📍 Serving Greater Denver · Bonded &amp; Insured · Eco-safe products only",
      },
      booked: {
        url: "sparklecleanpro.com/confirmed",
        eyebrow: "✓ Appointment Confirmed",
        h: "You're booked, Amanda!",
        sub: "Your $179 Spring Deep Clean is locked in. See you Saturday.",
        cardH: "Cleaning details",
        rows: [
          { lbl: "Date", val: "Sat, May 9, 2026" },
          { lbl: "Window", val: "9:00 AM – 1:00 PM" },
          { lbl: "Lead", val: "Maria L. · 4.9★", techAvatar: "ML" },
          { lbl: "Service", val: "Whole-home deep clean · $179" },
        ],
        actions: [
          { primary: true, label: "Add to Calendar", icon: "cal" },
          { label: "Call (555) 555-0210", icon: "phone" },
        ],
        meta: [
          { icon: "✉️", text: "Confirmation sent to amanda@example.com" },
          { icon: "🔔", text: "Reminder will text the night before" },
          { icon: "📍", text: "Crew ETA shared 30 min before arrival" },
        ],
      },
    },
  },

  roofing: {
    name: "Roofing & Exteriors",
    image: "hero-roofing-exteriors.png",
    eyebrow: "Industries · Roofing & Exteriors",
    headline: <>Storm hits Tuesday. <span className="accent">Pipeline full by Friday.</span></>,
    lead: "AutoGrowthBase handles the surge — qualifies storm-damage leads, books inspections, and nurtures long sales cycles until they sign.",
    heroStats: [
      { v: "10×", l: "Volume surge handled" },
      { v: "+62%", l: "Inspection-to-close" },
      { v: "0", l: "Leads dropped" },
    ],
    painPoints: [
      { t: "Storm spikes overwhelm the office", d: "One weather event creates more leads in 48 hours than your sales team handles in a month. Most go cold." },
      { t: "Quote forms missing critical info", d: "Roof age, insurance status, square footage — incomplete forms mean reps chase data instead of selling." },
      { t: "Long cycles need consistent nurture", d: "Roofing decisions take weeks. Without a sequence, leads forget about you and call the next door-knocker." },
      { t: "Door-to-door doesn't scale", d: "Canvassers generate interest but can't close. The handoff from canvasser to inside sales is where deals die." },
    ],
    chat: {
      title: "Pre-qualify every storm-surge lead",
      desc: "AI chat agent collects roof age, insurance carrier, damage type, and ideal inspection time — so reps walk into closing conversations, not info gathering.",
      bullets: ["Insurance + age qualification", "Photo upload via chat", "Inspection slot booking"],
      image: "images/tile-image-roofing-service/industry-roofing-chat.png",
    },
    voice: {
      title: "Take the storm-week call surge",
      desc: "AI voice agent absorbs 10× call volume the week after a storm without dropping a single lead. Books inspections in priority order.",
      bullets: ["Surge-volume call handling", "Address-to-storm-zone matching", "Priority routing for high-value roofs"],
      image: "images/tile-image-roofing-service/industry-roofing-voice.png",
    },
    automation: {
      title: "Nurture the slow yeses into signed contracts",
      desc: "Multi-week drip sequences with photos, financing reminders, and seasonal urgency — so the lead picks you when they're finally ready.",
      bullets: ["12-week nurture cadence", "Financing & seasonality triggers", "Auto-handoff to sales when intent spikes"],
      image: "images/tile-image-roofing-service/industry-roofing-automation.png",
    },
    flowTitle: "From storm front to signed contract.",
    flow: [
      { t: "Tuesday 5 PM — storm", d: "Hailstorm rolls through. Form submissions and calls 10× normal volume by 9 PM." },
      { t: "All night — captured", d: "Voice + chat agents qualify every lead, schedule inspections, route by neighborhood." },
      { t: "Wednesday — inspections", d: "Reps walk into pre-qualified meetings. No data hunting, just selling." },
      { t: "Following weeks — closed", d: "Slow yeses get nurtured. Auto-handoff to sales when intent signal fires." },
    ],
    package: {
      tag: "Featured · Storm Season 2026",
      headline: <>Storm-season roofing lead-gen package — <span className="accent">live in 7 days.</span></>,
      lead: "A turn-key system tuned to your free-inspection offer. Landing page, paid ads, email nurture, and AutoGrowthBase voice + chat agents — deployed before the next storm rolls through.",
      offer: "FREE Roof Inspection — no obligation, before the next storm",
      sub: "Pre-built creative + offer engineered to absorb post-storm volume spikes for roofing companies with 3+ crews.",
      includes: [
        { t: "High-converting landing page", d: "Custom seasonal page with photo upload + insurance carrier field, A/B tested, mobile-first." },
        { t: "AI-powered Facebook ad campaign", d: "5 creative variants with storm-zone + age-of-home targeting across Facebook & Instagram." },
        { t: "Top of Google Maps results", d: "Optimized GBP listing + storm-damage offer post + Local Services Ads — for emergency-intent searches." },
        { t: "Automated lead nurturing emails", d: "5-touch sequence — confirmation, financing options, photo-of-damage explainer, signed-contract follow-up." },
        { t: "Booked appointments, automatically", d: "AutoGrowthBase voice + chat agents absorb the post-storm spike, qualify, and book inspections by neighborhood." },
      ],
      price: { primary: "$5,400", note: "one-time · 30-day money-back · zero retainer" },
      landing: {
        url: "peakshieldroofing.com/storm-inspection",
        tag: "Storm Special · Limited slots this week",
        h1: <>Free roof inspection. <span className="accent">No obligation.</span></>,
        sub: "Photo + drone inspection. Insurance-claim-ready report. Same-week scheduling. We work with all major carriers.",
        ratingText: "4.9 · 412 reviews · GAF Certified",
        form: ["Full name", "Phone", "ZIP", "Insurance carrier"],
        cta: "Book my free inspection",
        ctaSub: "No payment ever · GAF Certified contractor",
        includesTitle: "What's included",
        includesItems: ["Drone + ground inspection", "Photo report (yours to keep)", "Insurance claim guidance", "No-pressure estimate if needed"],
      },
      fbAd: {
        page: "PeakShield Roofing", avatar: "PS",
        meta: "Sponsored · DFW metro",
        body: "After last week's hailstorm — book a FREE roof inspection. We document damage, work with your insurance, and stand behind every quote. Limited slots this week.",
        likes: "287", comments: "44", shares: "23",
        cta: "Book Free Inspection",
        image: "images/fb-ad-roofing.png",
        ctaDomain: "peakshieldroofing.com", ctaHeadline: "FREE Roof Inspection", ctaDesc: "Insurance-ready report · This week",
      },
      gbp: {
        business: "PeakShield Roofing", avatar: "PS",
        rating: "4.9", reviews: "412",
        category: "Roofing contractor · GAF Certified",
        ad: "Sponsored",
        snippet: "Free storm-damage inspection · Insurance-ready · Drone + ground",
        status: "Open · Closes 7 PM",
        actions: ["Book online", "Call", "Directions"],
        query: "roofers near me",
      },
      email: {
        from: "PeakShield Roofing", fromEmail: "hello@peakshieldroofing.com", avatar: "PS",
        subject: "Your free roof inspection is reserved, Tom", time: "Today, 4:42 PM",
        logoIcon: "🏠", logoName: "PeakShield", logoSub: "ROOFING & EXTERIORS",
        heroPill: "🛡️ Free Storm Inspection",
        heroH3: <>You're In, Tom!<br/>Your Free Inspection Is Reserved.</>,
        heroP: "After last week's hail — let's document any damage before insurance deadlines.",
        priceTag: "FREE", priceSub: "No obligation · No payment ever",
        greeting: "Hey Tom,",
        bodyP1: <>Thanks for choosing PeakShield. We're holding a slot for your <strong>free storm-damage inspection</strong>. A licensed inspector will text you within <strong>2 hours</strong> to confirm.</>,
        bullets: ["Drone inspection of all slopes + valleys", "Ground-level inspection of soffits, fascia, gutters", "Photo report you can hand to your insurance adjuster", "No-pressure quote if repairs are needed"],
        bodyP2: <>Need it sooner? Just call <strong>(555) 555-0144</strong> — we have 24-hour emergency slots open during storm season.</>,
        ctaText: "🛡️ Confirm My Free Inspection",
        ctaSub: "🔒 No payment ever · GAF Certified · Licensed &amp; Insured",
        signoffStrong: "— Mark &amp; the PeakShield team",
        signoffSpan: "(555) 555-0144 · hello@peakshieldroofing.com",
        footer: "📍 Serving DFW metro · GAF Master Elite · Licensed &amp; Insured",
      },
      booked: {
        url: "peakshieldroofing.com/confirmed",
        eyebrow: "✓ Inspection Confirmed",
        h: "You're booked, Tom!",
        sub: "Your free storm-damage inspection is locked in. We'll see you Thursday.",
        cardH: "Inspection details",
        rows: [
          { lbl: "Date", val: "Thu, May 7, 2026" },
          { lbl: "Window", val: "1:00 – 3:00 PM" },
          { lbl: "Inspector", val: "Mark D. · GAF Cert.", techAvatar: "MD" },
          { lbl: "Service", val: "Drone + ground inspection · FREE" },
        ],
        actions: [
          { primary: true, label: "Add to Calendar", icon: "cal" },
          { label: "Call (555) 555-0144", icon: "phone" },
        ],
        meta: [
          { icon: "✉️", text: "Confirmation sent to tom@example.com" },
          { icon: "🔔", text: "Reminder will text the morning of" },
          { icon: "📍", text: "Inspector ETA shared 30 min before arrival" },
        ],
      },
    },
  },

  healthcare: {
    name: "Healthcare Practices",
    image: "hero-healthcare.png",
    eyebrow: "Industries · Healthcare",
    headline: <>Patient inquiries answered fast — <span className="accent">and HIPAA-safely.</span></>,
    lead: "AutoGrowthBase handles new-patient intake, appointment confirmations, and care-reminder workflows. PHI stays inside the boundaries you set.",
    heroStats: [
      { v: "<60s", l: "New-patient response" },
      { v: "−43%", l: "No-show rate" },
      { v: "HIPAA-safe", l: "By architecture" },
    ],
    painPoints: [
      { t: "Front desk drowns in phone tag", d: "New-patient calls, scheduling changes, insurance questions — all hit the same person who's also greeting patients in the lobby." },
      { t: "No-shows kill clinic capacity", d: "Without active confirmation, 20–30% of slots no-show. Empty chairs are pure margin loss." },
      { t: "After-hours leads go silent", d: "A patient researching at 9 PM forgets your practice by morning. The first call back tomorrow is too late." },
      { t: "PHI fears block automation", d: "Most chat tools route PHI to third-party clouds. That's a non-starter for compliance." },
    ],
    chat: {
      title: "New-patient intake that respects PHI boundaries",
      desc: "AI chat agent collects scheduling info and routes appropriately — sensitive details stay in your EHR, not in a third-party SaaS log.",
      bullets: ["Configurable PHI boundary", "Insurance + new vs. existing routing", "Direct EHR appointment write-back"],
      image: "images/tile-image-healthcare-service/industry-healthcare-chat.png",
    },
    voice: {
      title: "Answer every overflow + after-hours call",
      desc: "AI voice agent handles routine scheduling, confirms appointments, and triages urgent calls — freeing your front desk for in-person patients.",
      bullets: ["Confirmation + reschedule flows", "Insurance verification routing", "Live transfer for urgent care"],
      image: "images/tile-image-healthcare-service/industry-healthcare-voice.png",
    },
    automation: {
      title: "End no-shows with multi-channel confirmation",
      desc: "Day-before SMS, morning-of voicemail, automatic rebook offer for no-shows. Chair utilization climbs, revenue per slot rises.",
      bullets: ["Multi-channel confirmation", "Auto-rebook on cancel", "Care-plan reminder sequences"],
      image: "images/tile-image-healthcare-service/industry-healthcare-automation.png",
    },
    flowTitle: "From inquiry to confirmed appointment.",
    flow: [
      { t: "9:14 PM — inbound", d: "Prospective patient submits new-patient form on the practice website." },
      { t: "9:14:42 PM — intake", d: "Chat agent confirms insurance, preferred days, and reason for visit. Slots offered live." },
      { t: "9:15 PM — booked", d: "Appointment written into EHR. Confirmation SMS + email scheduled. Front desk sees it in the morning queue." },
      { t: "Day-before — confirmed", d: "Multi-channel reminders fire. No-show rate drops 40%+." },
    ],
    package: {
      tag: "Featured · Spring 2026",
      headline: <>New-patient intake package — <span className="accent">live in 7 days.</span></>,
      lead: "A turn-key system tuned to your new-patient wellness offer. Landing page, paid ads, email nurture, and AutoGrowthBase voice + chat agents — HIPAA-safe by architecture, deployed in one week.",
      offer: "$0 New-Patient Wellness Exam — most insurance accepted",
      sub: "Pre-built creative + offer engineered for first-week ROI on primary-care, dental, and specialty practices.",
      includes: [
        { t: "High-converting landing page", d: "Custom new-patient intake page with insurance dropdown + EHR webhook, A/B tested, mobile-first." },
        { t: "AI-powered Facebook ad campaign", d: "5 creative variants with neighborhood + family-stage targeting across Facebook & Instagram." },
        { t: "Top of Google Maps results", d: "Optimized GBP listing + new-patient post + Local Services Ads — for 'doctor near me' searches." },
        { t: "Automated lead nurturing emails", d: "5-touch sequence — confirmation, intake forms, prep guide, no-show recovery — written for clinical tone." },
        { t: "Booked appointments, automatically", d: "AutoGrowthBase voice + chat agents collect insurance, schedule into your EHR, and reduce no-shows." },
      ],
      price: { primary: "$5,400", note: "one-time · 30-day money-back · zero retainer" },
      landing: {
        url: "clearviewmedical.com/new-patient",
        tag: "Now accepting new patients",
        h1: <>Find your primary-care home. <span className="accent">$0 new-patient exam.</span></>,
        sub: "Comprehensive wellness exam, blood panel, and personal care plan. Most insurance accepted. Same-week appointments.",
        ratingText: "4.9 · 218 reviews · Board Certified",
        form: ["Full name", "Phone", "Insurance carrier", "Reason for visit"],
        cta: "Schedule my $0 visit",
        ctaSub: "We verify benefits before your visit · No surprise bills",
        includesTitle: "What's included",
        includesItems: ["30-min wellness consultation", "Vitals + standard blood panel", "Insurance verification before visit", "Personal care plan delivered post-visit"],
      },
      fbAd: {
        page: "Clearview Medical Center", avatar: "CM",
        meta: "Sponsored · Boston metro",
        body: "Now accepting new patients — $0 wellness exam (most insurance accepted). Comprehensive intake, blood panel, and personalized care plan. Same-week appointments.",
        likes: "164", comments: "27", shares: "8",
        cta: "Schedule",
        image: "images/fb-ad-healthcare.png",
        ctaDomain: "clearviewmedical.com", ctaHeadline: "$0 New-Patient Wellness Exam", ctaDesc: "Most insurance · Same-week",
      },
      gbp: {
        business: "Clearview Medical Center", avatar: "CM",
        rating: "4.9", reviews: "218",
        category: "Family medicine · Primary care",
        ad: "Sponsored",
        snippet: "New-patient wellness exam · $0 with insurance · Same-week appts",
        status: "Open · Closes 6 PM",
        actions: ["Book online", "Call", "Directions"],
        query: "doctor near me",
      },
      email: {
        from: "Clearview Medical Center", fromEmail: "newpatients@clearviewmedical.com", avatar: "CM",
        subject: "Welcome, Jennifer — your new-patient appointment is reserved", time: "Today, 7:18 PM",
        logoIcon: "⚕️", logoName: "Clearview", logoSub: "MEDICAL CENTER",
        heroPill: "🌿 Welcome to the Practice",
        heroH3: <>You're In, Jennifer.<br/>Your $0 Visit Is Reserved.</>,
        heroP: "We'll verify your insurance benefits before your visit. No surprise bills.",
        priceTag: "$0", priceSub: "Wellness Exam · Most Insurance Accepted",
        greeting: "Hi Jennifer,",
        bodyP1: <>Welcome to Clearview Medical Center. We're holding a slot for your <strong>new-patient wellness exam</strong>. Our front desk will call you within <strong>1 business day</strong> to verify your insurance benefits.</>,
        bullets: ["30-minute wellness consultation with your provider", "Vitals + standard blood panel (when clinically indicated)", "We verify your benefits before the visit", "Personal care plan emailed within 48h"],
        bodyP2: <>Questions before your visit? Call our front desk at <strong>(555) 555-0166</strong> — we're here Monday through Saturday.</>,
        ctaText: "📅 Confirm My Appointment",
        ctaSub: "🔒 HIPAA-protected intake · No payment required to book",
        signoffStrong: "— Dr. Reyes &amp; the Clearview team",
        signoffSpan: "(555) 555-0166 · newpatients@clearviewmedical.com",
        footer: "📍 Suite 204, 400 Health Blvd, Boston · Board Certified · Most Insurance Accepted",
      },
      booked: {
        url: "clearviewmedical.com/confirmed",
        eyebrow: "✓ Appointment Confirmed",
        h: "You're booked, Jennifer.",
        sub: "Your $0 new-patient wellness exam is reserved for next Tuesday.",
        cardH: "Visit details",
        rows: [
          { lbl: "Date", val: "Tue, May 12, 2026" },
          { lbl: "Time", val: "10:30 AM" },
          { lbl: "Provider", val: "Dr. Reyes · Family Medicine", techAvatar: "DR" },
          { lbl: "Visit", val: "New-patient wellness · $0 w/ insurance" },
        ],
        actions: [
          { primary: true, label: "Add to Calendar", icon: "cal" },
          { label: "Call (555) 555-0166", icon: "phone" },
        ],
        meta: [
          { icon: "✉️", text: "Intake forms emailed to jennifer@example.com" },
          { icon: "🔔", text: "Reminder text the day before — reply C to confirm" },
          { icon: "📍", text: "Suite 204, 400 Health Blvd · Free parking validated" },
        ],
      },
    },
  },

  professional: {
    name: "Professional Services",
    image: "hero-professional-services.png",
    eyebrow: "Industries · Professional Services",
    headline: <>Stop losing high-value leads <span className="accent">while partners are billing.</span></>,
    lead: "AutoGrowthBase qualifies inquiries, books discovery calls, and runs long-cycle nurture for legal, accounting, and consulting practices.",
    heroStats: [
      { v: "$8k+", l: "Avg. matter value" },
      { v: "<60s", l: "First-touch reply" },
      { v: "3.4×", l: "Discovery-to-retainer" },
    ],
    painPoints: [
      { t: "Senior partners can't be the first responder", d: "Your most valuable people are billing $400/hr — they shouldn't be doing initial intake calls. But they often do, badly." },
      { t: "Long forms get abandoned", d: "Detailed intake forms scare off qualified leads who aren't sure if they need you yet." },
      { t: "Niche qualification eats time", d: "Half of inquiries aren't your ideal client. But finding out takes a 30-minute call you can't bill." },
      { t: "Referral leads stall in long cycles", d: "B2B and high-stakes legal/financial decisions take months. Without nurture, the referral evaporates." },
    ],
    chat: {
      title: "Qualify before partners ever pick up the phone",
      desc: "AI chat agent runs your firm's intake conversation — practice area, urgency, conflict-check basics, fit signals — and only books the call if it's a real match.",
      bullets: ["Practice-area routing", "Conflict + fit pre-screening", "Books only qualified discovery calls"],
      image: "images/tile-image-professional-service/lawfirm-img-chat-agent.png",
    },
    voice: {
      title: "Cover after-hours and conflict-check overflow",
      desc: "AI voice agent answers callbacks, schedules consultations, and runs intake scripts — leaving partners free to do the deep-work calls only they can do.",
      bullets: ["Consult scheduling in partner's voice", "Soft conflict checks", "Live transfer when stakes are high"],
      image: "images/tile-image-professional-service/lawfirm-img-voice-agent.png",
    },
    automation: {
      title: "Nurture the long yes",
      desc: "Drip sequences tailored by practice area, deal stage, and intent — so when the lead is finally ready, you're already top-of-mind.",
      bullets: ["Practice-area-specific nurture", "Intent-signal escalation", "Auto-newsletter + content cadence"],
      image: "images/tile-image-professional-service/lawfirm-img-automation.png",
    },
    flowTitle: "From inquiry to retainer signed.",
    flow: [
      { t: "Inbound — referral", d: "Referred lead lands on the firm's contact page after a partner mentioned them at a client dinner." },
      { t: "Qualified", d: "Chat agent screens for practice fit, urgency, and conflict basics. Confirms match." },
      { t: "Booked", d: "Discovery call slotted directly into the right partner's calendar — only if pre-qualified." },
      { t: "Months later — closed", d: "Long-cycle nurture keeps the firm top-of-mind. Lead converts when budget hits." },
    ],
    package: {
      tag: "Featured · Spring 2026",
      headline: <>Discovery-call lead-gen package — <span className="accent">live in 7 days.</span></>,
      lead: "A turn-key system tuned to your free-consultation offer. Landing page, paid ads, email nurture, and AutoGrowthBase voice + chat agents — calibrated to qualify before partner time.",
      offer: "FREE 30-Min Initial Consultation — book a partner directly",
      sub: "Pre-built creative + offer engineered for first-week ROI on legal, accounting, and consulting practices.",
      includes: [
        { t: "High-converting landing page", d: "Custom consultation page with practice-area dropdown + conflict pre-screen, A/B tested, mobile-first." },
        { t: "AI-powered Facebook ad campaign", d: "5 creative variants with profession + life-stage targeting across Facebook & Instagram." },
        { t: "Top of Google Maps results", d: "Optimized GBP listing + practice-area post + Local Services Ads — for 'attorney near me' intent." },
        { t: "Automated lead nurturing emails", d: "5-touch sequence — confirmation, prep checklist, post-call recap, long-cycle nurture — in firm tone." },
        { t: "Booked appointments, automatically", d: "AutoGrowthBase voice + chat agents pre-qualify, conflict-check, and book directly to the right partner's calendar." },
      ],
      price: { primary: "$5,400", note: "one-time · 30-day money-back · zero retainer" },
      landing: {
        url: "meridianlegal.com/consultation",
        tag: "Free 30-min consultation · This week",
        h1: <>Talk to a partner. <span className="accent">Free 30-min consult.</span></>,
        sub: "Confidential consultation with a senior partner. Practice-area-matched. No-obligation engagement letter. Available this week.",
        ratingText: "5.0 · Avvo Rated · 92 reviews",
        form: ["Full name", "Phone", "Practice area", "Brief description"],
        cta: "Schedule my consultation",
        ctaSub: "Confidential · Conflict-checked before booking",
        includesTitle: "What's included",
        includesItems: ["30 minutes with a senior partner", "Practice-area-matched routing", "Confidential intake (attorney-client privileged)", "Written engagement summary if you proceed"],
      },
      fbAd: {
        page: "Meridian Legal", avatar: "ML",
        meta: "Sponsored · Chicago metro",
        body: "Need legal counsel? Book a FREE 30-minute consultation with a senior partner this week. Practice-area-matched. No-obligation. Confidential.",
        likes: "76", comments: "12", shares: "5",
        cta: "Book Consultation",
        image: "images/fb-ad-professional.png",
        ctaDomain: "meridianlegal.com", ctaHeadline: "Free 30-Min Consultation", ctaDesc: "Senior partner · This week",
      },
      gbp: {
        business: "Meridian Legal", avatar: "ML",
        rating: "5.0", reviews: "92",
        category: "Law firm · Estate · Business · Family",
        ad: "Sponsored",
        snippet: "Free 30-min consultation · Senior partner · Practice-area matched",
        status: "Open · Closes 6 PM",
        actions: ["Book online", "Call", "Directions"],
        query: "lawyer near me",
      },
      email: {
        from: "Meridian Legal", fromEmail: "intake@meridianlegal.com", avatar: "ML",
        subject: "Your consultation is reserved, Daniel — prep checklist inside", time: "Today, 3:24 PM",
        logoIcon: "⚖️", logoName: "Meridian", logoSub: "LEGAL · CHICAGO",
        heroPill: "📋 Free Initial Consultation",
        heroH3: <>You're In, Daniel.<br/>Your Consultation Is Reserved.</>,
        heroP: "Confidential. 30 minutes. Senior partner. No obligation.",
        priceTag: "FREE", priceSub: "30-Minute Initial Consultation",
        greeting: "Dear Daniel,",
        bodyP1: <>Thank you for choosing Meridian Legal. Your <strong>30-minute consultation</strong> is reserved with a senior partner whose practice area matches your inquiry. Our intake coordinator will call you within <strong>1 business day</strong>.</>,
        bullets: ["30 minutes with a senior partner (not paralegal-routed)", "Confidential and attorney-client privileged from the first call", "Conflict pre-check completed before your appointment", "Written engagement summary if you proceed"],
        bodyP2: <>If anything urgent comes up before your call, reach our intake line at <strong>(555) 555-0177</strong>.</>,
        ctaText: "📅 Confirm My Consultation",
        ctaSub: "🔒 Confidential intake · No payment required",
        signoffStrong: "— Sarah Whitman &amp; the Meridian team",
        signoffSpan: "(555) 555-0177 · intake@meridianlegal.com",
        footer: "📍 333 N Michigan Ave, Chicago · IL Bar #4823 · Member ABA",
      },
      booked: {
        url: "meridianlegal.com/confirmed",
        eyebrow: "✓ Consultation Confirmed",
        h: "You're booked, Daniel.",
        sub: "Your free 30-min consultation with a senior partner is reserved for Friday.",
        cardH: "Consultation details",
        rows: [
          { lbl: "Date", val: "Fri, May 8, 2026" },
          { lbl: "Time", val: "2:00 – 2:30 PM" },
          { lbl: "Partner", val: "Sarah W. · Estate &amp; Business", techAvatar: "SW" },
          { lbl: "Format", val: "Zoom · Link sent to email" },
        ],
        actions: [
          { primary: true, label: "Add to Calendar", icon: "cal" },
          { label: "Call (555) 555-0177", icon: "phone" },
        ],
        meta: [
          { icon: "✉️", text: "Zoom link + intake form emailed to daniel@example.com" },
          { icon: "🔔", text: "Reminder text 1 hour before · Reply C to confirm" },
          { icon: "📍", text: "Confidential · Attorney-client privileged from first call" },
        ],
      },
    },
  },

  retail: {
    name: "Local Retail & Studios",
    image: "hero-retail-studios.png",
    eyebrow: "Industries · Local Retail & Studios",
    headline: <>Every Instagram DM <span className="accent">books a first class.</span></>,
    lead: "AutoGrowthBase pulls inquiries from Instagram, TikTok, and Google into one inbox — answers them, books trials, and brings memberships back to life.",
    heroStats: [
      { v: "<60s", l: "DM response" },
      { v: "+58%", l: "Trial-to-member" },
      { v: "1 inbox", l: "Across all channels" },
    ],
    painPoints: [
      { t: "DMs scattered across IG, FB, TikTok", d: "Inquiries land in three apps. Some get answered. Most don't. Owners check at the end of the day — too late." },
      { t: "First-class bookings stall", d: "New students reach out, hesitate, and never book. The inquiry-to-trial gap is the entire growth bottleneck." },
      { t: "Memberships quietly lapse", d: "Drop-offs happen silently. Without an automated re-engagement, lost members rarely come back." },
      { t: "Reviews not asked for at the right moment", d: "After a great class, the studio is too busy to ask. Local SEO stagnates as a result." },
    ],
    chat: {
      title: "One inbox across IG, FB, TikTok, and your site",
      desc: "AI chat agent answers DMs across every social channel in your studio's voice — and books the trial class before the prospect closes the app.",
      bullets: ["Multi-channel social inbox", "First-class booking in chat", "Membership upsell after trial"],
      image: "images/tile-image-retail-servic/industry-retail-chat.png",
    },
    voice: {
      title: "Cover the front-desk overflow",
      desc: "AI voice agent picks up when staff are teaching or coaching, answers schedule questions, and books trials without interrupting class.",
      bullets: ["Class schedule lookups", "Drop-in vs. trial booking", "Live transfer for membership questions"],
      image: "images/tile-image-retail-servic/industry-retail-voice.png",
    },
    automation: {
      title: "Bring lapsed members back, automatically",
      desc: "Drop-off detection + win-back sequences. Birthday offers. Streak rewards. Review asks at the perfect moment.",
      bullets: ["Lapsed-member detection", "Win-back drip flows", "Post-class review prompts"],
      image: "images/tile-image-retail-servic/industry-retail-automation.png",
    },
    flowTitle: "From Instagram DM to membership signed.",
    flow: [
      { t: "Tuesday — DM", d: "Prospect DMs the studio's IG asking about beginner classes." },
      { t: "Replied", d: "Chat agent answers in the studio's voice, suggests Saturday's intro class, books trial slot." },
      { t: "Trial", d: "Reminder fires day-before. Trial happens. Auto-text post-class with intro membership offer." },
      { t: "Member", d: "Trial converts. Auto-review request fires after first month. Win-back flow ready if signal drops." },
    ],
    package: {
      tag: "Featured · Spring 2026",
      headline: <>First-class trial lead-gen package — <span className="accent">live in 7 days.</span></>,
      lead: "A turn-key system tuned to your free-trial offer. Landing page, paid ads, email nurture, and AutoGrowthBase voice + chat agents — pulling DMs from IG, FB, TikTok into one inbox.",
      offer: "FREE First Class + 7-Day Membership Trial",
      sub: "Pre-built creative + offer engineered for first-week ROI on yoga, fitness, and pilates studios.",
      includes: [
        { t: "High-converting landing page", d: "Custom trial-class page with calendar pick + studio waiver, A/B tested, mobile-first." },
        { t: "AI-powered Facebook ad campaign", d: "5 creative variants with neighborhood + lifestyle targeting across Facebook, Instagram &amp; TikTok." },
        { t: "Top of Google Maps results", d: "Optimized GBP listing + class-schedule offer post + Local Services Ads — for 'yoga near me' intent." },
        { t: "Automated lead nurturing emails", d: "5-touch sequence — confirmation, prep guide, post-class follow-up, membership upsell, win-back." },
        { t: "Booked appointments, automatically", d: "AutoGrowthBase voice + chat agents answer DMs across IG/FB/TikTok and book first classes — without front-desk effort." },
      ],
      price: { primary: "$5,400", note: "one-time · 30-day money-back · zero retainer" },
      landing: {
        url: "bloomyoga.com/first-class-free",
        tag: "First class FREE · Limited daily slots",
        h1: <>Try a class. <span className="accent">First one's on us.</span></>,
        sub: "Beginner-friendly. Mats provided. Eco-friendly studio. Plus: 7 days of unlimited classes when you book.",
        ratingText: "4.9 · 380 reviews · Best of Boulder 2025",
        form: ["Full name", "Phone", "Class type interest", "Preferred date"],
        cta: "Claim my free class",
        ctaSub: "No credit card · No commitment",
        includesTitle: "What's included",
        includesItems: ["Free first class (any style, any time)", "7 days unlimited classes after first visit", "Borrowed mat + water on the house", "Personal welcome from owner"],
      },
      fbAd: {
        page: "Bloom Yoga Studio", avatar: "BY",
        meta: "Sponsored · Boulder",
        body: "First class FREE — beginner-friendly, mats provided. Plus: 7 days of unlimited classes after your first visit. No credit card required. Limited daily slots.",
        likes: "342", comments: "58", shares: "19",
        cta: "Book Free Class",
        image: "images/fb-ad-retail.png",
        ctaDomain: "bloomyoga.com", ctaHeadline: "Free First Class + 7-Day Trial", ctaDesc: "Beginner-friendly · Daily slots",
      },
      gbp: {
        business: "Bloom Yoga Studio", avatar: "BY",
        rating: "4.9", reviews: "380",
        category: "Yoga studio · Hot, Vinyasa, Beginner",
        ad: "Sponsored",
        snippet: "First class FREE · 7-day unlimited trial · Beginner-friendly",
        status: "Open · Closes 9 PM",
        actions: ["Book online", "Call", "Directions"],
        query: "yoga studio near me",
      },
      email: {
        from: "Bloom Yoga Studio", fromEmail: "hello@bloomyoga.com", avatar: "BY",
        subject: "Welcome, Linda — your free first class is reserved 🌸", time: "Today, 8:46 PM",
        logoIcon: "🌸", logoName: "Bloom Yoga", logoSub: "STUDIO · BOULDER",
        heroPill: "🌿 Welcome to Bloom",
        heroH3: <>You're In, Linda!<br/>Your Free Class Is Reserved.</>,
        heroP: "Beginner-friendly. Mats provided. We'll greet you at the door.",
        priceTag: "FREE", priceSub: "First Class + 7-Day Unlimited Trial",
        greeting: "Hey Linda,",
        bodyP1: <>Welcome to Bloom! Your <strong>first class is reserved</strong> — and you've got 7 days of unlimited classes once you arrive. Our front desk will text you the day before with parking + studio details.</>,
        bullets: ["First class FREE — pick any style, any teacher", "7 days unlimited classes after your first visit", "Mat, blocks, and water provided — just bring yourself", "Personal hello from our owner Maya"],
        bodyP2: <>New to yoga? We've got a 5-minute first-timer guide we'll send the morning of your class — covers what to wear, breathing basics, and what to expect.</>,
        ctaText: "🧘 Confirm My Class",
        ctaSub: "🔒 No credit card · No commitment · Bring a friend",
        signoffStrong: "— Maya &amp; the Bloom team",
        signoffSpan: "(555) 555-0199 · hello@bloomyoga.com",
        footer: "📍 Studio B · 14th &amp; Pearl, Boulder · Best of Boulder 2024 &amp; 2025",
      },
      booked: {
        url: "bloomyoga.com/confirmed",
        eyebrow: "✓ Class Reserved",
        h: "You're booked, Linda! 🌸",
        sub: "Your free first class is reserved. See you Saturday morning.",
        cardH: "Class details",
        rows: [
          { lbl: "Date", val: "Sat, May 9, 2026" },
          { lbl: "Time", val: "9:00 – 10:00 AM" },
          { lbl: "Class", val: "Beginner Vinyasa · Studio B" },
          { lbl: "Teacher", val: "Maya R. · Owner", techAvatar: "MR" },
        ],
        actions: [
          { primary: true, label: "Add to Calendar", icon: "cal" },
          { label: "Call (555) 555-0199", icon: "phone" },
        ],
        meta: [
          { icon: "✉️", text: "Welcome guide emailed to linda@example.com" },
          { icon: "🔔", text: "Reminder text the morning of class · Bring a friend free" },
          { icon: "📍", text: "Studio B · 14th &amp; Pearl · Free street parking after 8 AM" },
        ],
      },
    },
  },
};

const INDUSTRY_ORDER = ["hvac", "plumbing", "cleaning", "roofing", "healthcare", "professional", "retail"];

function IndustryHero({ d }) {
  const hasPackage = !!d.package;
  return (
    <section className="industry-hero" style={{backgroundImage: `linear-gradient(135deg, rgba(11,46,77,0.86) 0%, rgba(11,46,77,0.55) 55%, rgba(11,46,77,0.25) 100%), url(images/${d.image})`}}>
      <div className="container">
        <div className="industry-hero-inner reveal">
          <span className="eyebrow eyebrow-light">{d.eyebrow}</span>
          <h1 className="h1 industry-h1">{d.headline}</h1>
          <p className="lead industry-lead">{d.lead}</p>
          <div className="industry-stats">
            {d.heroStats.map(s => (
              <div className="industry-stat" key={s.l}>
                <div className="industry-stat-v">{s.v}</div>
                <div className="industry-stat-l">{s.l}</div>
              </div>
            ))}
          </div>
          {hasPackage && (
            <a href="#featured-package" className="btn-package">
              <span className="btn-package-pulse"/>
              <span className="btn-package-text">
                <span className="btn-package-eyebrow">Featured · Live in 7 days</span>
                <span className="btn-package-name">Spring/Summer Lead Generation Package</span>
              </span>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          )}
          <div className="industry-cta-row">
            <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>
            <a href="growth-engine.html" className="btn btn-light">Inside AutoGrowthBase</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function IndustryBlocks({ d }) {
  return (
    <>
      <section className="sec sec-grey">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">The reality on the ground</span>
            <h2 className="h2">Where {d.name.toLowerCase()} businesses <span className="accent">leak revenue.</span></h2>
          </div>
          <div className="pain-grid reveal">
            {d.painPoints.map((p, i) => (
              <div className="pain-card" key={i}>
                <div className="pain-num">{String(i + 1).padStart(2, "0")}</div>
                <h3 className="pain-title">{p.t}</h3>
                <p className="pain-desc">{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">How AutoGrowthBase fixes it</span>
            <h2 className="h2">Three systems. One installation. <span className="accent">Built for {d.name.toLowerCase()}.</span></h2>
            <p className="lead">Chat agent, voice agent, and automation flow — working together to capture every lead and turn it into a booked job.</p>
          </div>
          <div className="cap-grid reveal">
            {[
              { tag: "AI Chat Agent", body: d.chat },
              { tag: "AI Voice Agent", body: d.voice },
              { tag: "AI Automation Flow", body: d.automation },
            ].map((c, i) => (
              <div className="cap-card" key={i}>
                <div className="cap-tag">{c.tag}</div>
                {c.body.image && (
                  <div className="cap-image">
                    <img src={c.body.image} alt={c.body.title} loading="lazy"/>
                  </div>
                )}
                <h3 className="cap-title">{c.body.title}</h3>
                <p className="cap-desc">{c.body.desc}</p>
                <ul className="cap-bullets">
                  {c.body.bullets.map((b, j) => (
                    <li key={j}>
                      <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>
                      {b}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec sec-navy">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">From inquiry to booked job</span>
            <h2 className="h2">{d.flowTitle}</h2>
          </div>
          <div className="flow-rail reveal">
            {d.flow.map((f, i) => (
              <div className="flow-step" key={i}>
                <div className="flow-step-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="flow-step-line"/>
                <div className="flow-step-body">
                  <div className="flow-step-time">{f.t}</div>
                  <div className="flow-step-text">{f.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container">
          <div className="support-panel reveal">
            <div className="support-copy">
              <span className="eyebrow">Easy to run</span>
              <h2 className="h2">You don't manage software. <span className="accent">We do.</span></h2>
              <p className="lead">AutoGrowthBase is infrastructure, not another tool to log into. We install it, train your team in an afternoon, and stay on call to tune it as your business grows.</p>
              <a href="contact.html" className="btn btn-primary btn-arr">
                Book a 30-min walkthrough
                <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>
            <ul className="support-list">
              <li>
                <span className="support-icon">→</span>
                <div><strong>Onboarding & training</strong><span>Half-day team training included. We record it for new hires.</span></div>
              </li>
              <li>
                <span className="support-icon">→</span>
                <div><strong>White-glove install</strong><span>We integrate with your CRM, calendar, and phone system. You don't touch the wiring.</span></div>
              </li>
              <li>
                <span className="support-icon">→</span>
                <div><strong>Always-on support</strong><span>Slack/SMS support during business hours. Office hours weekly. Real humans — not a ticket queue.</span></div>
              </li>
              <li>
                <span className="support-icon">→</span>
                <div><strong>Quarterly tuning</strong><span>We review performance and tune scripts, flows, and routing every 90 days.</span></div>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </>
  );
}

function IndustryPage({ slug }) {
  const d = INDUSTRY_DATA[slug];
  if (!d) return <div style={{padding: 80, textAlign: "center"}}>Industry not found.</div>;

  const others = INDUSTRY_ORDER.filter(s => s !== slug);

  return (
    <>
      <Nav active="industries"/>
      <IndustryHero d={d}/>

      {d.package && <PackageShowcase pkg={d.package}/>}

      <IndustryBlocks d={d}/>

      <section className="sec">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">Other industries</span>
            <h2 className="h2">Built for operators with <span className="accent">high-value inbound.</span></h2>
          </div>
          <div className="industry-other-grid reveal">
            {others.map(s => {
              const o = INDUSTRY_DATA[s];
              return (
                <a href={`industry-${s}.html`} className="industry-other-card" key={s} style={{backgroundImage: `linear-gradient(180deg, rgba(11,46,77,0.15) 0%, rgba(11,46,77,0.85) 100%), url(images/${o.image})`}}>
                  <span className="industry-other-name">{o.name}</span>
                  <span className="industry-other-arr">→</span>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      <CTABanner/>
      <Footer/>
    </>
  );
}

// ─── Mock visuals for the seasonal package ───────────────────────────────

function LandingPageMock({ data }) {
  return (
    <div className="lp-mock">
      <div className="browser-bar">
        <span className="browser-dot" style={{background:"#FF5F56"}}/>
        <span className="browser-dot" style={{background:"#FFBD2E"}}/>
        <span className="browser-dot" style={{background:"#27C93F"}}/>
        <div className="browser-url">
          <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M3 6V4a3 3 0 016 0v2M2 6h8v5H2z" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          {data.url}
        </div>
      </div>
      <div className="lp-body">
        <div className="lp-hero-row">
          <div className="lp-brand">
            <span className="lp-mark"/>
            <span>Phoenix HVAC</span>
          </div>
          <span className="lp-nav">Services · Reviews · Book</span>
        </div>
        <div className="lp-headline">{data.h1}</div>
        <div className="lp-sub">{data.sub}</div>
        <div className="lp-form">
          {data.form.map((f, i) => (
            <div className="lp-input" key={i}>{f}</div>
          ))}
          <button className="lp-cta">{data.cta} →</button>
        </div>
        <div className="lp-trust">
          {data.trust.map((t, i) => <span key={i}>{t}</span>)}
        </div>
      </div>
    </div>
  );
}

function FBAdMock({ data }) {
  return (
    <div className="fb-mock">
      <div className="fb-head">
        <div className="fb-avatar">PH</div>
        <div>
          <div className="fb-name">{data.page}</div>
          <div className="fb-meta">{data.meta} · <span style={{color:"#65676B"}}>🌎</span></div>
        </div>
        <div className="fb-dots">⋯</div>
      </div>
      <div className="fb-body">{data.body}</div>
      <div className="fb-image" style={{backgroundImage: `url(${data.image})`}}>
        <div className="fb-overlay">
          <div className="fb-overlay-small">{data.overlay.small}</div>
          <div className="fb-overlay-badge">{data.overlay.badge}</div>
          <div className="fb-overlay-line">{data.overlay.line}</div>
        </div>
      </div>
      <div className="fb-cta-row">
        <div>
          <div style={{fontSize:11, color:"#65676B", textTransform:"uppercase", letterSpacing:"0.04em"}}>phoenixhvac.com</div>
          <div style={{fontSize:14, fontWeight:600, color:"#050505"}}>$89 Spring AC Tune-Up</div>
        </div>
        <button className="fb-cta">{data.cta}</button>
      </div>
      <div className="fb-actions">
        <span>👍 {data.likes}</span>
        <span>💬 {data.comments}</span>
        <span>↗ {data.shares}</span>
      </div>
    </div>
  );
}

function GBPMock({ data }) {
  return (
    <div className="gbp-mock">
      <div className="gbp-head">
        <div className="gbp-google">
          <span style={{color:"#4285F4"}}>G</span>
          <span style={{color:"#EA4335"}}>o</span>
          <span style={{color:"#FBBC04"}}>o</span>
          <span style={{color:"#4285F4"}}>g</span>
          <span style={{color:"#34A853"}}>l</span>
          <span style={{color:"#EA4335"}}>e</span>
          <span style={{marginLeft: 6, color:"#5F6368", fontSize: 12, fontWeight: 400}}>hvac near me</span>
        </div>
      </div>
      <div className="gbp-card">
        <div className="gbp-row">
          <div className="gbp-thumb"/>
          <div className="gbp-info">
            <div className="gbp-name">{data.business} <span className="gbp-ad-tag">{data.ad}</span></div>
            <div className="gbp-rating">
              <span style={{color:"#fbbc04"}}>★★★★★</span>
              <span>{data.rating} ({data.reviews}) · {data.category}</span>
            </div>
            <div className="gbp-snippet">{data.snippet}</div>
            <div className="gbp-status">🟢 {data.status}</div>
          </div>
        </div>
        <div className="gbp-actions">
          {data.actions.map((a, i) => (
            <button className="gbp-btn" key={i}>{a}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

function EmailMock({ data }) {
  return (
    <div className="email-mock">
      <div className="email-head">
        <span className="email-folder">Inbox · Spring Tune-Up Sequence</span>
        <span className="email-count">{data.length} touches</span>
      </div>
      <div className="email-list">
        {data.map((e, i) => (
          <div className={`email-row ${e.open ? "is-open" : ""}`} key={i}>
            <div className="email-tag">{e.day}</div>
            <div className="email-body">
              <div className="email-top">
                <span className="email-from">{e.from}</span>
                <span className="email-time">{e.time}</span>
              </div>
              <div className="email-subject">{e.subject}</div>
              <div className="email-snippet">{e.snippet}</div>
            </div>
            {i < data.length - 1 && <div className="email-conn"/>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── iPhone shell + mobile mock content ──────────────────────────────────

function PhoneShell({ children, label, num, time = "9:41" }) {
  return (
    <div className="phone-wrap reveal">
      {(num || label) && (
        <div className="phone-label">
          {num && <span className="phone-label-num">{num}</span>}
          {label && <span className="phone-label-text">{label}</span>}
        </div>
      )}
      <div className="phone">
        <div className="phone-screen">
          <div className="phone-island"/>
          <div className="phone-status">
            <div className="phone-time">{time}</div>
            <div className="phone-status-spacer"/>
            <div className="phone-status-icons">
              <span className="phone-bars" aria-hidden="true"><span/><span/><span/><span/></span>
              <svg width="16" height="12" viewBox="0 0 16 12" fill="none" aria-hidden="true">
                <path d="M8 3a8 8 0 015 1.6l1.4-1.4A10 10 0 008 1a10 10 0 00-6.4 2.2L3 4.6A8 8 0 018 3z" fill="currentColor"/>
                <path d="M8 6a5 5 0 013 1l1.2-1.4A7 7 0 008 4a7 7 0 00-4.2 1.6L5 7a5 5 0 013-1z" fill="currentColor"/>
                <circle cx="8" cy="10" r="1.5" fill="currentColor"/>
              </svg>
              <span className="phone-battery"><span className="phone-battery-fill"/></span>
            </div>
          </div>
          <div className="phone-content">{children}</div>
          <div className="phone-home"><span/></div>
        </div>
      </div>
    </div>
  );
}

function MobileLP({ data }) {
  return (
    <div className="m-lp">
      <div className="m-browser-bar">
        <span className="m-browser-back">‹</span>
        <span className="m-browser-url">
          <svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M3 6V4a3 3 0 016 0v2M2 6h8v5H2z" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          {data.url}
        </span>
        <span className="m-browser-share">↻</span>
      </div>
      <div className="m-lp-hero">
        {data.tag && <div className="m-lp-tag"><span className="m-lp-tag-dot"/>{data.tag}</div>}
        <h1 className="m-lp-h1">{data.h1}</h1>
        <p className="m-lp-sub">{data.sub}</p>
        {data.ratingText && (
          <div className="m-lp-rating">
            <span className="m-lp-stars">★★★★★</span>
            <span>{data.ratingText}</span>
          </div>
        )}
      </div>
      <div className="m-lp-form">
        {data.form.map((f, i) => (
          <div className="m-lp-input" key={i}><span>{f}</span></div>
        ))}
        <button className="m-lp-cta">{data.cta} →</button>
        {data.ctaSub && <div className="m-lp-cta-sub">{data.ctaSub}</div>}
      </div>
      {data.includesItems && data.includesItems.length > 0 && (
        <div className="m-lp-includes">
          <div className="m-lp-includes-h">{data.includesTitle || "What's included"}</div>
          <ul>
            {data.includesItems.map((it, i) => (
              <li key={i}><span>✓</span> {it}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

function MobileFB({ data }) {
  return (
    <div className="m-fb">
      <div className="m-fb-header">
        <div className="m-fb-logo">f</div>
        <div className="m-fb-icons">
          <div className="m-fb-icon-btn">＋</div>
          <div className="m-fb-icon-btn">🔍</div>
          <div className="m-fb-icon-btn">💬</div>
        </div>
      </div>
      <div className="m-fb-nav">
        <div className="m-fb-nav-item is-active">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l9 7v11h-6v-7H9v7H3V10z"/></svg>
        </div>
        <div className="m-fb-nav-item"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M10 10l4 2-4 2z"/></svg></div>
        <div className="m-fb-nav-item"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="9" cy="9" r="3"/><circle cx="16" cy="11" r="2.5"/><path d="M3 19c0-3 3-5 6-5s6 2 6 5M14 19c0-2 2-3 4-3s4 1 4 3"/></svg></div>
        <div className="m-fb-nav-item"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 8a6 6 0 0112 0v6l2 2H4l2-2z"/><path d="M10 18a2 2 0 004 0"/></svg></div>
        <div className="m-fb-nav-item"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg></div>
      </div>
      <div className="m-fb-feed">
        <div className="m-fb-stories">
          <div className="m-fb-story m-fb-story-add">
            <div className="m-fb-story-bg" style={{background: "#e4e6ea"}}>＋</div>
            <span>Add Story</span>
          </div>
          <div className="m-fb-story">
            <div className="m-fb-story-bg" style={{background: "#fef3c7"}}>🌿</div>
            <span>Sarah M.</span>
          </div>
          <div className="m-fb-story">
            <div className="m-fb-story-bg" style={{background: "#dbeafe"}}>🏠</div>
            <span>James K.</span>
          </div>
        </div>
        <div className="m-fb-composer">
          <div className="m-fb-avatar">H</div>
          <div className="m-fb-composer-input">What's on your mind?</div>
        </div>
        <div className="m-fb-post">
          <div className="m-fb-post-head">
            <div className="m-fb-post-avatar">{data.avatar || "PH"}</div>
            <div className="m-fb-post-meta">
              <div className="m-fb-post-name">{data.page}</div>
              <div className="m-fb-post-sub">{data.meta || "Sponsored"} · <span className="m-fb-dot"/> 🌐</div>
            </div>
            <div className="m-fb-post-more">···</div>
          </div>
          <div className="m-fb-post-caption">{data.body}</div>
          <div className="m-fb-post-img" style={{backgroundImage: `url(${data.image})`}}>
            {data.overlay && (
              <div className="m-fb-overlay">
                <div className="m-fb-overlay-small">{data.overlay.small}</div>
                <div className="m-fb-overlay-badge">{data.overlay.badge}</div>
                <div className="m-fb-overlay-line">{data.overlay.line}</div>
              </div>
            )}
          </div>
          <div className="m-fb-cta-strip">
            <div>
              <div className="m-fb-cta-domain">{data.ctaDomain}</div>
              <div className="m-fb-cta-headline">{data.ctaHeadline}</div>
              <div className="m-fb-cta-desc">{data.ctaDesc}</div>
            </div>
            <div className="m-fb-cta-btn">{data.cta}</div>
          </div>
          <div className="m-fb-reactions">
            <div className="m-fb-rxn-emojis">
              <span>👍</span><span>❤️</span><span>😮</span>
              <span className="m-fb-rxn-count">{data.likes}</span>
            </div>
            <span className="m-fb-rxn-meta">{data.comments} comments · {data.shares} shares</span>
          </div>
          <div className="m-fb-actions">
            <div className="m-fb-action">👍 Like</div>
            <div className="m-fb-action">💬 Comment</div>
            <div className="m-fb-action">↗ Share</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function MobileEmail({ data }) {
  const e = Array.isArray(data) ? data[0] : data;
  return (
    <div className="m-email">
      <div className="m-email-toolbar">
        <span className="m-email-tb-back">←</span>
        <div className="m-email-tb-icons">
          <span>📥</span>
          <span>🗑</span>
          <span>⋯</span>
        </div>
      </div>
      <div className="m-email-meta">
        <div className="m-email-subject">{e.subject}</div>
        <div className="m-email-from-row">
          <div className="m-email-from-avatar">{e.avatar}</div>
          <div className="m-email-from-info">
            <div className="m-email-from-name">{e.from} <span>&lt;{e.fromEmail}&gt;</span></div>
            <div className="m-email-from-detail">to me · {e.time}</div>
          </div>
          <span className="m-email-star">☆</span>
        </div>
      </div>
      <div className="m-email-body">
        <div className="m-em-header">
          <div className="m-em-logo-icon">{e.logoIcon}</div>
          <div className="m-em-logo-text">
            {e.logoName}
            <span>{e.logoSub}</span>
          </div>
        </div>
        <div className="m-em-hero" style={e.heroBg ? {background: e.heroBg} : undefined}>
          <div className="m-em-offer-pill">{e.heroPill}</div>
          <h3>{e.heroH3}</h3>
          <p>{e.heroP}</p>
          {e.priceTag && <div className="m-em-price-tag">{e.priceTag}</div>}
          {e.priceSub && <div className="m-em-price-sub">{e.priceSub}</div>}
        </div>
        <div className="m-em-content">
          <p className="m-em-greeting">{e.greeting}</p>
          <p>{e.bodyP1}</p>
          {e.bullets && e.bullets.length > 0 && (
            <div className="m-em-bullets">
              <ul>
                {e.bullets.map((b, i) => <li key={i}>{b}</li>)}
              </ul>
            </div>
          )}
          {e.bodyP2 && <p>{e.bodyP2}</p>}
        </div>
        <div className="m-em-cta-block">
          <a className="m-em-cta">{e.ctaText}</a>
          <span className="m-em-cta-sub">{e.ctaSub}</span>
        </div>
        <div className="m-em-content">
          <div className="m-em-signoff">
            <strong>{e.signoffStrong}</strong>
            <span>{e.signoffSpan}</span>
          </div>
        </div>
        <div className="m-em-footer">{e.footer}</div>
      </div>
    </div>
  );
}

function MobileBooked({ data }) {
  if (!data) return null;
  return (
    <div className="m-booked">
      <div className="m-browser-bar">
        <span className="m-browser-back">‹</span>
        <span className="m-browser-url">
          <svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M3 6V4a3 3 0 016 0v2M2 6h8v5H2z" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          {data.url}
        </span>
        <span className="m-browser-share">↻</span>
      </div>
      <div className="m-booked-hero">
        <div className="m-booked-check">
          <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
            <circle cx="28" cy="28" r="26" fill="rgba(34,197,94,0.18)" stroke="#22C55E" strokeWidth="2"/>
            <path d="M18 28l7 7 13-15" stroke="#22C55E" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div className="m-booked-eyebrow">{data.eyebrow}</div>
        <h1 className="m-booked-h">{data.h}</h1>
        <p className="m-booked-sub">{data.sub}</p>
      </div>
      <div className="m-booked-card">
        <div className="m-booked-card-h">{data.cardH || "Appointment details"}</div>
        {data.rows.map((r, i) => (
          <div className="m-booked-card-row" key={i}>
            <div className="m-booked-card-lbl">{r.lbl}</div>
            <div className="m-booked-card-val">
              {r.techAvatar && <span className="m-booked-tech-avatar">{r.techAvatar}</span>}
              {r.val}
            </div>
          </div>
        ))}
      </div>
      <div className="m-booked-actions">
        {data.actions.map((a, i) => (
          <button className={`m-booked-btn ${a.primary ? "m-booked-btn-primary" : ""}`} key={i}>
            {a.icon === "cal" && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>}
            {a.icon === "phone" && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2A19.86 19.86 0 014 4.18 2 2 0 016 2h3a2 2 0 012 1.72c.13 1 .37 2 .72 2.94a2 2 0 01-.45 2.11L9.9 10.1a16 16 0 006 6l1.33-1.37a2 2 0 012.11-.45c.94.35 1.94.59 2.94.72A2 2 0 0122 16.92z"/></svg>}
            {a.label}
          </button>
        ))}
      </div>
      <div className="m-booked-meta">
        {data.meta.map((m, i) => (
          <div className="m-booked-meta-row" key={i}>
            <span className="m-booked-meta-icon">{m.icon}</span>
            <span>{m.text}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function MobileMaps({ data }) {
  return (
    <div className="m-maps">
      <div className="m-maps-search">
        <span className="m-maps-back">←</span>
        <span className="m-maps-q">{data.query || "near me"}</span>
        <span className="m-maps-x">×</span>
      </div>
      <div className="m-maps-tabs">
        <span className="m-maps-tab is-active">Top picks</span>
        <span className="m-maps-tab">Open now</span>
        <span className="m-maps-tab">Highly rated</span>
      </div>
      <div className="m-maps-canvas">
        <div className="m-maps-roads"/>
        <div className="m-maps-pin m-maps-pin-active">
          <div className="m-maps-pin-pulse"/>
          <span>$</span>
        </div>
        <div className="m-maps-pin m-maps-pin-2">B</div>
        <div className="m-maps-pin m-maps-pin-3">C</div>
        <div className="m-maps-zoom">
          <button>+</button>
          <button>−</button>
        </div>
      </div>
      <div className="m-maps-card">
        <div className="m-maps-card-grip"/>
        <div className="m-maps-card-row">
          <div className="m-maps-card-thumb">{data.avatar || "PH"}</div>
          <div className="m-maps-card-info">
            <div className="m-maps-card-name">
              {data.business}
              <span className="m-maps-ad">{data.ad}</span>
            </div>
            <div className="m-maps-card-rating">
              <span className="m-maps-stars">★★★★★</span>
              <span>{data.rating} ({data.reviews})</span>
              <span className="m-maps-dot"/>
              <span>{data.category}</span>
            </div>
            <div className="m-maps-card-snippet">{data.snippet}</div>
            <div className="m-maps-card-status"><span className="m-maps-open"/>{data.status}</div>
          </div>
        </div>
        <div className="m-maps-card-actions">
          <button className="m-maps-card-btn m-maps-card-btn-primary">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12h18M15 6l6 6-6 6"/></svg>
            Directions
          </button>
          <button className="m-maps-card-btn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2A19.86 19.86 0 014 4.18 2 2 0 016 2h3a2 2 0 012 1.72c.13 1 .37 2 .72 2.94a2 2 0 01-.45 2.11L9.9 10.1a16 16 0 006 6l1.33-1.37a2 2 0 012.11-.45c.94.35 1.94.59 2.94.72A2 2 0 0122 16.92z"/></svg>
            Call
          </button>
          <button className="m-maps-card-btn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
            Save
          </button>
        </div>
      </div>
    </div>
  );
}

function PackageShowcase({ pkg }) {
  const phoneSpecs = [
    { Mock: MobileLP, mockData: pkg.landing, time: "9:41" },
    { Mock: MobileFB, mockData: pkg.fbAd, time: "9:42" },
    { Mock: MobileMaps, mockData: pkg.gbp, time: "9:43" },
    { Mock: MobileEmail, mockData: pkg.email, time: "9:14" },
    { Mock: MobileBooked, mockData: pkg.booked, time: "9:16" },
  ];

  const slides = pkg.includes.map((inc, i) => ({
    num: String(i + 1).padStart(2, "0"),
    title: inc.t,
    desc: inc.d,
    ...phoneSpecs[i],
  }));

  const [idx, setIdx] = uS(0);
  const [perView, setPerView] = uS(3);

  uE(() => {
    if (typeof window === "undefined") return;
    const update = () => {
      const w = window.innerWidth;
      if (w < 900) setPerView(1);
      else if (w < 1280) setPerView(2);
      else setPerView(3);
    };
    update();
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, []);

  const total = slides.length;
  const maxIdx = Math.max(0, total - perView);
  const cIdx = Math.min(idx, maxIdx);
  const offsetPercent = -cIdx * (100 / perView);
  const pages = maxIdx + 1;

  const prev = () => setIdx(Math.max(0, cIdx - 1));
  const next = () => setIdx(Math.min(maxIdx, cIdx + 1));

  // 3D tilt: write cursor position to CSS vars (no React re-render)
  const onTilt = (e) => {
    const el = e.currentTarget;
    const r = el.getBoundingClientRect();
    const tx = ((e.clientX - r.left) / r.width) - 0.5;   // -0.5..0.5
    const ty = ((e.clientY - r.top) / r.height) - 0.5;
    el.style.setProperty("--tx", tx.toFixed(3));
    el.style.setProperty("--ty", ty.toFixed(3));
  };
  const offTilt = (e) => {
    e.currentTarget.style.setProperty("--tx", "0");
    e.currentTarget.style.setProperty("--ty", "0");
  };

  return (
    <section className="package-showcase" id="featured-package">
      <div className="package-showcase-inner">

        {/* Row 1: package info — centered, white bg */}
        <div className="psi psi-centered reveal">
          <div className="pkg-tag-pill">
            <span className="pkg-pulse"/>
            <span>{pkg.tag}</span>
          </div>

          <h2 className="psi-h">{pkg.headline}</h2>
          <p className="psi-lead">{pkg.lead}</p>

          <div className="psi-offer-bare">
            <span className="psi-bare-label">Seasonal offer</span>
            <div className="psi-bare-offer-name">{pkg.offer}</div>
            <p className="psi-bare-offer-sub">{pkg.sub}</p>
          </div>
        </div>

        {/* Row 2: navy slider — paired include + phone, 2 at a time */}
        <div className="psp reveal">
          <div className="psp-head">
            <span className="pkg-section-eyebrow">What you will get</span>
            <span className="pkg-section-meta">5 deliverables · slide to explore</span>
          </div>

          <div className="slider" style={{"--slider-perview": perView}}>
            <button
              type="button"
              className="slider-arr slider-arr-prev"
              onClick={prev}
              disabled={cIdx === 0}
              aria-label="Previous"
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>

            <div className="slider-viewport">
              <div className="slider-track" style={{transform: `translateX(${offsetPercent}%)`}}>
                {slides.map((s, i) => (
                  <div
                    className="slider-item"
                    key={i}
                    aria-hidden={i < cIdx || i >= cIdx + perView}
                    onMouseMove={onTilt}
                    onMouseLeave={offTilt}
                  >
                    <div className="slider-item-inner">
                      <PhoneShell time={s.time}>
                        <s.Mock data={s.mockData}/>
                      </PhoneShell>
                      <div className="slider-item-card">
                        <div className="slider-item-meta">
                          <span className="slider-item-icon">
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7l3 3 5-6" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                          </span>
                          <span className="slider-item-num">{s.num}</span>
                        </div>
                        <h3 className="slider-item-title">{s.title}</h3>
                        <p className="slider-item-desc">{s.desc}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <button
              type="button"
              className="slider-arr slider-arr-next"
              onClick={next}
              disabled={cIdx >= maxIdx}
              aria-label="Next"
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
          </div>

          <div className="slider-pips" role="tablist" aria-label="Package deliverables">
            {Array.from({length: pages}).map((_, i) => (
              <button
                key={i}
                type="button"
                className={i === cIdx ? "is-on" : ""}
                onClick={() => setIdx(i)}
                aria-label={`Go to page ${i + 1}`}
                aria-selected={i === cIdx}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Custom AI Engineering page ──────────────────────────────────────────

const PHASES_DEFAULT = [
  {
    n: "01", label: "Plan", title: "Plan for agents",
    desc: "Match the AI use case to a measurable business outcome. No vibes, no hype.",
    bullets: [
      { t: "Business plan", d: "Use case → KPI → ROI model" },
      { t: "Technology plan", d: "Model selection, hosting, vendor scope" },
      { t: "Organizational readiness", d: "Roles, training, change management" },
      { t: "Data architecture", d: "Sources, retention, consent boundaries" },
    ],
  },
  {
    n: "02", label: "Govern & Secure", title: "Govern & secure agents",
    desc: "Lock in privacy, compliance, and identity boundaries before a single agent goes live.",
    bullets: [
      { t: "Responsible AI", d: "Bias review, content safety, escalation rules" },
      { t: "Governance & security", d: "Identity, audit logs, secret management" },
      { t: "Prepare environment", d: "VPC, networking, region + data residency" },
    ],
  },
  {
    n: "03", label: "Build", title: "Build agents",
    desc: "Single agent or multi-agent orchestration — engineered, evaluated, and version-controlled.",
    bullets: [
      { t: "Single or multi-agent?", d: "Architecture decision, scoped per workflow" },
      { t: "Agent skeleton", d: "Model, instructions, tools, memory" },
      { t: "Tool integration", d: "RAG, APIs, structured actions, write-backs" },
      { t: "Evaluation harness", d: "Golden test sets, regression tracking" },
    ],
  },
  {
    n: "04", label: "Manage", title: "Manage agents",
    desc: "Integrate into your stack and operate with humans-in-the-loop where stakes are high.",
    bullets: [
      { t: "Integrate agents", d: "CRM, EHR, helpdesk, comms — production-grade" },
      { t: "Operate agents", d: "Monitoring, alerting, drift detection" },
      { t: "Continuous tuning", d: "Quarterly review of prompts, tools, evals" },
    ],
  },
];

const TOPIC_DATA = {
  "custom-ai": {
    nav: "custom-ai",
    hero: {
      eyebrow: "Custom AI Engineering",
      h1: <>Custom AI workflows for your business — <span className="accent">engineered, governed, and shipped.</span></>,
      lead: "Most AI initiatives stall in confusion — vague use cases, ungoverned data, black-box agents, no production playbook. Ours don't. We follow a four-phase framework adapted from Microsoft's Cloud Adoption Framework for AI Agents — refined for B2B operators who need it to ship, not just demo well.",
      stats: [{ v: "4", l: "phase framework" }, { v: "Weeks", l: "not quarters" }, { v: "Owned", l: "by your business" }],
      bgImage: "images/header-bg/custom-ai-hero-bg.png",
      primary: { label: "Book a discovery call", href: "contact.html" },
      secondary: { label: "See the framework", href: "#framework" },
    },
    pitfall: {
      eyebrow: "The pitfall",
      h2: <>Why most business AI initiatives <span className="accent">stall before they ship.</span></>,
      lead: "If you've watched an AI project lose momentum at the proof-of-concept stage, the failure modes are usually the same four. Our process is built to avoid each one.",
      items: [
        { n: "01", t: "Vague use case", d: "Teams build something that demos well but doesn't move revenue. We start with a measurable business outcome — every time." },
        { n: "02", t: "Ungoverned data", d: "PHI, PII, and IP leak into third-party SaaS without anyone noticing. We design boundaries before a single token gets sent." },
        { n: "03", t: "Black-box agents", d: "When something goes wrong in production, no one can explain why. We instrument every agent for observability + audit trail from day one." },
        { n: "04", t: "No production playbook", d: "The proof-of-concept impresses leadership, then dies on the way to ops. Our framework treats production as the starting line, not the finish." },
      ],
    },
    why: {
      eyebrow: "Why our process avoids the typical pitfalls",
      h2: <>Process-oriented. <span className="accent">Production-grade.</span></>,
      lead: "We don't sell AI prototypes that wow in a demo and die on the way to ops. We build infrastructure your business can run on — and audit when something goes wrong.",
      items: [
        { t: "Process-first, hype-last", d: "Every engagement starts with a business outcome and a measurable KPI — never with 'let's add AI to X.'" },
        { t: "Owned by you", d: "Code, prompts, evaluation harness, dashboards — all yours. Built on your cloud, your data. No vendor lock-in." },
        { t: "Auditable & governed", d: "Every prompt, every tool call, every output is logged. Pass legal review the first time, not the third." },
        { t: "Production from day one", d: "We design for monitoring, error handling, and cost ceilings before we write the first prompt — not after the demo." },
      ],
    },
  },

  "ai-workflows": {
    nav: "ai-workflows",
    hero: {
      eyebrow: "Custom AI Workflows",
      h1: <>Custom AI workflows that ship — <span className="accent">connecting your stack into one intelligent flow.</span></>,
      lead: "Stop stitching prompts to scripts to spreadsheets. We design end-to-end AI workflows that connect your CRM, calendar, helpdesk, and data sources into a governed, observable pipeline — automating the work nobody wants to do, in your business's voice.",
      stats: [{ v: "End-to-end", l: "workflow design" }, { v: "Observable", l: "every step" }, { v: "Owned", l: "by your business" }],
      bgImage: "images/header-bg/hero-ai-teal.png",
      primary: { label: "Map your workflow", href: "contact.html" },
      secondary: { label: "See the framework", href: "#framework" },
    },
    pitfall: {
      eyebrow: "The pitfall",
      h2: <>Why most AI workflow projects <span className="accent">break in production.</span></>,
      lead: "Demo-scale automations look clean. But once they hit real volume, real edge cases, and real data — the failure modes are predictable.",
      items: [
        { n: "01", t: "Tool sprawl", d: "Five SaaS tools held together with brittle Zaps. One vendor outage breaks the chain. We design for resilience, not for a single happy path." },
        { n: "02", t: "Manual handoffs", d: "Workflows that 'almost' run automated — except for the human who has to copy-paste between two systems daily. We close those gaps." },
        { n: "03", t: "No observability", d: "When the workflow fails silently at 3 AM, nobody notices until customer complaints arrive. We instrument every step with alerts and audit trails." },
        { n: "04", t: "Brittle prompts", d: "Workflows whose entire intelligence is one mega-prompt that breaks on edge cases. We compose smaller, evaluated steps with regression tests." },
      ],
    },
    why: {
      eyebrow: "Why our workflows hold up",
      h2: <>Composable. <span className="accent">Observable. Owned.</span></>,
      lead: "Workflow infrastructure that works on Saturday at 2 AM exactly the same as Monday at 10 — because every step is monitored and every prompt is version-controlled.",
      items: [
        { t: "Composable steps", d: "Each step is a discrete function with typed inputs and outputs. Add, remove, or replace any step without rebuilding the whole flow." },
        { t: "Full observability", d: "Latency, cost, and quality metrics on every step. Drift alerts. Audit logs you can hand to compliance." },
        { t: "Idempotent retries", d: "Network blips don't double-charge customers or send duplicate emails. Every step is safe to retry." },
        { t: "Human-in-the-loop", d: "Where stakes are high — refunds, medical, legal — the workflow pauses for approval before continuing." },
      ],
    },
  },

  "multi-agent": {
    nav: "multi-agent",
    hero: {
      eyebrow: "Multi-Agent Orchestration",
      h1: <>Multi-agent systems that coordinate — <span className="accent">without the chaos.</span></>,
      lead: "When one agent isn't enough, the question becomes: how do agents coordinate? We design supervised orchestration patterns where specialist agents collaborate via a planner — with conflict resolution, audit trails, and bounded loops baked in.",
      stats: [{ v: "Supervised", l: "orchestration" }, { v: "Bounded", l: "loops + cost" }, { v: "Auditable", l: "agent handoffs" }],
      bgImage: "images/header-bg/hero-ai-gold.png",
      primary: { label: "Architect a multi-agent system", href: "contact.html" },
      secondary: { label: "See the framework", href: "#framework" },
    },
    pitfall: {
      eyebrow: "The pitfall",
      h2: <>Why most multi-agent demos <span className="accent">never reach production.</span></>,
      lead: "Spinning up two agents that talk to each other is easy. Doing it without infinite loops, runaway cost, or contradictory outputs is the hard part — and where most teams give up.",
      items: [
        { n: "01", t: "Infinite loops", d: "Two agents pinging each other forever, racking up token costs while the user waits. We architect bounded conversations with hard caps and loop detection." },
        { n: "02", t: "Conflict ambiguity", d: "Two specialist agents reach contradictory conclusions. Whose answer wins? We design explicit arbitration and confidence-based routing." },
        { n: "03", t: "Cost blowouts", d: "Multi-agent systems easily hit 5–10× the cost of a single agent. We instrument cost per workflow and enforce budget ceilings before launch." },
        { n: "04", t: "Untraceable outputs", d: "When the final answer is wrong, was it agent A, agent B, or the orchestrator? We log every handoff with full prompt + response provenance." },
      ],
    },
    why: {
      eyebrow: "Why our multi-agent systems work",
      h2: <>Coordinated, not <span className="accent">cacophonous.</span></>,
      lead: "We use supervised orchestration patterns proven at production scale — supervisor agents, structured handoffs, explicit arbitration — instead of free-for-all 'agent swarm' fantasies.",
      items: [
        { t: "Supervisor pattern", d: "A planner agent decomposes work into sub-tasks, dispatches to specialists, validates outputs, and assembles the final result. Clear control flow." },
        { t: "Structured handoffs", d: "Agents pass schema-validated messages, not free-form text. The next agent knows exactly what to expect and can fail fast on malformed input." },
        { t: "Bounded by design", d: "Token budgets, max-turns, max-depth — enforced at the orchestrator level. No runaway loops, no surprise cost spikes." },
        { t: "Provenance trails", d: "Every agent invocation logged with inputs, outputs, model, latency, and cost. When something goes wrong, you can pinpoint which step failed." },
      ],
    },
  },

  "rag-memory": {
    nav: "rag-memory",
    hero: {
      eyebrow: "RAG, Tools & Memory Systems",
      h1: <>RAG, tools, and memory systems — <span className="accent">for agents that actually remember.</span></>,
      lead: "An agent without memory forgets everything. An agent without retrieval hallucinates. An agent without tools can't act. We engineer all three together — scoped retrievers, schema-validated tools, and bounded memory — so your agents stay grounded, capable, and accurate over time.",
      stats: [{ v: "Cited", l: "retrieval" }, { v: "Schema", l: "validated tools" }, { v: "Bounded", l: "memory + consent" }],
      bgImage: "images/header-bg/hero-ai-purple.png",
      primary: { label: "Build a grounded agent", href: "contact.html" },
      secondary: { label: "See the framework", href: "#framework" },
    },
    pitfall: {
      eyebrow: "The pitfall",
      h2: <>Why most RAG implementations <span className="accent">fail at the second use case.</span></>,
      lead: "Naïve RAG works on the demo PDF. In production, with real data of varying quality, the wheels come off — fast.",
      items: [
        { n: "01", t: "Retrieval rot", d: "Retrieval quality plummets as the knowledge base grows. We design tiered retrieval — semantic + keyword + reranker — with regression evals on golden queries." },
        { n: "02", t: "Memory leakage", d: "User-specific memory bleeding into other users' sessions. We implement strict scoping (session, user, org) with consent boundaries enforced at write time." },
        { n: "03", t: "Tool schema drift", d: "Backend API changes silently break tool calls weeks later. We bind tool schemas to the API contract and break loudly on mismatch." },
        { n: "04", t: "Hallucinations on edges", d: "Agent confidently answers when it should say 'I don't know.' We engineer abstention thresholds and citation requirements into every response." },
      ],
    },
    why: {
      eyebrow: "Why our RAG + memory systems hold up",
      h2: <>Grounded. <span className="accent">Cited. Bounded.</span></>,
      lead: "Retrieval and memory aren't features you bolt on. They're infrastructure with their own evals, observability, and governance — same as the model itself.",
      items: [
        { t: "Tested retrievers", d: "Golden query sets, recall@k tracking, regression alerts. We know exactly when retrieval quality drops — and which document caused it." },
        { t: "Scoped memory", d: "Session, user, and org memory with explicit retention windows. Consent boundaries enforced at write, not just at query time." },
        { t: "Validated tool calls", d: "JSON schemas bound to live API contracts. Schema mismatch = loud error, not silent broken response." },
        { t: "Eval harness from day one", d: "Every retrieval-tool-memory change is validated against held-out evals before it ships. No regressions, no surprises." },
      ],
    },
  },

  "ai-software": {
    nav: "ai-software",
    hero: {
      eyebrow: "Custom AI Software",
      h1: <>Custom AI software products — <span className="accent">built on your stack, owned by you.</span></>,
      lead: "Bespoke AI applications for businesses with specific workflows. We engineer production-grade software — not prototypes — on your cloud, on your data, with your security boundaries. You get the IP, the code, the runbooks. We get the privilege of building it.",
      stats: [{ v: "Production-grade", l: "from sprint one" }, { v: "Owned", l: "IP + code" }, { v: "Your stack", l: "AWS · GCP · Azure" }],
      bgImage: "images/header-bg/hero-ai-green.png",
      primary: { label: "Spec a product with us", href: "contact.html" },
      secondary: { label: "See the framework", href: "#framework" },
    },
    pitfall: {
      eyebrow: "The pitfall",
      h2: <>Why most custom AI software <span className="accent">never makes it to production.</span></>,
      lead: "AI products built like prototypes — to wow, not to last — fail predictably the moment real users, real load, and real edge cases arrive.",
      items: [
        { n: "01", t: "Vibe coding", d: "AI features hand-coded by feel, no specs, no tests. Six months later, no one knows why it works (or doesn't). We deliver specs, tests, and architecture diagrams." },
        { n: "02", t: "Vendor framework lock-in", d: "Built on a no-code AI platform that doesn't scale or expose internals. We build in your language, on your infra. Standard tools, no proprietary runtime." },
        { n: "03", t: "Security afterthought", d: "Auth, secrets, rate limits, prompt injection — bolted on after launch when a customer raises concern. We build security into the architecture from day one." },
        { n: "04", t: "Production gap", d: "The 'product' demos beautifully but has no monitoring, no rollback, no A/B testing. We design for the operating phase before the first feature ships." },
      ],
    },
    why: {
      eyebrow: "Why our AI software actually ships",
      h2: <>Engineered. <span className="accent">Owned. Auditable.</span></>,
      lead: "We build AI products the same way good software companies build any other product — with specs, tests, observability, and a deployment story you can hand to your ops team.",
      items: [
        { t: "Spec'd before built", d: "Every feature begins with a written spec, success criteria, and rollback plan. No 'let's see how it goes.'" },
        { t: "Tested at every layer", d: "Unit tests, integration tests, eval harness for AI behavior. CI runs all three on every PR." },
        { t: "Owned IP, your stack", d: "Code is yours. Hosted on your cloud. We don't lock you into a proprietary AI runtime." },
        { t: "Operations from day one", d: "Monitoring, alerting, runbook, on-call rotation handoff — designed before launch, not bolted on after." },
      ],
    },
  },

  "ai-implementation": {
    nav: "ai-implementation",
    hero: {
      eyebrow: "AI Implementation",
      h1: <>AI implementation — <span className="accent">from strategy to live system, in weeks not quarters.</span></>,
      lead: "Most AI implementation engagements stall in analysis paralysis or fragment across vendors. Ours don't. We run a tight four-phase delivery — discovery, roadmap, build, operate — that respects your KPIs, your team, and your timeline.",
      stats: [{ v: "Weeks", l: "to first value" }, { v: "KPI-aligned", l: "scope" }, { v: "Phased", l: "rollout" }],
      bgImage: "images/header-bg/hero-ai-blue.png",
      primary: { label: "Plan an implementation", href: "contact.html" },
      secondary: { label: "See the framework", href: "#framework" },
    },
    pitfall: {
      eyebrow: "The pitfall",
      h2: <>Why most AI implementations <span className="accent">overrun and underdeliver.</span></>,
      lead: "Three quarters into an AI program, the leading indicator of failure isn't technical complexity. It's strategic drift, vendor proliferation, and unclear ownership.",
      items: [
        { n: "01", t: "Analysis paralysis", d: "Six months of 'use case workshops' before a single line of code. We compress strategy to a 60-minute discovery + a 2-week roadmap. Then we build." },
        { n: "02", t: "Vendor proliferation", d: "Three AI platforms, two RAG vendors, four model providers — and no integration story. We rationalize the stack before we start." },
        { n: "03", t: "No change management", d: "The system ships, but no one trained the team to use it — adoption flatlines. Our roadmap includes role mapping, training, and adoption KPIs." },
        { n: "04", t: "Demo-quality launch", d: "What ships looks great in a board demo and breaks the day a real customer arrives. We launch with monitoring, runbooks, and on-call from day one." },
      ],
    },
    why: {
      eyebrow: "Why our implementations land",
      h2: <>Strategic. <span className="accent">Phased. Owned.</span></>,
      lead: "AI implementation is a delivery problem, not a research problem. We treat it like any other production rollout — with a written plan, a measurable KPI, and a phased ramp.",
      items: [
        { t: "Outcome-led roadmap", d: "Every phase ties to a business KPI you defined in discovery. No vanity scope, no science experiments." },
        { t: "Phased ramp", d: "Pilot → expanded pilot → general rollout. Each phase has go/no-go criteria. You can stop or pivot at any phase boundary." },
        { t: "Team enablement", d: "Training included in scope. Internal champions identified early. Your team operates the system long after we step back." },
        { t: "Co-located build", d: "Our engineers work alongside yours from day one. By go-live, your team can extend and operate without us." },
      ],
    },
  },

  "ai-integrations": {
    nav: "ai-integrations",
    hero: {
      eyebrow: "AI Integrations & Data",
      h1: <>AI integrations — <span className="accent">connect your tools to your agents, safely.</span></>,
      lead: "Your AI agents are only as good as the systems they can read and write to. We engineer governed, idempotent, observable connectors between your CRM, EHR, calendar, helpdesk, payment systems, and the data warehouse — with privacy boundaries enforced at every hop.",
      stats: [{ v: "Idempotent", l: "connectors" }, { v: "Observable", l: "every call" }, { v: "Governed", l: "by your policy" }],
      bgImage: "images/header-bg/hero-ai-rose.png",
      primary: { label: "Map your integrations", href: "contact.html" },
      secondary: { label: "See the framework", href: "#framework" },
    },
    pitfall: {
      eyebrow: "The pitfall",
      h2: <>Why most AI integrations <span className="accent">break the day after launch.</span></>,
      lead: "Glue code between AI and your stack often gets the least scrutiny — and accumulates the most production debt. We treat integrations as first-class infrastructure.",
      items: [
        { n: "01", t: "Data silos", d: "AI agent can't see the CRM, the helpdesk can't see the AI's reply. Customer experience fragments. We design unified data flows from the start." },
        { n: "02", t: "Ungoverned PII", d: "PII flowing into third-party AI services without anyone reviewing the data residency or retention. We map every field crossing every boundary." },
        { n: "03", t: "No rate limits", d: "AI agent floods your CRM with API calls and gets your account throttled. We build cost-aware connectors with exponential backoff and circuit breakers." },
        { n: "04", t: "Fragile connectors", d: "The connector breaks silently when the upstream API changes a field. We monitor schema drift and alert before failures cascade." },
      ],
    },
    why: {
      eyebrow: "Why our integrations stay up",
      h2: <>Governed. <span className="accent">Observable. Idempotent.</span></>,
      lead: "Integrations should fail loudly when something's wrong, succeed silently when it's right, and never lose data either way. Ours do all three.",
      items: [
        { t: "Schema-validated I/O", d: "Every field crossing the boundary is validated against a typed schema. Drift triggers alerts before it causes outages." },
        { t: "Idempotent by design", d: "Network retries don't double-write. Deduplication keys, upsert semantics, and write-once-read-many patterns where appropriate." },
        { t: "Privacy at the hop", d: "Every cross-system data flow is annotated with consent purpose, retention window, and PII classification. Auditable from one panel." },
        { t: "Rate-aware connectors", d: "Token bucket rate limiters, circuit breakers, exponential backoff. AI never DoS-es your CRM, even at peak load." },
      ],
    },
  },
};

function TopicPage({ slug = "custom-ai" }) {
  const d = TOPIC_DATA[slug];
  if (!d) return <div style={{padding: 80, textAlign: "center"}}>Topic not found.</div>;
  const phases = d.phases || PHASES_DEFAULT;

  return (
    <>
      <Nav active={d.nav}/>

      <section className="cai-hero" style={{backgroundImage: `linear-gradient(120deg, rgba(11,46,77,0.92) 0%, rgba(11,46,77,0.55) 55%, rgba(11,46,77,0.18) 100%), url(${d.hero.bgImage})`}}>
        <div className="container">
          <div className="cai-hero-inner reveal">
            <span className="eyebrow eyebrow-light">{d.hero.eyebrow}</span>
            <h1 className="h1 cai-hero-h1">{d.hero.h1}</h1>
            <p className="lead cai-hero-lead">{d.hero.lead}</p>
            <div className="cai-hero-stats">
              {d.hero.stats.map((s, i) => (
                <div className="cai-hero-stat" key={i}><div className="v">{s.v}</div><div className="l">{s.l}</div></div>
              ))}
            </div>
            <div className="cai-hero-cta">
              <a href={d.hero.primary.href} className="btn btn-primary btn-arr">
                {d.hero.primary.label}
                <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={d.hero.secondary.href} className="btn btn-light">{d.hero.secondary.label}</a>
            </div>
          </div>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">{d.pitfall.eyebrow}</span>
            <h2 className="h2">{d.pitfall.h2}</h2>
            <p className="lead">{d.pitfall.lead}</p>
          </div>
          <div className="cai-pitfall-grid reveal">
            {d.pitfall.items.map(p => (
              <div className="cai-pitfall" key={p.n}>
                <div className="cai-pitfall-num">{p.n}</div>
                <h3 className="cai-pitfall-t">{p.t}</h3>
                <p className="cai-pitfall-d">{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec" id="framework">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">Our process · 4 phases</span>
            <h2 className="h2">From idea to live AI agent — <span className="accent">in four phases.</span></h2>
            <p className="lead">Adapted from Microsoft's <a href="https://learn.microsoft.com/en-us/azure/cloud-adoption-framework/ai-agents/" target="_blank" rel="noopener noreferrer" style={{color: "var(--teal)", textDecoration: "underline", textUnderlineOffset: "3px"}}>Cloud Adoption Framework for AI Agents</a>. Refined for operators who need governed, production-grade AI in weeks, not quarters.</p>
          </div>

          <div className="cai-phase-rail reveal">
            {phases.map((p, i) => (
              <div className="cai-phase" key={p.n}>
                <div className="cai-phase-head">
                  <span className="cai-phase-num">{p.n}</span>
                  <span className="cai-phase-label">{p.label}</span>
                </div>
                <h3 className="cai-phase-title">{p.title}</h3>
                <p className="cai-phase-desc">{p.desc}</p>
                <ul className="cai-phase-bullets">
                  {p.bullets.map((b, j) => (
                    <li key={j}>
                      <span className="cai-phase-dot"/>
                      <div>
                        <strong>{b.t}</strong>
                        <span>{b.d}</span>
                      </div>
                    </li>
                  ))}
                </ul>
                {i < phases.length - 1 && <div className="cai-phase-arr" aria-hidden="true">→</div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec sec-navy">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">Anatomy of an agent</span>
            <h2 className="h2">What's inside <span className="accent">every agent we build.</span></h2>
            <p className="lead">An agent is more than a prompt. It's a generative model wrapped in instructions, tools, and memory — operating on real inputs and producing measurable outputs. Here's the architecture under the hood.</p>
          </div>

          <div className="cai-agent-diagram reveal">
            <div className="cai-agent-col cai-agent-io">
              <div className="cai-agent-col-h">Input</div>
              <ul className="cai-agent-list">
                <li><span>🔔</span><div><strong>System events</strong><span>Webhooks, schedules, triggers</span></div></li>
                <li><span>💬</span><div><strong>User messages</strong><span>Chat, voice, form submissions</span></div></li>
                <li><span>✨</span><div><strong>Agent messages</strong><span>Other agents handing off context</span></div></li>
              </ul>
            </div>

            <div className="cai-agent-arrow"><svg width="32" height="14" viewBox="0 0 32 14" fill="none"><path d="M2 7h26M22 2l6 5-6 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg></div>

            <div className="cai-agent-col cai-agent-core">
              <div className="cai-agent-col-h cai-agent-col-h-light">Agent core</div>
              <div className="cai-agent-stack">
                <div className="cai-agent-piece cai-agent-piece-1">
                  <div className="cai-agent-piece-t">Generative AI model</div>
                  <div className="cai-agent-piece-d">Claude, GPT, Gemini — selected per use case</div>
                </div>
                <div className="cai-agent-piece cai-agent-piece-2">
                  <div className="cai-agent-piece-t">Instructions</div>
                  <div className="cai-agent-piece-d">System prompt, behavior, escalation rules</div>
                </div>
                <div className="cai-agent-piece cai-agent-piece-3">
                  <div className="cai-agent-piece-t">Tools</div>
                  <div className="cai-agent-piece-d">Bound APIs, structured actions, schema-validated</div>
                </div>
              </div>
            </div>

            <div className="cai-agent-arrow"><svg width="32" height="14" viewBox="0 0 32 14" fill="none"><path d="M2 7h26M22 2l6 5-6 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg></div>

            <div className="cai-agent-col cai-agent-io">
              <div className="cai-agent-col-h">Output</div>
              <ul className="cai-agent-list">
                <li><span>✨</span><div><strong>Agent messages</strong><span>Replies in your tone of voice</span></div></li>
                <li><span>🛠️</span><div><strong>Tool results</strong><span>Booked appointments, ticket updates, write-backs</span></div></li>
              </ul>
            </div>
          </div>

          <div className="cai-agent-tools reveal">
            <div className="cai-agent-tools-h">
              <span className="cai-agent-tools-eyebrow">Tool calls — feeding the agent</span>
              <span className="cai-agent-tools-meta">retrieval · actions · memory</span>
            </div>
            <div className="cai-agent-tools-grid">
              <div className="cai-agent-tool">
                <div className="cai-agent-tool-icon">🔍</div>
                <div className="cai-agent-tool-t">Retrieval</div>
                <div className="cai-agent-tool-d">RAG over your documents, knowledge base, and historical interactions. Scoped per query, cited per response.</div>
              </div>
              <div className="cai-agent-tool">
                <div className="cai-agent-tool-icon">⚡</div>
                <div className="cai-agent-tool-t">Actions</div>
                <div className="cai-agent-tool-d">Schema-validated API calls into your stack — CRM updates, calendar bookings, ticket creation, payment flows.</div>
              </div>
              <div className="cai-agent-tool">
                <div className="cai-agent-tool-icon">🧠</div>
                <div className="cai-agent-tool-t">Memory</div>
                <div className="cai-agent-tool-d">Session, user, and organizational memory — bounded by your retention + consent policy. Never silently leaked.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">{d.why.eyebrow}</span>
            <h2 className="h2">{d.why.h2}</h2>
            <p className="lead">{d.why.lead}</p>
          </div>
          <div className="cai-why-grid reveal">
            {d.why.items.map((w, i) => (
              <div className="cai-why" key={i}>
                <div className="cai-why-tick">
                  <svg width="16" height="16" viewBox="0 0 14 14" fill="none"><path d="M3 7l3 3 5-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
                <div>
                  <h3 className="cai-why-t">{w.t}</h3>
                  <p className="cai-why-d">{w.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="container">
          <div className="cai-engage reveal">
            <div className="cai-engage-copy">
              <span className="eyebrow">How we engage</span>
              <h2 className="h2">Discovery → Roadmap → <span className="accent">Build → Operate.</span></h2>
              <p className="lead">Most clients move from a 60-min discovery call to a signed roadmap in two weeks. From there, we build, ship, and stay on to operate — co-located with your team.</p>
              <a href="contact.html" className="btn btn-primary btn-arr">
                Book a 60-min discovery
                <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>
            <ol className="cai-engage-steps">
              <li>
                <span className="cai-engage-num">01</span>
                <div>
                  <strong>Discovery (Week 0)</strong>
                  <span>60-min call. We map use cases to revenue. You leave with a written assessment.</span>
                </div>
              </li>
              <li>
                <span className="cai-engage-num">02</span>
                <div>
                  <strong>Roadmap (Weeks 1–2)</strong>
                  <span>Architecture, data plan, governance, KPIs. Fixed-fee. You own the artifact.</span>
                </div>
              </li>
              <li>
                <span className="cai-engage-num">03</span>
                <div>
                  <strong>Build (Weeks 2–8)</strong>
                  <span>Phased delivery. Weekly demo. Production-grade from sprint one.</span>
                </div>
              </li>
              <li>
                <span className="cai-engage-num">04</span>
                <div>
                  <strong>Operate (ongoing)</strong>
                  <span>Monitoring, on-call, quarterly tuning. Optional retainer or in-house handoff.</span>
                </div>
              </li>
            </ol>
          </div>
        </div>
      </section>

      <CTABanner/>
      <Footer/>
    </>
  );
}

// ─── Therapist Growth Partner — service page ─────────────────────────────

function TherapistGrowthPartnerPage() {
  const pains = [
    { n: "01", t: "Over-booked, under-grown", d: "Your calendar is full but your income has plateaued. More clients means more burnout, not more freedom." },
    { n: "02", t: "Income tied to your hours", d: "When you don't see clients, the income stops. There's no time to take a Wednesday off, let alone a real vacation." },
    { n: "03", t: "Tech overwhelm", d: "You know your work cold — but funnels, email automation, and course platforms feel like a second job you didn't sign up for." },
    { n: "04", t: "Marketing that feels gross", d: "The 'bro-marketing' playbook doesn't fit your values. You want clients to feel cared for, not pressured." },
  ];

  const freedom = [
    { l: "F", t: "Framework", d: "Organize your expertise into a teachable structure your students can follow." },
    { l: "R", t: "Repurpose", d: "Convert the materials, frameworks, and workbooks you already use into course content." },
    { l: "E", t: "Evergreen", d: "Build always-available offers that sell whether or not you're working today." },
    { l: "E", t: "Email", d: "Automated, ethical email sequences that nurture leads in your authentic voice." },
    { l: "D", t: "Discoverability (Get Known)", d: "Position yourself as the trusted expert your ideal student is already searching for." },
    { l: "O", t: "Optimize", d: "Track conversion, refine messaging, fix the leaky steps. Continuous improvement, not guesswork." },
    { l: "M", t: "Make Money", d: "Income that arrives whether you're seeing clients, on vacation, or just taking a Wednesday off." },
  ];

  const services = [
    { t: "Automated income systems", d: "Sales funnels and CRM workflows that convert visitors into students 24/7 — no manual outreach required." },
    { t: "Digital products & courses", d: "From outline to finished course on a platform built for therapists. Recording, editing, and packaging support included." },
    { t: "Burnout-free growth", d: "Scale your impact without scaling your client hours. Income that respects your energy and clinical boundaries." },
    { t: "Practice scaling strategy", d: "Roadmap your transition from session-based income to product-based income — without abandoning the clients you love." },
    { t: "Email automation", d: "Ethical email sequences that build relationships, not pressure-sell. Written in a tone your students trust." },
  ];

  const testimonials = [
    { name: "Sarah R.", role: "Licensed Psychologist", body: "They walked me through everything. We launched in six weeks and made the first sale on day one." },
    { name: "Michelle K.", role: "Marriage & Family Therapist", body: "They actually understand what it's like to do this work. The approach is calm. I never felt like I was selling my soul." },
    { name: "James T.", role: "Clinical Social Worker", body: "Within a month of launching the email funnel I had signups. I was making money while in session with other clients." },
  ];

  return (
    <>
      <Nav active="tgp"/>

      <section className="page-intro tgp-intro">
        <div className="container">
          <img src="images/TGP-logo/1.png" alt="Therapist Growth Partner" className="tgp-logo"/>
          <span className="eyebrow">Scale your practice. Increase your freedom.</span>
          <h1 className="h1">You have the knowledge.<br/><span className="accent">Let's turn it into a course.</span></h1>
          <p className="lead">Therapist Growth Partner helps mental-health professionals turn clinical expertise into online courses, automated marketing systems, and digital products — so income arrives whether you're in session, on vacation, or just taking a Wednesday off.</p>
          <div style={{display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap", justifyContent: "center"}}>
            <a href="https://therapistgrowthpartner.com/" target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-arr">
              Visit therapistgrowthpartner.com
              <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">Book a strategy call</a>
          </div>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">The therapist's dilemma</span>
            <h2 className="h2">The answer isn't more clients. <span className="accent">It's a different model.</span></h2>
            <p className="lead">If you've ever Googled how to "scale" your practice, you've seen the bro-marketing playbook. We don't run that playbook. We help you build something that grows your impact without burning you out.</p>
          </div>
          <div className="reveal" style={{display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20, marginTop: 48}}>
            {pains.map(p => (
              <div key={p.n} style={{background: "var(--white)", border: "1px solid var(--line)", borderLeft: "3px solid var(--teal)", borderRadius: "var(--r-lg)", padding: 28}}>
                <div className="label-mono" style={{color: "var(--teal)", marginBottom: 12, fontWeight: 700}}>{p.n}</div>
                <h3 className="h3" style={{fontSize: 20, marginBottom: 10}}>{p.t}</h3>
                <p style={{color: "var(--text-muted)", fontSize: 14.5, margin: 0, lineHeight: 1.55}}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">The framework</span>
            <h2 className="h2">The <span className="accent">FREEDOM</span> framework.</h2>
            <p className="lead">A seven-step methodology built specifically for therapists, psychologists, and clinical professionals. Each letter is a phase you can ship in weeks — not months.</p>
          </div>
          <div className="reveal" style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16, marginTop: 48}}>
            {freedom.map((f, i) => (
              <div key={i} style={{background: "var(--white)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", padding: 24, position: "relative"}}>
                <div style={{position: "absolute", top: -16, left: 24, width: 44, height: 44, borderRadius: 12, background: "linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%)", color: "#FFF", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 20, boxShadow: "0 6px 14px rgba(46, 181, 180, 0.3)"}}>{f.l}</div>
                <div style={{paddingTop: 30}}>
                  <h3 className="h3" style={{fontSize: 18, marginBottom: 8}}>{f.t}</h3>
                  <p style={{color: "var(--text-muted)", fontSize: 14, margin: 0, lineHeight: 1.55}}>{f.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">What we ship</span>
            <h2 className="h2">Five services. <span className="accent">One outcome.</span></h2>
            <p className="lead">Income that doesn't require your time.</p>
          </div>
          <div className="reveal" style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 48}}>
            {services.map((s, i) => (
              <div key={i} style={{background: "var(--white)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", padding: 28, transition: "all 0.25s"}}
                onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--teal)"; e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}>
                <div style={{width: 36, height: 36, borderRadius: 10, background: "rgba(34, 197, 94, 0.12)", border: "1px solid rgba(34, 197, 94, 0.3)", color: "#22C55E", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 14}}>
                  <svg width="16" height="16" viewBox="0 0 14 14" fill="none"><path d="M3 7l3 3 5-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
                <h3 className="h3" style={{fontSize: 19, marginBottom: 10}}>{s.t}</h3>
                <p style={{color: "var(--text-muted)", fontSize: 14.5, margin: 0, lineHeight: 1.6}}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow">From therapists who shipped</span>
            <h2 className="h2">Real practices. <span className="accent">Real launches.</span></h2>
          </div>
          <div className="reveal" style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 48}}>
            {testimonials.map((q, i) => (
              <div key={i} style={{background: "var(--white)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", padding: 32, position: "relative"}}>
                <div style={{position: "absolute", top: 18, right: 22, fontSize: 48, color: "rgba(46, 181, 180, 0.18)", fontFamily: "Georgia, serif", lineHeight: 1, fontWeight: 700}}>"</div>
                <p style={{fontSize: 15.5, color: "var(--navy)", lineHeight: 1.55, fontStyle: "italic", marginTop: 16, marginBottom: 20}}>"{q.body}"</p>
                <div style={{borderTop: "1px solid var(--line)", paddingTop: 14}}>
                  <div style={{fontSize: 14, fontWeight: 600, color: "var(--navy)"}}>{q.name}</div>
                  <div style={{fontSize: 12.5, color: "var(--text-muted)"}}>{q.role}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container">
          <div className="reveal" style={{maxWidth: 720, margin: "0 auto", textAlign: "center", padding: "32px 0"}}>
            <span className="eyebrow">Free resources</span>
            <h2 className="h2" style={{margin: "16px 0 12px"}}>Start with <span className="accent">the 30-Day Course Launch Plan.</span></h2>
            <p className="lead" style={{marginBottom: 24}}>A free video walkthrough showing exactly how to take an idea from clinical concept to live course in 30 days — without burnout, without bro-marketing.</p>
            <a href="https://therapistgrowthpartner.com/" target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-arr">
              Watch the free course
              <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>

      <CTABanner/>
      <Footer/>
    </>
  );
}

// ─── ROI Calculator (Resources > AI Marketing ROI) ──────────────────────

const ROI_INDUSTRIES = [
  { id: "hvac",         label: "HVAC",                     emoji: "🔧",  defaultTicket: 850,  leadLift: 2.4, conversionLift: 1.6 },
  { id: "plumbing",     label: "Plumbing",                 emoji: "💧",  defaultTicket: 650,  leadLift: 2.3, conversionLift: 1.55 },
  { id: "cleaning",     label: "Cleaning & Restoration",   emoji: "🧽",  defaultTicket: 1200, leadLift: 2.2, conversionLift: 1.5 },
  { id: "roofing",      label: "Roofing & Exteriors",      emoji: "🏠",  defaultTicket: 7500, leadLift: 2.0, conversionLift: 1.45 },
  { id: "healthcare",   label: "Healthcare Practices",     emoji: "🩺",  defaultTicket: 450,  leadLift: 1.9, conversionLift: 1.7 },
  { id: "professional", label: "Professional Services",    emoji: "💼",  defaultTicket: 2500, leadLift: 2.1, conversionLift: 1.55 },
  { id: "retail",       label: "Local Retail & Studios",   emoji: "🏪",  defaultTicket: 180,  leadLift: 2.5, conversionLift: 1.4 },
  { id: "custom",       label: "Other / Custom",           emoji: "⚙️",  defaultTicket: 1000, leadLift: 2.1, conversionLift: 1.5 },
];

const fmtUSD = (n) => "$" + Math.round(n).toLocaleString("en-US");

function ROIInput({ label, hint, prefix, suffix, value, onChange, min, max, step }) {
  return (
    <div className="roi-input">
      <label className="roi-input-label">{label}</label>
      <div className="roi-input-wrap">
        {prefix && <span className="roi-input-prefix">{prefix}</span>}
        <input
          type="number"
          value={Number.isFinite(value) ? value : 0}
          onChange={(e) => {
            const n = parseFloat(e.target.value);
            onChange(Number.isFinite(n) ? n : 0);
          }}
          min={min}
          max={max}
          step={step}
          className={`roi-input-field ${prefix ? "has-prefix" : ""} ${suffix ? "has-suffix" : ""}`}
        />
        {suffix && <span className="roi-input-suffix">{suffix}</span>}
      </div>
      {hint && <p className="roi-input-hint">{hint}</p>}
    </div>
  );
}

function ROICalculatorPage() {
  const [step, setStep] = uS("inputs"); // "inputs" | "results"
  const [industryId, setIndustryId] = uS("hvac");
  const [avgTicket, setAvgTicket] = uS(850);
  const [monthlyLeads, setMonthlyLeads] = uS(40);
  const [closeRate, setCloseRate] = uS(25);
  const [marketingSpend, setMarketingSpend] = uS(2000);

  const industry = ROI_INDUSTRIES.find(i => i.id === industryId) || ROI_INDUSTRIES[0];

  const projection = React.useMemo(() => {
    const currentCustomers = monthlyLeads * (closeRate / 100);
    const currentRevenue = currentCustomers * avgTicket;

    const projectedLeads = monthlyLeads * industry.leadLift;
    const projectedCloseRate = Math.min(80, closeRate * industry.conversionLift);
    const projectedCustomers = projectedLeads * (projectedCloseRate / 100);
    const projectedRevenue = projectedCustomers * avgTicket;

    const monthlyLift = projectedRevenue - currentRevenue;
    const annualLift = monthlyLift * 12;

    const estServiceFee = 1500;
    const totalMonthlyInvestment = estServiceFee + marketingSpend;
    const roiPercent = totalMonthlyInvestment > 0 ? (monthlyLift / totalMonthlyInvestment) * 100 : 0;

    const newCustomersPerYear = Math.round((projectedCustomers - currentCustomers) * 12);

    return {
      currentRevenue, projectedRevenue, monthlyLift, annualLift,
      roiPercent, newCustomersPerYear, projectedLeads, projectedCloseRate,
    };
  }, [avgTicket, monthlyLeads, closeRate, marketingSpend, industry.leadLift, industry.conversionLift]);

  const handleSelectIndustry = (id) => {
    setIndustryId(id);
    const next = ROI_INDUSTRIES.find(i => i.id === id);
    if (next) setAvgTicket(next.defaultTicket);
  };

  const goToResults = () => {
    setStep("results");
    if (typeof window !== "undefined") window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const goBackToInputs = () => {
    setStep("inputs");
    if (typeof window !== "undefined") window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <>
      <Nav active="roi"/>

      <section className="page-intro roi-intro">
        <div className="container">
          <span className="eyebrow">AI Marketing ROI Calculator</span>
          <h1 className="h1">See your <span className="accent">revenue upside</span> with AI marketing.</h1>
          <p className="lead">Tell us about your business in 30 seconds. We'll show you the extra leads, customers, and revenue you could generate with AutoGrowthBase running your marketing on autopilot.</p>
        </div>
      </section>

      {step === "inputs" && (
        <section className="sec sec-grey">
          <div className="container roi-shell">
            <div className="roi-card">
              <h2 className="h2 roi-card-h">Tell us about your business</h2>
              <p className="lead roi-card-lead">Pick your industry and share a few quick numbers. Your inputs are not stored — calculations run entirely in your browser.</p>

              <div className="roi-section">
                <div className="roi-section-label">Your industry</div>
                <div className="roi-industry-grid">
                  {ROI_INDUSTRIES.map(opt => {
                    const selected = opt.id === industryId;
                    return (
                      <button
                        key={opt.id}
                        type="button"
                        onClick={() => handleSelectIndustry(opt.id)}
                        className={`roi-industry-card ${selected ? "is-selected" : ""}`}
                      >
                        <span className="roi-industry-emoji" aria-hidden="true">{opt.emoji}</span>
                        <span className="roi-industry-label">{opt.label}</span>
                      </button>
                    );
                  })}
                </div>
              </div>

              <div className="roi-input-grid">
                <ROIInput
                  label="Average revenue per customer / job"
                  hint="Your typical ticket size or customer lifetime value."
                  prefix="$"
                  value={avgTicket}
                  onChange={setAvgTicket}
                  min={0}
                  step={50}
                />
                <ROIInput
                  label="Monthly leads or inquiries"
                  hint="Calls, form fills, walk-ins — total per month."
                  value={monthlyLeads}
                  onChange={setMonthlyLeads}
                  min={0}
                  step={1}
                />
                <ROIInput
                  label="Lead → customer close rate"
                  hint="Of every 100 leads, how many become paying customers?"
                  suffix="%"
                  value={closeRate}
                  onChange={setCloseRate}
                  min={0}
                  max={100}
                  step={1}
                />
                <ROIInput
                  label="Current monthly marketing spend"
                  hint="Ads, SEO, agencies, tools — combined."
                  prefix="$"
                  value={marketingSpend}
                  onChange={setMarketingSpend}
                  min={0}
                  step={100}
                />
              </div>

              <div className="roi-cta-row">
                <button onClick={goToResults} className="btn btn-primary btn-arr">
                  Calculate my ROI
                  <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>
                </button>
              </div>
            </div>
          </div>
        </section>
      )}

      {step === "results" && (
        <section className="sec sec-grey">
          <div className="container roi-shell">
            <div className="roi-result-hero">
              <div className="roi-result-hero-tag">Projection · {industry.label}</div>
              <h2 className="roi-result-h">
                You could add <span className="accent">{fmtUSD(projection.annualLift)}</span> in annual revenue.
              </h2>
              <p className="roi-result-sub">
                Based on your {industry.label.toLowerCase()} business and AutoGrowthBase's typical performance lift across AI lead generation, automated follow-up, and conversion optimization.
              </p>
              <div className="roi-result-stats">
                <div className="roi-stat">
                  <div className="roi-stat-l">Extra revenue / month</div>
                  <div className="roi-stat-v">{fmtUSD(projection.monthlyLift)}</div>
                </div>
                <div className="roi-stat">
                  <div className="roi-stat-l">New customers / year</div>
                  <div className="roi-stat-v">+{projection.newCustomersPerYear.toLocaleString()}</div>
                </div>
                <div className="roi-stat">
                  <div className="roi-stat-l">Estimated ROI</div>
                  <div className="roi-stat-v">{Math.round(projection.roiPercent).toLocaleString()}%</div>
                </div>
              </div>
            </div>

            <div className="roi-compare-grid">
              <div className="roi-compare roi-compare-today">
                <div className="roi-compare-label">Today</div>
                <div className="roi-compare-rows">
                  <div className="roi-compare-row"><span>Monthly leads</span><strong>{monthlyLeads.toLocaleString()}</strong></div>
                  <div className="roi-compare-row"><span>Close rate</span><strong>{closeRate}%</strong></div>
                  <div className="roi-compare-row"><span>Monthly revenue</span><strong>{fmtUSD(projection.currentRevenue)}</strong></div>
                </div>
              </div>
              <div className="roi-compare roi-compare-after">
                <div className="roi-compare-label">With AutoGrowthBase</div>
                <div className="roi-compare-rows">
                  <div className="roi-compare-row"><span>Monthly leads</span><strong>{Math.round(projection.projectedLeads).toLocaleString()}</strong></div>
                  <div className="roi-compare-row"><span>Close rate</span><strong>{Math.round(projection.projectedCloseRate)}%</strong></div>
                  <div className="roi-compare-row"><span>Monthly revenue</span><strong>{fmtUSD(projection.projectedRevenue)}</strong></div>
                </div>
              </div>
            </div>

            <div className="roi-card">
              <h3 className="h3 roi-card-h">How AutoGrowthBase gets you there</h3>
              <p className="lead roi-card-lead">An AI-driven marketing system tailored to your industry — built, monitored, and optimized for you.</p>
              <ul className="roi-features">
                {[
                  "AI-powered lead generation across Google, Meta, and local search",
                  "Instant SMS + email follow-up so leads never go cold",
                  "Smart appointment booking and reminders that reduce no-shows",
                  "Review automation that turns happy customers into 5-star ammo",
                  "Custom dashboards so you can see ROI in real time",
                  "Dedicated growth strategist tuning the system every month",
                ].map((item, i) => (
                  <li key={i}>
                    <span className="roi-feature-tick">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7l3 3 5-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </span>
                    {item}
                  </li>
                ))}
              </ul>

              <div className="roi-cta-row roi-cta-row-split">
                <button type="button" onClick={goBackToInputs} className="btn btn-ghost">
                  ← Recalculate
                </button>
                <a
                  href={`mailto:info@purnaweb.ca?subject=ROI%20Strategy%20Call%20-%20${encodeURIComponent(industry.label)}&body=${encodeURIComponent("Hi Purna Web,\n\nI ran the ROI calculator and would like to book a strategy call.\n\nIndustry: " + industry.label + "\nProjected annual lift: " + fmtUSD(projection.annualLift) + "\n")}`}
                  className="btn btn-primary btn-arr"
                >
                  Book a free strategy call
                  <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>

              <p className="roi-disclaimer">
                Projections are estimates based on industry benchmarks for AI marketing automation and the inputs you provided. Actual results vary by market, offer, and execution.
              </p>
            </div>
          </div>
        </section>
      )}

      <CTABanner/>
      <Footer/>
    </>
  );
}

// ─── Legal pages ─────────────────────────────────────────────────────────

function PrivacyPolicyPage() {
  return (
    <>
      <Nav active="privacy"/>
      <section className="page-intro">
        <div className="container">
          <span className="eyebrow">Legal</span>
          <h1 className="h1">Privacy Policy</h1>
          <p className="lead">How Purna Web Agency Inc. collects, uses, and protects your information.</p>
          <p className="legal-effective">Last updated: May 1, 2026</p>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container legal-shell">
          <article className="legal-doc">
            <section className="legal-section">
              <h2>Overview</h2>
              <p>This Privacy Policy explains how information about you is collected, used, and disclosed by Purna Web Agency, Inc. (&ldquo;Purna Web&rdquo;, &ldquo;we&rdquo;, &ldquo;us&rdquo;). The policy applies to <a href="https://www.purnaweb.ca">https://www.purnaweb.ca</a> (the &ldquo;Site&rdquo;) and to the platform services we operate (the &ldquo;Platform&rdquo;).</p>
            </section>

            <section className="legal-section">
              <h2>BestRewards Loyalty Program</h2>
              <p>Purna Web operates BestRewards, a loyalty rewards initiative. When you participate, personal information is collected and processed to manage rewards and program benefits.</p>
            </section>

            <section className="legal-section">
              <h2>Information We Collect</h2>

              <h3>Information you provide directly</h3>
              <p>You submit personal data including name, email address, company name, postal address, and phone number through account creation, interactive features, purchases, and support requests. Payment processing occurs through Stripe under their separate privacy policy at <a href="https://stripe.com/privacy" target="_blank" rel="noopener noreferrer">https://stripe.com/privacy</a>.</p>

              <h3>Information collected automatically</h3>
              <p>We gather browser type, access times, viewed pages, IP address, and referral source through log files. Cookies and web beacons collect usage information; see our Cookie Policy for details.</p>

              <h3>Information from other sources</h3>
              <p>Information may be obtained from third parties and combined with the data we collect through our services. Google sign-in grants us access to profile information such as your name and email address.</p>
            </section>

            <section className="legal-section">
              <h2>How We Use Information</h2>
              <p>Personal data supports account access, service delivery, transaction processing, technical notifications, customer support, promotional communications, fraud detection, service personalization, and employment consideration.</p>
            </section>

            <section className="legal-section">
              <h2>Information Sharing</h2>
              <p>Data is shared with vetted vendors performing contracted work, disclosed where required by law, transferred to enforce our rights, combined across affiliated entities, and provided to analytics and advertising partners. Aggregated or de-identified information may be shared freely.</p>
            </section>

            <section className="legal-section">
              <h2>Advertising &amp; Analytics</h2>
              <p>Google Ads, Google Analytics, Marketo, X (Twitter), Facebook, AdRoll, Quora, Bing Ads, LinkedIn, Terminus, Demandbase, Instagram, and Reddit utilize cookies and tracking technologies across the internet.</p>
            </section>

            <section className="legal-section">
              <h2>Customer Data Handling</h2>
              <p>Information handled on behalf of customers is retained solely for platform support and legal compliance. Individuals should direct access requests to their applicable customer organization.</p>
            </section>

            <section className="legal-section">
              <h2>Marketing</h2>
              <p>Promotional communications are sent based on legitimate interest or consent where required by law. You can unsubscribe via the email links provided or by contacting us at <a href="mailto:info@purnaweb.ca">info@purnaweb.ca</a>.</p>
            </section>

            <section className="legal-section">
              <h2>Security &amp; Retention</h2>
              <p>We implement reasonable physical, technical, and organizational protections, though internet transmission cannot be guaranteed completely secure. Data retention spans account duration plus periods necessary for tax obligations and legal enforcement.</p>
            </section>

            <section className="legal-section">
              <h2>International Transfer</h2>
              <p>Purna Web Agency is based in Canada. By accessing or using the Services, your information will be subject to processing, transfer, and storage in and to Canada.</p>
            </section>

            <section className="legal-section">
              <h2>Your Rights &amp; Choices</h2>

              <h3>Account management</h3>
              <p>You can access and modify your information by logging in or emailing <a href="mailto:info@purnaweb.ca">info@purnaweb.ca</a>. Account deactivation requests go to the same address; certain data may be retained for compliance and legitimate business purposes.</p>

              <h3>Cookie control</h3>
              <p>Most browsers accept cookies by default. You may configure your browser to reject or remove cookies, though some functionality may be affected.</p>

              <h3>Marketing opt-out</h3>
              <p>You can unsubscribe from promotional emails using the links provided or by contacting us.</p>
            </section>

            <section className="legal-section">
              <h2>Data Transfer Location</h2>
              <p>Information processing occurs in Canada, where privacy protections may differ from those in your local jurisdiction.</p>
            </section>

            <section className="legal-section">
              <h2>Contact Us</h2>
              <address className="legal-address">
                <strong>Purna Web Agency Inc.</strong><br/>
                23 Mississaga St W<br/>
                Orillia, Ontario, Canada<br/>
                Email: <a href="mailto:info@purnaweb.ca">info@purnaweb.ca</a><br/>
                Phone: <a href="tel:+17052420221">(705) 242-0221</a>
              </address>
            </section>
          </article>
        </div>
      </section>

      <Footer/>
    </>
  );
}

function TermsPage() {
  return (
    <>
      <Nav active="terms"/>
      <section className="page-intro">
        <div className="container">
          <span className="eyebrow">Legal</span>
          <h1 className="h1">Terms of Use</h1>
          <p className="lead">The terms governing your use of Purna Web Agency&rsquo;s site and services.</p>
          <p className="legal-effective">Last updated: May 1, 2026</p>
        </div>
      </section>

      <section className="sec sec-grey">
        <div className="container legal-shell">
          <article className="legal-doc">
            <section className="legal-section">
              <p>Welcome to <a href="https://www.purnaweb.ca">https://www.purnaweb.ca</a> (together with any related websites, the &ldquo;Site&rdquo;). The Site is owned and operated by Purna Web Agency, Inc. (&ldquo;Purna Web Agency&rdquo;).</p>
              <p>Please read these Terms carefully. By accessing the Site, you agree to be legally bound by them. If you do not accept these Terms, you must not use the Site or its content.</p>
              <p>You represent that you can lawfully enter contracts and are not a minor. If entering on behalf of an entity, you represent that you have authority to bind that organization.</p>
            </section>

            <section className="legal-section">
              <h2>1. Subscription Agreement</h2>
              <p>These Terms do not govern the use of the digital customer loyalty program service or other services (the &ldquo;Service&rdquo;) operated by Purna Web Agency.</p>
              <p>If you use the Service, you are subject to a separate Subscription Agreement available at <a href="https://purnaweb.ca/subscription/" target="_blank" rel="noopener noreferrer">https://purnaweb.ca/subscription/</a> or another written contract between you and Purna Web Agency.</p>
            </section>

            <section className="legal-section">
              <h2>2. Purna Web Agency Content</h2>
              <p>The Site contains HTML, applications, messages, text, files, images, photos, video, sounds, profiles, works of authorship, and other content (collectively, &ldquo;Content&rdquo;).</p>
              <p>The Site and its content are protected by copyright, trademark, and trade secret laws. Purna Web Agency retains all rights. A limited, revocable, non-sublicensable license is granted for personal, non-commercial access and display only.</p>
              <p>Prohibited uses include copying, downloading, reproducing, modifying, creating derivative works, publishing, distributing, or selling content. You may not remove, alter, or circumvent copyright notices or digital rights management mechanisms.</p>
            </section>

            <section className="legal-section">
              <h2>3. Trademarks</h2>
              <p>The trademarks, logos, and service marks (&ldquo;Marks&rdquo;) displayed on the Site are the property of Purna Web Agency or other third parties. Use of these Marks requires prior written consent from Purna Web Agency or the applicable third party.</p>
            </section>

            <section className="legal-section">
              <h2>4. Third-Party Services</h2>
              <p>The Site may provide links to third-party websites, applications, resources, or services. Purna Web Agency is not responsible for, and makes no warranties, express or implied, as to the Third-Party Services or the providers of such Third-Party Services.</p>
              <p>Inclusion of third-party links does not imply endorsement. Purna Web Agency is not liable for third-party content or practices.</p>
            </section>

            <section className="legal-section">
              <h2>5. Privacy</h2>
              <p>Please review the <a href="privacy.html">Privacy Policy</a> to understand how we collect, use, and disclose information.</p>
            </section>

            <section className="legal-section">
              <h2>6. Acceptable Use</h2>
              <p>Your use is subject to our Acceptable Use Policy. Purna Web Agency is not responsible or liable for any user Content or conduct on the Site. Report misuse to <a href="mailto:info@purnaweb.ca">info@purnaweb.ca</a>.</p>
            </section>

            <section className="legal-section">
              <h2>7. Compliance with Laws</h2>
              <p>You represent that, in agreeing to and performing under these Terms, you are not violating, and will not violate, any governmental laws, rules, regulations, or orders.</p>
              <p>You must comply with anti-bribery laws, export controls, trade sanctions, and related regulations. You confirm you are not a Sanctions Target.</p>
            </section>

            <section className="legal-section">
              <h2>8. Global Availability</h2>
              <p>Purna Web Agency controls the Site from Ontario, Canada. Users outside this jurisdiction are responsible for local-law compliance. Purna Web Agency makes no representation regarding worldwide availability.</p>
            </section>

            <section className="legal-section">
              <h2>9. Indemnity</h2>
              <p>You agree to defend, indemnify, and hold harmless Purna Web Agency, its affiliates, and their respective employees, contractors, agents, officers, and directors from and against any and all claims, damages, obligations, losses, liabilities, costs, debt, or expenses (including without limitation attorneys&rsquo; fees) arising out of or related to any claim, suit, action, or proceeding by a third party arising out of or relating to your use of the Site.</p>
              <p>This includes breaches of these Terms, violation of law, or user-posted content.</p>
            </section>

            <section className="legal-section legal-warning">
              <h2>10. Disclaimers</h2>
              <p>THE SITE AND ALL CONTENT AND OTHER ITEMS MADE AVAILABLE BY PURNA WEB AGENCY ARE PROVIDED ON AN &ldquo;AS IS&rdquo; AND &ldquo;AS AVAILABLE&rdquo; BASIS WITHOUT WARRANTIES OF ANY KIND, WHETHER EXPRESS, IMPLIED, STATUTORY, OR OTHERWISE.</p>
              <p>PURNA WEB AGENCY ASSUMES NO LIABILITY OR RESPONSIBILITY FOR ANY (i) ERRORS, MISTAKES OR INACCURACIES OF DATA OR INFORMATION POSTED, DISPLAYED, PUBLISHED OR MADE AVAILABLE FOR DOWNLOAD OR USE ON THE SITE, (ii) PERSONAL INJURY OR PROPERTY DAMAGE, OF ANY NATURE WHATSOEVER, RESULTING FROM USE OF THE SITE, (iii) ANY INTERRUPTION OR CESSATION OF TRANSMISSION TO OR FROM THE SITE, OR (iv) THE DEFAMATORY, OFFENSIVE OR ILLEGAL CONDUCT OF ANY THIRD PARTY NOT UNDER PURNA WEB AGENCY&rsquo;S CONTROL.</p>
            </section>

            <section className="legal-section legal-warning">
              <h2>11. Limitation of Liability</h2>
              <p>TO THE FULLEST EXTENT PERMITTED BY APPLICABLE LAW: (a) IN NO EVENT SHALL PURNA WEB AGENCY, ITS AFFILIATES OR THEIR RESPECTIVE EMPLOYEES, CONTRACTORS, AGENTS, OFFICERS, OR DIRECTORS BE LIABLE FOR ANY INDIRECT, PUNITIVE, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR EXEMPLARY DAMAGES.</p>
              <p>IN NO EVENT SHALL PURNA WEB AGENCY&rsquo;S CUMULATIVE AND AGGREGATE LIABILITY UNDER THESE TERMS EXCEED TWO HUNDRED CANADIAN DOLLARS.</p>
              <p>These exclusions apply regardless of liability theory or prior damage warnings.</p>
            </section>

            <section className="legal-section">
              <h2>12. Responsibility for End Users</h2>
              <p>You are responsible for violations by anyone using the Site with your permission or through your account. Your use to assist others in violating these Terms constitutes your own violation.</p>
            </section>

            <section className="legal-section">
              <h2>13. Termination and Monitoring</h2>
              <h3>13.1 Termination Rights</h3>
              <p>Purna Web Agency may suspend or terminate your access for Term violations, even if unintentional, if necessary to ensure legal compliance or to protect rights and safety.</p>
              <h3>13.2 Investigation and Content Removal</h3>
              <p>Purna Web Agency reserves the right to investigate violations and remove violating content at its discretion. It may report suspected illegal activity to law enforcement and cooperate with authorities by providing relevant data and information.</p>
            </section>

            <section className="legal-section">
              <h2>14. Electronic Communications</h2>
              <p>When you visit the Site or send emails to Purna Web Agency, you are communicating with us electronically; you consent to receive communications from us electronically. Communications via email or Site notices satisfy any legal writing requirements.</p>
            </section>

            <section className="legal-section">
              <h2>15. Modifications</h2>
              <p>Purna Web Agency may modify these Terms by posting revised versions on the Site. Your continued access constitutes acceptance of updates.</p>
            </section>

            <section className="legal-section">
              <h2>16. Governing Law</h2>
              <p>This Agreement will be interpreted, construed, and enforced in all respects in accordance with the laws of the Province of Ontario, without reference to its choice-of-law principles.</p>
              <p>Any legal action or proceeding arising under or relating to this Agreement shall be brought exclusively in the courts located in Ontario, Canada, and the Parties expressly consent to personal jurisdiction and venue in those courts.</p>
            </section>

            <section className="legal-section">
              <h2>17. Miscellaneous</h2>
              <p>These Terms constitute the complete and exclusive statement of the agreement between the Parties and supersede all proposals, oral or written, and all other communications between the Parties relating to the subject matter of these Terms.</p>
              <p>Site information controls over conflicting provisions. No partnership or agency relationship is created. Users cannot assign rights without written consent; Purna Web Agency may assign freely. Non-enforcement does not constitute waiver. Invalid provisions do not void remaining terms.</p>
            </section>

            <section className="legal-section">
              <h2>18. Contact</h2>
              <p>Questions regarding these Terms should be directed to <a href="mailto:info@purnaweb.ca">info@purnaweb.ca</a>.</p>
              <address className="legal-address">
                <strong>Purna Web Agency Inc.</strong><br/>
                23 Mississaga St W<br/>
                Orillia, Ontario, Canada<br/>
                Email: <a href="mailto:info@purnaweb.ca">info@purnaweb.ca</a><br/>
                Phone: <a href="tel:+17052420221">(705) 242-0221</a>
              </address>
            </section>
          </article>
        </div>
      </section>

      <Footer/>
    </>
  );
}

// ─── HVAC Summer-Campaign Landing Page (Meta ad LP) ─────────────────────

function HVACSummerLandingPage() {
  const pkg = INDUSTRY_DATA.hvac.package;

  React.useEffect(() => {
    if (document.querySelector('script[src="https://links.purnaweb.ca/js/form_embed.js"]')) return;
    const s = document.createElement("script");
    s.src = "https://links.purnaweb.ca/js/form_embed.js";
    s.type = "text/javascript";
    s.async = true;
    document.body.appendChild(s);
  }, []);

  const phoneSpecs = [
    { Mock: MobileLP, mockData: pkg.landing, time: "9:41", num: "01", label: "Branded landing page" },
    { Mock: MobileFB, mockData: pkg.fbAd, time: "9:42", num: "02", label: "Facebook + Instagram ads" },
    { Mock: MobileMaps, mockData: pkg.gbp, time: "9:43", num: "03", label: "Top of Google Maps" },
    { Mock: MobileEmail, mockData: pkg.email, time: "9:14", num: "04", label: "Lead-nurture emails" },
    { Mock: MobileBooked, mockData: pkg.booked, time: "9:16", num: "05", label: "Booked appointments" },
  ];

  const timeline = [
    { d: "Mon", t: "Discovery call · 30 min — we map your service area, current funnel, and offer." },
    { d: "Tue", t: "Brand + creative — landing page copy, ad creative, GBP optimization queued for review." },
    { d: "Wed", t: "Build — page deploys to staging, AutoGrowthBase agents trained on your service catalog." },
    { d: "Thu", t: "QA + integration — calendar wiring, conversion tracking, dispatch handoff tested end-to-end." },
    { d: "Fri", t: "Launch — ads live, voice + chat agents on, first leads in the pipeline by end of day." },
  ];

  return (
    <>
      <header className="lp-header">
        <div className="container lp-header-row">
          <a href="index.html" className="brand" aria-label="Purna Web Agency — home"><img src="images/PW-Logo-2.png" alt="Purna Web — Design. Market. Succeed." className="brand-img"/></a>
          <a href="tel:+17052420221" className="lp-header-phone">📞 (705) 242-0221</a>
        </div>
      </header>

      <section className="lp-hero" style={{backgroundImage: `linear-gradient(135deg, rgba(11,46,77,0.92) 0%, rgba(11,46,77,0.65) 50%, rgba(11,46,77,0.30) 100%), url(images/hero-hvac.png)`}}>
        <div className="container">
          <div className="lp-hero-inner">
            <span className="lp-urgency-pill">
              <span className="lp-urgency-dot"/>
              Summer is 6 weeks away · Limited spots before May 31
            </span>
            <h1 className="lp-h1">Last June you missed the heatwave calls.<br/><span className="lp-accent">This summer, don&rsquo;t.</span></h1>
            <p className="lp-lead">HVAC owners using <strong>AutoGrowthBase</strong> recovered <strong>$18,400 in their first 30 days</strong> — including a $4,200 emergency replacement booked at 11:47 PM on a Saturday. Get your spring/summer lead-gen campaign live in 7 days. Before the first 95° day breaks.</p>
            <div className="lp-hero-stats">
              <div className="lp-hero-stat"><span className="v">$3–5k</span><span className="l">average emergency ticket</span></div>
              <div className="lp-hero-stat"><span className="v">&lt;60s</span><span className="l">response, 24/7</span></div>
              <div className="lp-hero-stat"><span className="v">+38%</span><span className="l">booking-rate lift</span></div>
            </div>
            <div className="lp-hero-cta">
              <a href="#book" className="btn btn-primary btn-arr lp-cta-primary">
                Book my 30-min strategy call
                <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>
              <span className="lp-hero-or">or call <a href="tel:+17052420221">(705) 242-0221</a></span>
            </div>
            <div className="lp-trust-row">
              <span>✓ BBB Accredited</span>
              <span>✓ 4.9★ avg client rating</span>
              <span>✓ Built &amp; supported in Ontario</span>
            </div>
          </div>
        </div>
      </section>

      <section className="lp-section lp-pain">
        <div className="container">
          <div className="lp-section-head">
            <span className="eyebrow lp-eyebrow-warn">The summer-revenue trap</span>
            <h2 className="h2">If you didn&rsquo;t book a system last spring, you&rsquo;re already <span className="accent">losing this June.</span></h2>
            <p className="lead">Most HVAC contractors lose 5–8 emergency calls a week during peak season — and don&rsquo;t even know it. Voicemails, ignored web forms, slow callbacks. Each one is $3–5k walking to your competitor.</p>
          </div>
          <div className="lp-pain-grid">
            <div className="lp-pain-card">
              <div className="lp-pain-x">✗</div>
              <h3>2 AM emergency calls go to voicemail</h3>
              <p>By 8 AM the homeowner has already booked your competitor&rsquo;s answering service.</p>
            </div>
            <div className="lp-pain-card">
              <div className="lp-pain-x">✗</div>
              <h3>Web form submissions sit for 2+ hours</h3>
              <p>The first contractor to reply within 60 seconds wins the job. Every. Time.</p>
            </div>
            <div className="lp-pain-card">
              <div className="lp-pain-x">✗</div>
              <h3>Reviews never get asked for</h3>
              <p>Local SEO stalls, ad spend gets less efficient, leads dry up by July.</p>
            </div>
            <div className="lp-pain-card">
              <div className="lp-pain-x">✗</div>
              <h3>You&rsquo;re running ads with no follow-up engine</h3>
              <p>Burning $3–8k/month on Google + Meta with no AI agent capturing the leads they generate.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="lp-section lp-grey lp-package">
        <div className="container">
          <div className="lp-section-head">
            <span className="eyebrow">In 7 days, you get all of this</span>
            <h2 className="h2">A complete spring/summer campaign — <span className="accent">live by next Friday.</span></h2>
            <p className="lead">Five integrated assets, all branded to your business, deployed in seven days. No piecing together five vendors. No half-finished campaigns when summer hits.</p>
          </div>
          <div className="lp-phone-grid">
            {phoneSpecs.map((s, i) => (
              <div className="lp-phone-cell" key={i}>
                <PhoneShell num={s.num} label={s.label} time={s.time}>
                  <s.Mock data={s.mockData}/>
                </PhoneShell>
              </div>
            ))}
          </div>
          <div className="lp-package-cta">
            <div>
              <strong>$5,400 one-time · 30-day money-back · zero retainer</strong>
              <span>Most clients break even in the first 30 days from recovered emergency calls alone.</span>
            </div>
            <a href="#book" className="btn btn-primary btn-arr">
              Reserve my campaign
              <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>

      <section className="lp-section lp-timeline">
        <div className="container">
          <div className="lp-section-head">
            <span className="eyebrow">Timeline</span>
            <h2 className="h2">Discovery call Monday. <span className="accent">Live campaign next Friday.</span></h2>
            <p className="lead">Most clients book Monday morning. We discover, design, build, QA, and ship — all within a 7-day cycle. You stay focused on your trucks; we handle the rest.</p>
          </div>
          <ol className="lp-timeline-rail">
            {timeline.map((t, i) => (
              <li key={i} className="lp-timeline-step">
                <span className="lp-timeline-num">{t.d}</span>
                <span className="lp-timeline-text">{t.t}</span>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="lp-section lp-grey lp-proof">
        <div className="container">
          <div className="lp-section-head">
            <span className="eyebrow">Real numbers</span>
            <h2 className="h2">From real HVAC contractors. <span className="accent">In their first 30 days.</span></h2>
          </div>
          <div className="lp-proof-grid">
            <div className="lp-proof-card lp-proof-stat">
              <div className="lp-proof-num">$18.4k</div>
              <div className="lp-proof-l">Recovered in first 30 days</div>
              <div className="lp-proof-name">Phoenix HVAC · 14 trucks</div>
            </div>
            <div className="lp-proof-card lp-proof-quote">
              <div className="lp-proof-q">&ldquo;Booked a $4,200 emergency replacement at 11:47 PM on a Saturday — owner didn&rsquo;t even check his phone until Monday.&rdquo;</div>
              <div className="lp-proof-name">— Phoenix HVAC, AZ</div>
            </div>
            <div className="lp-proof-card lp-proof-stat">
              <div className="lp-proof-num">+38%</div>
              <div className="lp-proof-l">Booking-rate lift</div>
              <div className="lp-proof-name">Typical client · 60-day window</div>
            </div>
          </div>
        </div>
      </section>

      <section className="lp-section lp-final-cta" id="book">
        <div className="container">
          <div className="lp-final-grid">
            <div>
              <span className="eyebrow eyebrow-light">Book your discovery call</span>
              <h2 className="h2">30 minutes. <span className="accent">No pitch deck.</span></h2>
              <p className="lead">We&rsquo;ll review your current inbound flow and project the recovery you&rsquo;d get in your first 30 days — before you commit to anything. If we&rsquo;re not a fit, we&rsquo;ll tell you on the call.</p>
              <ul className="lp-final-bullets">
                <li>✓ Specific projection of leads you&rsquo;re losing this summer</li>
                <li>✓ What we&rsquo;d build — sequenced and scoped</li>
                <li>✓ Honest answer if we&rsquo;re not the right fit</li>
                <li>✓ No proposal email at the end. Just numbers.</li>
              </ul>
              <div className="lp-final-meta">
                <a href="tel:+17052420221" className="lp-final-meta-link">📞 (705) 242-0221</a>
                <a href="mailto:info@purnaweb.ca?subject=HVAC%20Summer%20Campaign%20%E2%80%94%20interested" className="lp-final-meta-link">✉️ info@purnaweb.ca</a>
              </div>
            </div>
            <div className="lp-final-calendar">
              <iframe
                src="https://links.purnaweb.ca/widget/booking/z4zqE0XePI3aP4rl95IK"
                style={{width: "100%", border: "none", overflow: "hidden", minHeight: 720}}
                scrolling="no"
                id="z4zqE0XePI3aP4rl95IK_lp_hvac"
                title="Book a discovery call with Purna Web"
              />
            </div>
          </div>
        </div>
      </section>

      <footer className="lp-foot">
        <div className="container lp-foot-row">
          <div>© 2026 Purna Web Agency Inc. · Orillia, Ontario, Canada</div>
          <div>
            <a href="privacy.html">Privacy</a>
            <span> · </span>
            <a href="terms.html">Terms</a>
          </div>
        </div>
      </footer>
    </>
  );
}

// ─── Client Onboarding (one-question-per-step survey) ───────────────────

function OnboardingPage() {
  const [step, setStep] = uS(0);
  const [data, setData] = uS({
    name: "", email: "", phone: "",
    businessName: "", website: "", industry: "",
    fbPage: "", igHandle: "", metaBmId: "",
    pixelStatus: "", pixelId: "",
    gbpName: "", gbpAddress: "", gbpInvited: "",
    googleAdsCid: "",
    gaProperty: "",
    primaryGoal: "", monthlyBudget: "", timeline: "",
  });

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const STEPS = [
    {
      id: "intro", type: "intro",
      title: "Welcome aboard.",
      sub: "Let's get our PPC team set up to run your campaigns. This takes ~7 minutes.",
      lines: [
        "We'll collect access to: Meta Business Suite (Facebook + Instagram), Meta Pixel, Google Business Profile, Google Ads, and Google Analytics.",
        "You don't need anything in front of you — we'll show you exactly where to find each ID and how to add us as a partner.",
        "Your responses are emailed to our team at info@purnaweb.ca when you finish.",
      ],
    },
    {
      id: "name", type: "input",
      title: "First, what should we call you?",
      sub: "Just your name — the one we'll use on calls and email.",
      field: "name", placeholder: "Jane Doe", autoFocus: true, required: true,
    },
    {
      id: "email", type: "input",
      title: "What's your best email?",
      sub: "Where confirmations, calendar invites, and reports get sent.",
      field: "email", inputType: "email", placeholder: "jane@yourbusiness.com", required: true,
    },
    {
      id: "phone", type: "input",
      title: "Phone number for the kickoff call?",
      sub: "We'll text the calendar invite. North-American format works best.",
      field: "phone", inputType: "tel", placeholder: "(555) 123-4567", required: true,
    },
    {
      id: "businessName", type: "input",
      title: "What's the name of your business?",
      sub: "Exactly as it appears on your website + Google listing.",
      field: "businessName", placeholder: "Phoenix HVAC", required: true,
    },
    {
      id: "website", type: "input",
      title: "Your website URL?",
      sub: "We'll review the funnel and audit speed + conversion before kickoff.",
      field: "website", inputType: "url", placeholder: "https://yourbusiness.com", required: true,
    },
    {
      id: "industry", type: "select",
      title: "Which industry are you in?",
      sub: "Pick the closest match. We tune ads + agents per vertical.",
      field: "industry",
      options: ["HVAC", "Plumbing", "Cleaning & Restoration", "Roofing & Exteriors", "Healthcare practice", "Professional services (legal/accounting)", "Local retail / studio", "Other"],
      required: true,
    },
    {
      id: "fbPage", type: "input",
      title: "What's your Facebook Page URL?",
      sub: "Paste the public URL of your business Page (not your personal profile).",
      field: "fbPage", inputType: "url", placeholder: "https://facebook.com/yourbusiness",
      help: {
        title: "How to add Purna Web as a partner",
        steps: [
          "Open business.facebook.com and select your business account.",
          "Settings → Users → Partners → Add → Give a partner access to your assets.",
          "Enter our Business Manager ID: 0000000000000 (we'll send you our exact ID after you submit).",
          "Grant access to: Pages (Manage), Ad Accounts (Manage), Pixels (Manage).",
        ],
      },
    },
    {
      id: "igHandle", type: "input",
      title: "Your Instagram handle?",
      sub: "Optional — but if you run IG ads or want IG DMs handled by AI, share it.",
      field: "igHandle", placeholder: "@yourbusiness",
    },
    {
      id: "metaBmId", type: "input",
      title: "Your Meta Business Manager ID?",
      sub: "16-digit number found at business.facebook.com → Settings → Business Info.",
      field: "metaBmId", placeholder: "1234567890123456",
      help: {
        title: "Where to find it",
        steps: [
          "Go to business.facebook.com.",
          "Click the gear icon (Settings) in the left sidebar.",
          "Select Business Info.",
          "Your Business Manager ID is shown at the top — copy the 16-digit number.",
        ],
      },
    },
    {
      id: "pixelStatus", type: "select",
      title: "Do you already have a Meta Pixel installed?",
      sub: "If not, we'll set one up during onboarding.",
      field: "pixelStatus",
      options: ["Yes — already installed and firing", "Yes — installed but unsure if it's working", "No — we need one set up", "Not sure"],
      required: true,
    },
    {
      id: "pixelId", type: "input",
      title: "What's your Pixel ID?",
      sub: "Skip if you don't have one — we'll create + install it.",
      field: "pixelId", placeholder: "123456789012345",
      conditional: (d) => d.pixelStatus.startsWith("Yes"),
      help: {
        title: "Where to find your Pixel ID",
        steps: [
          "In Meta Business Suite, go to Events Manager.",
          "Select your pixel from the list.",
          "Pixel ID is shown at the top of the data sources panel — 15 digits.",
        ],
      },
    },
    {
      id: "gbpName", type: "input",
      title: "Your Google Business Profile name?",
      sub: "Exact name as it appears in Google Maps. We'll send a manager invite to your owner email.",
      field: "gbpName", placeholder: "Phoenix HVAC",
      required: true,
    },
    {
      id: "gbpAddress", type: "input",
      title: "Business address registered with Google?",
      sub: "Helps us locate the right listing. City + ZIP/postal code is enough.",
      field: "gbpAddress", placeholder: "123 Main St, Phoenix, AZ 85001",
      help: {
        title: "How to grant manager access",
        steps: [
          "Go to business.google.com and sign in as the owner.",
          "Click your business → Menu → Business Profile settings → People and access.",
          "Click 'Add' and enter info@purnaweb.ca.",
          "Choose 'Manager' (not Owner) — you keep ownership; we get edit rights.",
        ],
      },
    },
    {
      id: "googleAdsCid", type: "input",
      title: "Your Google Ads Customer ID (CID)?",
      sub: "10-digit number formatted like 123-456-7890. Top right of your Google Ads dashboard.",
      field: "googleAdsCid", placeholder: "123-456-7890",
      help: {
        title: "How to share access with our MCC",
        steps: [
          "Sign in to ads.google.com.",
          "Customer ID is shown in the header (10 digits, format 123-456-7890).",
          "After you submit this form, we'll send a manager (MCC) link request to that CID.",
          "When you receive the request: Tools → Setup → Account access → accept the link.",
        ],
      },
    },
    {
      id: "gaProperty", type: "input",
      title: "Your Google Analytics 4 (GA4) property ID?",
      sub: "Format: G-XXXXXXXXXX or 9-digit property ID. We need Editor access to set up conversions.",
      field: "gaProperty", placeholder: "G-XXXXXXXXXX",
      help: {
        title: "How to add us as Editor",
        steps: [
          "Go to analytics.google.com and select your property.",
          "Admin (gear icon, bottom left) → Property → Property Access Management.",
          "Click '+' → Add users.",
          "Enter info@purnaweb.ca, set role to Editor, and click Add.",
        ],
      },
    },
    {
      id: "primaryGoal", type: "textarea",
      title: "What does success look like in 90 days?",
      sub: "Be specific. \"More leads\" is fine, but \"40 booked HVAC tune-ups by July 31\" is better.",
      field: "primaryGoal", placeholder: "We want to recover lost after-hours emergency calls and book 15+ tune-ups per week before the first heatwave...",
      rows: 5,
    },
    {
      id: "monthlyBudget", type: "select",
      title: "Approximate monthly ad budget?",
      sub: "All-in across Meta + Google. Helps us scope channel mix and bid strategy.",
      field: "monthlyBudget",
      options: ["Under $1,500", "$1,500 – $3,500", "$3,500 – $7,500", "$7,500 – $15,000", "$15,000+", "Not sure yet"],
      required: true,
    },
    {
      id: "timeline", type: "select",
      title: "When do you want campaigns live?",
      sub: "Most clients launch within 7 days of access being granted.",
      field: "timeline",
      options: ["This week (urgent)", "Next 7 days", "Within 2 weeks", "Within 30 days", "Just exploring for now"],
      required: true,
    },
    { id: "review", type: "review", title: "Quick review before you send." },
    { id: "done", type: "done", title: "We've got it." },
  ];

  const total = STEPS.length;
  // Skip conditional steps (e.g., Pixel ID if user said no)
  const isVisible = (s) => !s.conditional || s.conditional(data);
  const visibleSteps = STEPS.filter(isVisible);
  const visibleIdx = visibleSteps.findIndex(s => s.id === STEPS[step].id);

  const next = () => {
    let s = step + 1;
    while (s < total && !isVisible(STEPS[s])) s++;
    setStep(Math.min(total - 1, s));
    if (typeof window !== "undefined") window.scrollTo({ top: 0, behavior: "smooth" });
  };
  const back = () => {
    let s = step - 1;
    while (s > 0 && !isVisible(STEPS[s])) s--;
    setStep(Math.max(0, s));
    if (typeof window !== "undefined") window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const buildMailto = () => {
    const lines = [
      "New client onboarding submission",
      "",
      `Submitted: ${new Date().toISOString()}`,
      "",
      "═══ CLIENT ═══",
      `Name:      ${data.name}`,
      `Email:     ${data.email}`,
      `Phone:     ${data.phone}`,
      "",
      "═══ BUSINESS ═══",
      `Name:      ${data.businessName}`,
      `Website:   ${data.website}`,
      `Industry:  ${data.industry}`,
      "",
      "═══ META BUSINESS SUITE ═══",
      `FB Page:   ${data.fbPage}`,
      `Instagram: ${data.igHandle || "(none)"}`,
      `BM ID:     ${data.metaBmId}`,
      `Pixel:     ${data.pixelStatus}`,
      `Pixel ID:  ${data.pixelId || "(n/a)"}`,
      "",
      "═══ GOOGLE BUSINESS PROFILE ═══",
      `Name:      ${data.gbpName}`,
      `Address:   ${data.gbpAddress}`,
      "",
      "═══ GOOGLE ADS ═══",
      `CID:       ${data.googleAdsCid}`,
      "",
      "═══ GOOGLE ANALYTICS ═══",
      `Property:  ${data.gaProperty}`,
      "",
      "═══ GOALS ═══",
      `Goal:      ${data.primaryGoal}`,
      `Budget:    ${data.monthlyBudget}`,
      `Timeline:  ${data.timeline}`,
    ];
    const subject = `Onboarding · ${data.businessName || data.name}`;
    return `mailto:info@purnaweb.ca?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines.join("\n"))}`;
  };

  const onKey = (e) => {
    if (e.key === "Enter" && !e.shiftKey && current.type !== "textarea" && current.type !== "intro" && current.type !== "review" && current.type !== "done") {
      e.preventDefault();
      next();
    }
  };

  const current = STEPS[step];
  const progressPct = current.type === "done" ? 100 : (step / (total - 1)) * 100;

  const SECTIONS = [
    { from: 0, to: 6, label: "About you" },
    { from: 7, to: 11, label: "Meta access" },
    { from: 12, to: 13, label: "Google Business" },
    { from: 14, to: 14, label: "Google Ads" },
    { from: 15, to: 15, label: "Google Analytics" },
    { from: 16, to: 18, label: "Goals" },
    { from: 19, to: 20, label: "Wrap up" },
  ];
  const currentSection = SECTIONS.find(s => step >= s.from && step <= s.to);

  return (
    <>
      <header className="ob-header">
        <div className="container ob-header-row">
          <a href="index.html" className="brand" aria-label="Purna Web Agency — home">
            <img src="images/PW-Logo-2.png" alt="Purna Web — Design. Market. Succeed." className="brand-img"/>
          </a>
          <span className="ob-header-tag">Client Onboarding</span>
        </div>
      </header>

      {current.type !== "done" && (
        <div className="ob-progress-bar">
          <div className="ob-progress-fill" style={{width: `${progressPct}%`}}/>
        </div>
      )}

      <main className="ob-main" onKeyDown={onKey}>
        <div className="ob-shell" key={step}>
          {current.type !== "intro" && current.type !== "done" && (
            <div className="ob-step-meta">
              <span className="ob-step-num">{step} <span>of {total - 2}</span></span>
              <span className="ob-step-section">{currentSection ? currentSection.label : ""}</span>
            </div>
          )}

          {current.type === "intro" && (
            <div className="ob-intro">
              <span className="eyebrow">Onboarding</span>
              <h1 className="ob-h1">{current.title}</h1>
              <p className="ob-sub ob-sub-lg">{current.sub}</p>
              <ul className="ob-intro-list">
                {current.lines.map((l, i) => <li key={i}>{l}</li>)}
              </ul>
              <button className="btn btn-primary btn-arr ob-btn-lg" onClick={next}>
                Let's start
                <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>
              </button>
            </div>
          )}

          {current.type === "input" && (
            <div className="ob-step">
              <h2 className="ob-q">{current.title}</h2>
              {current.sub && <p className="ob-sub">{current.sub}</p>}
              <input
                className="ob-input"
                type={current.inputType || "text"}
                placeholder={current.placeholder}
                value={data[current.field] || ""}
                onChange={(e) => update(current.field, e.target.value)}
                autoFocus
              />
              {current.help && <ObHelp help={current.help}/>}
              <ObNav back={back} next={next} canBack={step > 0} disabled={current.required && !(data[current.field] || "").trim()}/>
            </div>
          )}

          {current.type === "select" && (
            <div className="ob-step">
              <h2 className="ob-q">{current.title}</h2>
              {current.sub && <p className="ob-sub">{current.sub}</p>}
              <div className="ob-options">
                {current.options.map(opt => (
                  <button
                    key={opt}
                    type="button"
                    className={`ob-option ${data[current.field] === opt ? "is-selected" : ""}`}
                    onClick={() => { update(current.field, opt); setTimeout(next, 220); }}
                  >
                    <span className="ob-option-text">{opt}</span>
                    <span className="ob-option-check">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7l3 3 5-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </span>
                  </button>
                ))}
              </div>
              <ObNav back={back} next={next} canBack={step > 0} disabled={current.required && !data[current.field]}/>
            </div>
          )}

          {current.type === "textarea" && (
            <div className="ob-step">
              <h2 className="ob-q">{current.title}</h2>
              {current.sub && <p className="ob-sub">{current.sub}</p>}
              <textarea
                className="ob-textarea"
                rows={current.rows || 4}
                placeholder={current.placeholder}
                value={data[current.field] || ""}
                onChange={(e) => update(current.field, e.target.value)}
                autoFocus
              />
              <ObNav back={back} next={next} canBack={step > 0}/>
            </div>
          )}

          {current.type === "review" && (
            <div className="ob-step">
              <h2 className="ob-q">{current.title}</h2>
              <p className="ob-sub">If anything's wrong, hit Back to fix it. Otherwise, send and we'll start outreach within 1 business day.</p>
              <div className="ob-review">
                <ObReviewRow label="Name" value={data.name}/>
                <ObReviewRow label="Email" value={data.email}/>
                <ObReviewRow label="Phone" value={data.phone}/>
                <ObReviewRow label="Business" value={data.businessName}/>
                <ObReviewRow label="Website" value={data.website}/>
                <ObReviewRow label="Industry" value={data.industry}/>
                <ObReviewRow label="Facebook" value={data.fbPage}/>
                <ObReviewRow label="Instagram" value={data.igHandle || "—"}/>
                <ObReviewRow label="Meta BM ID" value={data.metaBmId}/>
                <ObReviewRow label="Meta Pixel" value={`${data.pixelStatus}${data.pixelId ? " · " + data.pixelId : ""}`}/>
                <ObReviewRow label="GBP" value={`${data.gbpName} · ${data.gbpAddress}`}/>
                <ObReviewRow label="Google Ads CID" value={data.googleAdsCid}/>
                <ObReviewRow label="GA4 property" value={data.gaProperty}/>
                <ObReviewRow label="Goal" value={data.primaryGoal}/>
                <ObReviewRow label="Budget" value={data.monthlyBudget}/>
                <ObReviewRow label="Timeline" value={data.timeline}/>
              </div>
              <div className="ob-actions">
                <button type="button" className="btn btn-ghost" onClick={back}>← Back</button>
                <a href={buildMailto()} className="btn btn-primary btn-arr" onClick={() => setTimeout(() => setStep(total - 1), 600)}>
                  Send to Purna Web
                  <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>
          )}

          {current.type === "done" && (
            <div className="ob-done">
              <div className="ob-done-check">
                <svg width="64" height="64" viewBox="0 0 56 56" fill="none">
                  <circle cx="28" cy="28" r="26" fill="rgba(34,197,94,0.18)" stroke="#22C55E" strokeWidth="2"/>
                  <path d="M18 28l7 7 13-15" stroke="#22C55E" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <h1 className="ob-h1">{current.title}</h1>
              <p className="ob-sub ob-sub-lg">Your responses opened in your email client. Hit send if you haven't already — we'll reply within 1 business day with the partner-invite links and the kickoff calendar slot.</p>
              <div className="ob-done-meta">
                <a href="mailto:info@purnaweb.ca" className="ob-done-link">info@purnaweb.ca</a>
                <span className="ob-done-sep">·</span>
                <a href="tel:+17052420221" className="ob-done-link">(705) 242-0221</a>
              </div>
              <a href="index.html" className="btn btn-ghost ob-done-back">← Back to Purna Web</a>
            </div>
          )}
        </div>
      </main>
    </>
  );
}

function ObHelp({ help }) {
  return (
    <details className="ob-help">
      <summary>
        <span className="ob-help-icon">?</span>
        <span>{help.title}</span>
        <span className="ob-help-arr">▾</span>
      </summary>
      <ol className="ob-help-steps">
        {help.steps.map((s, i) => <li key={i}>{s}</li>)}
      </ol>
    </details>
  );
}

function ObNav({ back, next, canBack, disabled }) {
  return (
    <div className="ob-actions">
      <button type="button" className="btn btn-ghost" onClick={back} disabled={!canBack}>← Back</button>
      <button type="button" className="btn btn-primary btn-arr" onClick={next} disabled={disabled}>
        Continue
        <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>
      </button>
    </div>
  );
}

function ObReviewRow({ label, value }) {
  return (
    <div className="ob-review-row">
      <span className="ob-review-label">{label}</span>
      <span className="ob-review-value">{value || "—"}</span>
    </div>
  );
}

// CustomAIPage is an alias of TopicPage for backward compat with custom-ai.html
const CustomAIPage = (props) => <TopicPage slug="custom-ai" {...props}/>;

Object.assign(window, { GrowthEnginePage, MarketingPage, TheraNotePage, ResultsPage, CompanyPage, ContactPage, CareersPage, IndustryPage, PackageShowcase, CustomAIPage, TopicPage, TherapistGrowthPartnerPage, ROICalculatorPage, PrivacyPolicyPage, TermsPage, HVACSummerLandingPage, OnboardingPage });