// Steps, Products, Compare
const HowItWorks = () => {
  const steps = [
    {
      n: "01",
      h: <>Order your <em>kit</em></>,
      p: "Tell us what you're working with. Your impression kit ships within 24 hours with a tracking number — most arrive in 2–5 business days.",
      i: "✉"
    },
    {
      n: "02",
      h: <>Impressions <em>at home</em></>,
      p: "A dental impression kit arrives with a step-by-step walkthrough. Take as many attempts as you need. When the impressions look right and we've approved them, drop it in your mailbox — it comes straight to our lab.",
      i: "◐"
    },
    {
      n: "03",
      h: <>Built, shipped, <em>yours</em></>,
      p: "Our certified U.S. lab technicians build your smile and ship it right to your door. Eat, talk, socialize — like you used to.",
      i: "✓"
    },
  ];
  return (
    <section id="how">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-label section-label--center section-label--serif"><span className="section-label-text">How it works</span></div>
            <h2 className="section-title section-title--center">Three steps. <em>Zero</em> waiting rooms.</h2>
          </div>
          <img
            src="/impression-kit.png"
            alt="At-home impression kit with instructions, trays, and iPhone"
            className="how-hero-img"
            loading="lazy"
          />
        </div>
        <div className="steps">
          {steps.map(s => (
            <div className="step" key={s.n}>
              <div className="step-num">STEP {s.n} / 03</div>
              <div className="step-h">{s.h}</div>
              <p className="step-p">{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const AppliancesGrid = () => {
  const prods = [
    {
      tag: "BESTSELLER",
      title: <>The <strong>Klyros</strong> Partial</>,
      p: "Flexible, metal-free partial for 1–6 missing teeth. Near-invisible clasps.",
      price: "595", sub: "per arch",
      imgClass: "", lbl: "placeholder / partial",
    },
    {
      tag: "SINGLE TOOTH",
      title: <>The <strong>Klyros</strong> Flipper</>,
      p: "Lightweight single-tooth replacement. Popular as a same-month stand-in while you decide on a permanent option.",
      price: "245", sub: "per tooth",
      imgClass: "alt", lbl: "placeholder / flipper",
    },
  ];
  return (
    <section id="appliances" className="appliances-section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>APPLIANCES</div>
            <h2 className="section-title">Three ways to <em>fill the gap</em>.</h2>
          </div>
          <p className="section-lede">
            Every Klyros appliance is milled from medical-grade materials in our US lab, shade-matched to your existing teeth, and reviewed by a licensed dentist before shipping.
          </p>
        </div>
        <div className="products-grid">
          {prods.map((p, i) => (
            <article className="product" key={i}>
              <div className={`product-img ${p.imgClass}`}>
                <span className="badge">{p.tag}</span>
                <span className="lbl">{p.lbl}</span>
              </div>
              <div className="product-body">
                <h3 className="product-title">{p.title}</h3>
                <p className="product-p">{p.p}</p>
                <div className="product-foot">
                  <div className="product-price">
                    <span className="from">FROM</span>${p.price}
                    <span className="per">/ {p.sub}</span>
                  </div>
                  <a href="#" className="product-more">Details →</a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const PricingCompare = () => {
  const data = {
    1: { trad: ["$600", "$1,400"], klyros: "$489", save: ["$100", "$900"] },
    3: { trad: ["$2,000", "$3,500"], klyros: "$549", save: ["$1,500", "$3,000"] },
    6: { trad: ["$2,500", "$4,000"], klyros: "$609", save: ["$1,900", "$3,400"] },
  };
  const [teeth, setTeeth] = React.useState(3);
  const [view, setView] = React.useState("klyros"); // "klyros" | "trad"
  const [fading, setFading] = React.useState(false);
  const d = data[teeth];

  const pickTeeth = (n) => {
    if (n === teeth) return;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { setTeeth(n); return; }
    setFading(true);
    setTimeout(() => { setTeeth(n); setFading(false); }, 180);
  };

  const pickView = (v) => {
    if (v === view) return;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { setView(v); return; }
    setFading(true);
    setTimeout(() => { setView(v); setFading(false); }, 200);
  };

  return (
    <section id="pricing" className="compare">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-label section-label--center section-label--serif"><span className="section-label-text">See how we compare</span></div>
            <h2 className="section-title section-title--center">The same outcome, <em>a fraction</em> of the price.</h2>
          </div>
        </div>

        <div className={"cmp-card cmp-card--v2 cmp-view-" + view} role="group" aria-label="Pricing comparison">
          {/* Provider buttons */}
          <div className="cmp-providers" role="tablist" aria-label="Select provider">
            <button
              role="tab"
              aria-selected={view === "klyros"}
              className={"cmp-provider-btn cmp-provider-btn--klyros" + (view === "klyros" ? " on" : "")}
              onClick={() => pickView("klyros")}
            >
              Klyros
            </button>
            <button
              role="tab"
              aria-selected={view === "trad"}
              className={"cmp-provider-btn cmp-provider-btn--trad" + (view === "trad" ? " on" : "")}
              onClick={() => pickView("trad")}
            >
              Traditional Process
            </button>
          </div>

          {/* Tooth count pills */}
          <div className="cmp-seg cmp-seg--v2" role="tablist" aria-label="Number of missing teeth">
            {[1, 3, 6].map((n) => (
              <button
                key={n}
                role="tab"
                aria-pressed={teeth === n}
                aria-selected={teeth === n}
                className={"cmp-seg-btn" + (teeth === n ? " on" : "")}
                onClick={() => pickTeeth(n)}
              >
                {n} {n === 1 ? "tooth" : "teeth"}
              </button>
            ))}
          </div>

          {/* Single panel, swapped by view */}
          <div className={"cmp-panel" + (fading ? " fading" : "")}>
            {view === "klyros" ? (
              <div className="cmp-panel-inner cmp-panel-inner--klyros">
                <div className="cmp-label cmp-label--light">Klyros</div>
                <div className="cmp-price">
                  <span className="cmp-cur cmp-cur--light">$</span>
                  <span className="cmp-num cmp-num--light">{d.klyros.replace('$', '')}</span>
                </div>
              </div>
            ) : (
              <div className="cmp-panel-inner cmp-panel-inner--trad">
                <div className="cmp-label">Traditional Process</div>
                <div className="cmp-price cmp-price--range">
                  <span className="cmp-range-line">
                    <span className="cmp-cur">$</span>
                    <span className="cmp-num">{d.trad[0].replace('$', '')}</span>
                    <span className="cmp-to">to</span>
                    <span className="cmp-cur">$</span>
                    <span className="cmp-num">{d.trad[1].replace('$', '')}</span>
                  </span>
                </div>
              </div>
            )}
          </div>

          <div className={"cmp-save" + (view === "trad" ? " cmp-save--trad" : "")} aria-live="polite">
            <span className="cmp-save-dot" />
            {view === "klyros" ? (
              <>You'll save around <strong>{d.save[0]} to {d.save[1]}</strong> by choosing Klyros.</>
            ) : (
              <>You'll spend around <strong>{d.save[0]} to {d.save[1]}</strong> more going the traditional route.</>
            )}
          </div>
        </div>

        <div className="cmp-source">
          Sources: American Dental Association 2024 Survey of Dental Fees (code D5213/D5214). Klyros pricing reflects current Klyros Flex pricing as of 2026.
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HowItWorks, AppliancesGrid, PricingCompare });