// Marketing trust sections — social proof, case study, cost compare, integrations, pricing
const { useState: uSv2 } = React;

const LOGO_MARKS = [
  { name: "Mike's Auto",      city: "El Segundo, CA",     mark: "MA" },
  { name: "Sunset Chiro",     city: "Venice, CA",         mark: "SC" },
  { name: "Pacific Tax Co.",  city: "Long Beach, CA",     mark: "PT" },
  { name: "Goldstein Law",    city: "Beverly Hills, CA",  mark: "GL" },
  { name: "Bluewater Pools",  city: "Newport, CA",        mark: "BW" },
  { name: "Anchor Plumbing",  city: "San Pedro, CA",      mark: "AP" },
  { name: "Solano Dental",    city: "Pasadena, CA",       mark: "SD" },
  { name: "Crestline HVAC",   city: "Burbank, CA",        mark: "CH" },
];

function LogoBar() {
  return (
    <section className="logo-bar">
      <div className="logo-bar-inner">
        <div className="logo-bar-label mono small muted">TRUSTED BY 165+ OPERATORS · LOS ANGELES TO ORANGE COUNTY</div>
        <div className="logo-bar-row">
          {LOGO_MARKS.map((l) => (
            <div className="logo-mark" key={l.name} title={l.city}>
              <span className="logo-mark-glyph">{l.mark}</span>
              <span className="logo-mark-name">{l.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseStudy() {
  return (
    <section className="sec sec-case">
      <SectionHead num="06" kicker="CASE STUDY · 90 DAYS IN" title={<>"It paid for itself in <span className="flame-text">eleven days.</span>"</>} />
      <div className="case-grid">
        <div className="case-quote">
          <div className="case-avatar">
            <div className="case-avatar-ph"><span>MR</span></div>
            <div className="case-avatar-meta">
              <div className="case-avatar-name">Marcus Reyes</div>
              <div className="case-avatar-role mono small">OWNER · MIKE'S AUTO · EL SEGUNDO</div>
            </div>
          </div>
          <p className="case-pull">"We were dropping fifteen calls a week after 6pm. I'd been told to hire a service. ServiceAI was live in three days. By the end of month one we'd booked $11,400 in jobs I would have missed. I haven't touched the dashboard since."</p>
          <div className="case-meta-row">
            <div className="case-meta-item"><span className="mono small muted">TIME TO LIVE</span><strong>3 days</strong></div>
            <div className="case-meta-item"><span className="mono small muted">PAYBACK</span><strong>11 days</strong></div>
            <div className="case-meta-item"><span className="mono small muted">REPLACED</span><strong>$3.8K/mo coordinator</strong></div>
          </div>
        </div>
        <div className="case-numbers">
          <div className="case-num-head mono small muted">90-DAY OUTCOMES</div>
          <div className="case-num-row">
            <div className="case-num-big flame-text"><CountUp value="$47,200" /></div>
            <div className="case-num-cap">recovered revenue</div>
          </div>
          <div className="case-num-bars">
            <CaseBar label="Calls answered" before="62%" after="100%" w={100} />
            <CaseBar label="Avg response time" before="4h 12m" after="48s" w={96} />
            <CaseBar label="Jobs booked / week" before="34" after="51" w={84} />
            <CaseBar label="No-show rate" before="22%" after="8%" w={72} flip />
          </div>
        </div>
      </div>
    </section>
  );
}

function CaseBar({ label, before, after, w, flip }) {
  return (
    <div className="case-bar">
      <div className="case-bar-top"><span>{label}</span><span className="mono small"><span className="muted">{before}</span> → <strong>{after}</strong></span></div>
      <div className="case-bar-track"><div className={"case-bar-fill " + (flip ? "down" : "up")} style={{ width: w + "%" }} /></div>
    </div>
  );
}

const COST_ROWS = [
  { line: "Coverage hours",   recep: "Mon–Fri 9–5",       ai: "24 / 7 / 365" },
  { line: "Channels handled", recep: "Phone only",        ai: "Voice · SMS · Email · Chat" },
  { line: "Speed to respond", recep: "Avg 4+ minutes",    ai: "Under 60 seconds" },
  { line: "Sick days · PTO",  recep: "~18 days / year",   ai: "Zero" },
  { line: "Capacity ceiling", recep: "1 call at a time",  ai: "Unlimited concurrent" },
  { line: "Training time",    recep: "2–6 weeks",         ai: "Live in 2–5 days" },
  { line: "Monthly cost",     recep: "$3,800 – $4,600",   ai: "$497 – $997",  emphasis: true },
];
function CostCompare() {
  return (
    <section className="sec sec-cost">
      <SectionHead num="09" kicker="THE MATH · VS HIRING" title={<>One AI employee. <span className="muted">A fraction of one human.</span></>} />
      <div className="cost-table">
        <div className="cost-row cost-head">
          <div className="cost-cell">Capability</div>
          <div className="cost-cell">Receptionist / Coordinator</div>
          <div className="cost-cell cost-ai-h">ServiceAI <span className="cost-pill">RECOMMENDED</span></div>
        </div>
        {COST_ROWS.map((r, i) => (
          <div className={"cost-row " + (r.emphasis ? "cost-emph" : "")} key={i}>
            <div className="cost-cell cost-line">{r.line}</div>
            <div className="cost-cell cost-recep">{r.recep}</div>
            <div className="cost-cell cost-ai">{r.ai}</div>
          </div>
        ))}
      </div>
      <div className="cost-foot mono small muted">Receptionist costs include salary, payroll tax, benefits, and PTO replacement. Source: BLS 2025 + SoCal SMB averages.</div>
    </section>
  );
}

const INTEGRATIONS = [
  { cat: "PHONE",    tools: ["Twilio", "RingCentral", "OpenPhone", "Dialpad"] },
  { cat: "CRM",      tools: ["HubSpot", "Salesforce", "Pipedrive", "Zoho"] },
  { cat: "CALENDAR", tools: ["Google", "Outlook", "Calendly", "Acuity"] },
  { cat: "INDUSTRY", tools: ["Jobber", "ServiceTitan", "DentriX", "Clio"] },
];
function Integrations() {
  return (
    <section className="sec sec-integ">
      <SectionHead num="10" kicker="INTEGRATIONS · FITS YOUR STACK" title={<>Plugs into the tools you <span className="intel-text">already pay for.</span></>} />
      <div className="integ-grid">
        {INTEGRATIONS.map((g) => (
          <div className="integ-col" key={g.cat}>
            <div className="integ-cat mono small">{g.cat}</div>
            <div className="integ-list">
              {g.tools.map((t) => (
                <div className="integ-chip" key={t}>
                  <div className="integ-chip-mark">{t.slice(0,2)}</div>
                  <span>{t}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="integ-foot">
        <span className="mono small muted">+ 40 more · custom integrations available · API for everything else</span>
        <span className="integ-trust"><IconRender name="check" size={12} /> SOC 2 Type II</span>
        <span className="integ-trust"><IconRender name="check" size={12} /> HIPAA-ready</span>
        <span className="integ-trust"><IconRender name="check" size={12} /> US-hosted</span>
      </div>
    </section>
  );
}

const TIERS = [
  { name: "Starter",    price: "$497",  cap: "/mo",  setup: "Setup $997",   for: "Solo operators · 1 location", feats: ["1 AI agent · voice + SMS","Up to 800 conversations/mo","Calendar + 1 CRM integration","Business-hours human escalation","Email support"] },
  { name: "Operator",   price: "$997",  cap: "/mo",  setup: "Setup $1,997", for: "Growing teams · 2–5 staff",    feats: ["Up to 3 AI agents · all channels","Unlimited conversations","Full CRM + industry tool sync","24/7 priority escalation","Custom workflows · OpenClaw","Dedicated success manager"], featured: true },
  { name: "Operations", price: "Custom", cap: "",   setup: "White-glove buildout", for: "Multi-location · franchises",   feats: ["Unlimited AI agents","Multi-location routing","Custom integrations + API","SLA + dedicated infra","Quarterly business reviews","On-call ops engineer"] },
];
function PricingTeaser() {
  return (
    <section className="sec sec-pricing">
      <SectionHead num="12" kicker="PRICING · TRANSPARENT" title={<>Three ways in. <span className="muted">No contracts. 7-day guarantee.</span></>} />
      <div className="tier-grid">
        {TIERS.map((t) => (
          <div className={"tier " + (t.featured ? "tier-feat" : "")} key={t.name}>
            {t.featured && <div className="tier-badge mono small">MOST POPULAR</div>}
            <div className="tier-name">{t.name}</div>
            <div className="tier-for mono small muted">{t.for}</div>
            <div className="tier-price-row">
              <span className={"tier-price " + (t.featured ? "flame-text" : "")}>{t.price}</span>
              {t.cap && <span className="tier-cap">{t.cap}</span>}
            </div>
            <div className="tier-setup mono small muted">{t.setup}</div>
            <ul className="tier-feats">
              {t.feats.map((f) => (
                <li key={f}><IconRender name="check" size={11} /> {f}</li>
              ))}
            </ul>
            <button className={"btn-pill " + (t.featured ? "flame" : "ghost") + " tier-cta"}>{t.price === "Custom" ? "Talk to us" : "Get started"} <IconRender name="arrow" size={12} /></button>
          </div>
        ))}
      </div>
    </section>
  );
}

window.LogoBar = LogoBar;
window.CaseStudy = CaseStudy;
window.CostCompare = CostCompare;
window.Integrations = Integrations;
window.PricingTeaser = PricingTeaser;