// Stories, QuizGate, FAQ, FooterCTA, Footer
const PatientStories = () => (
  <section id="stories" className="stories">
    <div className="container">
      <div className="test-grid">
        <div>
          <div className="eyebrow"><span className="dot"></span>PATIENT STORIES</div>
          <p className="test-quote" style={{marginTop:20}}>
            &ldquo;I put this off for <em>eleven years</em> because of the quote my dentist gave me. Klyros fitted three teeth for less than I spent avoiding it.&rdquo;
          </p>
          <div className="test-attr">
            <div className="sw"></div>
            <div>
              <div className="who">Rene T.</div>
              <div className="mono">PARTIAL · LOWER ARCH · VERIFIED PATIENT</div>
            </div>
          </div>
          <div className="test-stats">
            <div>
              <div className="stat-n">12,400+</div>
              <div className="stat-l">Appliances delivered</div>
            </div>
            <div>
              <div className="stat-n">4.86</div>
              <div className="stat-l">Avg. review (of 5)</div>
            </div>
            <div>
              <div className="stat-n">94%</div>
              <div className="stat-l">Fit first try</div>
            </div>
          </div>
        </div>
        <div className="test-img">
          <span className="lbl">placeholder / patient portrait</span>
        </div>
      </div>
    </div>
  </section>
);

const QUIZ_Qs = [
  { q: "How many teeth are you replacing per arch?", opts: ["1 tooth", "2–3 teeth", "4–6 teeth", "Not sure yet"] },
  { q: "Which arch?", opts: ["Upper", "Lower", "Both"] },
  { q: "How long has the gap been there?", opts: ["Less than 6 months", "6 months – 2 years", "2–5 years", "5+ years"] },
  { q: "What have you tried?", opts: ["Nothing yet", "Saw a dentist", "Researched options", "Had a temporary"] },
];

const QuizGate = () => {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState([]);
  const done = step >= QUIZ_Qs.length;

  const pick = (i) => {
    const next = [...answers]; next[step] = i;
    setAnswers(next);
    setTimeout(() => {
      const newStep = step + 1;
      setStep(newStep);
      if (newStep >= QUIZ_Qs.length) {
        try { sessionStorage.setItem('klyros_quiz_completed', 'true'); } catch(e) {}
      }
    }, 180);
  };

  const reset = () => { setStep(0); setAnswers([]); };

  const match = () => {
    if (answers[0] === 0) return "The Klyros Flipper";
    if (answers[0] === 2) return "The Klyros Partial (extended)";
    return "The Klyros Partial";
  };

  return (
    <section id="quiz" className="quiz">
      <div className="container">
        <div className="section-label section-label--dark section-label--center section-label--serif"><span className="section-label-text">Am I a candidate?</span></div>
        <h2 className="quiz-h">Find your fit in <em>30 seconds</em>.</h2>
        <p className="quiz-p">
          Four quick questions. A licensed dentist reviews your answers within 24–48 hours — free, no card, no pressure.
        </p>

        <div className="quiz-box">
          <div className="quiz-progress">
            {QUIZ_Qs.map((_, i) => (
              <div key={i} className={`seg ${(i <= step - 1) || done ? 'on' : ''}`}></div>
            ))}
          </div>

          {!done ? (
            <>
              <div className="quiz-q">QUESTION {step + 1} OF {QUIZ_Qs.length}</div>
              <div className="quiz-h2">{QUIZ_Qs[step].q}</div>
              <div className="quiz-opts">
                {QUIZ_Qs[step].opts.map((o, i) => (
                  <button
                    key={i}
                    className={`quiz-opt ${answers[step] === i ? 'on' : ''}`}
                    onClick={() => pick(i)}
                  >
                    <span>{o}</span>
                    <span className="arr">→</span>
                  </button>
                ))}
              </div>
              <div className="quiz-nav">
                <button className="back" onClick={() => setStep(Math.max(0, step - 1))} disabled={step === 0}>
                  ← BACK
                </button>
                <span className="back">{step + 1} / {QUIZ_Qs.length}</span>
              </div>
            </>
          ) : (
            <div className="quiz-result">
              <h3>You're a <em>strong candidate</em>.</h3>
              <p>Based on your answers, this is the appliance most Klyros patients in your position chose:</p>
              <div className="match">
                <div className="mh">RECOMMENDED APPLIANCE</div>
                <div className="mn">{match()}</div>
              </div>
              <div style={{display:'flex', gap:10, flexWrap:'wrap'}}>
                <a href="https://smile.klyrosdental.com" className="btn" style={{background:'var(--cyan)', color:'var(--navy)'}}>
                  Claim my free review →
                </a>
                <button className="btn" style={{border:'1px solid rgba(255,255,255,0.18)', color:'#fff'}} onClick={reset}>
                  Retake
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

const FAQAccordion = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: <>Is a dentist <em>actually</em> reviewing my case?</>,
      a: "Yes. Every Klyros case is reviewed and signed off by a state-licensed DDS before fabrication begins. Klyros is not a dental practice — it's a coordination platform that connects patients with licensed clinicians and an FDA-compliant US lab. If a case isn't a fit for remote care, we'll refer you to a local provider at no cost."
    },
    {
      q: <>What if the appliance doesn't <em>fit</em>?</>,
      a: "The first remake is always free — no questions, no re-doing the quiz. For the first 12 months you also get unlimited virtual fitting adjustments. 94% of cases are accepted without a remake request (source: Klyros internal remake-rate analysis, rolling 12-month)."
    },
    {
      q: <>Will insurance <em>cover</em> it?</>,
      a: "Most PPO plans reimburse partial dentures and bridges as a major service. We provide an itemized super-bill you can submit directly. Klyros is also HSA and FSA eligible."
    },
    {
      q: <>How long does it <em>take</em>?</>,
      a: "Kit ships within 48 hours. Most patients return impressions within a week. Our US lab turns around in 7–10 business days after that. Median end-to-end turnaround is 14 days."
    },
    {
      q: <>Which <em>states</em> do you serve?</>,
      a: "Klyros coordinates care with licensed clinicians in all 50 states. Because Klyros is a coordination platform — not a dental practice — the reviewing clinician is matched to the state you live in during intake."
    },
  ];
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-label section-label--center section-label--serif"><span className="section-label-text">FAQ</span></div>
            <h2 className="section-title section-title--center">Questions, <em>answered</em>.</h2>
          </div>
          <p className="section-lede">
            Still deciding? These are the five we hear most. For anything else, our intake team replies in under an hour during business days.
          </p>
        </div>
        <div className="faq-grid">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-head">
                <div className="faq-q">{it.q}</div>
                <div className="faq-plus">+</div>
              </div>
              <div className="faq-a"><p>{it.a}</p></div>
            </div>
          ))}
        </div>
        <div className="faq-contact">
          <div className="faq-contact-ornament" aria-hidden="true">
            <svg viewBox="0 0 120 120" fill="none">
              <circle cx="60" cy="60" r="58" stroke="rgba(232,236,242,0.18)" strokeWidth="1"/>
              <circle cx="60" cy="60" r="44" stroke="rgba(232,236,242,0.12)" strokeWidth="1"/>
              <circle cx="60" cy="60" r="30" stroke="rgba(232,236,242,0.08)" strokeWidth="1"/>
              <g stroke="#fff" strokeWidth="1.8" strokeLinecap="round" fill="none">
                <path d="M48 54h24M48 62h18M54 48v-6M66 48v-6"/>
              </g>
            </svg>
          </div>

          <div className="faq-contact-body">
            <div className="faq-contact-eyebrow">
              STILL HAVE QUESTIONS?
            </div>
            <h3 className="faq-contact-title">Talk to a <em>real</em> human.</h3>
            <p className="faq-contact-p">
              Seven days a week, we're here. Send over any questions or concerns about your case — or anything you're wondering before giving Klyros a try.
            </p>

            <div className="faq-contact-actions">
              <a href="mailto:help@klyrosdental.com" className="faq-contact-email">
                <div className="faq-contact-email-label">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
                  EMAIL US
                </div>
                <div className="faq-contact-email-addr">help@klyrosdental.com</div>
                <div className="faq-contact-email-meta">
                  <span className="faq-contact-email-dot" />
                  Replies 7 days a week
                </div>
              </a>

              <a href="https://klyrosdental.com/pages/contact" className="btn btn-primary faq-contact-btn faq-contact-btn--primary">
                Contact us
                <span style={{fontFamily:'JetBrains Mono', fontSize:12}}>→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const ContactModal = () => {
  const close = () => document.getElementById('contact-modal').classList.remove('on');
  return (
    <div id="contact-modal" className="contact-modal" onClick={(e) => { if (e.target.id === 'contact-modal') close(); }}>
      <div className="contact-card">
        <button className="contact-close" onClick={close} aria-label="Close">×</button>

        <div className="contact-head">
          <div className="eyebrow"><span className="dot"></span>CONTACT</div>
          <h3 className="contact-title">We&rsquo;re <em>here</em> to help.</h3>
          <p className="contact-p">Reach out however works best for you. We respond fast, and a real person will always be on the other end.</p>
        </div>

        <div className="contact-tiles">
          <a href="mailto:hello@klyros.com" className="contact-tile">
            <div className="contact-tile-mark" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
            </div>
            <div className="contact-tile-label">EMAIL</div>
            <div className="contact-tile-val">hello@klyros.com</div>
            <div className="contact-tile-meta">Replies within 1 hour · business days</div>
            <div className="contact-tile-cta">Send a note <span>→</span></div>
          </a>

          <a href="tel:+18005597967" className="contact-tile">
            <div className="contact-tile-mark" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>
            </div>
            <div className="contact-tile-label">PHONE</div>
            <div className="contact-tile-val">(800) 559-7967</div>
            <div className="contact-tile-meta">Mon&ndash;Fri · 8am&ndash;7pm ET</div>
            <div className="contact-tile-cta">Call now <span>→</span></div>
          </a>

          <div className="contact-tile contact-tile--static">
            <div className="contact-tile-mark" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0Z"/><circle cx="12" cy="10" r="3"/></svg>
            </div>
            <div className="contact-tile-label">MAIL</div>
            <div className="contact-tile-val contact-tile-val--small">
              Klyros, Inc.<br/>PO Box 4120<br/>United States
            </div>
            <div className="contact-tile-meta">For returns &amp; impression kits</div>
          </div>
        </div>

        <div className="contact-foot">
          <div className="contact-foot-dot" />
          <div>
            <strong>Typical response:</strong> under an hour on business days. All messages routed to a US-based team member — never a bot.
          </div>
        </div>
      </div>
    </div>
  );
};

const FooterCTA = () => (
  <section className="footer-cta">
    <div className="footer-cta-grid" aria-hidden="true">
      <div className="footer-cta-orb footer-cta-orb-1" />
      <div className="footer-cta-orb footer-cta-orb-2" />
    </div>
    <div className="container footer-cta-inner">
      <h2 className="footer-cta-big">
        Ready to <em>fill the gap</em>?
      </h2>
      <p className="footer-cta-lede">
        Take the 30-second fit quiz. A licensed US dentist reviews your answers within 24–48&nbsp;hours — free, no card, no pressure.
      </p>
      <div className="footer-cta-actions">
        <a href="https://smile.klyrosdental.com" className="btn btn-primary footer-cta-btn">
          Do I qualify?
          <span style={{fontFamily:'JetBrains Mono', fontSize:13}}>→</span>
        </a>
        <a href="https://smile.klyrosdental.com" className="footer-cta-sub">
          See appliance pricing
        </a>
      </div>
      <div className="footer-cta-trust">
        <div className="footer-cta-trust-item">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
          Every case reviewed by a licensed dentist
        </div>
        <span className="footer-cta-trust-sep">·</span>
        <div className="footer-cta-trust-item">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
          Fabricated in an FDA-safe US dental lab
        </div>
        <span className="footer-cta-trust-sep">·</span>
        <div className="footer-cta-trust-item">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
          45-day Klyros fit assurance
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer>
    <div className="container">
      <div className="foot-grid">
        <div className="foot-col">
          <h4>Legal</h4>
          <ul>
            <li><span>Terms of Service</span></li>
            <li><span>Privacy Policy</span></li>
            <li><span>Refund Policy</span></li>
            <li><span>Teledentistry Consent</span></li>
            <li><span>Contact Us</span></li>
          </ul>
        </div>
      </div>

      <div className="foot-legal">
        <div className="foot-legal-copy">© 2026 Klyros Dental, Inc. All rights reserved.</div>
        <div className="foot-legal-copy">
          All clinical reviews are performed by independently contracted state-licensed dental professionals. Klyros does not practice dentistry.
        </div>
        <div className="foot-legal-copy">
          20855 Ventura Blvd, Ste 10A #1054<br/>
          Woodland Hills, CA 91364<br/>
          United States
        </div>
        <div className="foot-legal-copy">
          (818) 418-1944<br/>
          help@klyrosdental.com
        </div>
      </div>

      <div className="foot-disclosure">
        <h4>Cosmetic Appliance Disclosure</h4>
        <p>
          Cosmetic removable appliances are non-surgical, non-permanent dental devices intended for aesthetic enhancement only. They do not move teeth, correct bite alignment, or treat dental disease. All cases are reviewed by a licensed dentist prior to fabrication where applicable. Eligibility is determined at the discretion of the reviewing provider. Results vary by individual case. Appliances are removable and not intended as a substitute for comprehensive dental care. Patients should maintain regular in-office dental examinations and follow the advice of their local dental provider.
        </p>
      </div>
    </div>
  </footer>
);

Object.assign(window, { PatientStories, QuizGate, FAQAccordion, ContactModal, FooterCTA, Footer });