// Nav, Hero, Trust
const Nav = () => {
  return (
    <header className="nav">
      <div className="container nav-inner">
        <a href="#" className="wordmark" aria-label="Klyros home">Klyros</a>
        <div style={{display:'flex', gap:8, alignItems:'center', flexShrink:0}}>
          <a href="https://smile.klyrosdental.com" className="nav-cta">
            <span className="nav-cta-label">Start the quiz</span>
            <span className="nav-cta-icon">→</span>
          </a>
        </div>
      </div>
    </header>
  );
};

const Hero = () => (
  <section className="hero">
    <div className="hero-bg" aria-hidden="true">
      <div className="hero-orb hero-orb-1" />
      <div className="hero-orb hero-orb-2" />
    </div>
    <div className="container">
      <div className="hero-grid">
        <div className="hero-copy">
          <h1 className="hero-h1">
            Most adults with missing teeth <em>never replace them</em>. A new option is changing that.
          </h1>
          <p className="hero-sub">
            Custom dental appliances for 1–6 missing teeth, upper or lower (or both). Fitted from home and fabricated in a certified U.S. dental lab.
          </p>
          <div className="hero-ctas">
            <a href="https://smile.klyrosdental.com" className="btn btn-primary hero-cta-primary">
              Do I qualify?
              <span style={{fontFamily:'JetBrains Mono', fontSize:12}}>→</span>
            </a>
            <a href="#how" className="btn btn-ghost">How it works</a>
          </div>
          <div className="hero-trust">
            <div className="hero-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="hero-trust-sep">·</span>
            <div className="hero-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="hero-trust-sep">·</span>
            <div className="hero-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>

        <div className="hero-stack">
          <div className="hero-stack-frame">
            <div className="hero-video-placeholder">
              <video
                className="hero-video"
                src="/hero-loop.mp4"
                autoPlay
                loop
                muted
                playsInline
                preload="auto"
                aria-label="Klyros fitting process"
              />
            </div>
          </div>
          <a href="https://smile.klyrosdental.com" className="hero-glow-btn">
            <span className="hero-glow-btn-dot" />
            See my options now
            <span className="hero-glow-btn-arrow">→</span>
          </a>
        </div>
      </div>
    </div>
  </section>
);

const TrustMarquee = () => {
  const items = [
    "30-day fit guarantee",
    "Made in the USA",
    "Reviewed by licensed US dentists",
    "FDA-compliant lab",
    "HSA / FSA eligible",
  ];
  const Group = () => (
    <span className="group">
      {items.map((t, i) => (
        <React.Fragment key={i}>
          <span className="dot-sep"></span>
          <span>{t}</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="trust">
      <div className="trust-row">
        <Group /><Group />
      </div>
    </div>
  );
};

Object.assign(window, { Nav, Hero, TrustMarquee });