/**
 * Root shell for the static Pages deploy. Full router screens can be split
 * into modules later; this keeps the live site visible when JS runs.
 */
function Masthead() {
  return (
    <header className="mast">
      <div className="shell">
        <div className="row">
          <a href="./" className="brand">
            <img className="tooth" src="assets/logos/monogram-tooth.svg" alt="" />
            <span>
              thedentist<span className="dot">.ai</span>
            </span>
          </a>
          <nav>
            <a href="ui_kits/patient-web/index.html">Patient UI kit</a>
            <a href="preview/color-primary.html">Previews</a>
            <a href="ui_kits/practitioner-web/index.html">Practitioner</a>
          </nav>
          <button type="button" className="cta">
            Smile check
          </button>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="shell">
        <div className="row">
          <div>
            <div className="brand">
              <img src="assets/logos/monogram-light.svg" alt="" width={28} height={28} />
              <span>
                thedentist<span className="dot">.ai</span>
              </span>
            </div>
            <p className="mantra">Everyone needs a dentist.</p>
            <p style={{ fontSize: 14, color: 'rgba(250,248,244,0.65)', maxWidth: '42ch', margin: 0 }}>
              Verified-information layer for dental care. Information only — not a diagnosis.
            </p>
          </div>
          <div>
            <h5>Explore</h5>
            <ul>
              <li>
                <a href="preview/comp-buttons.html">Components</a>
              </li>
              <li>
                <a href="preview/color-semantic.html">Color system</a>
              </li>
              <li>
                <a href="preview/type-display.html">Typography</a>
              </li>
            </ul>
          </div>
          <div>
            <h5>Product</h5>
            <ul>
              <li>
                <a href="ui_kits/patient-web/index.html">Patient web kit</a>
              </li>
              <li>
                <a href="ui_kits/meritchannel/index.html">Merit channel</a>
              </li>
            </ul>
          </div>
        </div>
        <div className="meta">
          <span>Design system preview · Cloudflare Pages</span>
          <span>© {new Date().getFullYear()} thedentist.ai</span>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const previews = [
    { href: 'preview/brand-logo.html', title: 'Brand & logo', desc: 'Wordmark, monogram, lockups' },
    { href: 'preview/color-primary.html', title: 'Primary palette', desc: 'Seal, ink, paper, bone' },
    { href: 'preview/comp-buttons.html', title: 'Buttons & chips', desc: 'Actions and selection controls' },
    { href: 'preview/comp-card-dentist.html', title: 'Cards', desc: 'Dentist profile patterns' },
    { href: 'preview/spacing-scale.html', title: 'Spacing', desc: 'Layout rhythm' },
    { href: 'preview/motion.html', title: 'Motion', desc: 'Transitions and timing' },
  ];

  return (
    <>
      <Masthead />
      <main id="main">
        <section className="hero shell">
          <h1 className="mantra">
            Everyone needs a <em>dentist</em>.
          </h1>
          <p className="lede">
            Free 90-second smile check — what it commonly is, what it usually costs, and recognized dentists near you. No spam.
            Information only, not a diagnosis.
          </p>
          <div className="actions">
            <a className="btn btn-primary" href="ui_kits/patient-web/index.html">
              Open patient UI kit
            </a>
            <a className="btn btn-ghost" href="preview/color-neutrals.html">
              Browse design previews
            </a>
          </div>
        </section>

        <div className="shell">
          <div className="trust">
            <span className="item">Positive-only recognition badges</span>
            <span className="item">Editorial Council methodology</span>
            <span className="item">No ads · patient data protected</span>
          </div>
        </div>

        <section className="shell" style={{ paddingTop: 24 }}>
          <p className="eyebrow">Design system</p>
          <h2 className="section-h">Tokens, components, and screens</h2>
          <p className="section-lede">
            This deployment hosts the static preview gallery and UI kits. Jump into any tile below.
          </p>
          <div className="cards router">
            {previews.map((p) => (
              <a key={p.href} href={p.href} className="card">
                <h3>{p.title}</h3>
                <p>{p.desc}</p>
                <div className="toolkit">
                  <b>Open preview →</b>
                </div>
              </a>
            ))}
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

const el = document.getElementById('app');
const root = ReactDOM.createRoot(el);
root.render(<App />);