// Gudjo — Story (v2). Asymmetric 2-col with photo on the left, story on right.
// The protected line lives as a full-width pull quote at the bottom.

function Story({ palette, serif, texture }) {
  return (
    <section id="hikaye" data-screen-label="05 Story" className="g-section" style={{
      background: palette.paper, color: palette.ink,
    }}>
      <PaperTexture intensity={texture} tone={palette.ink} />

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

          {/* LEFT: photo plate */}
          <div>
            <PhotoSlot
              label={'Tuz · Gudjo\nthe cat'}
              palette={palette}
              style={{
                width: '100%', aspectRatio: '0.82',
                whiteSpace: 'pre-line', lineHeight: 1.4,
                borderRadius: 2, transform: 'rotate(-1.8deg)',
                boxShadow: `0 8px 0 -2px ${palette.paperDeep}, 0 14px 30px rgba(0,0,0,0.08)`,
              }}
            />
            <div style={{
              marginTop: 18,
              display: 'flex', justifyContent: 'space-between',
              fontFamily: 'ui-monospace, "JetBrains Mono", Menlo, monospace',
              fontSize: 10, letterSpacing: '0.2em',
              color: palette.ink, opacity: 0.55,
            }}>
              <span>Şek. 04 · Tuz</span>
              <span>2018–2024</span>
            </div>
          </div>

          {/* RIGHT: story */}
          <div>
            <span className="g-eyebrow" style={{ color: palette.primary }}>
              Gudjo'nun hikayesi · the story
            </span>

            <h2 className="g-h2" style={{
              fontFamily: serif, color: palette.ink, marginTop: 24,
            }}>
              Bir kedi.<br/>
              Bir mutfak.<br/>
              <span style={{ color: palette.primary }}>İki kişi.</span>
            </h2>

            {/* Dropcap lede */}
            <div style={{
              marginTop: 32,
              display: 'flex', alignItems: 'baseline', gap: 14,
            }}>
              <span style={{
                fontFamily: serif, fontStyle: 'italic',
                fontSize: 'clamp(72px, 6.5vw, 108px)', lineHeight: 0.75,
                color: palette.primary, fontWeight: 500, flex: '0 0 auto',
              }}>A</span>
              <p className="g-body g-body--lg" style={{ fontFamily: serif, color: palette.ink }}>
                dı Tuz'du. Biz ona Gudjo derdik. Pencere kenarında uyurdu,
                mutfakta dolaşırdı, sabrı bizden fazlaydı.
              </p>
            </div>

            <p className="g-body" style={{
              fontFamily: serif, color: palette.ink, opacity: 0.85, marginTop: 22, maxWidth: 540,
            }}>
              İlk kavanozu onun penceresinin önünde demledik. O artık burada
              değil — ama isim, ve o uzun bekleyişler, burada.
            </p>
            <p className="g-en" style={{ color: palette.ink, marginTop: 12, maxWidth: 520 }}>
              Her name was Tuz. We called her Gudjo. We brewed the first jar
              by her window. She's not with us anymore — the name, and the
              long waiting, is.
            </p>

            <div style={{
              marginTop: 28,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <span style={{
                fontFamily: serif, fontStyle: 'italic',
                fontSize: 'clamp(15px, 1.4vw, 18px)',
                color: palette.ink, opacity: 0.65,
              }}>— Kartepe mutfağından</span>
              <PawMark color={palette.primary} size={20} opacity={0.75} />
            </div>
          </div>
        </div>

        {/* Full-width pull quote: the protected line */}
        <div style={{
          marginTop: 80,
          padding: '40px 0',
          borderTop: `0.5px solid ${palette.rule}`,
          borderBottom: `0.5px solid ${palette.rule}`,
          textAlign: 'center',
        }}>
          <p style={{
            fontFamily: serif, fontStyle: 'italic', fontWeight: 500,
            fontSize: 'clamp(28px, 4vw, 56px)', lineHeight: 1.15,
            letterSpacing: '-0.02em',
            color: palette.primary, margin: 0, textWrap: 'balance',
          }}>
            İki elin, dört patinin<br/>
            ve bir mutfağın sabrıyla.
          </p>
          <div style={{
            marginTop: 16,
            fontFamily: SANS, fontSize: 'clamp(11px, 1vw, 13px)',
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: palette.ink, opacity: 0.55,
          }}>
            two hands · four paws · one kitchen
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Story });