// App shell — mounts the landing page and manages the chat overlay.
// Threads the `variant` tweak through to Landing so we can flip between
// the three design directions (A · Surgical, B · Cool paper, C · Newsprint).

function App() {
  const [chatOpen, setChatOpen] = React.useState(false);
  const [tier] = React.useState({ name: 'Self-serve', price: 9 });

  // Tweaks: variant switcher. useTweaks handles the host protocol and
  // persists the choice back to the TWEAK_DEFAULTS block in index.html.
  const [t, setTweak] = window.useTweaks(window.TWEAK_DEFAULTS);
  const variantKey = t.variant || 'A';

  return (
    <>
      <window.Landing onStart={() => setChatOpen(true)} variantKey={variantKey} />
      {chatOpen && (
        <window.Chat
          onClose={() => setChatOpen(false)}
          initialTier={tier.name}
          initialPrice={tier.price}
        />
      )}
      <window.TweaksPanel title="Direction">
        <window.TweakSection label="Aesthetic direction" />
        <window.TweakRadio
          label="Variant"
          value={variantKey}
          options={['A', 'B', 'C']}
          onChange={(v) => setTweak('variant', v)}
        />
        <div style={{ fontSize: 11, lineHeight: 1.5, color: 'rgba(41,38,27,.62)', padding: '4px 0 2px' }}>
          {variantKey === 'A' && (<><b>Surgical.</b> Same cream, but the italic-coloured accent word is gone — emphasis now lives in underline rules and a masthead bar. Closest to where you started.</>)}
          {variantKey === 'B' && (<><b>Cool paper / archival.</b> Slate-tinted off-white with the original ink-blue restored — as a mark colour only (rules, dots, chip backgrounds), never as coloured italic. No inline emphasis on "move"; the line break carries the rhythm.</>)}
          {variantKey === 'C' && (<><b>Newsprint / editorial.</b> Playfair Display masthead, drop cap on the lead, ruled column grid, vol/no dateline. The boldest break from the trope.</>)}
        </div>
      </window.TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);