/* Bottom — Outcomes (counters), PracSuite deep-dive, Testimonials, Pricing, FAQ, CTA, Footer */

const { useState: usB, useEffect: ueB, useRef: urB } = React;

/* ============== OUTCOMES (animated counters) ============== */
function useCounter(target, duration = 1800, start = false) {
  const [val, setVal] = usB(0);
  ueB(() => {
    if (!start) return;
    let raf, t0;
    const step = (t) => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(target * eased);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [start, target, duration]);
  return val;
}

function Outcomes() {
  const [vis, setVis] = usB(false);
  const ref = urB(null);
  ueB(() => {
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setVis(true), { threshold: 0.3 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const stats = [
    { v: 38, suf: '%', d: 1800, label: 'more after-hours bookings captured', sub: 'across pilot clinics, first 90 days' },
    { v: 14, suf: 'h', d: 1500, label: 'reception time reclaimed per week', sub: 'per FTE, on average' },
    { v: 92, suf: '%', d: 2000, label: 'of calls handled end-to-end', sub: 'no human handover required' },
    { v: 312, suf: 'ms', d: 1700, label: 'first-token latency', sub: '< 400ms p95 across all scenarios' },
  ];
  return (
    <section id="outcomes" ref={ref} style={{ padding: 'var(--section-y) 0' }}>
      <div className="container-wide">
        <div className="section-mark">
          <span className="num">05 / Outcomes</span>
          <span className="mono">— What clinics see in the first quarter.</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 56, alignItems: 'flex-end', marginBottom: 56 }} className="out-grid">
          <h2 className="h1">
            Revenue you were <span className="serif-italic muted">already entitled to</span>.
          </h2>
          <p className="lede">
            Most clinics underestimate how many bookings leak past 5pm, during peak walk-in periods, or when reception is on a single line. Arcline catches them — and the math compounds quickly.
          </p>
        </div>
        <div className="grid-4 outcomes-grid">
          {stats.map((s, i) => <OutcomeCard key={i} {...s} start={vis}/>)}
        </div>
      </div>
    </section>
  );
}
function OutcomeCard({ v, suf, d, label, sub, start }) {
  const c = useCounter(v, d, start);
  const display = suf === 'ms' ? Math.round(c) : Math.round(c);
  return (
    <div style={{ padding: '32px 0', borderTop: '1px solid var(--line)' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 5vw, 72px)', fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 14 }}>
        {display}<span style={{ color: 'var(--accent)' }}>{suf}</span>
      </div>
      <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4, textWrap: 'pretty' }}>{label}</div>
      <div style={{ fontSize: 12.5, color: 'var(--fg-3)' }}>{sub}</div>
    </div>
  );
}

/* ============== PRACSUITE DEEP-DIVE ============== */
function PracSuiteSection() {
  const items = [
    { k: 'Live read', v: 'Practitioner availability, services, fees, item codes — read direct from PracSuite, not a flat-file mirror.' },
    { k: 'Live write', v: 'New bookings, reschedules, and cancellations land in PracSuite the moment the caller confirms.' },
    { k: 'Patient match', v: 'Existing patient lookup by phone, DOB, or claim ref — no duplicate records, no re-entered insurance.' },
    { k: 'Item codes', v: 'Auto-applied for CDM, DVA, WC, MVA — billing is correct on the first booking, not on the chase-up.' },
    { k: 'Two-way SMS', v: 'Confirmation, pre-fill links, parking info — all logged on the patient file in PracSuite.' },
    { k: 'No new tab', v: 'Your front desk never logs into Arcline. Everything happens in the system they already use.' },
  ];
  return (
    <section id="pracsuite" 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">06 / Integration</span>
          <span className="mono">— PracSuite, native.</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'flex-start' }} className="ps-grid">
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 24, padding: '6px 12px', border: '1px solid var(--line)', borderRadius: 999, background: 'var(--bg-card)' }}>
              <PracSuiteMark size={20}/>
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-2)' }}>Native integration partner</span>
            </div>
            <h2 className="h1" style={{ marginBottom: 24 }}>
              Treat PracSuite as <span className="serif-italic accent-text">the system of record</span> — because it is.
            </h2>
            <p className="lede" style={{ marginBottom: 24 }}>
              Arcline doesn't sit beside your practice management software. It operates inside it. Every booking, change, and note is written back so your front desk, clinicians, and accounts team see one source of truth.
            </p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href="demo.html">See the integration <span className="btn-arrow"><Icon.Arrow size={12}/></span></a>
              <a className="btn btn-ghost" href="pricing.html">Compare plans</a>
            </div>
            {/* visual schema */}
            <div style={{ marginTop: 36, padding: 24, background: 'var(--bg-card)', border: '1px solid var(--line)', borderRadius: 14 }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 16 }}>Data flow</div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                <SchemaNode icon={<Icon.Phone size={16}/>} label="Caller"/>
                <FlowArrow up label="ASK"/>
                <SchemaNode icon={<Icon.Logo size={20}/>} label="Arcline" emphasis/>
                <FlowArrow label="WRITE"/>
                <SchemaNode icon={<PracSuiteMark size={16}/>} label="PracSuite"/>
              </div>
            </div>
          </div>
          <div>
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              {items.map((it, i) => (
                <div key={i} style={{ padding: '20px 24px', borderBottom: i === items.length - 1 ? 'none' : '1px solid var(--line-2)', display: 'grid', gridTemplateColumns: '120px 1fr', gap: 20, alignItems: 'flex-start' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.06em', textTransform: 'uppercase', paddingTop: 2 }}>{it.k}</span>
                  <span style={{ fontSize: 14.5, color: 'var(--fg-2)', lineHeight: 1.5 }}>{it.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .ps-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
        }
      `}</style>
    </section>
  );
}
function SchemaNode({ icon, label, emphasis }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
      <div style={{
        width: emphasis ? 56 : 44, height: emphasis ? 56 : 44, borderRadius: 12,
        background: emphasis ? 'var(--fg)' : 'var(--bg)', color: emphasis ? 'var(--bg)' : 'var(--fg)',
        border: emphasis ? 'none' : '1px solid var(--line)',
        display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}>
        {icon}
      </div>
      <span className="mono" style={{ fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase' }}>{label}</span>
    </div>
  );
}
function FlowArrow({ label, up }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 1, gap: 4 }}>
      <span className="mono" style={{ fontSize: 9, color: 'var(--fg-4)', letterSpacing: '0.1em' }}>{label}</span>
      <div style={{ width: '100%', height: 1, background: 'repeating-linear-gradient(90deg, var(--fg-4) 0 4px, transparent 4px 8px)', position: 'relative' }}>
        <span style={{ position: 'absolute', right: -1, top: -3, width: 0, height: 0, borderLeft: '5px solid var(--fg-4)', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}/>
      </div>
    </div>
  );
}

/* ============== TESTIMONIALS ============== */
function Testimonials() {
  const items = [
    {
      q: "We hired Arcline expecting a missed-call backstop. Three months in, our front desk is closing 40% more enquiries because they finally have time to follow up.",
      who: "Dr Hannah Lim", role: "Owner, Northbridge Physio · Perth", metric: "+40% enquiry conversion",
    },
    {
      q: "It books CDM, WC, and DVA correctly the first time. We used to fix three or four billing mistakes a week — now it's zero.",
      who: "Sarah K.", role: "Practice Manager, Coastline Allied Health", metric: "0 billing reworks / week",
    },
    {
      q: "After-hours used to be voicemail roulette. Now we're catching 6–8 bookings overnight that would've gone to a competitor.",
      who: "Tom R.", role: "Clinic Director, Riverside Sports Med", metric: "6–8 overnight bookings",
    },
  ];
  return (
    <section id="testimonials" style={{ padding: 'var(--section-y) 0' }}>
      <div className="container-wide">
        <div className="section-mark">
          <span className="num">07 / Proof</span>
          <span className="mono">— From clinics already running on Arcline.</span>
        </div>
        <div className="grid-3 test-grid">
          {items.map((t, i) => (
            <div key={i} className="card" style={{ display: 'flex', flexDirection: 'column', gap: 24, padding: 28 }}>
              <div style={{ fontSize: 28, fontFamily: 'var(--font-display)', color: 'var(--accent)', lineHeight: 0.5 }}>“</div>
              <p style={{ fontSize: 16, lineHeight: 1.5, margin: 0, color: 'var(--fg-2)', textWrap: 'pretty' }}>{t.q}</p>
              <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: '1px solid var(--line-2)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 12 }}>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{t.who}</div>
                    <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>{t.role}</div>
                  </div>
                  <span className="chip">{t.metric}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== PRICING ============== */
function PricingPreview() {
  const tiers = [
    {
      name: 'Solo', price: '$390', sub: '/ month',
      desc: 'For single-practitioner and start-up clinics. Up to 200 calls / month.',
      feats: ['PracSuite native integration', 'After-hours coverage', 'WC + CDM pathways', 'SMS confirmations', 'Email support'],
    },
    {
      name: 'Clinic', price: '$890', sub: '/ month',
      desc: 'For established multi-practitioner clinics. Up to 1,000 calls / month.',
      feats: ['Everything in Solo', 'All claim pathways (WC · CDM · MVA · DVA)', 'Practitioner credentialing rules', 'Custom voice upload', 'Priority support'],
      highlight: true,
    },
    {
      name: 'Group', price: 'Custom', sub: 'multi-site',
      desc: 'For multi-clinic groups and franchise networks. Unlimited calls.',
      feats: ['Everything in Clinic', 'Per-site call routing', 'Group-wide reporting', 'Dedicated success manager', 'SLA + SOC 2 Type II'],
    },
  ];
  return (
    <section id="pricing" 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">08 / Plans</span>
          <span className="mono">— Per-clinic, not per-seat.</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 32, flexWrap: 'wrap' }}>
          <h2 className="h1" style={{ maxWidth: '16ch' }}>
            Pricing that scales with calls, <span className="serif-italic muted">not headcount</span>.
          </h2>
          <a className="btn btn-ghost" href="pricing.html">See full pricing <Icon.Arrow size={12}/></a>
        </div>
        <div className="grid-3 price-grid">
          {tiers.map((t, i) => (
            <div key={i} className="card" style={{
              padding: 32, position: 'relative',
              background: t.highlight ? 'var(--fg)' : 'var(--bg-card)',
              color: t.highlight ? 'var(--bg)' : 'var(--fg)',
              borderColor: t.highlight ? 'var(--fg)' : 'var(--line)',
            }}>
              {t.highlight && (
                <span style={{
                  position: 'absolute', top: 16, right: 16,
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  padding: '4px 8px', borderRadius: 999,
                  background: 'var(--accent)', color: '#fff',
                  letterSpacing: '0.06em', textTransform: 'uppercase',
                }}>Most clinics</span>
              )}
              <div className="mono" style={{ fontSize: 11, color: t.highlight ? 'color-mix(in oklab, var(--bg) 70%, transparent)' : 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>{t.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 8 }}>
                <span className="h1" style={{ fontSize: 'clamp(40px, 4vw, 56px)', lineHeight: 1 }}>{t.price}</span>
                <span style={{ fontSize: 13, opacity: 0.65 }}>{t.sub}</span>
              </div>
              <div style={{ fontSize: 13, opacity: 0.75, marginBottom: 24, textWrap: 'pretty' }}>{t.desc}</div>
              <a className="btn" style={{
                width: '100%', justifyContent: 'center', marginBottom: 24,
                background: t.highlight ? 'var(--bg)' : 'var(--fg)',
                color: t.highlight ? 'var(--fg)' : 'var(--bg)',
              }} href="demo.html">
                Get started
              </a>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, paddingTop: 20, borderTop: t.highlight ? '1px solid color-mix(in oklab, var(--bg) 20%, transparent)' : '1px solid var(--line-2)' }}>
                {t.feats.map((f, j) => (
                  <div key={j} style={{ display: 'flex', gap: 10, fontSize: 13 }}>
                    <Icon.Check size={14}/> <span>{f}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== FAQ ============== */
function FAQ() {
  const qs = [
    { q: "Will Arcline replace our reception team?", a: "No — and clinics that try to run it that way see worse outcomes. Arcline takes the repetitive, rules-based phone work off your team so they can focus on in-clinic patients, conversion calls, and admin follow-through. Your humans stay; their day gets better." },
    { q: "How does the PracSuite integration actually work?", a: "It's a native, two-way integration. Arcline reads availability, services, fees, and patient records from PracSuite live, and writes new bookings, reschedules, cancellations, and SMS logs back to the patient file. No spreadsheets, no flat-file mirrors, no separate dashboard." },
    { q: "What about non-PracSuite clinics?", a: "PracSuite is our deepest integration and where most of our clinics sit. We can also work with Cliniko, Halaxy, and Nookal — write to us about your stack and we'll confirm the support level." },
    { q: "How is voice quality and latency handled?", a: "We optimise for natural conversation. First-token latency averages 312ms (under 400ms p95), the voice can be cloned from your existing reception greeting, and the model is tuned to Australian phrasing and clinical vocabulary." },
    { q: "Is my patient data safe?", a: "Yes. Arcline is hosted in Australia, encrypts data in transit and at rest, and complies with the Australian Privacy Principles (APP) and SOC 2 Type II. We do not train on your call data." },
    { q: "What if Arcline can't handle a call?", a: "It hands off cleanly. The call routes to your reception line (or an after-hours mobile) with a one-line context summary so the human picks up where Arcline left off." },
    { q: "How long does it take to go live?", a: "Most clinics are answering live calls in 4–7 days. We handle the integration; your team handles a single calibration session for voice, services, and triage rules." },
  ];
  const [open, setOpen] = usB(0);
  return (
    <section id="faq" style={{ padding: 'var(--section-y) 0' }}>
      <div className="container-wide">
        <div className="section-mark">
          <span className="num">09 / FAQ</span>
          <span className="mono">— What clinic operators ask before signing.</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 56, alignItems: 'flex-start' }} className="faq-grid">
          <h2 className="h1">
            Things you're <span className="serif-italic muted">probably wondering</span>.
          </h2>
          <div>
            {qs.map((it, i) => (
              <div key={i} style={{ borderTop: '1px solid var(--line)', borderBottom: i === qs.length - 1 ? '1px solid var(--line)' : 'none' }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width: '100%', textAlign: 'left',
                  background: 'transparent', border: 'none',
                  padding: '20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  color: 'var(--fg)',
                  cursor: 'pointer',
                }}>
                  <span style={{ fontSize: 16, fontWeight: 500, paddingRight: 24 }}>{it.q}</span>
                  <span style={{
                    width: 28, height: 28, borderRadius: '50%',
                    border: '1px solid var(--line)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    {open === i ? <Icon.Minus size={12}/> : <Icon.Plus size={12}/>}
                  </span>
                </button>
                {open === i && (
                  <div style={{ paddingBottom: 22, fontSize: 14.5, color: 'var(--fg-3)', lineHeight: 1.55, maxWidth: '60ch', textWrap: 'pretty', animation: 'faqIn .4s cubic-bezier(.2,.7,.2,1)' }}>
                    {it.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @keyframes faqIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: none; }
          }
          @media (max-width: 980px) {
            .faq-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ============== FINAL CTA ============== */
function FinalCTA() {
  return (
    <section style={{ padding: 'var(--section-y) 0', position: 'relative', overflow: 'hidden' }}>
      <div className="container-wide">
        <div style={{
          background: 'var(--bg-inverted)',
          color: 'var(--fg-on-inverted)',
          borderRadius: 28,
          padding: 'clamp(48px, 7vw, 96px)',
          position: 'relative', overflow: 'hidden',
        }}>
          {/* dotted backdrop */}
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'radial-gradient(circle, color-mix(in oklab, var(--fg-on-inverted) 14%, transparent) 1px, transparent 1px)',
            backgroundSize: '22px 22px',
            WebkitMaskImage: 'radial-gradient(70% 70% at 70% 50%, black, transparent 90%)',
            maskImage: 'radial-gradient(70% 70% at 70% 50%, black, transparent 90%)',
            opacity: 0.7,
          }}/>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 48, alignItems: 'center' }} className="cta-grid">
            <div>
              <span className="mono" style={{ fontSize: 11, opacity: 0.55, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Book a 20-min walkthrough</span>
              <h2 className="h-display" style={{ marginTop: 14, fontSize: 'clamp(36px, 5vw, 72px)' }}>
                See Arcline answer a real <span className="serif-italic">clinic call</span>.
              </h2>
              <p className="lede" style={{ color: 'color-mix(in oklab, var(--fg-on-inverted) 75%, transparent)', marginTop: 20, marginBottom: 32 }}>
                We'll plug in a sample of your services, claim pathways, and practitioner rules — then call your number live so you can hear it work in your accent, your terminology, your operational reality.
              </p>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <a className="btn btn-accent btn-lg" href="demo.html">
                  Book a demo <span className="btn-arrow"><Icon.Arrow size={14}/></span>
                </a>
                <a className="btn btn-lg" style={{ background: 'transparent', border: '1px solid color-mix(in oklab, var(--fg-on-inverted) 25%, transparent)', color: 'inherit' }} href="pricing.html">
                  See pricing
                </a>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }} className="cta-bullets">
              {[
                'No credit card needed',
                'Live in 4–7 days, not months',
                "You keep your phone number",
                'Cancel any time, no lock-in',
              ].map((x, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '12px 16px', borderRadius: 10, background: 'color-mix(in oklab, var(--fg-on-inverted) 6%, transparent)', border: '1px solid color-mix(in oklab, var(--fg-on-inverted) 12%, transparent)' }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--accent)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon.Check size={12}/>
                  </span>
                  <span style={{ fontSize: 14 }}>{x}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .cta-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ============== FOOTER ============== */
function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '48px 0 36px', background: 'var(--bg-2)' }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 32, marginBottom: 48 }} className="ft-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.02em', fontSize: 18 }}>
              <Icon.Logo size={22}/> Arcline
            </div>
            <p style={{ fontSize: 13, color: 'var(--fg-3)', maxWidth: '34ch', margin: 0, marginBottom: 16, textWrap: 'pretty' }}>
              AI reception, built for health clinics. Made in Perth, Western Australia. Tested in real clinics.
            </p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <span className="chip chip-outline"><Icon.Pin size={10}/> Perth, WA</span>
              <span className="chip chip-outline"><Icon.ShieldCheck size={10}/> SOC 2</span>
              <span className="chip chip-outline">APP-compliant</span>
            </div>
          </div>
          {[
            { h: 'Product', l: [['Why Arcline','#leverage'],['How it works','#how'],['Live demo','#demo'],['PracSuite','#pracsuite'],['Pricing','pricing.html']] },
            { h: 'Company', l: [['About','#'],['Customers','#testimonials'],['Careers','#'],['Press','#']] },
            { h: 'Resources', l: [['Documentation','#'],['Security','#'],['Status','#'],['Contact','demo.html']] },
          ].map((col, i) => (
            <div key={i}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>{col.h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {col.l.map(([t, u], j) => (
                  <li key={j}><a href={u} style={{ fontSize: 13.5, color: 'var(--fg-2)' }}>{t}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, borderTop: '1px solid var(--line)', flexWrap: 'wrap', gap: 12 }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--fg-4)' }}>© 2026 Arcline Health Pty Ltd · ABN 00 000 000 000</span>
          <div style={{ display: 'flex', gap: 18, fontSize: 12, color: 'var(--fg-3)' }}>
            <a href="#">Privacy</a><a href="#">Terms</a><a href="#">DPA</a><a href="#">Status</a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .ft-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 600px) {
          .ft-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

window.Outcomes = Outcomes;
window.PracSuiteSection = PracSuiteSection;
window.Testimonials = Testimonials;
window.PricingPreview = PricingPreview;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;