/* ═══════════════════════════════════════════════
   How It Works + Features + Outcomes
   ═══════════════════════════════════════════════ */

function HowItWorks({ tweaks }) {
  const accent = tweaks.accentColor;
  const steps = [
    { num: '01', title: 'Patient calls your clinic', desc: 'Arcline answers instantly with a fast, human-sounding voice — no hold music, no wait.' },
    { num: '02', title: 'AI handles the workflow', desc: 'Identifies the need, matches the right practitioner, checks availability, and applies your clinic\'s booking rules.' },
    { num: '03', title: 'Booked in PracSuite', desc: 'Two-way sync means the booking, patient details, and notes land directly in your practice management system.' },
  ];
  return (
    <Section id="how-it-works" bg="#fff">
      <SectionHead accent={accent} eyebrow="How it works" title="Three steps. Zero front-desk pressure." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 36, maxWidth: 1120, margin: '0 auto' }} className="three-col">
        {steps.map((s, i) => (
          <Reveal key={i} delay={stagger(i, 80)}>
            <div style={{ textAlign: 'center', padding: '0 4px' }}>
              <div style={{
                width: 58, height: 58, borderRadius: 16,
                background: i === 1 ? accent : `${accent}08`,
                color: i === 1 ? '#fff' : accent,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 18, fontWeight: 720, margin: '0 auto 22px',
                boxShadow: i === 1 ? `0 4px 16px ${accent}25` : 'none',
              }}>{s.num}</div>
              <h3 style={{ fontSize: 18, fontWeight: 680, color: '#0a0a1a', marginBottom: 10 }}>{s.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: '#6a6a7a' }}>{s.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
      {/* Connecting line */}
      <div style={{ display: 'flex', justifyContent: 'center', margin: '32px auto 0', maxWidth: 600 }} className="step-line-desktop">
        <div style={{ height: 1, flex: 1, background: `linear-gradient(to right, transparent, ${accent}18, transparent)` }}></div>
      </div>
    </Section>
  );
}

function FeaturesSection({ tweaks }) {
  const accent = tweaks.accentColor;
  const features = [
    { icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M14 10.5l-2-.8a.8.8 0 00-.8.15l-.7.7a7 7 0 01-3.3-3.3l.7-.7a.8.8 0 00.15-.8l-.8-2a.8.8 0 00-.8-.5H4.8a.8.8 0 00-.8.9c.4 4.8 4.5 8.8 9.3 9.3a.8.8 0 00.9-.8V10.5z" stroke={accent} strokeWidth="1.2" fill="none"/></svg>, title: 'Intelligent call handling', desc: 'Answers instantly, understands patient needs, and routes to the right outcome.' },
    { icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="7" r="3" stroke={accent} strokeWidth="1.2"/><path d="M3 15c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke={accent} strokeWidth="1.2" strokeLinecap="round"/></svg>, title: 'Practitioner matching', desc: 'Knows your practitioners\' specialties, certifications, and availability rules.' },
    { icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="2" width="14" height="14" rx="3" stroke={accent} strokeWidth="1.2"/><path d="M6 6h6M6 9h6M6 12h3" stroke={accent} strokeWidth="1.1" strokeLinecap="round"/></svg>, title: 'Claim pathway support', desc: 'Handles workers comp, DVA, MVA, and CDM pathways with the right questions.' },
    { icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="3" width="14" height="12" rx="2.5" stroke={accent} strokeWidth="1.2"/><path d="M2 6.5h14" stroke={accent} strokeWidth="1.2"/><circle cx="7" cy="10" r="1" fill={accent}/><circle cx="11" cy="10" r="1" fill={accent}/></svg>, title: 'Smart scheduling', desc: 'Books, reschedules, and cancels appointments according to your clinic\'s logic.' },
    { icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M4 13V8a5 5 0 0110 0v5" stroke={accent} strokeWidth="1.2" strokeLinecap="round"/><circle cx="9" cy="13" r="2.5" stroke={accent} strokeWidth="1.2"/></svg>, title: 'Human-sounding voice', desc: 'Patients feel heard, not handled. Natural conversation, not robotic scripts.' },
    { icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="2" width="14" height="14" rx="3" stroke={accent} strokeWidth="1.2"/><path d="M5 12l2.5-4 2.5 2L13 6" stroke={accent} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>, title: 'Operational insights', desc: 'See call volumes, booking patterns, and missed opportunities in real time.' },
  ];
  return (
    <Section id="features" bg="#fafbfc">
      <SectionHead accent={accent} eyebrow="Features" title="Everything your front desk needs" sub="Built to handle the workflows that make health clinic reception uniquely complex." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 18 }}>
        {features.map((f, i) => <FeatureCard key={i} {...f} accent={accent} delay={stagger(i)} />)}
      </div>
    </Section>
  );
}

function Outcomes({ tweaks }) {
  const accent = tweaks.accentColor;
  const stats = [
    { value: '67%', label: 'fewer missed calls vs. manual reception' },
    { value: '24/7', label: 'after-hours demand captured' },
    { value: '< 3s', label: 'average answer time' },
    { value: '100%', label: 'PracSuite sync accuracy' },
  ];
  return (
    <Section id="outcomes" bg="#fff">
      <SectionHead accent={accent} eyebrow="Results" title="Better outcomes for clinics and patients" sub="Arcline delivers measurable improvements to clinic efficiency, patient experience, and revenue." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, maxWidth: 1120, margin: '0 auto' }} className="four-col">
        {stats.map((s, i) => (
          <Reveal key={i} delay={stagger(i, 80)}>
            <div style={{
              textAlign: 'center', padding: '34px 18px',
              background: '#fafbfc', borderRadius: 18, border: '1px solid #f0f0f5',
            }}>
              <div style={{ fontSize: 38, fontWeight: 760, color: accent, marginBottom: 8, letterSpacing: '-0.025em' }}>{s.value}</div>
              <div style={{ fontSize: 14, color: '#6a6a7a', lineHeight: 1.55 }}>{s.label}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

window.HowItWorks = HowItWorks;
window.FeaturesSection = FeaturesSection;
window.Outcomes = Outcomes;