// Logo system + Typography + Palette

function LogoSystem({ palette }) {
  return (
    <section style={{ background: palette.bg, color: palette.ink, padding: '120px 0' }}>
      <div className="page">
        <SectionHead num="03" label="wordmark system" palette={palette} />

        <div style={{ marginTop: 64 }}>
          {/* Primary */}
          <div style={{ display:'grid', gridTemplateColumns:'280px 1fr', gap: 64, alignItems:'start' }}>
            <div>
              <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em' }}>03.01 — primary</div>
              <div className="serif" style={{ fontSize: 28, marginTop: 10, letterSpacing:'-0.01em' }}>The circumflex <em>is</em> the brand.</div>
              <div style={{ fontSize: 14, lineHeight: 1.6, marginTop: 14, color: palette.muted, maxWidth: 240 }}>
                Set in Noto Serif Display, Medium, tracked −35. The â hovers above the baseline like a brow above an eye. Don't redraw it. Don't replace the circumflex with anything cute.
              </div>
            </div>
            <div style={{ background: palette.paper, padding: 64, border: `1px solid ${palette.ink}20`, position:'relative' }}>
              <Wordmark size={300} color={palette.ink} />
              <div className="mono tiny upper" style={{ position:'absolute', top: 16, right: 20, color: palette.muted, letterSpacing:'0.22em' }}>primary / horizontal</div>
              <ConstructionLines palette={palette} />
            </div>
          </div>

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

          {/* Variants grid */}
          <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em', marginBottom: 24 }}>03.02 — variations</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 16 }}>
            <MarkCell palette={palette} label="stacked / signage">
              <Wordmark size={80} variant="stacked" color={palette.ink} />
            </MarkCell>
            <MarkCell palette={palette} label="pupil / alt">
              <Wordmark size={110} variant="pupil" color={palette.ink} />
            </MarkCell>
            <MarkCell palette={palette} label="nazar / icon" bg={palette.paper}>
              <NazarMark size={130} palette={palette} />
            </MarkCell>
            <MarkCell palette={palette} label="monogram / stamp">
              <Monogram size={120} palette={palette} />
            </MarkCell>
          </div>

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

          {/* Inverted + on color */}
          <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em', marginBottom: 24 }}>03.03 — color treatment</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 16 }}>
            <div style={{ background: palette.ink, padding: 64, textAlign:'center' }}>
              <Wordmark size={120} color={palette.paper} />
              <div className="mono tiny upper" style={{ marginTop: 16, color: `${palette.paper}80`, letterSpacing:'0.22em' }}>on ink</div>
            </div>
            <div style={{ background: palette.accent, padding: 64, textAlign:'center' }}>
              <Wordmark size={120} color={palette.paper} />
              <div className="mono tiny upper" style={{ marginTop: 16, color: `${palette.paper}90`, letterSpacing:'0.22em' }}>on accent</div>
            </div>
            <div style={{ background: palette.accent3, padding: 64, textAlign:'center' }}>
              <Wordmark size={120} color={palette.paper} />
              <div className="mono tiny upper" style={{ marginTop: 16, color: `${palette.paper}90`, letterSpacing:'0.22em' }}>on tulip red</div>
            </div>
          </div>

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

          {/* Don'ts */}
          <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em', marginBottom: 24 }}>03.04 — don't</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 16 }}>
            <DontCell palette={palette} note="don't gradient">
              <div className="display" style={{ fontSize: 80, background: `linear-gradient(90deg, ${palette.accent}, ${palette.accent3})`, WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', letterSpacing:'-0.03em' }}>lâl</div>
            </DontCell>
            <DontCell palette={palette} note="don't stretch">
              <div className="display" style={{ fontSize: 80, transform:'scaleX(1.6)', transformOrigin:'left center', letterSpacing:'-0.03em' }}>lâl</div>
            </DontCell>
            <DontCell palette={palette} note="don't decorate the â">
              <div className="display" style={{ fontSize: 80, letterSpacing:'-0.03em' }}>l✦l</div>
            </DontCell>
            <DontCell palette={palette} note="don't use sans">
              <div style={{ fontFamily:'DM Sans', fontWeight: 700, fontSize: 80, letterSpacing:'-0.04em' }}>lâl</div>
            </DontCell>
          </div>
        </div>
      </div>
    </section>
  );
}

function ConstructionLines({ palette }) {
  // decorative x-height / baseline markings
  return (
    <svg width="100%" height="100%" style={{ position:'absolute', inset:0, pointerEvents:'none', opacity:0.25 }}>
      <line x1="0" y1="50%" x2="100%" y2="50%" stroke={palette.ink} strokeWidth="0.5" strokeDasharray="2 4"/>
      <line x1="64px" y1="0" x2="64px" y2="100%" stroke={palette.ink} strokeWidth="0.5" strokeDasharray="2 4"/>
      <line x1="calc(100% - 64px)" y1="0" x2="calc(100% - 64px)" y2="100%" stroke={palette.ink} strokeWidth="0.5" strokeDasharray="2 4"/>
    </svg>
  );
}

function MarkCell({ children, label, palette, bg }) {
  return (
    <div style={{ background: bg || palette.paper, border: `1px solid ${palette.ink}20`, padding: 32, minHeight: 220, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center' }}>{children}</div>
      <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.2em', marginTop: 16 }}>{label}</div>
    </div>
  );
}

function DontCell({ children, note, palette }) {
  return (
    <div style={{ background: palette.paper, border: `1px solid ${palette.ink}20`, padding: 24, minHeight: 160, display:'flex', flexDirection:'column', justifyContent:'space-between', position:'relative' }}>
      <div style={{ position:'absolute', top: 10, right: 12, width: 20, height: 20, borderRadius:'50%', background: palette.accent3, color: palette.paper, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 12, fontWeight: 700 }}>×</div>
      <div style={{ flex:1, display:'flex', alignItems:'center' }}>{children}</div>
      <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.18em' }}>{note}</div>
    </div>
  );
}

function Typography({ palette }) {
  return (
    <section style={{ background: palette.paper, color: palette.ink, padding: '120px 0' }}>
      <div className="page">
        <SectionHead num="04" label="typography" palette={palette} />

        <div style={{ marginTop: 64, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80 }}>
          {/* Display */}
          <div>
            <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em' }}>04.01 — display</div>
            <div style={{ marginTop: 12, display:'flex', alignItems:'baseline', gap: 18 }}>
              <div className="display" style={{ fontSize: 120, lineHeight: 0.9, fontWeight: 500, letterSpacing:'-0.03em' }}>Aa</div>
              <div className="display" style={{ fontSize: 60, fontWeight: 500 }}>â</div>
            </div>
            <div className="serif" style={{ fontSize: 28, marginTop: 24, lineHeight: 1.2, letterSpacing:'-0.01em' }}>Noto Serif Display</div>
            <div className="mono tiny upper" style={{ color: palette.muted, marginTop: 6, letterSpacing:'0.2em' }}>headlines · wordmark · menus</div>
            <div style={{ marginTop: 24, fontSize: 14, lineHeight: 1.7, color: palette.ink, maxWidth: 380 }}>
              Used for every headline, every price, every card name on the tarot menu. Tracked tight. Sometimes italic, when we mean it.
            </div>
            <div className="rule" style={{ background: palette.ink, opacity: 0.2, margin: '24px 0' }} />
            <div className="serif" style={{ fontSize: 48, lineHeight: 1.1, letterSpacing:'-0.02em' }}>
              The Fool, <em>upside down</em>.
            </div>
          </div>

          {/* Body */}
          <div>
            <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em' }}>04.02 — text</div>
            <div style={{ marginTop: 12, display:'flex', alignItems:'baseline', gap: 18 }}>
              <div style={{ fontFamily:'DM Sans', fontSize: 120, lineHeight: 0.9, fontWeight: 500, letterSpacing:'-0.04em' }}>Aa</div>
              <div style={{ fontFamily:'DM Sans', fontSize: 60, fontWeight: 400 }}>â</div>
            </div>
            <div className="serif" style={{ fontSize: 28, marginTop: 24, lineHeight: 1.2, letterSpacing:'-0.01em' }}>DM Sans</div>
            <div className="mono tiny upper" style={{ color: palette.muted, marginTop: 6, letterSpacing:'0.2em' }}>body · ui · wayfinding</div>
            <div style={{ marginTop: 24, fontSize: 14, lineHeight: 1.7, color: palette.ink, maxWidth: 380 }}>
              A quiet grotesk for everything that isn't a headline. Neutral enough to let the serif and the Turkish diacritics do the emotional labour.
            </div>
            <div className="rule" style={{ background: palette.ink, opacity: 0.2, margin: '24px 0' }} />
            <div style={{ fontFamily:'DM Sans', fontSize: 15, lineHeight: 1.6 }}>
              Your coffee arrives with a saucer and a glass of water. Drink it unhurriedly. When the grounds settle, place the saucer on top, make a wish, and flip — counter-clockwise, toward the heart.
            </div>
          </div>
        </div>

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

        {/* Mono + type scale */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.5fr', gap: 80 }}>
          <div>
            <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em' }}>04.03 — accent</div>
            <div className="mono" style={{ fontSize: 80, marginTop: 18, lineHeight: 1 }}>Aa â</div>
            <div className="serif" style={{ fontSize: 24, marginTop: 20 }}>JetBrains Mono</div>
            <div className="mono tiny upper" style={{ color: palette.muted, marginTop: 6, letterSpacing:'0.2em' }}>metadata · captions · receipts</div>
            <div className="mono small" style={{ marginTop: 24, lineHeight: 1.7, color: palette.ink }}>
              // opens 09:00 — 23:00<br/>
              // prinsengracht 419, 1016 HM<br/>
              // readings by appointment
            </div>
          </div>
          <div>
            <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em', marginBottom: 14 }}>04.04 — scale</div>
            {[
              ['Display / 96', 96, 'serif'],
              ['H1 / 56', 56, 'serif'],
              ['H2 / 32', 32, 'serif'],
              ['Body / 16', 16, 'sans'],
              ['Caption / 12', 12, 'mono upper'],
            ].map(([l, s, cls]) => (
              <div key={l} style={{ display:'grid', gridTemplateColumns:'140px 1fr', alignItems:'baseline', padding: '14px 0', borderTop: `1px solid ${palette.ink}20` }}>
                <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.2em' }}>{l}</div>
                <div className={cls === 'sans' ? '' : cls} style={{ fontSize: s, lineHeight: 1.1, letterSpacing: cls === 'serif' ? '-0.02em' : undefined }}>
                  kahve falı iyi gelir
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Palette({ palette }) {
  const swatches = [
    { k:'ink',     hex: palette.ink,     name:'İstanbul Ink',     use:'primary text, wordmark' },
    { k:'paper',   hex: palette.paper,   name:'Cup Paper',         use:'surfaces, backgrounds' },
    { k:'bg',      hex: palette.bg,      name:'Saucer',            use:'page, default bg' },
    { k:'accent',  hex: palette.accent,  name:'Nazar',             use:'primary accent, ink on color' },
    { k:'accent2', hex: palette.accent2, name:'Brass',             use:'sparingly — highlights, rules' },
    { k:'accent3', hex: palette.accent3, name:'Tulip',             use:'occasion, print, tarot backs' },
  ];
  return (
    <section style={{ background: palette.bg, color: palette.ink, padding: '120px 0' }}>
      <div className="page">
        <SectionHead num="05" label="palette" palette={palette} />

        <div style={{ marginTop: 48, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 32 }}>
          {Object.entries(PALETTES).map(([key, p]) => (
            <div key={key} style={{ border: `1px solid ${palette.ink}20`, padding: 24, background: palette.paper }}>
              <div className="flex between" style={{ alignItems:'baseline' }}>
                <div className="serif" style={{ fontSize: 22, letterSpacing:'-0.01em' }}>{p.name}</div>
                <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.2em' }}>0{Object.keys(PALETTES).indexOf(key)+1}</div>
              </div>
              <div style={{ fontSize: 13, color: palette.muted, marginTop: 4, lineHeight: 1.5, minHeight: 44 }}>{p.desc}</div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap: 4, marginTop: 20 }}>
                {[p.ink, p.accent, p.accent2, p.accent3, p.paper].map((c, i) => (
                  <div key={i} style={{ height: 56, background: c, border: `1px solid ${palette.ink}10` }} />
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="mono tiny upper" style={{ color: palette.muted, marginTop: 14, letterSpacing:'0.2em' }}>
          swap live via the tweaks panel — current: {PALETTES[Object.keys(PALETTES).find(k => PALETTES[k] === palette)]?.name}
        </div>

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

        {/* Active palette breakdown */}
        <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em' }}>05.02 — active system</div>
        <div style={{ marginTop: 20, display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap: 8 }}>
          {swatches.map(s => (
            <div key={s.k} style={{ border: `1px solid ${palette.ink}20` }}>
              <div style={{ background: s.hex, height: 180, borderBottom: `1px solid ${palette.ink}10` }} />
              <div style={{ padding: 14, background: palette.paper }}>
                <div className="serif" style={{ fontSize: 15, letterSpacing:'-0.01em' }}>{s.name}</div>
                <div className="mono tiny" style={{ color: palette.muted, marginTop: 4 }}>{s.hex.toUpperCase()}</div>
                <div className="mono tiny" style={{ color: palette.muted, marginTop: 10, lineHeight: 1.5 }}>{s.use}</div>
              </div>
            </div>
          ))}
        </div>

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

        {/* Color rules */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 24 }}>
          <div style={{ background: palette.paper, padding: 32, border: `1px solid ${palette.ink}20` }}>
            <div className="mono upper tiny" style={{ color: palette.accent, letterSpacing:'0.2em' }}>rule 01</div>
            <div className="serif" style={{ fontSize: 22, marginTop: 10, lineHeight: 1.25 }}>Ink on paper, 90% of the time.</div>
            <div style={{ fontSize: 13, color: palette.muted, marginTop: 10, lineHeight: 1.6 }}>The system is quiet by default. Accent colors are events, not wallpaper.</div>
          </div>
          <div style={{ background: palette.paper, padding: 32, border: `1px solid ${palette.ink}20` }}>
            <div className="mono upper tiny" style={{ color: palette.accent, letterSpacing:'0.2em' }}>rule 02</div>
            <div className="serif" style={{ fontSize: 22, marginTop: 10, lineHeight: 1.25 }}>One accent per surface.</div>
            <div style={{ fontSize: 13, color: palette.muted, marginTop: 10, lineHeight: 1.6 }}>Nazar blue OR tulip red OR brass — never all three on one piece. Rainbow is for other people.</div>
          </div>
          <div style={{ background: palette.paper, padding: 32, border: `1px solid ${palette.ink}20` }}>
            <div className="mono upper tiny" style={{ color: palette.accent, letterSpacing:'0.2em' }}>rule 03</div>
            <div className="serif" style={{ fontSize: 22, marginTop: 10, lineHeight: 1.25 }}>Brass is a garnish.</div>
            <div style={{ fontSize: 13, color: palette.muted, marginTop: 10, lineHeight: 1.6 }}>Hairlines, ornament, the odd caps-lock word. Never a field, never a logo fill.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.LogoSystem = LogoSystem;
window.Typography = Typography;
window.Palette = Palette;