// Full homepage app — three visual variants (safe / bold / experimental).
// Variant switcher at top swaps the visual language for the entire page.
const { useState: uS, useEffect: uE, useMemo: uM, useRef: uR } = React;

// ── Particle network animation hook ──────────────────────────
// Self-contained: no external dependencies, runs inline in the
// same Babel context as the components that use it.
function useNetworkField(ref, opts) {
  uE(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const parent = canvas.parentElement;
    const w = (parent ? parent.offsetWidth  : 0) || window.innerWidth;
    const h = (parent ? parent.offsetHeight : 0) || window.innerHeight;

    canvas.width  = w;
    canvas.height = h;
    canvas.style.width  = w + 'px';
    canvas.style.height = h + 'px';

    const countBase = window.innerWidth < 480 ? 28 : window.innerWidth < 768 ? 52 : 85;
    const count = Math.round(countBase * (opts.count || 1));
    const connDist  = opts.connDist  || 130;
    const connDist2 = connDist * connDist;
    const spd       = opts.speed     || 1.0;

    const pts = Array.from({ length: count }, () => {
      const angle = Math.random() * Math.PI * 2;
      const s = 0.28 + Math.random() * 0.44;
      const r = Math.random();
      return {
        x: Math.random() * w,
        y: Math.random() * h,
        vx: Math.cos(angle) * s,
        vy: Math.sin(angle) * s,
        type: r < 0.25 ? 'f' : r < 0.35 ? 'g' : 'b',
        size: r < 0.25 ? 1.8 + Math.random() * 1.2 : r < 0.35 ? 1.3 + Math.random() * 0.8 : 0.9 + Math.random() * 0.8,
        a: r < 0.25 ? 0.80 + Math.random() * 0.20 : r < 0.35 ? 0.60 + Math.random() * 0.25 : 0.18 + Math.random() * 0.15,
      };
    });

    let lastTs = 0;
    let raf;
    const isMobile = window.innerWidth < 640;

    function frame(ts) {
      raf = requestAnimationFrame(frame);
      const interval = isMobile ? 33 : 16;
      if (lastTs && ts - lastTs < interval) return;
      lastTs = ts;

      ctx.clearRect(0, 0, w, h);

      // Connections
      ctx.lineWidth = 0.6;
      for (let i = 0; i < pts.length; i++) {
        for (let j = i + 1; j < pts.length; j++) {
          const dx = pts[i].x - pts[j].x;
          const dy = pts[i].y - pts[j].y;
          const d2 = dx * dx + dy * dy;
          if (d2 < connDist2) {
            const op = ((1 - Math.sqrt(d2) / connDist) * 0.14).toFixed(3);
            ctx.beginPath();
            ctx.moveTo(pts[i].x, pts[i].y);
            ctx.lineTo(pts[j].x, pts[j].y);
            ctx.strokeStyle = 'rgba(200,198,195,' + op + ')';
            ctx.stroke();
          }
        }
      }

      // Particles
      for (let k = 0; k < pts.length; k++) {
        const p = pts[k];
        p.x += p.vx * spd;
        p.y += p.vy * spd;
        if (p.x < 0)  { p.x = 0;  p.vx =  Math.abs(p.vx); }
        if (p.x > w)  { p.x = w;  p.vx = -Math.abs(p.vx); }
        if (p.y < 0)  { p.y = 0;  p.vy =  Math.abs(p.vy); }
        if (p.y > h)  { p.y = h;  p.vy = -Math.abs(p.vy); }

        if (p.type === 'f') {
          ctx.beginPath(); ctx.arc(p.x, p.y, p.size * 5.5, 0, Math.PI * 2);
          ctx.fillStyle = 'rgba(245,122,43,0.025)'; ctx.fill();
          ctx.beginPath(); ctx.arc(p.x, p.y, p.size * 2.8, 0, Math.PI * 2);
          ctx.fillStyle = 'rgba(245,122,43,0.08)'; ctx.fill();
          ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
          ctx.fillStyle = 'rgba(245,122,43,' + p.a + ')'; ctx.fill();
        } else if (p.type === 'g') {
          ctx.beginPath(); ctx.arc(p.x, p.y, p.size * 2.8, 0, Math.PI * 2);
          ctx.fillStyle = 'rgba(255,214,107,0.06)'; ctx.fill();
          ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
          ctx.fillStyle = 'rgba(255,214,107,' + p.a + ')'; ctx.fill();
        } else {
          ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
          ctx.fillStyle = 'rgba(220,218,215,' + p.a + ')'; ctx.fill();
        }
      }
    }

    raf = requestAnimationFrame(frame);
    return () => cancelAnimationFrame(raf);
  }, []);
}

function HomepageApp() {
  const [variant] = uS("bold");
  const [demoInd, setDemoInd] = uS(null);

  uE(() => {
    document.body.dataset.variant = variant;
  }, [variant]);

  return (
    <div className={"hp hp-" + variant}>
      <Nav variant={variant} />

      {variant === "safe" && <SafeHero />}
      {variant === "bold" && <BoldHero />}
      {variant === "exp"  && <ExpHero />}

      <LogoBar />
      <TickerSection />
      <PainSection variant={variant} />
      <HowItWorks variant={variant} />
      <CapabilitiesSection variant={variant} />
      <OpenClawSpotlight />
      <IndustryDeepDive onDemo={setDemoInd} />
      <CaseStudy />
      <OpsDashboard />
      <IndustriesSection variant={variant} onDemo={setDemoInd} />
      <CostCompare />
      <Integrations />
      <RoiSection variant={variant} />
      <PricingTeaser />
      <ResultsSection variant={variant} />
      <CtaBanner variant={variant} />
      <Footer />

      {demoInd && <IndustryDemoModal industry={demoInd} onClose={() => setDemoInd(null)} />}
    </div>
  );
}

// ─────────────────────────────── Chrome ───────────────────────────────

function Nav({ variant }) {
  const [drawerOpen, setDrawerOpen] = uS(false);

  uE(() => {
    if (drawerOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [drawerOpen]);

  const NAV_LINKS = [
    { label: "Studio",     href: "/studio" },
    { label: "Lab",        href: "/lab" },
    { label: "Ventures",   href: "/ventures" },
    { label: "Demos",      href: "/demos" },
    { label: "Industries", href: "/industries" },
    { label: "Investors",  href: "/investors" },
  ];

  return (
    <header className="nav">
      <div className="nav-left">
        <img src="/assets/logo-mark.png" alt="" className="nav-logo" />
        <span className="nav-word">Service<span className="flame-word">Ai</span></span>
      </div>
      <nav className="nav-mid">
        {NAV_LINKS.map(l => <a key={l.label} href={l.href}>{l.label}</a>)}
      </nav>
      <div className="nav-right">
        <a className="btn-pill flame" href="https://calendly.com/brandon-serviceaihq/30min" target="_blank" rel="noopener noreferrer">Book a call</a>
        <button className="nav-hamburger" aria-label="Open menu" onClick={() => setDrawerOpen(true)}>
          <span /><span /><span />
        </button>
      </div>

      {drawerOpen && (
        <div className="nav-drawer open">
          <div className="nav-drawer-bg" onClick={() => setDrawerOpen(false)} />
          <div className="nav-drawer-panel">
            <button className="nav-drawer-close" aria-label="Close menu" onClick={() => setDrawerOpen(false)}>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
              </svg>
            </button>
            {NAV_LINKS.map(l => (
              <a key={l.label} href={l.href} className="nav-drawer-link" onClick={() => setDrawerOpen(false)}>{l.label}</a>
            ))}
            <a
              className="nav-drawer-cta"
              href="https://calendly.com/brandon-serviceaihq/30min"
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => setDrawerOpen(false)}
            >
              Book a free call →
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

// ─────────────────────────────── HERO — SAFE ───────────────────────────────

function SafeHero() {
  const canvasRef = uR(null);
  useNetworkField(canvasRef, { count: 0.7, speed: 0.85, connDist: 120 });
  return (
    <section className="hero hero-safe">
      <canvas ref={canvasRef} className="net-canvas" />
      <div className="hero-safe-grid">
        <div className="hero-safe-copy">
          <div className="eyebrow mono"><span className="dot live" /> SOUTHERN CALIFORNIA'S #1 AI OPERATIONS CO.</div>
          <h1 className="display">
            Your invisible<br /><span className="flame-text">AI&nbsp;employee.</span>
          </h1>
          <p className="lede">Calls, texts, emails, bookings, follow-ups, dispatch, paperwork, reviews — every operational thread your business drops at night, weekends, or when staff is buried. Run by one invisible AI employee. No app to learn. No dashboard to check.</p>
          <div className="hero-cta">
            <a className="btn-pill flame lg" href="https://calendly.com/brandon-serviceaihq/30min" target="_blank" rel="noopener noreferrer">Book a free call — setup from $997 <IconRender name="arrow" size={14} /></a>
            <a className="btn-pill ghost lg" href="/demos">See live demos <IconRender name="arrowDown" size={14} /></a>
          </div>
          <div className="hero-meta mono">
            <span>NO_CONTRACTS</span><span className="sep">·</span><span>LIVE_IN_2–5_DAYS</span><span className="sep">·</span><span>7-DAY_GUARANTEE</span>
          </div>
        </div>
        <div className="hero-safe-widget"><PhonePhoneCallScreen /></div>
      </div>
    </section>
  );
}

// ─────────────────────────────── HERO — BOLD ───────────────────────────────

function BoldHero() {
  const canvasRef = uR(null);
  useNetworkField(canvasRef, { count: 1.0, speed: 1.0, connDist: 130 });
  return (
    <section className="hero hero-bold">
      <canvas ref={canvasRef} className="net-canvas" />
      <div className="hero-bold-bg">
        <div className="grid-overlay" />
        <div className="scanlines" />
      </div>
      <div className="hero-bold-stack">
        <div className="hero-bold-status">
          <span className="dot live" />
          <span className="mono small">SERVICEAI_OPS · 165 AGENTS LIVE · UPTIME 99.98%</span>
        </div>
        <h1 className="hero-bold-display">
          <span className="line hero-dim">YOUR INVISIBLE</span>
          <span className="line flame-text">AI EMPLOYEE</span>
        </h1>
        <p className="hero-bold-lede">
          Calls, SMS, email, bookings, dispatch, follow-ups, paperwork, reviews.<br />
          Every operational thread, run by one invisible AI employee. 24/7.
        </p>
        <div className="hero-cta">
          <a className="btn-pill flame lg" href="https://calendly.com/brandon-serviceaihq/30min" target="_blank" rel="noopener noreferrer">Book a free call <IconRender name="arrow" size={14} /></a>
          <a className="btn-pill ghost lg" href="/demos"><IconRender name="play" size={11} /> See live demos</a>
        </div>
      </div>

      <div className="hero-bold-panels">
        <div className="hero-bold-panel widget"><PhonePhoneCallScreen /></div>
        <div className="hero-bold-panel stats">
          <div className="bp-row"><span className="mono small">CALLS_HANDLED_TODAY</span><strong><CountUp value="2847" /></strong></div>
          <div className="bp-row"><span className="mono small">APPTS_BOOKED_TODAY</span><strong><CountUp value="611" /></strong></div>
          <div className="bp-row"><span className="mono small">AVG_RESPONSE_TIME</span><strong>&lt;60s</strong></div>
          <div className="bp-row"><span className="mono small">MONEY_RECOVERED_MTD</span><strong className="flame-text">$1.4M</strong></div>
          <div className="bp-spark"><IconRender name="pulse" size={14} /> <span className="mono small">live · all systems nominal</span></div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────── HERO — EXPERIMENTAL ───────────────────────────────

function ExpHero() {
  const canvasRef = uR(null);
  useNetworkField(canvasRef, { count: 0.65, speed: 0.9, connDist: 115 });
  return (
    <section className="hero hero-exp">
      <canvas ref={canvasRef} className="net-canvas" />
      <div className="exp-haze" />
      <div className="exp-haze haze-2" />
      <div className="exp-embers">
        {Array.from({ length: 30 }).map((_, i) => (
          <span key={i} className="ember" style={{
            left: (Math.sin(i * 1.3) * 0.5 + 0.5) * 100 + "%",
            animationDelay: -(i * 0.5) + "s",
            animationDuration: (6 + (i % 7)) + "s",
          }} />
        ))}
      </div>
      <div className="exp-stack">
        <div className="eyebrow mono"><span className="dot live" /> 24/7 OPERATIONS · DEPLOYED FROM VENICE, CA</div>
        <h1 className="exp-display">
          Your invisible<br /><span className="flame-text exp-glow">AI&nbsp;employee.</span>
        </h1>
        <p className="exp-lede">Calls, texts, emails, bookings, follow-ups, dispatch, paperwork — every operational thread, run quietly in the dark. One flame keeping every line of your business on.</p>
        <div className="hero-cta">
          <a className="btn-pill flame lg glow" href="https://calendly.com/brandon-serviceaihq/30min" target="_blank" rel="noopener noreferrer">Book a free call <IconRender name="arrow" size={14} /></a>
          <a className="btn-pill ghost lg" href="/demos">See live demos</a>
        </div>
        <div className="exp-widget-wrap">
          <PhonePhoneCallScreen />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────── Common sections ───────────────────────────────

function TickerSection() {
  return (
    <section className="ticker-sec">
      <Ticker />
    </section>
  );
}

function PainSection({ variant }) {
  return (
    <section className="sec sec-pain">
      <SectionHead num="01" kicker="THE PROBLEM" title={<>Three leaks every owner ignores.<br/><span className="muted">You probably have all three.</span></>} />
      <div className="pain-grid">
        {PAIN_POINTS.map((p, i) => (
          <div className="pain-card" key={i}>
            <div className="pain-icon"><IconRender name={p.iconKey} size={26} /></div>
            <div className="pain-num mono">0{i + 1}</div>
            <div className="pain-head">{p.headline}</div>
            <div className="pain-body">{p.body}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function HowItWorks({ variant }) {
  const steps = [
    { n: "01", t: "We learn your business", d: "2-day intake. No tech required. We map every call type, every workflow." },
    { n: "02", t: "We build your AI employee", d: "Custom voice, scripts, calendar + CRM integrations. Trained on your tone." },
    { n: "03", t: "It goes live", d: "Answers, books, follows up. Replaces a $4k/mo receptionist on day one." },
    { n: "04", t: "You get the results", d: "Dashboard, weekly reports, ongoing tuning. Stays sharp as you grow." },
  ];
  return (
    <section className="sec sec-how">
      <SectionHead num="02" kicker="HOW IT WORKS" title={<>From zero to live in <span className="flame-text">five days.</span></>} />
      <div className="how-rail">
        <div className="how-line" />
        {steps.map((s, i) => (
          <div className="how-step" key={i}>
            <div className="how-bullet"><span className="mono">{s.n}</span></div>
            <div className="how-card">
              <div className="how-card-t">{s.t}</div>
              <div className="how-card-d">{s.d}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CapabilitiesSection({ variant }) {
  return (
    <section className="sec sec-cap">
      <SectionHead num="03" kicker="CAPABILITIES" title={<>Everything an employee does.<br/><span className="muted">Modular. Deployed in days.</span></>} />
      <div className="cap-grid">
        {CAPABILITIES.map((c, i) => (
          <div className="cap-card" key={i}>
            <div className="cap-icon"><IconRender name={c.iconKey} size={22} /></div>
            <div className="cap-title">{c.title}</div>
            <div className="cap-blurb">{c.blurb}</div>
            <div className="cap-more">Learn more <IconRender name="arrow" size={12} /></div>
          </div>
        ))}
      </div>
    </section>
  );
}

function IndustriesSection({ variant, onDemo }) {
  return (
    <section className="sec sec-ind">
      <SectionHead num="08" kicker="INDUSTRIES · 15 VERTICALS" title={<>Built for your industry. <br/><span className="muted">One platform. Fifteen full deployments.</span></>}
        right={<div className="ind-legend mono small">Click any card · open a live demo →</div>}/>
      <div className="ind-grid">
        {INDUSTRIES.map((ind, i) => (
          <IndustryCard key={ind.id} ind={ind} onDemo={onDemo} featured={i === 0} />
        ))}
      </div>
      <div className="ind-foot">
        <div className="mono small muted">Don't see yours? Custom deployments for any service business.</div>
        <button className="btn-pill ghost">Talk to us <IconRender name="arrow" size={13} /></button>
      </div>
    </section>
  );
}

function RoiSection({ variant }) {
  return (
    <section className="sec sec-roi">
      <SectionHead num="11" kicker="ROI · DO THE MATH" title={<>How much is going dark<br/><span className="flame-text">after hours?</span></>} />
      <ROICalculator />
    </section>
  );
}

function ResultsSection({ variant }) {
  return (
    <section className="sec sec-res">
      <SectionHead num="13" kicker="RESULTS" title={<>Real businesses. <span className="muted">Real numbers.</span></>} />
      <div className="res-grid">
        {RESULTS.map((r, i) => (
          <div className="res-card" key={i}>
            <div className="res-metric flame-text">
              {r.metric === "+41%" ? <CountUp value="+41" suffix="%" />
               : r.metric === "0"  ? <span>0</span>
               : <CountUp value={r.metric} />}
            </div>
            <div className="res-cap">{r.unit} {r.caption}</div>
            <div className="res-who mono small">{r.who}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CtaBanner() {
  return (
    <section className="sec sec-cta">
      <div className="cta-banner">
        <div className="cta-grain" />
        <div className="cta-inner">
          <div className="eyebrow mono">READY?</div>
          <h2 className="cta-title">Hire your <span className="flame-text">AI employee.</span></h2>
          <p className="cta-sub">Setup starts at $997. Month-to-month. No contracts. Cancel anytime. If we don't answer a single call in your first 7 days, you pay nothing.</p>
          <div className="hero-cta">
            <a className="btn-pill flame lg" href="https://calendly.com/brandon-serviceaihq/30min" target="_blank" rel="noopener noreferrer">Book a free 30-min call <IconRender name="arrow" size={14} /></a>
            <a className="btn-pill ghost lg" href="/studio">View Studio services</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="foot-grid">
        <div>
          <div className="foot-brand">
            <img src="/assets/logo-mark.png" alt="" />
            <span>Service<span className="flame-word">Ai</span></span>
          </div>
          <p className="foot-tag">An AI consulting firm, product lab, and venture studio — Venice, CA.</p>
        </div>
        <div>
          <div className="foot-h mono">COMPANY</div>
          <a href="/studio">Studio</a>
          <a href="/lab">Lab</a>
          <a href="/ventures">Ventures</a>
          <a href="/demos">Demos</a>
          <a href="/investors">Investors</a>
        </div>
        <div>
          <div className="foot-h mono">INDUSTRIES</div>
          <a href="/industries/restaurants">Restaurants</a>
          <a href="/industries/fitness-wellness">Fitness &amp; Wellness</a>
          <a href="/industries/legal">Legal</a>
          <a href="/ai-for-dental">Dental</a>
          <a href="/ai-for-hvac">HVAC</a>
          <a href="/ai-for-med-spa">Med Spa</a>
          <a href="/ai-for-plumbing">Plumbing</a>
          <a href="/industries">All industries →</a>
        </div>
        <div>
          <div className="foot-h mono">CONTACT</div>
          <a href="/about">About</a>
          <a href="/contact">Contact</a>
          <a href="/pricing">Pricing</a>
          <a href="https://calendly.com/brandon-serviceaihq/30min" target="_blank" rel="noopener noreferrer">Book a call</a>
          <a href="https://www.google.com/maps?cid=8425282851789023072" target="_blank" rel="noopener noreferrer">★ Google Reviews</a>
        </div>
        <div>
          <div className="foot-h mono">RESOURCES</div>
          <a href="/what-is-an-ai-consultant">What is an AI consultant?</a>
          <a href="/ai-consulting-services">AI consulting services</a>
          <a href="/ai-consultant-cost">AI consultant cost</a>
          <a href="/ai-consultant-los-angeles">AI consultant — Los Angeles</a>
          <a href="/ai-readiness-check">Free AI readiness check</a>
          <a href="/blog/ai-consultant-vs-ai-agency">Consultant vs. agency</a>
        </div>
        <div>
          <div className="foot-h mono">COMPARE</div>
          <a href="/vs/air-ai">ServiceAI vs. Air.ai</a>
          <a href="/vs/bland-ai">ServiceAI vs. Bland.ai</a>
          <a href="/vs/retell">ServiceAI vs. Retell</a>
          <a href="/vs/synthflow">ServiceAI vs. Synthflow</a>
          <a href="/windsor-ai-alternative">Windsor AI alternative</a>
        </div>
      </div>
      <div className="foot-bot mono small">© 2026 SERVICEAI · VENICE, CA · (310) 254-8110</div>
    </footer>
  );
}

function SectionHead({ num, kicker, title, right }) {
  return (
    <div className="sec-head">
      <div className="sec-head-left">
        <div className="sec-num mono">{num}</div>
        <div>
          <div className="sec-kicker mono">{kicker}</div>
          <h2 className="sec-title">{title}</h2>
        </div>
      </div>
      {right && <div className="sec-head-right">{right}</div>}
    </div>
  );
}

// ──────── OpenClaw Spotlight ────────

const CLAW_FLOWS = [
  { id: "missed",   trigger: { iconKey: "phoneMissed", label: "Missed call after hours", meta: "11:43 PM · Mike's Auto" },
                    think: "Pulls caller history · checks calendar · drafts personal SMS in owner's voice",
                    actions: ["Send SMS in 28s", "Hold a tentative slot for tomorrow 9 AM", "Notify owner only if no reply in 6h"],
                    result: { metric: "Booked", label: "Reply in 4 min · Appt held · 1 job saved ≈ $480" } },
  { id: "review",   trigger: { iconKey: "spark", label: "New 1★ Google review", meta: "Posted 6:12 AM" },
                    think: "Reads review · matches customer · drafts owner-tone response · escalates if legal risk",
                    actions: ["Draft public reply", "DM owner with full context", "Open recovery SMS to customer"],
                    result: { metric: "Handled", label: "Reply queued in 90s · Owner alerted · Recovery SMS sent" } },
  { id: "slow",     trigger: { iconKey: "calendar", label: "Calendar shows 9 open slots", meta: "Next 72 hours" },
                    think: "Scans 312 dormant leads · ranks by close-likelihood · personalizes outreach",
                    actions: ["Outbound call top 40", "SMS next 80 with calendar link", "Email rest with offer"],
                    result: { metric: "3 booked", label: "24 conversations · 3 appts · 1 reactivation" } },
  { id: "docs",     trigger: { iconKey: "email", label: "Tax client missed W-2 upload", meta: "Deadline T-7 days" },
                    think: "Knows what's missing · drafts nudge with one-tap secure upload · retries on schedule",
                    actions: ["Send secure upload SMS", "Auto-watch inbox", "Escalate to CPA at T-3"],
                    result: { metric: "Closed", label: "Doc received in 14h · No human time spent" } },
];

function OpenClawSpotlight() {
  const [idx, setIdx] = uS(0);
  const [stage, setStage] = uS(0);
  uE(() => {
    const dwell = stage === 0 ? 1400 : stage === 1 ? 1900 : stage === 2 ? 2200 : 2400;
    const t = setTimeout(() => {
      if (stage < 3) setStage(stage + 1);
      else { setStage(0); setIdx((i) => (i + 1) % CLAW_FLOWS.length); }
    }, dwell);
    return () => clearTimeout(t);
  }, [stage, idx]);
  const flow = CLAW_FLOWS[idx];
  return (
    <section className="sec sec-claw">
      <SectionHead num="04" kicker="OPENCLAW · CUSTOM AGENT PIPELINES" title={<>More than a phone agent.<br/><span className="muted">Watch one workflow execute in real time.</span></>}
        right={<div className="claw-tabs">{CLAW_FLOWS.map((f, i) => (<button key={f.id} className={"claw-tab " + (i === idx ? "active" : "")} onClick={() => { setIdx(i); setStage(0); }}>{f.trigger.label.split(" ").slice(0,2).join(" ")}</button>))}</div>}/>
      <div className="claw-pipe">
        <ClawNode kind="trigger" active={stage >= 0} done={stage > 0} icon={flow.trigger.iconKey} title={flow.trigger.label} meta={flow.trigger.meta} stageLabel="TRIGGER" />
        <ClawArrow done={stage >= 1} />
        <ClawNode kind="think" active={stage >= 1} done={stage > 1} icon="spark" title="Agent thinks" meta={flow.think} stageLabel="REASONING" thinking={stage === 1} />
        <ClawArrow done={stage >= 2} />
        <ClawNode kind="action" active={stage >= 2} done={stage > 2} icon="workflow" title="Action" actions={flow.actions} stageLabel="EXECUTE" />
        <ClawArrow done={stage >= 3} />
        <ClawNode kind="result" active={stage >= 3} done={stage >= 3} icon="check" title={flow.result.metric} meta={flow.result.label} stageLabel="RESULT" success />
      </div>
      <div className="claw-foot mono small muted">Pipelines compose: triggers from any system → reasoning steps → actions across calls, SMS, email, calendar, CRM, anywhere. Built per business.</div>
    </section>
  );
}

function ClawNode({ kind, active, done, icon, title, meta, actions, stageLabel, thinking, success }) {
  return (
    <div className={"claw-node " + kind + (active ? " on" : "") + (done ? " done" : "") + (success ? " success" : "")}>
      <div className="claw-stage mono">{stageLabel}</div>
      <div className="claw-icon"><IconRender name={icon} size={20} /></div>
      <div className="claw-title">{title}</div>
      {meta && <div className="claw-meta">{meta}</div>}
      {actions && (<ul className="claw-actions">{actions.map((a, i) => (<li key={i} className={active ? "on" : ""} style={{ animationDelay: (i * 250) + "ms" }}><IconRender name="check" size={11} /> {a}</li>))}</ul>)}
      {thinking && <div className="claw-thinking"><span/><span/><span/></div>}
    </div>
  );
}
function ClawArrow({ done }) {
  return <div className={"claw-arrow " + (done ? "done" : "")}><svg viewBox="0 0 40 20" width="40" height="20"><path d="M0 10 L36 10 M28 4 L36 10 L28 16" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg></div>;
}

// ──────── Industry Deep-Dive ────────

function IndustryDeepDive({ onDemo }) {
  const ind = INDUSTRIES.find((i) => i.id === "chiropractors");
  const dayItems = [
    { time: "06:42", iconKey: "sms",      what: "Sent 47 same-day reminder texts",            outcome: "3 patients moved up to today" },
    { time: "08:15", iconKey: "voice",    what: "Answered new-patient call · verified Aetna",  outcome: "Booked Wed 2pm · intake sent" },
    { time: "11:30", iconKey: "calendar", what: "Filled 1:00 cancellation from waitlist",      outcome: "Recovered $180 in 4 minutes" },
    { time: "14:08", iconKey: "voice",    what: "Outbound to 12 dormant patients",             outcome: "2 reactivations · 1 reschedule" },
    { time: "17:55", iconKey: "spark",    what: "Drafted 4 Google review replies for owner",   outcome: "Owner approved all in 30s" },
    { time: "21:22", iconKey: "phoneMissed", what: "Caught after-hours injury inquiry",        outcome: "Booked 8am next-day · urgent flag" },
  ];
  return (
    <section className="sec sec-dive">
      <SectionHead num="05" kicker="INDUSTRY DEEP-DIVE · CHIROPRACTORS" title={<>One day in the life of an <span className="flame-text">AI Chiro Assistant.</span></>}
        right={<button className="btn-pill ghost" onClick={() => onDemo(ind)}><IconRender name="play" size={11} /> Watch sample call</button>}/>
      <div className="dive-grid">
        <aside className="dive-side">
          <div className="dive-stat-card">
            <div className="mono small muted">30-DAY RESULT · LA PRACTICE</div>
            <div className="dive-big flame-text"><CountUp value="68" /></div>
            <div className="dive-cap">patients reactivated</div>
            <div className="dive-sub">$18,700 in recovered revenue · zero owner hours</div>
          </div>
          <div className="dive-runs">
            <div className="dive-run"><span className="mono small">CALLS / DAY</span><strong>~62</strong></div>
            <div className="dive-run"><span className="mono small">SMS / DAY</span><strong>~140</strong></div>
            <div className="dive-run"><span className="mono small">NO-SHOW DROP</span><strong className="flame-text">−34%</strong></div>
            <div className="dive-run"><span className="mono small">SETUP</span><strong>3 days</strong></div>
          </div>
          <button className="btn-pill flame" onClick={() => onDemo(ind)}><IconRender name="play" size={12} /> Watch demo</button>
        </aside>
        <div className="dive-day">
          <div className="dive-day-h mono small muted">A TUESDAY · OCT 28 · ALL TASKS RUN AUTONOMOUSLY</div>
          <div className="dive-day-list">
            {dayItems.map((d, i) => (
              <div className="dive-row" key={i}>
                <div className="dive-row-time mono">{d.time}</div>
                <div className="dive-row-icon"><IconRender name={d.iconKey} size={16} /></div>
                <div className="dive-row-what">{d.what}</div>
                <div className="dive-row-out"><IconRender name="check" size={12} /> {d.outcome}</div>
              </div>
            ))}
          </div>
          <div className="dive-day-foot"><span className="mono small muted">+ 184 more atomic tasks today</span><span className="mono small" style={{color:"var(--signal)"}}>● live</span></div>
        </div>
      </div>
    </section>
  );
}

window.HomepageApp = HomepageApp;
ReactDOM.createRoot(document.getElementById("root")).render(<HomepageApp />);