// Gudjo — Flavours (v2)
// Four color-blocked cards in a 2x2 grid, one per fruit. Each card is its own
// designed object. No expand/collapse — the story reads at a glance.

const FLAVOURS_V2 = [
  {
    key: 'visne', no: '01', tr: 'Vişne', en: 'sour cherry',
    notes_tr: 'Kartepe\'nin asit dolu vişnesi. Derin yakut renk; tatlı-ekşi; kokusu bir mutfak.',
    notes_en: 'Kartepe sour cherry. Deep ruby, tart-sweet, kitchen-bright nose.',
    pairing_tr: 'akşam · kuzey rüzgârı',
    pairing_en: 'evening · north wind',
  },
  {
    key: 'nar', no: '02', tr: 'Nar', en: 'pomegranate',
    notes_tr: 'Geç hasat narın olgun tatlılığı. Yuvarlak, dolgun, hafif tanenli bir bitiş.',
    notes_en: 'Late-harvest pomegranate. Round, full, with a quiet tannic finish.',
    pairing_tr: 'öğleden sonra · meşe gölgesi',
    pairing_en: 'afternoon · oak shade',
  },
  {
    key: 'ayva', no: '03', tr: 'Ayva', en: 'quince',
    notes_tr: 'Sapanca\'nın altın ayvası. Bal, çay yaprağı, eski reçel kavanozu.',
    notes_en: 'Sapanca golden quince. Honey, tea leaf, the inside of an old jam jar.',
    pairing_tr: 'sabah · pencere kenarı',
    pairing_en: 'morning · window seat',
  },
  {
    key: 'incir', no: '04', tr: 'İncir', en: 'fig',
    notes_tr: 'Bahçe inciri. Kuru-sıcak, derin, neredeyse reçel; bir nefes karanfil.',
    notes_en: 'Garden fig. Dried-warm, deep, almost jam; a breath of clove.',
    pairing_tr: 'gece · battaniyenin altı',
    pairing_en: 'night · under the blanket',
  },
];

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

      <div className="g-wrap g-wrap--xl">
        {/* Section head */}
        <div className="g-2col" style={{ marginBottom: 56, alignItems: 'end' }}>
          <div>
            <span className="g-eyebrow" style={{ color: palette.primary }}>
              Tatlar · 04 flavours
            </span>
            <h2 className="g-h2 g-h2--lg" style={{
              fontFamily: serif, color: palette.ink, marginTop: 20,
            }}>
              Türkiye'nin<br/>
              <span style={{ color: palette.primary }}>meyveleri.</span>
            </h2>
          </div>
          <p className="g-body" style={{
            fontFamily: serif, color: palette.ink, opacity: 0.78, maxWidth: 460,
          }}>
            Henüz şişede yok — ama mutfakta var. Dört meyve, her biri kendi tatla,
            kendi kıyıdan, kendi bekleyişle.
            <span className="g-italic" style={{ display: 'block', marginTop: 6, opacity: 0.65 }}>
              Four fruits. Four bottles. Coming soon.
            </span>
          </p>
        </div>

        {/* 2x2 cards */}
        <div className="g-flavours">
          {FLAVOURS_V2.map((f, i) => (
            <FlavourCard
              key={f.key}
              f={f}
              serif={serif}
              palette={palette}
              flip={i % 2 === 1}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function FlavourCard({ f, serif, palette, flip }) {
  const F = FLAVOUR_COLORS[f.key];
  return (
    <article className="g-flavour-card" style={{
      background: F.bg, color: F.fg,
    }}>
      {/* Decorative fruit dot, far corner */}
      <div aria-hidden style={{
        position: 'absolute',
        right: flip ? 'auto' : -30,
        left: flip ? -30 : 'auto',
        top: -20,
        opacity: 0.18,
        transform: 'scale(1.4)',
      }}>
        <FruitCluster
          kind={f.key}
          palette={{ ...palette, primary: F.fg, secondary: F.fg, accent: F.fg, tea: F.fg }}
        />
      </div>

      {/* Top: number + EN */}
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span className="g-flavour-no" style={{ color: F.fg, opacity: 0.7 }}>
          № {f.no}
        </span>
        <span className="g-flavour-en" style={{ color: F.fg, opacity: 0.7 }}>
          {f.en}
        </span>
      </div>

      {/* Center: name */}
      <div style={{
        position: 'relative', zIndex: 2,
        flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center',
        padding: '24px 0',
      }}>
        <h3 className="g-flavour-name" style={{ fontFamily: serif, color: F.fg }}>
          {f.tr}
        </h3>
      </div>

      {/* Tasting notes + pairing */}
      <div style={{ position: 'relative', zIndex: 2 }}>
        <div style={{
          height: 1, background: `rgba(${hex2rgb(F.fg)},0.3)`, marginBottom: 16,
        }} />
        <p style={{
          fontFamily: serif, fontStyle: 'italic',
          fontSize: 'clamp(15px, 1.4vw, 19px)', lineHeight: 1.45,
          color: F.fg, margin: 0, textWrap: 'pretty',
        }}>{f.notes_tr}</p>
        <p style={{
          marginTop: 8,
          fontFamily: SANS, fontStyle: 'italic',
          fontSize: 'clamp(11px, 1vw, 13px)', lineHeight: 1.5,
          color: F.fg, opacity: 0.65, margin: '8px 0 0',
        }}>{f.notes_en}</p>

        <div style={{
          marginTop: 22,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 8,
        }}>
          <span style={{
            fontFamily: SANS, fontSize: 10, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: F.fg, opacity: 0.6,
          }}>{f.pairing_tr}</span>
          <span style={{
            width: 6, height: 6, borderRadius: '50%', background: F.accent,
          }} />
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { Flavours, FlavourCard, FLAVOURS_V2 });