/* global React */
(function () {
  const { useState: useStateHome, useEffect: useEffectHome } = React;
  const { TopBar: TopBarH, Footer: FooterH, navigate: navH } = window.RT;

  // ───────────────────────────────────────────────────────────────────────────
  // HOME — 2 varianti via tweak: "editorial" (default) e "panel" (più compatta)
  // ───────────────────────────────────────────────────────────────────────────
  function HomeHero({ variant, now, onStart, onBrowse }) {
    if (variant === "panel") {
      return (
        <section style={{ background: "var(--rt-navy-900)", color: "#fff", padding: "72px 0 80px" }}>
        <div className="rt-container" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="rt-eyebrow" style={{ color: "rgba(255,255,255,.7)" }}>Piattaforma clinica · v1.0</div>
            <h1 style={{ color: "#fff", fontSize: 56, lineHeight: 1.05, marginTop: 18 }}>
              Scale validate.<br />Compilazione strutturata.<br />Report immediato.
            </h1>
            <p style={{ fontSize: 17, color: "rgba(255,255,255,.78)", maxWidth: 520, marginTop: 22, lineHeight: 1.6 }}>
              Rehab Tools digitalizza la somministrazione delle scale di valutazione fisioterapica e riabilitativa, restituendo un report a pagina singola pronto per la cartella clinica.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
              <button className="rt-btn lg" onClick={onStart} style={{ background: "#fff", color: "var(--rt-navy-900)", borderColor: "#fff" }}>
                Inizia valutazione →
              </button>
              <button className="rt-btn lg" onClick={onBrowse} style={{ background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,.3)" }}>
                Sfoglia scale
              </button>
            </div>
          </div>
          <div style={{ background: "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.12)", borderRadius: 12, padding: 24 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
              <div className="rt-mono" style={{ fontSize: 11, color: "rgba(255,255,255,.6)", letterSpacing: ".08em" }}>SESSIONE ATTIVA · DEMO</div>
              <span style={{ fontSize: 11, color: "#7ee7c7", display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#4ade80" }}></span>
                AUTOSALVATAGGIO
              </span>
            </div>
            <div style={{ fontFamily: "var(--rt-serif)", fontSize: 22, color: "#fff", marginBottom: 4 }}>Bianchi, Lucia</div>
            <div style={{ fontSize: 13, color: "rgba(255,255,255,.6)", marginBottom: 24 }}>F · 72 anni · 14/05/1953</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 24 }}>
              <div style={{ padding: 14, background: "rgba(255,255,255,.04)", borderRadius: 6 }}>
                <div className="rt-mono" style={{ fontSize: 10, color: "rgba(255,255,255,.5)", letterSpacing: ".06em" }}>BARTHEL</div>
                <div style={{ fontFamily: "var(--rt-serif)", fontSize: 28, color: "#fff", marginTop: 4 }}>65<span style={{ fontSize: 14, color: "rgba(255,255,255,.5)" }}>/100</span></div>
                <div style={{ fontSize: 11, color: "#fcd34d", marginTop: 4 }}>● Dipendenza moderata</div>
              </div>
              <div style={{ padding: 14, background: "rgba(255,255,255,.04)", borderRadius: 6 }}>
                <div className="rt-mono" style={{ fontSize: 10, color: "rgba(255,255,255,.5)", letterSpacing: ".06em" }}>VAS</div>
                <div style={{ fontFamily: "var(--rt-serif)", fontSize: 28, color: "#fff", marginTop: 4 }}>4<span style={{ fontSize: 14, color: "rgba(255,255,255,.5)" }}>/10</span></div>
                <div style={{ fontSize: 11, color: "#fcd34d", marginTop: 4 }}>● Dolore moderato</div>
              </div>
            </div>
            <div style={{ borderTop: "1px solid rgba(255,255,255,.08)", paddingTop: 16, fontSize: 12, color: "rgba(255,255,255,.55)", display: "flex", justifyContent: "space-between" }}>
              <span>Somministrato {now}</span>
              <span style={{ color: "rgba(255,255,255,.8)" }}>Dr. Conti →</span>
            </div>
          </div>
        </div>
      </section>);
    }

    // editorial (default)
    return (
      <section className="rt-hero">
      <div className="rt-container">
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 80, alignItems: "end" }}>
          <div>
            <div className="rt-eyebrow">PIATTAFORMA PER LA VALUTAZIONE FUNZIONALE RIABILITATIVA</div>
            <h1 style={{ marginTop: 18 }}>
              Scale di valutazione,<br />
              <span style={{ color: "var(--rt-navy-600)", fontStyle: "italic" }}>somministrate bene.</span>
            </h1>
            <p className="lead">Rehab Tools digitalizza la compilazione delle scale validate in fisioterapia e riabilitazione: punteggio in tempo reale, validazione clinica, report pronto da consegnare al paziente</p>
            <div className="actions">
              <button className="rt-btn primary lg" onClick={onStart}>Inizia valutazione</button>
              <button className="rt-btn lg" onClick={onBrowse}>Sfoglia tutte le scale →</button>
            </div>
          </div>
          <div style={{ display: "grid", gap: 12 }}>
            <div className="rt-stat">
              <div className="num">{(window.RT_SCALES || []).length}</div>
              <div className="label">Scale disponibili</div>
            </div>
            <div className="rt-stat">
              <div className="num">~12 min</div>
              <div className="label">Tempo medio per valutazione</div>
            </div>
            <div className="rt-stat">
              <div className="num">PDF · A4</div>
              <div className="label">Report a pagina singola</div>
            </div>
          </div>
        </div>
      </div>
    </section>);
  }

  function FeaturedScales() {
    const scales = window.RT_SCALES;
    return (
      <section className="rt-container" style={{ padding: "48px 32px 64px" }}>
      <div className="rt-section-title">
        <div>
          <div className="rt-eyebrow">In evidenza</div>
          <h2 style={{ fontSize: 32, marginTop: 8 }}>Scale disponibili</h2>
        </div>
        <a href="#/scales" className="rt-btn">Tutte le scale →</a>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        {scales.map((s) =>
          <a key={s.id} href={`#/scale/${s.id}`} className="rt-card" style={{
            padding: 28, color: "inherit", display: "flex", flexDirection: "column",
            gap: 16, textDecoration: "none", transition: "all .15s"
          }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = "var(--rt-navy-600)";e.currentTarget.style.boxShadow = "var(--rt-shadow)";}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = "var(--rt-line)";e.currentTarget.style.boxShadow = "var(--rt-shadow-sm)";}}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
              <div className="rt-glyph" style={{ width: 48, height: 48, fontSize: 14 }}>{s.glyph}</div>
              <span className={`rt-tag ${s.category === "Dolore" ? "amber" : "teal"}`}>{s.category}</span>
            </div>
            <div>
              <h3 style={{ fontSize: 22, marginBottom: 6 }}>{s.name}</h3>
              <div style={{ fontSize: 13, color: "var(--rt-muted)", fontStyle: "italic" }}>{s.nameEn}</div>
            </div>
            <p style={{ fontSize: 14, color: "var(--rt-muted)", lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>
              {s.description}
            </p>
            <div style={{ display: "flex", gap: 18, fontSize: 12, color: "var(--rt-muted)", marginTop: "auto", paddingTop: 8, borderTop: "1px solid var(--rt-line-2)", flexWrap: "wrap" }}>
              <span><span className="rt-mono">{s.items}</span> {s.items === 1 ? "item" : "item"}</span>
              <span>Range <span className="rt-mono">{s.range}</span></span>
              <span>{s.duration}</span>
              <span style={{ marginLeft: "auto", color: "var(--rt-navy-700)", fontWeight: 500 }}>Somministra →</span>
            </div>
          </a>
        )}
      </div>
    </section>);
  }

  function HowItWorks() {
    const steps = [
      { n: "01", title: "Seleziona la scala", body: "Scegli la scala validata appropriata al quadro clinico del paziente." },
      { n: "02", title: "Inserisci i dati anagrafici", body: "Scegli la scala validata appropriata al quadro clinico del paziente." },
      { n: "03", title: "Compila gli item", body: "Domanda per domanda, con tooltip esplicativi e barra di progresso. Il punteggio si aggiorna in tempo reale." },
      { n: "04", title: "Esporta il report PDF", body: "Scegli dallo strumento la scala validata appropriata al quadro clinico del paziente." }
    ];

    return (
      <section style={{ background: "#fff", borderTop: "1px solid var(--rt-line)", borderBottom: "1px solid var(--rt-line)", padding: "64px 0" }}>
      <div className="rt-container">
        <div className="rt-section-title">
          <div>
            <div className="rt-eyebrow">Come funziona</div>
            <h2 style={{ fontSize: 32, marginTop: 8 }}>Quattro passaggi, un report.</h2>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {steps.map((st) =>
            <div key={st.n} className="rt-step">
              <div className="step-num">{st.n}</div>
              <h3>{st.title}</h3>
              <p>{st.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);
  }

  function Home({ variant }) {
    const [now, setNow] = useStateHome(() => new Date().toLocaleString("it-IT", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" }));
    useEffectHome(() => {
      const t = setInterval(() => setNow(new Date().toLocaleString("it-IT", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" })), 30000);
      return () => clearInterval(t);
    }, []);
    return (
      <>
      <TopBarH active="home" now={now} />
      <main style={{ flex: 1 }}>
        <HomeHero variant={variant} now={now} onStart={() => navH("/scales")} onBrowse={() => navH("/scales")} />
        <FeaturedScales />
        <HowItWorks />
      </main>
      <FooterH />
    </>);
  }

  window.RT.Home = Home;
})();