/* v2 Screen 1 — Welcome / Session Overview
 * Refinements: clearer hero, single baseline-rule signature,
 * fewer rows, generous spacing, coherent header.
 */
const V2Screen1 = () => (
  <div className="v2 phone">
    <V2StatusBar />
    <div className="phone-scroll">
      <V2Header />

      {/* Opener */}
      <div className="opener">
        <div className="eyebrow" style={{ marginBottom: 12 }}>Session overview</div>
        <h1 className="h1">
          Embouchure monitoring,<br/>
          <span style={{ color: "var(--v2-ink-3)", fontStyle: "italic" }}>relative to your own baseline.</span>
        </h1>
      </div>

      {/* Session card */}
      <div style={{ padding: "0 var(--v2-s-5)" }}>
        <div className="card">
          <V2KV label="Session type" value="Follow-up" hint="Baseline · 11 Mar 2026" />
          <hr className="hr" />
          <V2KV label="Instrument"   value="Trumpet (Bb)" hint="Mouthpiece 3C" />
          <hr className="hr" />
          <V2KV label="Battery"      value="6 tasks · ~10 min" hint="Camera capture + 2 self-reports" />
          <hr className="hr" />
          <V2KV label="Last session" value="22 Apr · 3 days ago" hint="Fatigue 2/10 · recovered" />
        </div>
      </div>

      {/* Baseline-rule signature */}
      <div style={{ padding: "var(--v2-s-5) var(--v2-s-5) 0" }}>
        <V2BaselineRule>
          Results are interpreted against your prior recordings, not against other players. OrisTrack tracks change over time; it does not diagnose.
        </V2BaselineRule>
      </div>

      <div style={{ height: 160 }} />
    </div>

    <div className="phone-bottom-cta">
      <button className="btn">
        Begin assessment <V2Arrow />
      </button>
      <div className="cap" style={{ textAlign: "center", marginTop: 10 }}>
        Camera access required · audio optional
      </div>
    </div>

    <V2TabBar active="session" />
  </div>
);

const V2KV = ({ label, value, hint }) => (
  <div style={{
    display: "grid",
    gridTemplateColumns: "1fr auto",
    alignItems: "center",
    gap: "var(--v2-s-4)",
    padding: "var(--v2-s-4) var(--v2-s-5)",
  }}>
    <div>
      <div className="eyebrow" style={{ marginBottom: 4 }}>{label}</div>
      <div className="h3">{value}</div>
    </div>
    {hint && (
      <div className="cap" style={{ textAlign: "right", fontSize: 11, lineHeight: 1.45, maxWidth: 150 }}>
        {hint}
      </div>
    )}
  </div>
);

window.V2Screen1 = V2Screen1;