// Applications — menu, cup, signage, IG grid, tarot back, business card

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

        <div style={{ marginTop: 64, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
          {/* Menu */}
          <AppTile title="08.01 · menu" palette={palette} span={1}>
            <MenuCard palette={palette} />
          </AppTile>

          {/* Tarot back */}
          <AppTile title="08.02 · tarot / cup-reading cards" palette={palette}>
            <TarotBack palette={palette} />
          </AppTile>

          {/* Cup */}
          <AppTile title="08.03 · coffee cup + saucer" palette={palette}>
            <CupMock palette={palette} />
          </AppTile>

          {/* Signage */}
          <AppTile title="08.04 · shopfront" palette={palette}>
            <Shopfront palette={palette} />
          </AppTile>
        </div>

        {/* IG grid — full width */}
        <div style={{ marginTop: 24 }}>
          <AppTile title="08.05 · instagram — @lal.amsterdam" palette={palette}>
            <IGGrid palette={palette} />
          </AppTile>
        </div>

        {/* Business card + loyalty */}
        <div style={{ marginTop: 24, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
          <AppTile title="08.06 · business card" palette={palette}>
            <BizCard palette={palette} />
          </AppTile>
          <AppTile title="08.07 · reading appointment slip" palette={palette}>
            <ReadingSlip palette={palette} />
          </AppTile>
        </div>
      </div>
    </section>
  );
}

function AppTile({ children, title, palette }) {
  return (
    <div style={{ background: `${palette.paper}08`, border: `1px solid ${palette.paper}20`, padding: 24 }}>
      <div className="mono upper tiny" style={{ color: palette.accent2, letterSpacing:'0.22em', marginBottom: 18 }}>{title}</div>
      <div style={{ background: palette.bg, padding: 32, display:'flex', justifyContent:'center' }}>
        {children}
      </div>
    </div>
  );
}

/* ---------- MENU ---------- */
function MenuCard({ palette }) {
  const items = [
    ['kahve', 'turkish, double-boiled, grounds intact', '4,50'],
    ['dibek', 'mortar-pounded, for the patient', '5,00'],
    ['menengiç', 'pistachio coffee, no caffeine, yes mystery', '5,00'],
    ['salep', 'winter only — orchid root, cinnamon', '5,50'],
    ['espresso', 'because some people insist', '3,50'],
  ];
  const tea = [
    ['çay', 'glass, two sugars if asked', '3,00'],
    ['ıhlamur', 'linden, for when you can\'t sleep', '3,50'],
    ['adaçayı', 'island sage, by the pot', '4,50'],
  ];
  const readings = [
    ['kahve falı', '15 min, while it\'s still warm', '12,00'],
    ['tarot', '30 min, by appointment', '35,00'],
    ['iskambil', 'playing cards, old-school', '25,00'],
  ];
  return (
    <div style={{ width: 360, background: palette.paper, padding: 28, color: palette.ink, border: `1px solid ${palette.ink}15`, fontFamily:'DM Sans' }}>
      <Ornament width={304} color={palette.ink}/>
      <div style={{ textAlign:'center', padding: '22px 0 6px' }}>
        <div className="display" style={{ fontSize: 56, letterSpacing:'-0.035em', lineHeight: 0.9 }}>lâl</div>
        <div className="mono upper" style={{ fontSize: 9.5, letterSpacing:'0.3em', color: palette.muted, marginTop: 8 }}>menu · spring</div>
      </div>
      <Ornament width={304} color={palette.ink}/>

      <MenuSection title="kahve" items={items} palette={palette}/>
      <MenuSection title="çay" items={tea} palette={palette}/>
      <MenuSection title="fal" items={readings} palette={palette} accent/>

      <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.2em', marginTop: 20, textAlign:'center' }}>
        cash, card, or a good story
      </div>
    </div>
  );
}

function MenuSection({ title, items, palette, accent }) {
  return (
    <div style={{ marginTop: 24 }}>
      <div className="flex between" style={{ alignItems:'baseline', marginBottom: 10 }}>
        <div className="serif" style={{ fontSize: 22, fontStyle:'italic', color: accent ? palette.accent3 : palette.ink }}>{title}</div>
        <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.2em' }}>€</div>
      </div>
      <div style={{ borderTop: `1px solid ${palette.ink}25` }}>
        {items.map(([n, d, p]) => (
          <div key={n} style={{ display:'grid', gridTemplateColumns:'1fr auto', gap: 14, padding: '10px 0', borderBottom: `1px dotted ${palette.ink}25`, alignItems:'baseline' }}>
            <div>
              <div className="serif" style={{ fontSize: 15.5, letterSpacing:'-0.005em' }}>{n}</div>
              <div style={{ fontSize: 11.5, color: palette.muted, marginTop: 2, lineHeight: 1.4 }}>{d}</div>
            </div>
            <div className="mono small" style={{ color: palette.ink }}>{p}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- TAROT BACK ---------- */
function TarotBack({ palette }) {
  return (
    <div style={{ display:'flex', gap: 14, alignItems:'center' }}>
      <TarotCardBack palette={palette} />
      <TarotCardBack palette={palette} rotated />
      <TarotCardBack palette={palette} />
    </div>
  );
}
function TarotCardBack({ palette, rotated }) {
  return (
    <div style={{
      width: 130, height: 210, background: palette.accent, color: palette.paper,
      padding: 12, position:'relative',
      transform: rotated ? 'rotate(-4deg)' : undefined,
      boxShadow: `4px 4px 0 ${palette.ink}`
    }}>
      <div style={{ position:'absolute', inset: 8, border: `1px solid ${palette.paper}55` }} />
      <div style={{ position:'absolute', inset: 0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
        <svg width="70" height="70" viewBox="0 0 70 70">
          <circle cx="35" cy="35" r="32" fill="none" stroke={palette.paper} strokeWidth="1" opacity="0.6"/>
          <circle cx="35" cy="35" r="22" fill="none" stroke={palette.paper} strokeWidth="1" opacity="0.6"/>
          <circle cx="35" cy="35" r="12" fill={palette.paper} />
          <circle cx="35" cy="35" r="5" fill={palette.accent} />
        </svg>
        <div className="display" style={{ fontSize: 34, marginTop: 8, letterSpacing:'-0.03em', color: palette.paper }}>lâl</div>
      </div>
      <div className="mono" style={{ position:'absolute', bottom: 8, left: 0, right: 0, textAlign:'center', fontSize: 7.5, letterSpacing:'0.3em', color: `${palette.paper}aa` }}>FAL · EVİ</div>
    </div>
  );
}

/* ---------- CUP ---------- */
function CupMock({ palette }) {
  return (
    <div style={{ display:'flex', gap: 30, alignItems:'center' }}>
      {/* cup side view */}
      <div style={{ position:'relative', width: 180, height: 180 }}>
        <svg width="180" height="180" viewBox="0 0 180 180">
          {/* saucer */}
          <ellipse cx="90" cy="160" rx="78" ry="14" fill={palette.paper} stroke={palette.ink} strokeWidth="1.2"/>
          {/* cup */}
          <path d="M 50 78 L 55 148 Q 55 156 63 156 L 117 156 Q 125 156 125 148 L 130 78 Z" fill={palette.paper} stroke={palette.ink} strokeWidth="1.2"/>
          {/* rim */}
          <ellipse cx="90" cy="78" rx="40" ry="7" fill={palette.ink}/>
          <ellipse cx="90" cy="76" rx="40" ry="5.5" fill={palette.paper} stroke={palette.ink} strokeWidth="1.2"/>
          {/* handle */}
          <path d="M 130 95 Q 150 100 148 118 Q 146 130 128 130" fill="none" stroke={palette.ink} strokeWidth="1.2"/>
          {/* logo on cup */}
          <text x="90" y="122" textAnchor="middle" fontFamily="Noto Serif Display, serif" fontSize="28" fontWeight="500" fill={palette.ink} letterSpacing="-0.03em">lâl</text>
        </svg>
      </div>
      {/* cup top (grounds) */}
      <CupTop size={180} palette={palette}/>
    </div>
  );
}

/* ---------- SHOPFRONT ---------- */
function Shopfront({ palette }) {
  return (
    <div style={{ width: '100%', maxWidth: 520, height: 300, background: palette.bg, position:'relative', border: `1px solid ${palette.ink}20`, overflow:'hidden' }}>
      {/* brick-ish backdrop */}
      <div style={{ position:'absolute', inset:0, backgroundImage: `repeating-linear-gradient(0deg, ${palette.ink}08 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, ${palette.ink}08 0 1px, transparent 1px 56px)` }}/>
      {/* awning */}
      <div style={{ position:'absolute', top: 40, left: 40, right: 40, height: 60, background: palette.accent, display:'flex', alignItems:'center', justifyContent:'center' }}>
        <Wordmark size={44} color={palette.paper}/>
      </div>
      {/* signboard */}
      <div style={{ position:'absolute', bottom: 40, left: 40, right: 40, height: 140, background: palette.paper, display:'grid', gridTemplateColumns:'1fr auto 1fr', alignItems:'center', padding: '0 28px', border: `1px solid ${palette.ink}20` }}>
        <div>
          <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.2em' }}>prinsengracht 419</div>
          <div className="serif" style={{ fontSize: 20, marginTop: 4, lineHeight: 1.1 }}>kahve · çay</div>
          <div className="serif" style={{ fontSize: 20, fontStyle:'italic', lineHeight: 1.1 }}>fal</div>
        </div>
        <div style={{ width: 1, height: '70%', background: `${palette.ink}30` }}/>
        <div style={{ textAlign:'right' }}>
          <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.2em' }}>open</div>
          <div className="display" style={{ fontSize: 26, letterSpacing:'-0.02em' }}>09 — 23</div>
          <div className="mono tiny" style={{ color: palette.muted, marginTop: 2 }}>closed mon.</div>
        </div>
      </div>
    </div>
  );
}

/* ---------- IG GRID ---------- */
function IGGrid({ palette }) {
  const tiles = [
    { k:'logo', bg: palette.accent },
    { k:'photo', label:'PHOTO · interior, window light' },
    { k:'quote', q:'the cup knows.' },
    { k:'photo', label:'PHOTO · cup + grounds, top-down' },
    { k:'type', t:'new hours' },
    { k:'nazar' },
    { k:'photo', label:'PHOTO · Aslı\'s hands, reading' },
    { k:'quote', q:'closed mondays. see you tuesday.' },
    { k:'tulip' },
  ];
  return (
    <div style={{ width: '100%', maxWidth: 780 }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 4, background: palette.paper, padding: 16, border: `1px solid ${palette.ink}20` }}>
        <div style={{ gridColumn: '1 / -1', display:'flex', gap: 12, alignItems:'center', padding: '6px 6px 14px' }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: palette.ink, color: palette.paper, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <div className="display" style={{ fontSize: 20, letterSpacing:'-0.05em' }}>â</div>
          </div>
          <div>
            <div className="serif" style={{ fontSize: 14, letterSpacing:'-0.005em', color: palette.ink }}>lal.amsterdam</div>
            <div className="mono tiny" style={{ color: palette.muted, marginTop: 1 }}>4.2k followers · prinsengracht 419</div>
          </div>
          <div style={{ flex:1 }}/>
          <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.2em' }}>follow</div>
        </div>
        {tiles.map((t, i) => <IGTile key={i} tile={t} palette={palette}/>)}
      </div>
    </div>
  );
}

function IGTile({ tile, palette }) {
  const style = { aspectRatio: '1/1', position:'relative', overflow:'hidden' };
  if (tile.k === 'logo') return (
    <div style={{ ...style, background: palette.accent, display:'flex', alignItems:'center', justifyContent:'center' }}>
      <Wordmark size={72} color={palette.paper}/>
    </div>
  );
  if (tile.k === 'photo') return (
    <div style={{ ...style, background: palette.paper, backgroundImage:`repeating-linear-gradient(45deg, ${palette.ink}10 0 1px, transparent 1px 14px)`, border: `1px solid ${palette.ink}15`, padding: 12, display:'flex', alignItems:'flex-end' }}>
      <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.18em', fontSize: 8 }}>[ {tile.label} ]</div>
    </div>
  );
  if (tile.k === 'quote') return (
    <div style={{ ...style, background: palette.ink, color: palette.paper, display:'flex', alignItems:'center', justifyContent:'center', padding: 20 }}>
      <div className="serif" style={{ fontSize: 20, fontStyle:'italic', textAlign:'center', lineHeight: 1.25, letterSpacing:'-0.01em' }}>{tile.q}</div>
    </div>
  );
  if (tile.k === 'type') return (
    <div style={{ ...style, background: palette.paper, color: palette.ink, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding: 16, border: `1px solid ${palette.ink}15` }}>
      <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.2em' }}>week of 14.04</div>
      <div className="display" style={{ fontSize: 34, marginTop: 8, letterSpacing:'-0.02em', textAlign:'center', lineHeight: 1 }}>{tile.t}</div>
      <div className="mono tiny" style={{ color: palette.muted, marginTop: 8 }}>09 — 23, daily</div>
    </div>
  );
  if (tile.k === 'nazar') return (
    <div style={{ ...style, background: palette.paper, display:'flex', alignItems:'center', justifyContent:'center' }}>
      <NazarMark size={120} palette={palette}/>
    </div>
  );
  if (tile.k === 'tulip') return (
    <div style={{ ...style, background: palette.accent3, display:'flex', alignItems:'center', justifyContent:'center' }}>
      <Tulip size={90} color={palette.paper}/>
    </div>
  );
  return <div style={style}/>;
}

/* ---------- BIZ CARD ---------- */
function BizCard({ palette }) {
  return (
    <div style={{ display:'flex', gap: 20 }}>
      {/* front */}
      <div style={{ width: 280, height: 170, background: palette.paper, padding: 20, color: palette.ink, border: `1px solid ${palette.ink}15`, position:'relative', display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
        <Ornament width={240} color={palette.ink}/>
        <div style={{ textAlign:'center' }}>
          <div className="display" style={{ fontSize: 60, letterSpacing:'-0.035em', lineHeight: 0.9 }}>lâl</div>
          <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.3em', marginTop: 8 }}>fal evi · amsterdam</div>
        </div>
        <Ornament width={240} color={palette.ink}/>
      </div>
      {/* back */}
      <div style={{ width: 280, height: 170, background: palette.ink, padding: 22, color: palette.paper, position:'relative', display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
        <div className="mono upper tiny" style={{ color: palette.accent2, letterSpacing:'0.22em' }}>— aslı demir</div>
        <div>
          <div className="serif" style={{ fontSize: 18, fontStyle:'italic', letterSpacing:'-0.01em' }}>reader & co-owner</div>
          <div className="mono tiny" style={{ color: `${palette.paper}99`, marginTop: 10, lineHeight: 1.7 }}>
            prinsengracht 419 · 1016 HM<br/>
            hello@lal.cafe · +31 6 24 58 09 12
          </div>
        </div>
        <div style={{ position:'absolute', top: 14, right: 16 }}>
          <div className="display" style={{ fontSize: 32, color: palette.accent2, letterSpacing:'-0.04em' }}>â</div>
        </div>
      </div>
    </div>
  );
}

/* ---------- READING SLIP ---------- */
function ReadingSlip({ palette }) {
  return (
    <div style={{ width: 300, background: palette.paper, padding: 22, color: palette.ink, border: `1px dashed ${palette.ink}50`, fontFamily:'DM Sans' }}>
      <div className="flex between" style={{ alignItems:'baseline' }}>
        <div className="display" style={{ fontSize: 28, letterSpacing:'-0.03em' }}>lâl</div>
        <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.2em' }}>no. 0247</div>
      </div>
      <div className="rule" style={{ background: palette.ink, opacity: 0.3, margin: '14px 0' }}/>
      <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em' }}>reading · appointment</div>
      <div style={{ marginTop: 16 }}>
        {[
          ['guest', 'M. van der Linden'],
          ['reader', 'Aslı'],
          ['date', 'thu · 23.04.26'],
          ['time', '19:30 — 20:00'],
          ['kind', 'tarot, full spread'],
        ].map(([k, v]) => (
          <div key={k} style={{ display:'grid', gridTemplateColumns:'70px 1fr', gap: 12, padding: '7px 0', borderBottom: `1px dotted ${palette.ink}30` }}>
            <div className="mono tiny upper" style={{ color: palette.muted, letterSpacing:'0.18em' }}>{k}</div>
            <div className="serif" style={{ fontSize: 14, letterSpacing:'-0.005em' }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 18, fontSize: 11.5, color: palette.muted, fontStyle:'italic', lineHeight: 1.5 }}>
        Please arrive five minutes early. If you are late, the cards are still here tomorrow.
      </div>
    </div>
  );
}

window.Applications = Applications;