// Voice + Motifs + Applications (menu, cup, signage, IG, tarot, card)

function Voice({ palette }) {
  const pairs = [
    ['we say', 'we don\'t'],
    ['the cup is ready', 'your reading journey begins'],
    ['kahve · 4,50', 'artisanal hand-ground Ottoman experience · €4.50'],
    ['by appointment', 'book your session now!'],
    ['closed mondays', 'closed mondays ✨'],
    ['the grounds know', 'the universe is aligning'],
  ];
  return (
    <section style={{ background: palette.paper, color: palette.ink, padding: '120px 0' }}>
      <div className="page">
        <SectionHead num="06" label="voice" palette={palette} />

        <div style={{ marginTop: 64, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80 }}>
          <div>
            <div className="serif" style={{ fontSize: 52, lineHeight: 1.05, letterSpacing:'-0.02em', fontWeight: 400 }}>
              Dry. Literate. <em>A little bit tired</em> in a way that suggests experience.
            </div>
            <div style={{ marginTop: 32, fontSize: 15, lineHeight: 1.7, maxWidth: 460 }}>
              lâl talks like a friend who has been to both ends of Europe and found the good bread in each. Short sentences. Full stops. No exclamation marks, ever. Turkish words kept in Turkish, with a translation if necessary, a shrug if not.
            </div>
            <div className="rule" style={{ background: palette.ink, opacity: 0.2, margin: '32px 0' }} />
            <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em', marginBottom: 14 }}>tone sliders</div>
            {[
              ['earnest', 'ironic', 0.25],
              ['ceremonial', 'casual', 0.65],
              ['cryptic', 'plainspoken', 0.55],
              ['nostalgic', 'present', 0.45],
            ].map(([l, r, v]) => (
              <div key={l} style={{ display:'grid', gridTemplateColumns:'120px 1fr 120px', alignItems:'center', gap: 16, padding: '10px 0' }}>
                <div className="mono small upper" style={{ color: palette.muted, letterSpacing:'0.14em' }}>{l}</div>
                <div style={{ position:'relative', height: 2, background: `${palette.ink}20` }}>
                  <div style={{ position:'absolute', left: `calc(${v*100}% - 6px)`, top: -5, width: 12, height: 12, borderRadius:'50%', background: palette.ink }} />
                </div>
                <div className="mono small upper" style={{ color: palette.muted, letterSpacing:'0.14em', textAlign:'right' }}>{r}</div>
              </div>
            ))}
          </div>

          <div>
            <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em' }}>06.02 — we say / we don't</div>
            <div style={{ marginTop: 20, border: `1px solid ${palette.ink}20` }}>
              {pairs.map((p, i) => (
                <div key={i} style={{ display:'grid', gridTemplateColumns:'1fr 1fr', borderTop: i ? `1px solid ${palette.ink}10` : undefined }}>
                  <div style={{ padding: '18px 20px', background: palette.bg }}>
                    <div className="serif" style={{ fontSize: i === 0 ? 11 : 17, letterSpacing:'-0.01em', textTransform: i === 0 ? 'uppercase' : undefined, color: i === 0 ? palette.muted : palette.ink }}>{p[0]}</div>
                  </div>
                  <div style={{ padding: '18px 20px', background: palette.paper, borderLeft: `1px solid ${palette.ink}10` }}>
                    <div className="serif" style={{ fontSize: i === 0 ? 11 : 17, letterSpacing:'-0.01em', textTransform: i === 0 ? 'uppercase' : undefined, color: palette.muted, textDecoration: i === 0 ? undefined : 'line-through' }}>{p[1]}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 32, background: palette.ink, color: palette.paper, padding: 32 }}>
              <div className="mono upper tiny" style={{ color: palette.accent2, letterSpacing:'0.2em' }}>sample · instagram caption</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 14, lineHeight: 1.35, letterSpacing:'-0.01em' }}>
                New menu. Same grounds at the bottom. Aslı is reading Thursdays again, by appointment only — she's picky.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

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

        <div style={{ marginTop: 32, fontSize: 15, color: palette.muted, maxWidth: 560, lineHeight: 1.6 }}>
          Four graphic elements. Each flat, geometric, printable in a single spot color. Use sparingly — one motif per surface, usually.
        </div>

        <div style={{ marginTop: 48, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 16 }}>
          <MotifCell palette={palette} n="01" t="nazar" d="Concentric circles. The eye that stops the eye.">
            <NazarMark size={140} palette={palette} />
          </MotifCell>
          <MotifCell palette={palette} n="02" t="tulip" d="Flat silhouette. Three-petal, single stem. No leaves, ever.">
            <Tulip size={100} color={palette.accent3}/>
          </MotifCell>
          <MotifCell palette={palette} n="03" t="cup" d="Top-down. The grounds are always asymmetric. Never literal.">
            <CupTop size={140} palette={palette} />
          </MotifCell>
          <MotifCell palette={palette} n="04" t="circumflex" d="The lone â, floating. Sign-off, punctuation, maker's mark.">
            <div className="display" style={{ fontSize: 140, color: palette.ink, lineHeight: 1, letterSpacing:'-0.04em' }}>â</div>
          </MotifCell>
        </div>

        {/* Pattern strip */}
        <div style={{ marginTop: 48 }}>
          <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em', marginBottom: 14 }}>07.02 — ornament / border</div>
          <div style={{ background: palette.paper, padding: 40, border: `1px solid ${palette.ink}20` }}>
            <Ornament width={1100} color={palette.ink} />
            <div style={{ height: 18 }} />
            <Ornament width={1100} color={palette.accent} />
            <div style={{ height: 18 }} />
            <Ornament width={1100} color={palette.accent3} />
          </div>
          <div className="mono tiny upper" style={{ color: palette.muted, marginTop: 10, letterSpacing:'0.2em' }}>
            use along the top & bottom of menus, receipts, signage. never boxed.
          </div>
        </div>
      </div>
    </section>
  );
}

function MotifCell({ children, n, t, d, palette }) {
  return (
    <div style={{ background: palette.paper, padding: 28, border: `1px solid ${palette.ink}20`, display:'flex', flexDirection:'column', gap: 20, minHeight: 280 }}>
      <div className="flex between" style={{ alignItems:'baseline' }}>
        <div className="mono upper tiny" style={{ color: palette.muted, letterSpacing:'0.2em' }}>§ {n}</div>
        <div className="serif" style={{ fontSize: 17, fontStyle:'italic' }}>{t}</div>
      </div>
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center' }}>{children}</div>
      <div style={{ fontSize: 12.5, lineHeight: 1.5, color: palette.muted }}>{d}</div>
    </div>
  );
}

window.Voice = Voice;
window.Motifs = Motifs;