// Gudjo — "What Gudjo is" (v2)
// 2-col grid: left manifesto, right kitchen photo placeholder.

function WhatGudjoIs({ palette, serif, texture }) {
  return (
    <section id="ne" data-screen-label="02 What" className="g-section" style={{
      background: palette.paperDeep, color: palette.ink,
    }}>
      <PaperTexture intensity={texture} tone={palette.ink} />

      <div className="g-wrap g-wrap--xl">
        <div className="g-2col g-2col--asym" style={{ alignItems: 'start' }}>

          {/* LEFT: manifesto */}
          <div>
            <span className="g-eyebrow" style={{ color: palette.primary }}>
              Gudjo nedir? · what it is
            </span>

            <h2 className="g-h2 g-h2--lg" style={{
              fontFamily: serif, color: palette.ink, marginTop: 24,
            }}>
              Küçük parti.<br/>
              <span style={{ color: palette.primary }}>Rize çayı.</span><br/>
              El yapımı.
            </h2>

            <p className="g-body g-body--lg" style={{
              fontFamily: serif, color: palette.ink, marginTop: 32, maxWidth: 540,
            }}>
              Rize'nin siyah çayında demlenir, Türkiye'nin meyveleriyle tatlandırılır.
              Endüstri makinesi yok — sadece iki kişilik bir mutfak ve uzun bir bekleyiş.
            </p>

            <p className="g-en" style={{
              color: palette.ink, marginTop: 14, maxWidth: 500,
            }}>
              Brewed on Rize black tea, sweetened with Turkish fruit. No machinery
              — just a two-person kitchen and a long wait.
            </p>

            {/* Three small facts */}
            <div style={{
              marginTop: 48,
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 18, maxWidth: 520,
            }}>
              {[
                { n: '14–21', l: 'gün demleme', en: 'days ferment' },
                { n: '04', l: 'meyve', en: 'fruits' },
                { n: '∞', l: 'sabır', en: 'patience' },
              ].map((f, i) => (
                <div key={i} style={{
                  borderTop: `0.5px solid ${palette.rule}`, paddingTop: 14,
                }}>
                  <div style={{
                    fontFamily: serif, fontStyle: 'italic',
                    fontSize: 'clamp(28px, 3.4vw, 44px)',
                    lineHeight: 1, color: palette.primary, fontWeight: 500,
                  }}>{f.n}</div>
                  <div style={{
                    marginTop: 8, fontFamily: SANS, fontSize: 12,
                    color: palette.ink, opacity: 0.75,
                  }}>{f.l}</div>
                  <div style={{
                    fontFamily: SANS, fontSize: 9.5, letterSpacing: '0.2em',
                    textTransform: 'uppercase', color: palette.ink, opacity: 0.5,
                    marginTop: 2,
                  }}>{f.en}</div>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT: photo placeholder */}
          <div>
            <PhotoSlot
              label={'Eller · mutfak\nhands at work'}
              palette={palette}
              style={{
                width: '100%', aspectRatio: '4/5',
                whiteSpace: 'pre-line', lineHeight: 1.5,
                borderRadius: 4,
              }}
            />
            <div style={{
              marginTop: 14,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              fontFamily: 'ui-monospace, "JetBrains Mono", Menlo, monospace',
              fontSize: 10, letterSpacing: '0.2em', color: palette.ink, opacity: 0.55,
            }}>
              <span>Şek. 02 · mutfak</span>
              <span>Kartepe</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhatGudjoIs });