// Gudjo — Craft (v2). Dark color block + 2x2 process grid + batch stamp.

function Craft({ palette, serif, texture }) {
  const process = [
    { no: '01', tr: 'Çay',       en: 'Rize black tea',     note: 'Sadece Türk siyah çayı. Karadeniz\'in eteklerinden.' },
    { no: '02', tr: 'Meyve',     en: 'orchard fruit',      note: 'Bahçe meyvesi · Türkiye. Mevsiminde.' },
    { no: '03', tr: 'Demleme',   en: 'open ferment',       note: '14–21 gün. Cam kavanozda. Açık demleme.' },
    { no: '04', tr: 'Şişe',      en: 'hand-bottled',       note: 'Elle, küçük partilerde. Numaralı.' },
  ];

  return (
    <section id="sabir" data-screen-label="04 Craft" className="g-section" style={{
      background: palette.ink, color: palette.paper,
    }}>
      <PaperTexture intensity={texture * 0.7} tone={palette.paper} />

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

          {/* LEFT: manifesto */}
          <div>
            <div className="g-eyebrow-row">
              <span className="g-eyebrow" style={{ color: palette.accent }}>
                Sabır · craft
              </span>
              <span className="g-eyebrow" style={{ color: palette.paper, opacity: 0.5 }}>
                Şek. 03
              </span>
            </div>

            <h2 className="g-h2 g-h2--lg" style={{
              fontFamily: serif, color: palette.paper, marginTop: 24,
            }}>
              Aceleye<br/>
              <span style={{ color: palette.accent }}>gelmez.</span>
            </h2>

            <p className="g-body g-body--lg" style={{
              fontFamily: serif, color: palette.paper, opacity: 0.88,
              marginTop: 32, maxWidth: 520,
            }}>
              Her parti elle. Her şişe günler. Hiçbir kestirme yok —
              ne tatta, ne tarihte. Endüstri makinesi yok; sadece zaman ve dikkat.
            </p>
            <p className="g-en" style={{
              color: palette.paper, marginTop: 12, maxWidth: 500,
            }}>
              Every batch by hand. Every bottle, days. No shortcuts —
              not on the taste, not on the date.
            </p>

            <BatchStamp palette={palette} compact={false} style={{ marginTop: 44 }} />
          </div>

          {/* RIGHT: process grid */}
          <div className="g-process">
            {process.map((p, i) => (
              <div key={i} className="g-process-cell" style={{
                background: `rgba(${hex2rgb(palette.paper)},0.05)`,
                border: `0.5px solid rgba(${hex2rgb(palette.paper)},0.18)`,
                color: palette.paper,
              }}>
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                }}>
                  <span style={{
                    fontFamily: 'ui-monospace, "JetBrains Mono", Menlo, monospace',
                    fontSize: 10, letterSpacing: '0.22em',
                    color: palette.accent,
                  }}>{p.no}</span>
                  <span className="g-eyebrow" style={{
                    color: palette.paper, opacity: 0.45,
                  }}>{p.en}</span>
                </div>

                <div>
                  <div style={{
                    fontFamily: serif, fontStyle: 'italic', fontWeight: 500,
                    fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 0.96,
                    color: palette.paper, letterSpacing: '-0.02em',
                  }}>
                    {p.tr}
                  </div>
                  <p style={{
                    marginTop: 10,
                    fontFamily: serif, fontSize: 'clamp(13px, 1.15vw, 15px)',
                    lineHeight: 1.45, color: palette.paper, opacity: 0.65,
                    margin: '10px 0 0',
                  }}>{p.note}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function BatchStamp({ palette, compact = false, style = {} }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: compact ? '8px 12px' : '12px 18px',
      border: `1px solid ${palette.accent}`,
      borderRadius: 2,
      transform: 'rotate(-1.2deg)',
      ...style,
    }}>
      <span style={{
        fontFamily: 'ui-monospace, "JetBrains Mono", Menlo, monospace',
        fontSize: compact ? 9 : 11, letterSpacing: '0.24em',
        textTransform: 'uppercase', color: palette.accent,
      }}>
        Cilt 01 · İlk Parti
      </span>
      {!compact && (
        <>
          <span style={{ width: 1, height: 14, background: palette.accent, opacity: 0.5 }} />
          <span style={{
            fontFamily: 'ui-monospace, "JetBrains Mono", Menlo, monospace',
            fontSize: 10, letterSpacing: '0.18em',
            color: palette.accent, opacity: 0.85,
          }}>
            Kartepe · 2026
          </span>
        </>
      )}
    </div>
  );
}

Object.assign(window, { Craft, BatchStamp });