// Gudjo — shared design system
// Palette: Turkish fruit + Rize tea on warm paper.
// Type: characterful warm serif (headlines) + humanist sans (body).
// Cat motif: a tiny paw made of 4 circles.

const PALETTES = {
  visne: {
    name: 'Vişne',
    paper: '#f3e8d0',       // warm cream
    paperDeep: '#ead9b6',
    ink: '#2a1410',          // dark cherry-brown
    primary: '#7a1f2e',      // vişne
    accent: '#c44a3d',       // brighter cherry
    secondary: '#b8862c',    // tea-amber
    tea: '#a26230',
    rule: 'rgba(42,20,16,0.18)',
  },
  nar: {
    name: 'Nar',
    paper: '#f1e3cd',
    paperDeep: '#e7d3b1',
    ink: '#2b1414',
    primary: '#962840',
    accent: '#d85a2e',
    secondary: '#5a2840',
    tea: '#a26230',
    rule: 'rgba(43,20,20,0.18)',
  },
  ayva: {
    name: 'Ayva',
    paper: '#f5ecce',
    paperDeep: '#ecdda9',
    ink: '#2e2412',
    primary: '#a87420',
    accent: '#d4a64a',
    secondary: '#7a1f2e',
    tea: '#a26230',
    rule: 'rgba(46,36,18,0.2)',
  },
  incir: {
    name: 'İncir',
    paper: '#efe1d2',
    paperDeep: '#e3cfba',
    ink: '#2a1426',
    primary: '#5a2840',
    accent: '#8a3f63',
    secondary: '#a26230',
    tea: '#a26230',
    rule: 'rgba(42,20,38,0.2)',
  },
};

const SERIFS = {
  cormorant: { label: 'Cormorant', stack: '"Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif' },
  newsreader: { label: 'Newsreader', stack: '"Newsreader", "Lora", Georgia, serif' },
  dmserif: { label: 'DM Serif', stack: '"DM Serif Display", "Playfair Display", Georgia, serif' },
};

const SANS = '"DM Sans", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';

// ─── Paper texture (SVG noise overlay) ───
// Single base 64 reuse — opacity controlled by intensity prop (0..100).
function PaperTexture({ intensity = 38, tone = '#2a1410' }) {
  if (!intensity) return null;
  // baseFrequency tuned to look like coarse linen, not TV static
  const svg = encodeURIComponent(
    `<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>`
  );
  return (
    <div aria-hidden style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: `url("data:image/svg+xml;utf8,${svg}")`,
      backgroundSize: '320px 320px',
      mixBlendMode: 'multiply',
      opacity: intensity / 100,
      color: tone,
    }} />
  );
}

// Soft warm vignette to add depth to the paper
function Vignette({ color = 'rgba(80,30,15,0.18)' }) {
  return (
    <div aria-hidden style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `radial-gradient(120% 90% at 50% 50%, transparent 55%, ${color} 100%)`,
    }} />
  );
}

// ─── Brand wordmark — italic lowercase serif ───
function Wordmark({ serif, color, size = 22, letterSpacing = -0.5 }) {
  return (
    <span style={{
      fontFamily: serif,
      fontStyle: 'italic',
      fontWeight: 500,
      fontSize: size,
      letterSpacing,
      color,
      lineHeight: 1,
    }}>gudjo</span>
  );
}

// ─── Cat motif: tiny paw print (4 circles) ───
function PawMark({ color = '#7a1f2e', size = 16, opacity = 0.7 }) {
  const s = size;
  const r = s * 0.13;
  return (
    <svg width={s} height={s * 0.95} viewBox="0 0 20 19" style={{ opacity }} aria-label="Gudjo's paw">
      <circle cx="5"  cy="6"   r={r * 1.05 * (20 / size)} fill={color} />
      <circle cx="10" cy="3.5" r={r * 1.05 * (20 / size)} fill={color} />
      <circle cx="15" cy="6"   r={r * 1.05 * (20 / size)} fill={color} />
      <ellipse cx="10" cy="13" rx="4.4" ry="4" fill={color} />
    </svg>
  );
}

// ─── Photo placeholder (subtly striped) ───
function PhotoSlot({ label, palette, style = {} }) {
  const stripes = `repeating-linear-gradient(135deg, ${palette.paperDeep} 0 10px, ${palette.paper} 10px 20px)`;
  return (
    <div style={{
      background: stripes,
      border: `0.5px solid ${palette.rule}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: palette.ink, opacity: 0.78,
      fontFamily: '"JetBrains Mono", "Menlo", ui-monospace, monospace',
      fontSize: 10, letterSpacing: 0.6, textTransform: 'uppercase',
      textAlign: 'center', padding: 12, boxSizing: 'border-box',
      ...style,
    }}>{label}</div>
  );
}

// ─── Fruit dots — only circles, used in clusters ───
function FruitCluster({ kind, palette }) {
  // kind: 'visne' | 'nar' | 'incir' | 'ayva'
  if (kind === 'visne') {
    // Two cherries on a thin stem
    return (
      <svg width="86" height="110" viewBox="0 0 86 110" aria-hidden>
        <path d="M30 6 Q44 30, 30 72" stroke={palette.tea} strokeWidth="1.4" fill="none" strokeLinecap="round"/>
        <path d="M58 6 Q50 30, 58 72" stroke={palette.tea} strokeWidth="1.4" fill="none" strokeLinecap="round"/>
        <circle cx="30" cy="84" r="18" fill={palette.primary}/>
        <circle cx="58" cy="86" r="20" fill={palette.accent}/>
        <circle cx="25" cy="78" r="4" fill="#fff" opacity="0.18"/>
        <circle cx="53" cy="80" r="5" fill="#fff" opacity="0.18"/>
      </svg>
    );
  }
  if (kind === 'nar') {
    return (
      <svg width="120" height="130" viewBox="0 0 120 130" aria-hidden>
        <circle cx="60" cy="74" r="46" fill={palette.primary}/>
        <circle cx="46" cy="62" r="8" fill="#fff" opacity="0.14"/>
        {/* crown */}
        <circle cx="60" cy="28" r="6" fill={palette.secondary}/>
        <circle cx="48" cy="32" r="4" fill={palette.secondary}/>
        <circle cx="72" cy="32" r="4" fill={palette.secondary}/>
      </svg>
    );
  }
  if (kind === 'incir') {
    return (
      <svg width="96" height="118" viewBox="0 0 96 118" aria-hidden>
        <ellipse cx="48" cy="72" rx="34" ry="38" fill={palette.primary}/>
        <ellipse cx="36" cy="58" rx="5" ry="7" fill="#fff" opacity="0.12"/>
        {/* tiny leaf hint as 2 dots */}
        <circle cx="42" cy="22" r="5" fill={palette.secondary}/>
        <circle cx="54" cy="22" r="5" fill={palette.secondary}/>
      </svg>
    );
  }
  if (kind === 'ayva') {
    return (
      <svg width="100" height="118" viewBox="0 0 100 118" aria-hidden>
        <ellipse cx="50" cy="68" rx="40" ry="42" fill={palette.primary}/>
        <ellipse cx="38" cy="52" rx="6" ry="8" fill="#fff" opacity="0.15"/>
        <circle cx="50" cy="20" r="5" fill={palette.secondary}/>
      </svg>
    );
  }
  return null;
}

// ─── Hairline rule with center ornament ───
function OrnamentRule({ color, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%' }}>
      <div style={{ flex: 1, height: 1, background: color, opacity: 0.4 }} />
      {label ? (
        <span style={{
          fontFamily: SANS, fontSize: 9, letterSpacing: 2.2,
          textTransform: 'uppercase', color, opacity: 0.65,
        }}>{label}</span>
      ) : (
        <span style={{ width: 4, height: 4, borderRadius: '50%', background: color, opacity: 0.6 }} />
      )}
      <div style={{ flex: 1, height: 1, background: color, opacity: 0.4 }} />
    </div>
  );
}

// ─── Small uppercase eyebrow label ───
function Eyebrow({ children, color, style = {} }) {
  return (
    <div style={{
      fontFamily: SANS, fontSize: 10, letterSpacing: 2.4,
      textTransform: 'uppercase', fontWeight: 500,
      color, opacity: 0.75, ...style,
    }}>{children}</div>
  );
}

function hex2rgb(h) {
  const m = h.replace('#','').match(/.{1,2}/g);
  return m.map((x) => parseInt(x, 16)).join(',');
}

// ─── Per-flavour color treatments (used for Flavours cards) ───
const FLAVOUR_COLORS = {
  visne: { bg: '#7a1f2e', fg: '#f3e8d0', accent: '#c44a3d', deep: '#3a0d18' },
  nar:   { bg: '#962840', fg: '#f1e3cd', accent: '#d85a2e', deep: '#3f1018' },
  ayva:  { bg: '#d4a64a', fg: '#2e2412', accent: '#a87420', deep: '#5a3a08' },
  incir: { bg: '#5a2840', fg: '#efe1d2', accent: '#c98050', deep: '#2a0e1e' },
};

// ─── BrandLabel — a tall designed product label, used as the hero anchor.
// Reads like the actual Vişne label that will sit on the bottle. Renders as a
// confident card, not a placeholder.
function BrandLabel({ palette, serif, flavour = 'visne', style = {} }) {
  const F = FLAVOUR_COLORS[flavour] || FLAVOUR_COLORS.visne;
  const meta = {
    visne: { tr: 'Vişne', en: 'sour cherry',   no: '01' },
    nar:   { tr: 'Nar',   en: 'pomegranate',   no: '02' },
    ayva:  { tr: 'Ayva',  en: 'quince',        no: '03' },
    incir: { tr: 'İncir', en: 'fig',           no: '04' },
  }[flavour];

  return (
    <div style={{
      width: '100%', maxWidth: 360, aspectRatio: '0.62',
      background: F.bg, color: F.fg,
      borderRadius: 4,
      padding: '32px 26px 28px',
      position: 'relative', overflow: 'hidden',
      boxShadow: '0 30px 70px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(0,0,0,0.08)',
      fontFamily: SANS,
      display: 'flex', flexDirection: 'column',
      transform: 'rotate(-2deg)',
      ...style,
    }}>
      {/* Label paper texture */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(120% 80% at 50% 30%, rgba(255,255,255,0.06), transparent 60%)`,
      }} />

      {/* Top mark: gudjo + paw */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'relative', zIndex: 2,
      }}>
        <span style={{
          fontFamily: serif, fontStyle: 'italic', fontSize: 22,
          fontWeight: 500, letterSpacing: -0.4, lineHeight: 1, color: F.fg,
        }}>gudjo</span>
        <PawMark color={F.fg} size={16} opacity={0.85} />
      </div>

      {/* thin rule */}
      <div style={{
        marginTop: 12, height: 1,
        background: `rgba(${hex2rgb(F.fg)},0.35)`,
        position: 'relative', zIndex: 2,
      }} />

      {/* Center: number + fruit name */}
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        justifyContent: 'center', alignItems: 'flex-start',
        gap: 8, position: 'relative', zIndex: 2,
      }}>
        <span style={{
          fontFamily: 'ui-monospace, "JetBrains Mono", Menlo, monospace',
          fontSize: 10, letterSpacing: '0.22em', opacity: 0.7,
        }}>№ {meta.no}</span>
        <h3 style={{
          fontFamily: serif, fontStyle: 'italic', fontWeight: 500,
          fontSize: 56, lineHeight: 0.92, letterSpacing: '-0.03em',
          margin: 0, color: F.fg,
        }}>{meta.tr}</h3>
        <span style={{
          fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
          opacity: 0.7, marginTop: 2,
        }}>{meta.en}</span>
      </div>

      {/* Small fruit dot — bottom-left accent */}
      <div style={{
        position: 'absolute', right: -16, bottom: 60,
        opacity: 0.35, transform: 'scale(0.9)', zIndex: 1,
      }}>
        <FruitCluster kind={flavour} palette={{
          ...palette, primary: F.accent, secondary: F.fg, tea: F.fg,
        }} />
      </div>

      {/* Bottom: tagline + batch */}
      <div style={{ position: 'relative', zIndex: 2 }}>
        <div style={{
          height: 1, background: `rgba(${hex2rgb(F.fg)},0.35)`,
          marginBottom: 12,
        }} />
        <div style={{
          fontFamily: serif, fontStyle: 'italic',
          fontSize: 14, lineHeight: 1.3, color: F.fg, opacity: 0.9,
        }}>
          Sevgiyle demlenen<br/>Türk kombuchası
        </div>
        <div style={{
          marginTop: 12,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 10,
        }}>
          <span style={{
            fontFamily: 'ui-monospace, "JetBrains Mono", Menlo, monospace',
            fontSize: 9, letterSpacing: '0.22em', opacity: 0.7,
          }}>CILT 01 · ILK PARTI</span>
          <span style={{
            fontFamily: 'ui-monospace, "JetBrains Mono", Menlo, monospace',
            fontSize: 9, letterSpacing: '0.18em', opacity: 0.6,
          }}>250 ML</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  PALETTES, SERIFS, SANS, FLAVOUR_COLORS,
  PaperTexture, Vignette, Wordmark, PawMark, PhotoSlot,
  FruitCluster, OrnamentRule, Eyebrow, BrandLabel, hex2rgb,
});