function HowItWorks() {
  const steps = [
    {
      n: "01",
      label: "Patient calls",
      title: "Answered in under two rings — at 7 AM or 11 PM.",
      copy: "Samika picks up every inbound call, 24/7. No menus, no hold music. The voice is calm, conversational, and trained on healthcare context.",
      hint: "0% missed · 0% abandoned"
    },
    {
      n: "02",
      label: "Structured intake",
      title: "Specialty-specific questions, no two clinics alike.",
      copy: "Each clinic gets its own intake script — implant consult, cosmetic derm, primary care new patient. Samika captures reason, history, insurance, urgency.",
      hint: "Adapts mid-conversation · handles interruptions"
    },
    {
      n: "03",
      label: "Doctor approval",
      title: "A 30-second tap on the physician's phone.",
      copy: "For primary care and physician-owned practices, the doctor sees a clean summary and chooses: accept, redirect, or ask a follow-up. Samika relays the answer back to the patient.",
      hint: "Average decision time: 28 seconds"
    },
    {
      n: "04",
      label: "Booked & confirmed",
      title: "Written straight into your PMS, with confirmations on autopilot.",
      copy: "The appointment lands in Dentrix, Athena, Jane, or eClinicalWorks. SMS confirmation, two-touch reminder, and rebooking flow all run quietly.",
      hint: "End-to-end: under 4 minutes"
    },
  ];

  return (
    <section className="how section" id="how">
      <div className="container">
        <div className="how__head">
          <span className="eyebrow">How it works</span>
          <h2 className="display h-lg">
            From a missed ring to a <span className="serif">doctor-approved</span> appointment.
          </h2>
        </div>
        <div className="how__steps">
          {steps.map((s, i) => (
            <article key={i} className="how__step">
              <div className="how__num">{s.n}</div>
              <div className="how__label">{s.label}</div>
              <h3 className="how__title">{s.title}</h3>
              <p className="how__copy">{s.copy}</p>
              <div className="how__hint">{s.hint}</div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .how__head { display:flex; gap:48px; align-items:flex-end; justify-content:space-between; margin-bottom: 64px; flex-wrap:wrap; }
        .how__head h2 { margin: 12px 0 0; max-width: 18ch; }
        .how__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
        .how__step { padding: 32px 28px 32px 0; border-right: 1px solid var(--line); position: relative; }
        .how__step:last-child { border-right: 0; padding-right: 0; }
        .how__step:not(:first-child) { padding-left: 28px; }
        .how__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-400); margin-bottom: 24px; }
        .how__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-700); margin-bottom: 16px; }
        .how__title { font-size: 22px; font-weight: 500; letter-spacing: -0.018em; line-height: 1.2; margin: 0 0 14px; color: var(--ink-900); }
        .how__copy { font-size: 14px; color: var(--ink-600); line-height: 1.55; margin: 0 0 24px; }
        .how__hint { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); padding-top: 16px; border-top: 1px dashed var(--line); }
        @media (max-width: 1000px) {
          .how__steps { grid-template-columns: 1fr 1fr; }
          .how__step:nth-child(2) { border-right: 0; }
          .how__step:nth-child(3), .how__step:nth-child(4) { border-top: 1px solid var(--line); }
        }
        @media (max-width: 600px) {
          .how__steps { grid-template-columns: 1fr; }
          .how__step { border-right: 0; border-top: 1px solid var(--line); padding: 32px 0; }
          .how__step:first-child { border-top: 0; }
        }
      `}</style>
    </section>
  );
}
window.HowItWorks = HowItWorks;