// Home v2 wireframes — canvas app
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "light"
}/*EDITMODE-END*/;

function HomeV2App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const t = WF_TOKENS[tw.mode] || WF_TOKENS.light;
  const F = WF_FONTS;

  const canvasBg = tw.mode === 'dark' ? '#1a1a1c' : '#e6e6e6';
  const canvasFg = tw.mode === 'dark' ? '#ededed' : '#1a1a1a';

  return (
    <div style={{
      position: 'fixed', inset: 0,
      background: canvasBg, color: canvasFg,
      fontFamily: F.sans,
    }}>
      <style>{`
        body { margin: 0; }
        ::-webkit-scrollbar { width: 0; height: 0; }
        .dc-canvas { background: ${canvasBg} !important; }
      `}</style>

      <DesignCanvas>
        <DCSection
          id="intro"
          title="Home dashboard · utility re-think"
          subtitle="Four wireframes leaning utility — countdown-first, log-action-loud, progress as data not decoration"
        >
          <DCArtboard id="brief" label="Brief" width={680} height={620}>
            <BriefCard t={t}/>
          </DCArtboard>
        </DCSection>

        <DCSection
          id="v2-options"
          title="Four directions"
          subtitle="Each solves: see next dose, log it, see progress"
        >
          <DCArtboard id="home-v2-a" label="A · Cockpit" width={420} height={870}>
            <ArtboardWrap><WFHomeV2A t={t}/></ArtboardWrap>
          </DCArtboard>
          <NoteCard t={t} title="A · Cockpit" tagline="One countdown, one button."
            points={[
              { k: 'NEXT DOSE', v: 'Lives at the top in tabular mono — no decorative ring, no serif headline. The clock IS the headline.' },
              { k: 'LOG ACTION', v: 'Full-width inverted black button with sub-label naming the dose. 56px tall hit target. Cannot be missed.' },
              { k: 'PROGRESS', v: '7-day strip below the action — filled square = logged, dashed = missed, ghost = rest, today gets an outline ring.' },
              { k: 'TONE', v: 'Most utilitarian of the four. Feels like a kitchen timer + clipboard.' },
              { k: 'TRADE-OFF', v: 'Single-compound first. Multi-compound users have to scroll into the Today queue.' },
            ]}
          />

          <DCArtboard id="home-v2-b" label="B · Schedule rail" width={420} height={870}>
            <ArtboardWrap><WFHomeV2B t={t}/></ArtboardWrap>
          </DCArtboard>
          <NoteCard t={t} title="B · Schedule rail" tagline="Today is a vertical timeline."
            points={[
              { k: 'NEXT DOSE', v: 'Sits on a vertical hour rail. The horizontal NOW line crosses the rail in real time — utterly unambiguous where you are.' },
              { k: 'LOG ACTION', v: 'Sticky bar at the bottom of the screen. Always shows the next pending dose. Stays put while you scroll the rail.' },
              { k: 'PROGRESS', v: '28-day adherence dot grid above the rail. Filled = done, dashed = missed, outline = today, ghost = rest day. Pattern over numbers.' },
              { k: 'TONE', v: 'Calendar-utility. Closest to a clinical day-planner.' },
              { k: 'TRADE-OFF', v: 'Strong for protocol-heavy users; lighter for someone with just one weekly dose.' },
            ]}
          />

          <DCArtboard id="home-v2-c" label="C · Status card" width={420} height={870}>
            <ArtboardWrap><WFHomeV2C t={t}/></ArtboardWrap>
          </DCArtboard>
          <NoteCard t={t} title="C · Status card" tagline="One hero card that morphs by state."
            points={[
              { k: 'NEXT DOSE', v: 'Inverted black hero card holds the countdown, dose, last-injection time, and an inner progress bar showing "% into the dosing window".' },
              { k: 'LOG ACTION', v: 'CTA lives inside the same card — invert-on-invert so it pops against the black. State-aware copy: "Log this dose early" / "Log dose now" / "Logged ✓".' },
              { k: 'PROGRESS', v: 'Two layers: the inner progress bar (within-window), plus a 7-day strip + 3-tile vitals row (streak / adherence / vial).' },
              { k: 'TONE', v: 'Cleanest single-glance hierarchy. Card is the app.' },
              { k: 'TRADE-OFF', v: 'High visual weight on dark; needs care in dark mode.' },
            ]}
          />

          <DCArtboard id="home-v2-d" label="D · Mission control" width={420} height={870}>
            <ArtboardWrap><WFHomeV2D t={t}/></ArtboardWrap>
          </DCArtboard>
          <NoteCard t={t} title="D · Mission control" tagline="Built for multi-compound users."
            points={[
              { k: 'NEXT DOSE', v: 'Compact countdown top-left + Log button top-right. The "next" is whatever is due across all compounds.' },
              { k: 'LOG ACTION', v: 'Two places: the hero button (logs the next-due compound) AND a per-row Log → button on any compound that is currently due.' },
              { k: 'PROGRESS', v: 'Per-compound decay sparklines in each row + 14-day adherence bar chart + weekly streak strip. Density over decoration.' },
              { k: 'TONE', v: 'Ticker / cockpit / Bloomberg-terminal. Power-user view.' },
              { k: 'TRADE-OFF', v: 'Overwhelming for a brand-new user with one peptide; great for somebody running 3.' },
            ]}
          />
        </DCSection>

        <DCSection id="system" title="System notes" subtitle="Shared across all four">
          <DCArtboard id="system-notes" label="Vocabulary" width={680} height={520}>
            <SystemNotes t={t}/>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio
            label="Mode"
            value={tw.mode}
            options={[{ value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }]}
            onChange={(v) => setTweak('mode', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function ArtboardWrap({ children }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 12, boxSizing: 'border-box',
    }}>
      {children}
    </div>
  );
}

function BriefCard({ t }) {
  const F = WF_FONTS;
  return (
    <div style={{
      width: '100%', height: '100%', padding: 36, boxSizing: 'border-box',
      background: t.surface, border: '1px solid ' + t.border, borderRadius: 16,
      color: t.text, display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 1.4, color: t.textMuted, textTransform: 'uppercase' }}>Brief</div>
      <div style={{ fontFamily: F.serif, fontSize: 38, letterSpacing: -1, marginTop: 4, lineHeight: 1.05, fontWeight: 400 }}>
        Less art project. More utility.
      </div>
      <div style={{ height: 1.5, background: t.text, margin: '20px 0' }}/>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px 36px', flex: 1 }}>
        <div>
          <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.2, color: t.textMuted, textTransform: 'uppercase' }}>Three jobs</div>
          <ol style={{ margin: '10px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, lineHeight: 1.6 }}>
            <li style={{ paddingLeft: 24, position: 'relative', marginBottom: 10 }}>
              <span style={{ position: 'absolute', left: 0, fontFamily: F.mono, fontSize: 11, color: t.textMuted }}>01</span>
              Log a dose in one tap.
            </li>
            <li style={{ paddingLeft: 24, position: 'relative', marginBottom: 10 }}>
              <span style={{ position: 'absolute', left: 0, fontFamily: F.mono, fontSize: 11, color: t.textMuted }}>02</span>
              See exactly when the next dose is, in human terms.
            </li>
            <li style={{ paddingLeft: 24, position: 'relative' }}>
              <span style={{ position: 'absolute', left: 0, fontFamily: F.mono, fontSize: 11, color: t.textMuted }}>03</span>
              See progress as real data — not poetry.
            </li>
          </ol>
        </div>
        <div>
          <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.2, color: t.textMuted, textTransform: 'uppercase' }}>What changed</div>
          <ul style={{ margin: '10px 0 0', padding: '0 0 0 16px', fontSize: 13.5, lineHeight: 1.6 }}>
            <li>Serif headlines demoted — mono numerals lead.</li>
            <li>Decorative 240px ring dropped from every variant.</li>
            <li>Log button always reachable — never below the fold.</li>
            <li>Progress is a chart, grid, or strip — not a sentence.</li>
            <li>Site rotation / body-map moved off Home (lives in Track).</li>
          </ul>
        </div>
      </div>
      <div style={{
        marginTop: 24, padding: 16, background: t.surfaceAlt, borderRadius: 12,
        fontFamily: F.mono, fontSize: 11.5, letterSpacing: 0.3, lineHeight: 1.5, color: t.textMuted,
      }}>
        ⓘ Each direction picks a different opinion about <strong style={{ color: t.text }}>which question matters most</strong> on Home —
        "when is it" (A), "how does today flow" (B), "what's the single most important thing right now" (C), or "what is happening across all my compounds" (D).
      </div>
    </div>
  );
}

function NoteCard({ t, title, tagline, points }) {
  const F = WF_FONTS;
  return (
    <div style={{
      width: 320, height: 870, padding: 24, boxSizing: 'border-box',
      background: t.surface, border: '1px solid ' + t.border, borderRadius: 14,
      color: t.text, display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, color: t.textMuted, textTransform: 'uppercase' }}>Direction</div>
      <div style={{ fontFamily: F.serif, fontSize: 26, letterSpacing: -0.5, marginTop: 4, lineHeight: 1.1 }}>{title}</div>
      <div style={{ fontFamily: F.serif, fontSize: 16, fontStyle: 'italic', color: t.textMuted, marginTop: 2 }}>{tagline}</div>
      <div style={{ height: 1.5, background: t.text, margin: '16px 0 4px' }}/>
      <div style={{ flex: 1, overflow: 'auto' }}>
        {points.map((p, i) => (
          <div key={i} style={{ padding: '12px 0', borderBottom: i < points.length - 1 ? '1px solid ' + t.border : 'none' }}>
            <span style={{
              display: 'inline-block', padding: '3px 7px', borderRadius: 4,
              background: t.text, color: t.inverseText,
              fontFamily: F.mono, fontSize: 9.5, fontWeight: 700, letterSpacing: 0.6,
              marginBottom: 7,
            }}>{p.k}</span>
            <div style={{ fontSize: 12.5, lineHeight: 1.5, color: t.text }}>{p.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SystemNotes({ t }) {
  const F = WF_FONTS;
  const items = [
    { k: 'Type', v: 'Manrope sans + JetBrains Mono. Serif (Instrument) demoted to micro-labels only — no more serif headlines on Home.' },
    { k: 'Numerals', v: 'All numerals use tabular-nums mono. Time, doses, percentages, days — they line up vertically.' },
    { k: 'Action color', v: 'Primary action = solid ink black with inverse text. Always at least 48px tall. Sub-label spelled out in mono.' },
    { k: 'Progress vis', v: 'Three preferred forms: 7-day strip (week), 28-cell dot grid (month), 14-bar chart (sparkline). No rings.' },
    { k: 'States', v: 'Dose states share one vocabulary across all directions: DONE (filled), DUE (inverted card), SCHEDULED (soft), MISSED (dashed), REST (ghost).' },
    { k: 'Cards', v: '10–12px radius (down from 22). Borders 1px, no shadows. Inverted black card reserved for the single most important moment.' },
    { k: 'Removed', v: 'Decorative 240px ring · serif italic body copy · "How are you today?" hero check-in · body-map on Home (moves to Track).' },
    { k: 'Kept', v: 'Tab bar · streak/level chip · 28-day adherence concept · active-level sparkline (only in dense variants).' },
  ];
  return (
    <div style={{ width: '100%', height: '100%', padding: 32, boxSizing: 'border-box', background: t.surface, color: t.text, border: '1px solid ' + t.border, borderRadius: 16 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ fontFamily: F.serif, fontSize: 36, letterSpacing: -0.8, fontWeight: 400 }}>System notes</div>
        <div style={{ fontFamily: F.mono, fontSize: 11, color: t.textMuted, letterSpacing: 1 }}>SHARED · A B C D</div>
      </div>
      <div style={{ height: 1.5, background: t.text, margin: '16px 0' }}/>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 28px' }}>
        {items.map(({k, v}) => (
          <div key={k} style={{ padding: '8px 0', borderBottom: '1px solid ' + t.border }}>
            <div style={{ fontFamily: F.mono, fontSize: 10, color: t.textMuted, letterSpacing: 1, textTransform: 'uppercase' }}>{k}</div>
            <div style={{ fontSize: 12.5, lineHeight: 1.45, marginTop: 4 }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

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