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

function HomeV3App() {
  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 · simplified"
          subtitle="Each direction commits to one answer. Removed everything that wasn't earning its place."
        >
          <DCArtboard id="brief" label="What's gone" width={620} height={520}>
            <BriefV3 t={t}/>
          </DCArtboard>
        </DCSection>

        <DCSection
          id="s-options"
          title="Four simplified directions"
        >
          <DCArtboard id="home-s1" label="S1 · Time" width={420} height={870}>
            <ArtboardWrap><WFHomeS1 t={t}/></ArtboardWrap>
          </DCArtboard>
          <Caption t={t} title="S1 · Time" answer="When is the next dose?"
            body="A countdown. A dose name. A button. Vertically centered. Nothing scrolls — there is nothing more to scroll to."
            tradeoff="No glance at progress. Streak only as a tiny label."
          />

          <DCArtboard id="home-s2" label="S2 · Today" width={420} height={870}>
            <ArtboardWrap><WFHomeS2 t={t}/></ArtboardWrap>
          </DCArtboard>
          <Caption t={t} title="S2 · Today" answer="What do I need to do today?"
            body="A to-do list. Tap a row to log it. Done rows fade. Progress = how many checks. That's it."
            tradeoff="Doesn't show countdown. Doesn't show level. Doesn't show vial."
          />

          <DCArtboard id="home-s3" label="S3 · Sentence" width={420} height={870}>
            <ArtboardWrap><WFHomeS3 t={t}/></ArtboardWrap>
          </DCArtboard>
          <Caption t={t} title="S3 · Sentence" answer="A single declarative status."
            body="One sentence at the top. One button. One small 7-day strip at the bottom. The hierarchy is the message."
            tradeoff="Less of a 'dashboard' feel — closer to a notification you can act on."
          />

          <DCArtboard id="home-s4" label="S4 · Last / Next" width={420} height={870}>
            <ArtboardWrap><WFHomeS4 t={t}/></ArtboardWrap>
          </DCArtboard>
          <Caption t={t} title="S4 · Last / Next" answer="Two times. Above and below the line."
            body="A 50/50 split. Last dose (muted) above, next dose (full ink) below. The eye is pulled to NEXT by weight alone."
            tradeoff="No list, no chart, no streak. Reads almost like a clock app."
          />
        </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 BriefV3({ 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' }}>Less, but louder</div>
      <div style={{ fontFamily: F.serif, fontSize: 42, letterSpacing: -1, marginTop: 4, lineHeight: 1.02, fontWeight: 400 }}>
        Cut everything that<br/>wasn't earning its place.
      </div>
      <div style={{ height: 1.5, background: t.text, margin: '20px 0' }}/>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 36px', flex: 1 }}>
        <div>
          <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.2, color: t.textMuted, textTransform: 'uppercase', marginBottom: 10 }}>Removed</div>
          <ul style={{ margin: 0, padding: '0 0 0 16px', fontSize: 13.5, lineHeight: 1.7, color: t.text }}>
            <li>Ticker headers, stat strips</li>
            <li>Adherence + decay charts on Home</li>
            <li>Body map / site rotation</li>
            <li>Compound grid for multi-peptide users</li>
            <li>"How are you today?" check-in card</li>
            <li>Vial card, badge teaser, achievement nudges</li>
            <li>Secondary "+ past dose" / "skip" buttons</li>
            <li>Decorative ring, serif italic headlines</li>
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.2, color: t.textMuted, textTransform: 'uppercase', marginBottom: 10 }}>Kept</div>
          <ul style={{ margin: 0, padding: '0 0 0 16px', fontSize: 13.5, lineHeight: 1.7, color: t.text }}>
            <li>The countdown to next dose</li>
            <li>One ink-black primary button</li>
            <li>A whisper of streak / progress</li>
            <li>The tab bar (entry to everything else)</li>
          </ul>
        </div>
      </div>

      <div style={{
        marginTop: 22, padding: 14, background: t.surfaceAlt, borderRadius: 12,
        fontFamily: F.mono, fontSize: 11.5, letterSpacing: 0.3, lineHeight: 1.5, color: t.textMuted,
      }}>
        ⓘ Everything cut from Home <strong style={{ color: t.text }}>still exists</strong> — it just lives in Track, Profile, or the dose-detail screen. Home becomes a launchpad, not a dashboard.
      </div>
    </div>
  );
}

function Caption({ t, title, answer, body, tradeoff }) {
  const F = WF_FONTS;
  return (
    <div style={{
      width: 260, height: 870, padding: 24, boxSizing: 'border-box',
      background: 'transparent',
      color: t.text, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16,
    }}>
      <div>
        <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, color: t.textMuted, textTransform: 'uppercase' }}>Direction</div>
        <div style={{ fontFamily: F.serif, fontSize: 32, letterSpacing: -0.8, marginTop: 4, lineHeight: 1.05 }}>{title}</div>
      </div>
      <div style={{ height: 1.5, background: t.text, width: 32 }}/>
      <div>
        <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.2, color: t.textMuted, textTransform: 'uppercase', marginBottom: 6 }}>Answers</div>
        <div style={{ fontFamily: F.serif, fontSize: 19, fontStyle: 'italic', lineHeight: 1.3, color: t.text }}>{answer}</div>
      </div>
      <div style={{ fontSize: 13, lineHeight: 1.6, color: t.text }}>{body}</div>
      <div style={{
        marginTop: 'auto', padding: '12px 0', borderTop: '1px solid ' + t.border,
        fontFamily: F.mono, fontSize: 11, letterSpacing: 0.3, color: t.textMuted, lineHeight: 1.55,
      }}>
        <span style={{ color: t.textFaint, letterSpacing: 1.2, textTransform: 'uppercase', fontSize: 10 }}>Trade-off · </span>
        {tradeoff}
      </div>
    </div>
  );
}

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