/* global React, Nav, Footer, Tag, useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakColor */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTopPad": 64,
  "heroBottomPad": 88,
  "accent": "#5A54CF"
}/*EDITMODE-END*/;

const TC = {
  "Artificial Intelligence": "t-ai",
  "Implementation": "t-impl",
  "Research": "t-rsch",
  "Ethics": "t-eth",
  "Equity": "t-eq",
  "Education": "t-edu",
};
const TAG = {
  "Artificial Intelligence": "violet",
  "Implementation": "emerald",
  "Research": "blue",
  "Ethics": "amber",
  "Equity": "magenta",
  "Education": "ink",
};

const FEATURED_WEBINAR = {
  id: "S05/25", date: "May 22, 2025", time: "12:00 PM EDT", upcoming: true,
  topic: "Education",
  title: "Self-Determination Theory in Digital Navigator Training",
  speaker: "Margaret R. Emerson, DNP & Allison G. Dempsey, PhD",
  aff: "UNMC · University of Colorado Anschutz",
};

const PROGRAMS = [
  { id: "P-01", title: "Webinars", desc: "Monthly sessions with leading voices in digital psychiatry, AI, and clinical innovation.", count: "12 / yr", to: "webinars.html" },
  { id: "P-02", title: "Digital Navigator Training", desc: "Four-module curriculum, implemented at seven institutions across four continents.", count: "7 sites", to: "about.html" },
  { id: "P-03", title: "AI Standards (AI++)", desc: "Evaluation frameworks for AI in mental health — built with NAMI, anchored in MindBench.ai.", count: "1 platform", to: "about.html" },
  { id: "P-04", title: "JMIR Mental Health", desc: "Official journal partnership for digital psychiatry research and dissemination.", count: "Open access", to: "https://mental.jmir.org", external: true },
];

const FEATURED_NEWS = [
  { id: "N-2025-03", cat: "Publication", date: "Mar 5, 2025",  title: "MindBench.ai launches as an LLM evaluation platform for mental health" },
  { id: "N-2025-02", cat: "Milestone",   date: "Feb 1, 2025",  title: "SODP surpasses 500 members across 50+ countries" },
  { id: "N-2025-01", cat: "Publication", date: "Jan 20, 2025", title: "New paper on education, navigators, and AI standards in digital psychiatry" },
];

/* ────────────────────────────────────────────────────────── */

function FeaturedPoster({ w }) {
  return (
    <a
      href="webinars.html"
      className={`webinar-poster featured ${TC[w.topic] || ""} ${w.upcoming ? "dark" : ""}`}
    >
      <span className="topic-stripe" />
      <div className="meta-top">
        <span>{w.upcoming ? "Upcoming · " + w.date : w.date}</span>
        <span className="id">{w.id}</span>
      </div>
      <Tag kind={TAG[w.topic] || "violet"}>{w.topic}</Tag>
      <div className="title">{w.title}</div>
      <div className="speaker">
        <strong>{w.speaker}</strong><br />{w.aff}
      </div>
      <div style={{ flex: 1 }} />
      <div className="footer">
        <span>{w.upcoming ? "Register →" : "Watch on JMIR →"}</span>
        <span style={{ opacity: 0.6 }}>{w.upcoming ? "LIVE · " + w.time : "VIDEO · 60m"}</span>
      </div>
    </a>
  );
}

/* ────────────────────────────────────────────────────────── */

function Hero({ t }) {
  return (
    <section style={{ padding: `${t.heroTopPad}px 0 ${t.heroBottomPad}px`, borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="grid-hero">
          {/* LEFT — brand pitch */}
          <div style={{ display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
              <span className="rule-thick" style={{ background: t.accent }} />
              <span className="eyebrow">An international research community</span>
            </div>
            <h1 className="t-display">
              The frontier of digital mental health, in monthly conversation.
            </h1>
            <p className="lede" style={{ marginTop: 20, maxWidth: 520 }}>
              Linking 500+ clinicians, researchers, and technologists across 50 countries — sharing knowledge, advancing evidence, setting standards for AI and digital tools in mental health.
            </p>
            <div style={{ flex: 1, minHeight: 24 }} />
            <div style={{ display: "flex", gap: 12, alignItems: "center", marginTop: 28, flexWrap: "wrap" }}>
              <a href="apply.html" className="btn btn-primary" style={{ background: t.accent }}>Apply to Join</a>
              <a href="about.html" className="link" style={{ color: t.accent }}>About the Society →</a>
            </div>
          </div>

          {/* RIGHT — single featured webinar */}
          <div style={{ display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
              <span className="eyebrow">/ 01 — Next session</span>
              <a href="webinars.html" className="link" style={{ fontSize: 11 }}>All webinars →</a>
            </div>
            <FeaturedPoster w={FEATURED_WEBINAR} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function StatStrip() {
  return (
    <section style={{ padding: "72px 0", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="head-l">
            <span className="num">/ 02</span>
            <span className="eyebrow">By the numbers</span>
          </div>
          <span className="caption mono" style={{ color: "var(--ink-4)", fontSize: 11, letterSpacing: "0.06em" }}>
            Updated May 1, 2025
          </span>
        </div>
        <div className="stat-row stat-row-5">
          <div className="stat-cell">
            <div className="num">500+</div>
            <div className="label">Members</div>
            <div className="delta">▲ 38 / 90 days</div>
          </div>
          <div className="stat-cell">
            <div className="num">50</div>
            <div className="label">Countries</div>
            <div className="delta">▲ 4 / 90 days</div>
          </div>
          <div className="stat-cell">
            <div className="num">11</div>
            <div className="label">Co-leaders</div>
          </div>
          <div className="stat-cell">
            <div className="num">7</div>
            <div className="label">Partner sites</div>
          </div>
          <div className="stat-cell">
            <div className="num">24</div>
            <div className="label">Webinars hosted</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function Programs() {
  return (
    <section style={{ padding: "96px 0", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="head-l">
            <span className="num">/ 03</span>
            <span className="eyebrow">Programs</span>
          </div>
          <a href="about.html" className="link">About the programs →</a>
        </div>

        <div className="table-scroll">
          <table className="data-table">
            <thead>
              <tr>
                <th style={{ width: 70 }}>ID</th>
                <th style={{ width: "26%" }}>Program</th>
                <th>Description</th>
                <th style={{ width: 130 }} className="col-num">Scope</th>
                <th style={{ width: 56 }}></th>
              </tr>
            </thead>
            <tbody>
              {PROGRAMS.map(p => (
                <tr key={p.id} onClick={() => window.location.href = p.to} style={{ cursor: "pointer" }}>
                  <td className="col-mono">{p.id}</td>
                  <td><strong style={{ fontSize: 15, color: "var(--ink)" }}>{p.title}</strong></td>
                  <td className="body-sm" style={{ color: "var(--ink-3)" }}>{p.desc}</td>
                  <td className="col-mono col-num" style={{ color: "var(--indigo-500)", fontWeight: 500 }}>{p.count}</td>
                  <td style={{ textAlign: "right", color: "var(--indigo-500)" }}>→</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function NewsStrip() {
  return (
    <section style={{ padding: "96px 0", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="head-l">
            <span className="num">/ 04</span>
            <span className="eyebrow">Recent updates</span>
          </div>
          <a href="news.html" className="link">All news →</a>
        </div>

        <div className="table-scroll">
          <table className="data-table">
            <thead>
              <tr>
                <th style={{ width: 130 }}>Date</th>
                <th style={{ width: 110 }}>ID</th>
                <th style={{ width: 130 }}>Category</th>
                <th>Headline</th>
                <th style={{ width: 56 }}></th>
              </tr>
            </thead>
            <tbody>
              {FEATURED_NEWS.map(n => (
                <tr key={n.id} onClick={() => window.location.href = "news.html"} style={{ cursor: "pointer" }}>
                  <td className="col-mono">{n.date}</td>
                  <td className="col-mono">{n.id}</td>
                  <td><Tag kind={TAG[n.cat] || "violet"}>{n.cat}</Tag></td>
                  <td><strong style={{ fontSize: 15, color: "var(--ink)" }}>{n.title}</strong></td>
                  <td style={{ textAlign: "right", color: "var(--indigo-500)" }}>→</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function CTA() {
  return (
    <section style={{ padding: "100px 0", background: "var(--indigo-900)", color: "white", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 80% 30%, rgba(139,134,224,0.18), transparent 55%)", pointerEvents: "none" }} />
      <div className="wrap" style={{ position: "relative" }}>
        <div className="grid-cta">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
              <span className="rule-thick" style={{ background: "var(--indigo-300)" }} />
              <span className="eyebrow" style={{ color: "var(--indigo-300)" }}>Membership / 05</span>
            </div>
            <h2 className="t-display" style={{ color: "white", fontSize: "clamp(32px, 4vw, 56px)" }}>
              Free, open membership for digital mental health professionals.
            </h2>
            <p className="lede" style={{ color: "rgba(255,255,255,0.75)", marginTop: 18, maxWidth: 540 }}>
              Clinicians, researchers, students, and lived-experience advocates — all welcome.
            </p>
          </div>
          <div className="cta-actions" style={{ display: "flex", justifyContent: "flex-end" }}>
            <a href="apply.html" className="btn btn-onDark">Apply to Join →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function HomePage() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <Nav active="home" />
      <Hero t={t} />
      <StatStrip />
      <Programs />
      <NewsStrip />
      <CTA />
      <Footer />
      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakSlider label="Top padding" value={t.heroTopPad} min={16} max={160} unit="px"
                     onChange={v => setTweak('heroTopPad', v)} />
        <TweakSlider label="Bottom padding" value={t.heroBottomPad} min={16} max={160} unit="px"
                     onChange={v => setTweak('heroBottomPad', v)} />
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent}
                    onChange={v => setTweak('accent', v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HomePage />);