// Section 1: Cover + Section 2: Naming story + Section 3: Positioning

const { useState, useEffect, useRef } = React;

function Cover({ palette }) {
  return (
    <section className="screen" style={{ position:'relative', background: palette.bg, color: palette.ink, overflow:'hidden' }}>
      {/* top meta bar */}
      <div className="page" style={{ paddingTop: 32, paddingBottom: 32 }}>
        <div className="flex between small mono upper" style={{ color: palette.ink, opacity: 0.7 }}>
          <span>lâl — brand book</span>
          <span>vol. 01 / spring 2026</span>
          <span>amsterdam · nl</span>
        </div>
      </div>

      <div className="page" style={{ paddingTop: 40, paddingBottom: 80 }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr auto 1fr', gap: 48, alignItems:'end', minHeight: '60vh' }}>
          {/* left column — small marginalia */}
          <div className="col gap-24" style={{ alignSelf:'start', paddingTop: 60 }}>
            <div className="mono upper tiny" style={{ color: palette.muted }}>§ a reading room</div>
            <div className="serif" style={{ fontSize: 20, lineHeight: 1.35, fontStyle:'italic', maxWidth: 300 }}>
              A café in Amsterdam that reads the grounds left at the bottom of your cup —<br/>
              <span style={{ color: palette.muted }}>without asking you to believe in anything.</span>
            </div>
            <div className="rule" style={{ background: palette.ink, opacity: 0.3, width: 80 }} />
            <div className="mono tiny" style={{ color: palette.muted, lineHeight:1.7 }}>
              <div>lâl / laːl /</div>
              <div>tr. portmanteau · fal + lâle</div>
              <div>fortune + tulip</div>
            </div>
          </div>

          {/* center — the hero */}
          <div className="center" style={{ position:'relative' }}>
            <div style={{ position:'relative' }}>
              <div className="display" style={{ fontSize: 360, fontWeight: 500, letterSpacing:'-0.04em', lineHeight: 0.82, color: palette.ink }}>
                lâl
              </div>
              {/* nazar ring behind */}
              <svg width="580" height="580" viewBox="0 0 580 580" style={{ position:'absolute', inset: 0, margin:'auto', zIndex:-1, opacity: 0.18 }}>
                <circle cx="290" cy="290" r="280" fill="none" stroke={palette.accent} strokeWidth="1"/>
                <circle cx="290" cy="290" r="220" fill="none" stroke={palette.accent} strokeWidth="1"/>
                <circle cx="290" cy="290" r="160" fill="none" stroke={palette.accent} strokeWidth="1"/>
              </svg>
            </div>
          </div>

          {/* right — more marginalia */}
          <div className="col gap-16" style={{ alignSelf:'end', textAlign:'right', paddingBottom: 20 }}>
            <div className="mono upper tiny" style={{ color: palette.muted }}>fig. 01 — wordmark, pre-production</div>
            <div className="mono tiny" style={{ color: palette.muted, lineHeight:1.8 }}>
              <div>type — Noto Serif Display 500</div>
              <div>tracking — −40</div>
              <div>the circumflex is the eye</div>
              <div>the eye is the café</div>
            </div>
          </div>
        </div>

        {/* bottom marquee */}
        <div style={{ marginTop: 80, borderTop: `1px solid ${palette.ink}`, borderBottom: `1px solid ${palette.ink}`, padding: '14px 0' }}>
          <div className="mono upper small flex between" style={{ color: palette.ink, letterSpacing:'0.3em' }}>
            <span>fal evi</span>
            <span className="dot" style={{ background: palette.accent }} />
            <span>coffee · tea · cards</span>
            <span className="dot" style={{ background: palette.accent3 }} />
            <span>est. 2026</span>
            <span className="dot" style={{ background: palette.accent2 }} />
            <span>jordaan</span>
            <span className="dot" style={{ background: palette.accent }} />
            <span>open until late</span>
          </div>
        </div>
      </div>
    </section>
  );
}

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

        <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 96, marginTop: 72 }}>
          <div>
            <div className="serif" style={{ fontSize: 56, lineHeight: 1.02, fontWeight: 400, letterSpacing:'-0.02em' }}>
              Two words, two cities, <em>one syllable</em>.
            </div>
            <div className="rule" style={{ background: palette.ink, margin: '40px 0', opacity: 0.2 }} />
            <div style={{ fontSize: 15.5, lineHeight: 1.7, maxWidth: 520 }}>
              <p><span className="mono upper small" style={{ color: palette.muted, marginRight: 6 }}>fal</span>
              the grounds left at the bottom of a Turkish coffee cup, read for stories that haven't happened yet.</p>
              <p><span className="mono upper small" style={{ color: palette.muted, marginRight: 6 }}>lâle</span>
              the tulip. Native to Anatolia, obsessed over in 17th-century Amsterdam. A flower that made and broke a Dutch economy.</p>
              <p style={{ marginTop: 28, fontStyle:'italic', color: palette.muted }}>
                lâl sits between. A café where the cup is read seriously, the tarot is laid out earnestly, and nobody is asked to believe in anything but the afternoon.
              </p>
            </div>
          </div>

          <div className="col gap-24">
            <div style={{ border: `1px solid ${palette.ink}30`, padding: 40, background: palette.bg }}>
              <div className="mono upper tiny" style={{ color: palette.muted, marginBottom: 18 }}>etymology diagram</div>
              <div className="display" style={{ fontSize: 90, lineHeight: 1, letterSpacing:'-0.03em', display:'flex', alignItems:'baseline', gap: 12 }}>
                <span style={{ color: palette.accent }}>fa</span>
                <span className="mono" style={{ fontSize: 22, color: palette.muted }}>+</span>
                <span style={{ color: palette.accent3 }}>lâle</span>
              </div>
              <div className="rule" style={{ background: palette.ink, opacity: 0.2, margin: '20px 0' }} />
              <div className="display" style={{ fontSize: 140, lineHeight: 1, letterSpacing:'-0.04em', color: palette.ink }}>
                = lâl
              </div>
              <div className="mono tiny upper" style={{ color: palette.muted, marginTop: 18, letterSpacing:'0.2em' }}>
                [ laːl ] · tr. · <span style={{ textDecoration:'line-through' }}>mute, silent</span> &nbsp;→ &nbsp; <span style={{ color: palette.ink }}>a quiet place that listens</span>
              </div>
            </div>

            <div className="mono small" style={{ color: palette.muted, lineHeight: 1.7 }}>
              <div>// note —</div>
              <div>'lâl' in Ottoman Turkish also means 'tongue-tied'.</div>
              <div>we kept it. the best readings happen in silence.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Positioning({ palette }) {
  const pillars = [
    { n:'I', t:'Secular, spiritual.', d:'You don\'t have to believe. You just have to sit still long enough for the coffee to cool.' },
    { n:'II', t:'Anatolian, Amsterdam.', d:'A diaspora café, not a themed one. Altın Gün on the speakers, Van Gogh on the tram outside.' },
    { n:'III', t:'Deadpan, not ironic.', d:'The menu is honest. The tarot reader has a MA in philosophy. No wink, no kitsch.' },
    { n:'IV', t:'Slow by design.', d:'Seven-minute coffee, twenty-minute readings, two-hour afternoons. We are not a Wi-Fi café.' },
  ];
  return (
    <section style={{ background: palette.ink, color: palette.paper, padding: '120px 0' }}>
      <div className="page">
        <SectionHead num="02" label="positioning" palette={palette} inverted />

        <div style={{ marginTop: 72, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 64, alignItems:'start' }}>
          <div className="serif" style={{ fontSize: 44, lineHeight: 1.1, fontWeight: 400, letterSpacing:'-0.015em', maxWidth: 520 }}>
            A café for people who read <em>The Paris Review</em> and still let their grandmother flip the cup.
          </div>

          <div className="col gap-32">
            {pillars.map(p => (
              <div key={p.n} style={{ display:'grid', gridTemplateColumns:'60px 1fr', gap: 24, alignItems:'baseline', borderTop: `1px solid ${palette.paper}40`, paddingTop: 24 }}>
                <div className="mono upper small" style={{ color: palette.accent2, letterSpacing:'0.2em' }}>{p.n}</div>
                <div>
                  <div className="serif" style={{ fontSize: 22, fontWeight: 500, marginBottom: 6, letterSpacing:'-0.01em' }}>{p.t}</div>
                  <div style={{ fontSize: 14, lineHeight: 1.55, color: `${palette.paper}cc`, maxWidth: 460 }}>{p.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionHead({ num, label, palette, inverted = false }) {
  const c = inverted ? palette.paper : palette.ink;
  return (
    <div className="flex between" style={{ alignItems:'baseline', borderBottom: `1px solid ${c}40`, paddingBottom: 14 }}>
      <div className="flex gap-24" style={{ alignItems:'baseline' }}>
        <div className="mono upper small" style={{ color: inverted ? palette.accent2 : palette.muted, letterSpacing:'0.24em' }}>§ {num}</div>
        <div className="serif" style={{ fontSize: 20, fontWeight: 500, fontStyle:'italic' }}>{label}</div>
      </div>
      <div className="mono tiny upper" style={{ color: inverted ? `${palette.paper}80` : palette.muted, letterSpacing:'0.2em' }}>
        lâl · brand book · v01
      </div>
    </div>
  );
}

window.Cover = Cover;
window.Naming = Naming;
window.Positioning = Positioning;
window.SectionHead = SectionHead;