// Final sections — Manifesto/closing + App entry

function Manifesto({ palette }) {
  return (
    <section style={{ background: palette.accent, color: palette.paper, padding: '140px 0', position:'relative', overflow:'hidden' }}>
      <div className="page">
        <div className="mono upper tiny" style={{ letterSpacing:'0.24em', color: `${palette.paper}aa` }}>§ 09 — closing</div>
        <div style={{ height: 32 }} />
        <div className="serif" style={{ fontSize: 88, lineHeight: 0.98, fontWeight: 400, letterSpacing:'-0.03em', maxWidth: 980 }}>
          We are not selling <em>magic</em>. We are selling <em>attention</em> — ten minutes where someone looks at your cup and tells you what they see.
        </div>
        <div style={{ height: 60 }} />
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 48, maxWidth: 1000 }}>
          <div style={{ fontSize: 14.5, lineHeight: 1.65 }}>
            <div className="mono upper tiny" style={{ letterSpacing:'0.24em', color: palette.accent2, marginBottom: 10 }}>on secularism</div>
            We don't need you to believe. The Turks who invented this were mostly suspicious of it too. It's a ritual, it's funny, occasionally it's uncomfortably accurate.
          </div>
          <div style={{ fontSize: 14.5, lineHeight: 1.65 }}>
            <div className="mono upper tiny" style={{ letterSpacing:'0.24em', color: palette.accent2, marginBottom: 10 }}>on the music</div>
            Altın Gün at lunch, Gaye Su Akyol after dark, Selda Bağcan when nobody's looking at their phone. Anadolu psych, always.
          </div>
          <div style={{ fontSize: 14.5, lineHeight: 1.65 }}>
            <div className="mono upper tiny" style={{ letterSpacing:'0.24em', color: palette.accent2, marginBottom: 10 }}>on amsterdam</div>
            We are here because Amsterdam already has a hundred great cafés and not one place that will read your cup without being weird about it.
          </div>
        </div>

        {/* giant â as background */}
        <div className="display" style={{
          position:'absolute', right: -80, bottom: -220, fontSize: 720, lineHeight: 1,
          color: palette.ink, opacity: 0.14, letterSpacing: '-0.05em', pointerEvents:'none', userSelect:'none'
        }}>â</div>
      </div>
    </section>
  );
}

function Colophon({ palette }) {
  return (
    <section style={{ background: palette.bg, color: palette.ink, padding: '80px 0 60px' }}>
      <div className="page">
        <div className="rule" style={{ background: palette.ink, opacity: 0.3 }} />
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap: 32, padding: '28px 0', alignItems:'start' }}>
          <div>
            <div className="display" style={{ fontSize: 32, letterSpacing:'-0.03em', lineHeight: 0.9 }}>lâl</div>
            <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.22em', marginTop: 8 }}>fal evi · amsterdam</div>
          </div>
          <div className="mono tiny" style={{ color: palette.muted, lineHeight: 1.8 }}>
            <div className="upper" style={{ color: palette.ink, letterSpacing:'0.2em', marginBottom: 8 }}>brand book</div>
            volume 01 · spring 2026<br/>
            internal working document<br/>
            not for distribution yet
          </div>
          <div className="mono tiny" style={{ color: palette.muted, lineHeight: 1.8 }}>
            <div className="upper" style={{ color: palette.ink, letterSpacing:'0.2em', marginBottom: 8 }}>type</div>
            Noto Serif Display<br/>
            DM Sans<br/>
            JetBrains Mono
          </div>
          <div className="mono tiny" style={{ color: palette.muted, lineHeight: 1.8 }}>
            <div className="upper" style={{ color: palette.ink, letterSpacing:'0.2em', marginBottom: 8 }}>contact</div>
            hello@lal.cafe<br/>
            prinsengracht 419<br/>
            1016 HM amsterdam
          </div>
        </div>
        <div className="rule" style={{ background: palette.ink, opacity: 0.3 }} />
        <div className="mono tiny upper flex between" style={{ color: palette.muted, letterSpacing:'0.22em', padding: '14px 0' }}>
          <span>© 2026 lâl fal evi</span>
          <span>fig. 24 — end of book</span>
          <span><span className="display" style={{ fontSize: 14, letterSpacing:'-0.04em' }}>â</span></span>
        </div>
      </div>
    </section>
  );
}

function App() {
  const [paletteKey, setPaletteKey] = React.useState(
    (window.TWEAK_DEFAULTS && window.TWEAK_DEFAULTS.palette) || 'nazar'
  );
  const [editOn, setEditOn] = React.useState(false);

  const palette = PALETTES[paletteKey];

  React.useEffect(() => { applyPalette(palette); }, [palette]);

  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setEditOn(true);
      else if (e.data.type === '__deactivate_edit_mode') setEditOn(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const setPalette = (k) => {
    setPaletteKey(k);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { palette: k } }, '*');
  };

  return (
    <div>
      <Cover palette={palette} />
      <Naming palette={palette} />
      <Positioning palette={palette} />
      <LogoSystem palette={palette} />
      <Typography palette={palette} />
      <Palette palette={palette} />
      <Voice palette={palette} />
      <Motifs palette={palette} />
      <Applications palette={palette} />
      <Manifesto palette={palette} />
      <Colophon palette={palette} />
      <Tweaks palette={paletteKey} setPalette={setPalette} editOn={editOn} />
    </div>
  );
}

window.Manifesto = Manifesto;
window.Colophon = Colophon;
window.App = App;

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