/* Middle sections — Leverage, Operational complexity, How it works, Live Demo */

const { useState: us, useEffect: ue, useRef: ur } = React;

/* ============== RECEPTION LEVERAGE ============== */
function Leverage() {
  const before = [
    { time: '8:14', text: "Booking call · routine follow-up", busy: true },
    { time: '8:22', text: "Insurance question · WC claim status", busy: true },
    { time: '8:31', text: "Reschedule · Mr Chen's Tuesday", busy: true },
    { time: '8:36', text: "Patient at front desk · waiting", busy: false, alert: true },
    { time: '8:41', text: "After-hours voicemail (3 unheard)", busy: true, alert: true },
    { time: '8:48', text: "Insurance verification · CDM plan", busy: true },
  ];
  const after = [
    { time: '8:14', text: "Greet Mrs Patel · finalise intake", focus: true },
    { time: '8:22', text: "Walk-in triage · post-op patient", focus: true },
    { time: '8:31', text: "Re-engage 11 lapsed CDM patients", focus: true },
    { time: '8:36', text: "Coffee → return to floor", focus: false },
    { time: '8:41', text: "Quote follow-up: 4 conversions", focus: true, win: true },
    { time: '8:48', text: "Practitioner handover · briefing", focus: true },
  ];
  return (
    <section id="leverage" style={{ padding: 'var(--section-y) 0' }}>
      <div className="container-wide">
        <div className="section-mark">
          <span className="num">01 / Leverage</span>
          <span className="mono">— What your front desk could be doing instead.</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'flex-start' }} className="lev-grid">
          <div>
            <h2 className="h1" style={{ marginBottom: 24 }}>
              Reception isn't the problem. <span className="serif-italic muted">Repetitive phone work is.</span>
            </h2>
            <p className="lede" style={{ marginBottom: 28 }}>
              Great receptionists drive revenue when they're free. Arcline takes the rules-based, time-sensitive calls off their plate, so your team spends the day on patient experience, conversion, and admin that actually moves the clinic forward.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                ['Convert enquiries', 'Warm follow-ups, quote chases, reactivation calls.'],
                ['Serve in-clinic patients', 'Eye contact, intake, tone — the things AI can\'t do.'],
                ['Run admin to completion', 'Recalls, claim follow-up, referral chasing.'],
                ['Hand over with confidence', 'No backlog of voicemails at the end of the shift.'],
              ].map(([t, s], i) => (
                <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', paddingTop: 14, borderTop: i === 0 ? 'none' : '1px solid var(--line-2)' }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                    <Icon.Check size={12}/>
                  </span>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 500 }}>{t}</div>
                    <div style={{ fontSize: 14, color: 'var(--fg-3)' }}>{s}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {/* schedule comparison */}
          <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderBottom: '1px solid var(--line)' }}>
              <div style={{ padding: '14px 18px', borderRight: '1px solid var(--line)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Without Arcline</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>Reception · Tuesday morning</div>
              </div>
              <div style={{ padding: '14px 18px', background: 'var(--accent-soft)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>With Arcline</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>Reception · same morning</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
              <div style={{ borderRight: '1px solid var(--line)' }}>
                {before.map((it, i) => (
                  <div key={i} style={{ padding: '14px 18px', borderTop: i === 0 ? 'none' : '1px solid var(--line-2)' }}>
                    <div className="mono" style={{ fontSize: 10, color: it.alert ? 'var(--warn)' : 'var(--fg-4)', textTransform: 'uppercase' }}>
                      {it.time}{it.alert ? ' · backlog' : it.busy ? ' · phone' : ''}
                    </div>
                    <div style={{ fontSize: 13, color: it.alert ? 'var(--warn)' : 'var(--fg-2)', marginTop: 2 }}>{it.text}</div>
                  </div>
                ))}
              </div>
              <div>
                {after.map((it, i) => (
                  <div key={i} style={{ padding: '14px 18px', borderTop: i === 0 ? 'none' : '1px solid var(--line-2)' }}>
                    <div className="mono" style={{ fontSize: 10, color: it.win ? 'var(--success)' : 'var(--fg-4)', textTransform: 'uppercase' }}>
                      {it.time}{it.win ? ' · revenue' : ' · in-clinic'}
                    </div>
                    <div style={{ fontSize: 13, color: it.win ? 'var(--success)' : 'var(--fg-2)', marginTop: 2 }}>{it.text}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .lev-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
        }
      `}</style>
    </section>
  );
}

/* ============== OPERATIONAL COMPLEXITY ============== */
function Operational() {
  const tabs = [
    {
      id: 'wc', label: 'Workers Comp',
      title: 'Workers compensation, handled correctly the first time.',
      sub: "Arcline knows the difference between an EML, icare, Allianz, and WorkCover claim — captures the right number, attaches the pre-fill form, and books with a credentialed practitioner.",
      flow: [
        { k: 'Identify', v: 'WC keywords + insurer named' },
        { k: 'Capture', v: 'Claim number + employer + DOI' },
        { k: 'Match', v: 'Practitioner with WC credentialing' },
        { k: 'Pre-fill', v: 'Claim form link sent via SMS' },
      ],
      tags: ['icare NSW', 'WorkCover QLD', 'EML', 'Allianz', 'GIO'],
    },
    {
      id: 'cdm', label: 'CDM Care Plans',
      title: 'Chronic Disease Management plans, tracked across the cycle.',
      sub: "Patients on a 5-visit CDM plan don't have to remember where they're up to. Arcline reads PracSuite, knows the remaining count, applies bulk-billing, and confirms before the plan expires.",
      flow: [
        { k: 'Look up', v: 'Patient + active CDM plan' },
        { k: 'Verify', v: 'Visits remaining + expiry' },
        { k: 'Match', v: 'Same practitioner, same modality' },
        { k: 'Apply', v: 'Bulk-billing item codes' },
      ],
      tags: ['EPC referral', '5 visits / cycle', 'Same-clinician', 'Auto-bulk-bill'],
    },
    {
      id: 'mva', label: 'MVA Claims',
      title: "Motor vehicle claims — every insurer's path, mapped.",
      sub: "Whether it's CTP, third-party, or self-insured, Arcline knows the right paperwork, the correct authorisation, and the practitioners qualified to handle the modality required.",
      flow: [
        { k: 'Identify', v: 'CTP / third-party / self' },
        { k: 'Capture', v: 'Claim ref + GP referral' },
        { k: 'Authorise', v: 'Treatment cap + visit count' },
        { k: 'Schedule', v: 'Modality-qualified clinician' },
      ],
      tags: ['CTP NSW', 'TAC VIC', 'MAIA QLD', 'ICWA WA'],
    },
    {
      id: 'dva', label: 'DVA Veterans',
      title: 'DVA pathways — White Card, Gold Card, D904 referrals.',
      sub: "Arcline carries the DVA referral across reschedules, applies the correct item codes, and only books with practitioners who accept DVA — no more wasted appointments.",
      flow: [
        { k: 'Verify', v: 'White / Gold card on file' },
        { k: 'Carry', v: 'D904 referral across visits' },
        { k: 'Restrict', v: 'DVA-accepting clinicians only' },
        { k: 'Bill', v: 'Correct DVA item codes' },
      ],
      tags: ['Gold Card', 'White Card', 'D904', 'D9136'],
    },
    {
      id: 'match', label: 'Practitioner Matching',
      title: 'The right clinician, every time — even with certification rules.',
      sub: "Dry needling, women's health, sports cert, paediatric — Arcline checks the practitioner's credentials and patient eligibility before it offers a slot. No re-bookings, no awkward calls back.",
      flow: [
        { k: 'Read', v: 'Service rules + cert flags' },
        { k: 'Filter', v: 'Eligible practitioners only' },
        { k: 'Respect', v: 'Continuity-of-care preference' },
        { k: 'Confirm', v: 'Patient knows who + why' },
      ],
      tags: ['Dry needling', "Women's health", 'Paeds', 'Sports cert', 'Continuity'],
    },
  ];
  const [active, setActive] = us(tabs[0].id);
  const cur = tabs.find(t => t.id === active);
  return (
    <section id="operational" style={{ padding: 'var(--section-y) 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container-wide">
        <div className="section-mark">
          <span className="num">02 / Depth</span>
          <span className="mono">— Operational complexity, handled.</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 56, alignItems: 'flex-start' }} className="op-grid">
          <div>
            <h2 className="h1" style={{ marginBottom: 18 }}>
              Not a generic answering service. <span className="serif-italic muted">A clinical operator.</span>
            </h2>
            <p className="lede" style={{ marginBottom: 28 }}>
              Arcline was shaped inside live clinic workflows. It speaks the language of claims, referrals, certifications, and continuity-of-care — because that's the work your front desk actually does.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {tabs.map(t => (
                <button key={t.id} onClick={() => setActive(t.id)} style={{
                  textAlign: 'left',
                  padding: '14px 16px',
                  border: '1px solid',
                  borderColor: active === t.id ? 'var(--fg)' : 'var(--line)',
                  background: active === t.id ? 'var(--bg-card)' : 'transparent',
                  borderRadius: 10,
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  transition: 'all .2s',
                  color: 'var(--fg)',
                }}>
                  <span style={{ fontSize: 14, fontWeight: 500 }}>{t.label}</span>
                  <span style={{
                    width: 22, height: 22, borderRadius: '50%',
                    background: active === t.id ? 'var(--fg)' : 'transparent',
                    color: active === t.id ? 'var(--bg)' : 'var(--fg-4)',
                    border: active === t.id ? 'none' : '1px solid var(--line)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                  }}>
                    <Icon.Arrow size={11}/>
                  </span>
                </button>
              ))}
            </div>
          </div>
          <div className="card" key={cur.id} style={{ padding: 32, animation: 'opIn .5s cubic-bezier(.2,.7,.2,1)' }}>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 20 }}>
              {cur.tags.map((t, i) => <span key={i} className="chip chip-outline">{t}</span>)}
            </div>
            <h3 className="h2" style={{ marginBottom: 14 }}>{cur.title}</h3>
            <p className="lede" style={{ marginBottom: 28, fontSize: 16 }}>{cur.sub}</p>
            <div style={{ borderTop: '1px solid var(--line)' }}>
              {cur.flow.map((s, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 100px 1fr', alignItems: 'center', padding: '14px 0', borderBottom: '1px solid var(--line-2)' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--fg-4)' }}>0{i+1}</span>
                  <span className="mono" style={{ fontSize: 11, textTransform: 'uppercase', color: 'var(--accent)', letterSpacing: '0.08em' }}>{s.k}</span>
                  <span style={{ fontSize: 14, color: 'var(--fg-2)' }}>{s.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes opIn {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: none; }
        }
        @media (max-width: 980px) {
          .op-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

/* ============== HOW IT WORKS ============== */
function HowItWorks() {
  const steps = [
    {
      n: '01', k: 'Connect',
      t: 'Plug into PracSuite — and your phone line.',
      d: "We port-forward your existing number, sync your practitioner roster, services, rules, and availability from PracSuite. No new desk software for the team.",
      art: 'connect',
    },
    {
      n: '02', k: 'Calibrate',
      t: "Train Arcline on your clinic's voice — literally.",
      d: 'Upload an existing reception greeting or record a new one. Arcline learns your phrasing, the way you describe services, and the disclaimers you prefer.',
      art: 'voice',
    },
    {
      n: '03', k: 'Go live',
      t: 'Calls land, bookings appear, your team gets their day back.',
      d: 'Arcline answers in under a second, books the right appointment, and writes everything back to PracSuite live. Hand over to a human at any moment.',
      art: 'live',
    },
    {
      n: '04', k: 'Refine',
      t: 'Weekly insights, one-click rule tuning.',
      d: "See what calls came in, what was booked, what was escalated. Tune triage rules, pricing answers, and FAQs from one panel — no engineering required.",
      art: 'refine',
    },
  ];
  return (
    <section id="how" style={{ padding: 'var(--section-y) 0' }}>
      <div className="container-wide">
        <div className="section-mark">
          <span className="num">03 / Workflow</span>
          <span className="mono">— How Arcline plugs in.</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 32, flexWrap: 'wrap' }}>
          <h2 className="h1" style={{ maxWidth: '14ch' }}>
            Live in your clinic in <span className="serif-italic accent-text">under a week</span>.
          </h2>
          <p className="lede" style={{ maxWidth: '36ch' }}>
            Most clinics are answering live calls within 4–7 days. We do the heavy lifting on integration; your team handles a single calibration session.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 18, overflow: 'hidden' }} className="how-grid">
          {steps.map((s, i) => (
            <div key={i} style={{ background: 'var(--bg)', padding: 28, display: 'flex', flexDirection: 'column', minHeight: 380 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.1em' }}>{s.n}</span>
                <span className="mono" style={{ fontSize: 10, padding: '3px 8px', borderRadius: 4, background: 'var(--accent-soft)', color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.k}</span>
              </div>
              <StepArt kind={s.art}/>
              <h3 className="h3" style={{ marginTop: 24, marginBottom: 8 }}>{s.t}</h3>
              <p style={{ fontSize: 13.5, color: 'var(--fg-3)', lineHeight: 1.55, margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .how-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 600px) {
          .how-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function StepArt({ kind }) {
  const base = { height: 130, borderRadius: 10, background: 'var(--bg-2)', border: '1px solid var(--line-2)', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' };
  if (kind === 'connect') {
    return (
      <div style={base}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ width: 48, height: 48, borderRadius: 10, background: 'var(--bg-card)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon.Phone size={20}/>
          </div>
          <DottedLine/>
          <PracSuiteMark size={28}/>
        </div>
      </div>
    );
  }
  if (kind === 'voice') {
    return (
      <div style={base}>
        <div style={{ color: 'var(--accent)' }}>
          <Waveform bars={32} height={56}/>
        </div>
      </div>
    );
  }
  if (kind === 'live') {
    return (
      <div style={base}>
        <div style={{ width: 80, height: 80, borderRadius: '50%', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <span className="dot-live" style={{ width: 14, height: 14 }}/>
          <span style={{ position: 'absolute', inset: -10, borderRadius: '50%', border: '1px dashed var(--line)' }}/>
        </div>
      </div>
    );
  }
  if (kind === 'refine') {
    return (
      <div style={base}>
        <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end', height: 70 }}>
          {[40, 60, 35, 80, 55, 90, 70, 100, 65].map((h, i) => (
            <span key={i} style={{ width: 8, height: `${h}%`, background: i === 7 ? 'var(--accent)' : 'var(--fg-4)', borderRadius: 2, opacity: i === 7 ? 1 : 0.4 }}/>
          ))}
        </div>
      </div>
    );
  }
  return <div style={base}/>;
}
function DottedLine() {
  return (
    <div style={{ width: 60, height: 1, position: 'relative' }}>
      {Array.from({ length: 8 }).map((_, i) => (
        <span key={i} style={{ position: 'absolute', left: i * 8, top: -2, width: 4, height: 4, borderRadius: '50%', background: 'var(--accent)', opacity: 0.4 + (i / 16), animation: `flowDot 1.6s linear ${i * 0.1}s infinite` }}/>
      ))}
      <style>{`
        @keyframes flowDot {
          0%, 100% { opacity: 0.2; }
          50% { opacity: 1; }
        }
      `}</style>
    </div>
  );
}

/* ============== LIVE DEMO ============== */
function LiveDemo() {
  const [scenario, setScenario] = us('workers_comp');
  const [playing, setPlaying] = us(true);
  const [seconds, setSeconds] = us(0);
  ue(() => {
    if (!playing) return;
    const id = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(id);
  }, [playing, scenario]);
  ue(() => setSeconds(0), [scenario]);
  const mm = String(Math.floor(seconds/60)).padStart(2,'0');
  const ss = String(seconds%60).padStart(2,'0');
  return (
    <section id="demo" style={{ padding: 'var(--section-y) 0', background: 'var(--bg-inverted)', color: 'var(--fg-on-inverted)' }}>
      <div className="container-wide">
        <div style={{ display: 'flex', gap: 14, alignItems: 'center', borderTop: '1px solid color-mix(in oklab, var(--fg-on-inverted) 15%, transparent)', paddingTop: 16, marginBottom: 36, color: 'color-mix(in oklab, var(--fg-on-inverted) 70%, transparent)' }}>
          <span className="mono">04 / Live demo</span>
          <span className="mono">— Hear it play out, end-to-end.</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'flex-start' }} className="demo-grid">
          <div>
            <h2 className="h1" style={{ marginBottom: 24 }}>
              A real call, <span className="serif-italic" style={{ opacity: 0.7 }}>not a sales reel</span>.
            </h2>
            <p className="lede" style={{ color: 'color-mix(in oklab, var(--fg-on-inverted) 80%, transparent)', marginBottom: 28 }}>
              Pick a scenario your clinic actually deals with. Watch how Arcline holds context, asks the right next question, and writes the booking back to PracSuite — live.
            </p>
            {/* Player */}
            <div style={{ background: 'color-mix(in oklab, var(--fg-on-inverted) 6%, transparent)', borderRadius: 14, padding: 18, border: '1px solid color-mix(in oklab, var(--fg-on-inverted) 12%, transparent)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
                <button onClick={() => setPlaying(p => !p)} style={{
                  width: 44, height: 44, borderRadius: '50%', border: 'none',
                  background: 'var(--accent)', color: '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                }}>
                  {playing ? <Icon.Pause size={16}/> : <Icon.Play size={16}/>}
                </button>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{SCENARIOS[scenario].label}</div>
                  <div className="mono" style={{ fontSize: 11, opacity: 0.6 }}>{SCENARIOS[scenario].caller} · {mm}:{ss}</div>
                </div>
                <Waveform bars={20} height={28} color={playing ? 'var(--accent)' : 'currentColor'}/>
              </div>
              <div style={{ height: 3, background: 'color-mix(in oklab, var(--fg-on-inverted) 12%, transparent)', borderRadius: 2, overflow: 'hidden', position: 'relative' }}>
                <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${Math.min(100, seconds * 1.6)}%`, background: 'var(--accent)', borderRadius: 2 }}/>
              </div>
            </div>

            {/* Scenario picker */}
            <div style={{ marginTop: 24 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.5, marginBottom: 10 }}>Scenario</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {Object.entries(SCENARIOS).map(([k, v]) => (
                  <button key={k} onClick={() => setScenario(k)} style={{
                    background: scenario === k ? 'color-mix(in oklab, var(--fg-on-inverted) 10%, transparent)' : 'transparent',
                    border: '1px solid',
                    borderColor: scenario === k ? 'color-mix(in oklab, var(--fg-on-inverted) 25%, transparent)' : 'color-mix(in oklab, var(--fg-on-inverted) 10%, transparent)',
                    color: 'inherit',
                    padding: '12px 14px', borderRadius: 10,
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    fontSize: 13,
                  }}>
                    <span style={{ fontWeight: 500 }}>{v.label}</span>
                    <span style={{ opacity: scenario === k ? 1 : 0.3 }}><Icon.Arrow size={12}/></span>
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* Transcript area styled for dark */}
          <div style={{
            border: '1px solid color-mix(in oklab, var(--fg-on-inverted) 14%, transparent)',
            borderRadius: 18,
            overflow: 'hidden',
            minHeight: 540,
            display: 'flex', flexDirection: 'column',
            background: 'color-mix(in oklab, var(--fg-on-inverted) 4%, transparent)',
          }}>
            <div style={{ padding: '14px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid color-mix(in oklab, var(--fg-on-inverted) 14%, transparent)' }}>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <span className="dot-live"/>
                <span className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Live transcript</span>
              </div>
              <span className="mono" style={{ fontSize: 10, opacity: 0.55 }}>312ms · 1st-token</span>
            </div>
            <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }} className="dark-transcript-wrap">
              <Transcript scenario={scenario} autoPlay={playing}/>
            </div>
            <div style={{ padding: '12px 18px', borderTop: '1px solid color-mix(in oklab, var(--fg-on-inverted) 14%, transparent)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span className="mono" style={{ fontSize: 10, opacity: 0.55, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Writes to · PracSuite</span>
              <a href="demo.html" style={{ fontSize: 12, color: 'var(--accent-2)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                Try with your own scenario <Icon.Arrow size={11}/>
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .demo-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
        .dark-transcript-wrap .bubble-body {
          background: color-mix(in oklab, var(--fg-on-inverted) 8%, transparent) !important;
          color: var(--fg-on-inverted) !important;
          border-color: color-mix(in oklab, var(--fg-on-inverted) 14%, transparent) !important;
        }
        .dark-transcript-wrap .bubble-caller .bubble-body {
          background: var(--accent) !important;
          color: #fff !important;
        }
      `}</style>
    </section>
  );
}

window.Leverage = Leverage;
window.Operational = Operational;
window.HowItWorks = HowItWorks;
window.LiveDemo = LiveDemo;