// Kelimely logo explorations — 4 directions
// Playful/toy + Turkish identity (kilim, ornament, tile, petek).

const INK = '#1f1f1a';
const PAPER = '#f5f1e8';
const LINE = '#dddcd3';

// Palette (from existing game accents, curated for brand)
const BR = {
  rose: '#E85A6D',
  saffron: '#E8A33F',
  teal: '#5CC4B8',
  cobalt: '#6B9CF5',
  plum: '#A685F2',
  olive: '#8FA84A',
  terracotta: '#C97458',
};

// ═══════════════════════════════════════════════════════════════
// DIRECTION 1 — "Harf Kutusu" (letter box wordmark)
// Each letter sits in its own tile, varying size + warm accents.
// Playful + tactile, like movable type.
// ═══════════════════════════════════════════════════════════════
function D1Primary({ mono = false }) {
  // Letters, their colors, and scale (for rhythm)
  const letters = [
    { c: 'k', bg: mono ? INK : BR.rose,        fg: '#fff' },
    { c: 'e', bg: mono ? '#fff' : '#fff',      fg: INK, border: true },
    { c: 'l', bg: mono ? INK : BR.saffron,     fg: '#fff' },
    { c: 'i', bg: mono ? '#fff' : '#fff',      fg: INK, border: true },
    { c: 'm', bg: mono ? INK : BR.teal,        fg: '#fff' },
    { c: 'e', bg: mono ? '#fff' : '#fff',      fg: INK, border: true },
    { c: 'l', bg: mono ? INK : BR.cobalt,      fg: '#fff' },
    { c: 'y', bg: mono ? '#fff' : '#fff',      fg: INK, border: true },
  ];
  return (
    <div style={{
      display: 'flex', gap: 4, alignItems: 'center',
    }}>
      {letters.map((l, i) => (
        <div key={i} style={{
          width: 56, height: 64, borderRadius: 8,
          background: l.bg, color: l.fg,
          border: l.border ? `2px solid ${INK}` : 'none',
          display: 'grid', placeItems: 'center',
          fontFamily: 'Fraunces, Georgia, serif',
          fontWeight: 700, fontSize: 38,
          letterSpacing: -0.5,
          boxShadow: '0 2px 0 rgba(0,0,0,0.12)',
          transform: i % 2 === 0 ? 'rotate(-1.5deg)' : 'rotate(1.5deg)',
        }}>{l.c}</div>
      ))}
    </div>
  );
}

function D1Icon({ mono = false }) {
  return (
    <div style={{
      width: 180, height: 180, borderRadius: 36,
      background: mono ? INK : BR.rose,
      display: 'grid', placeItems: 'center',
      position: 'relative', overflow: 'hidden',
      boxShadow: '0 4px 0 rgba(0,0,0,0.15)',
    }}>
      {/* mini letter tile peeking */}
      <div style={{
        position: 'absolute', top: 22, left: 22,
        width: 46, height: 52, borderRadius: 6,
        background: mono ? '#fff' : '#fff',
        transform: 'rotate(-8deg)',
        boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
      }}/>
      <div style={{
        position: 'absolute', bottom: 22, right: 22,
        width: 46, height: 52, borderRadius: 6,
        background: mono ? '#fff' : BR.saffron,
        transform: 'rotate(6deg)',
        boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
      }}/>
      <div style={{
        fontFamily: 'Fraunces, Georgia, serif',
        fontWeight: 700, fontSize: 120, color: '#fff',
        lineHeight: 1, letterSpacing: -4,
        position: 'relative', zIndex: 2,
      }}>k</div>
    </div>
  );
}

function D1Stacked({ mono = false }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', gap: 14,
    }}>
      <div style={{ transform: 'scale(0.85)' }}>
        <D1Icon mono={mono} />
      </div>
      <div style={{
        fontFamily: 'Fraunces, Georgia, serif',
        fontSize: 42, fontWeight: 700, color: INK,
        letterSpacing: -1,
      }}>kelimely</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// DIRECTION 2 — "Kilim" (Turkish flat-weave geometry)
// Custom K built from stepped diamonds, borrowed kilim ornament
// as underline. Wordmark in a custom serif with unicase feel.
// ═══════════════════════════════════════════════════════════════
function KilimK({ size = 140, color = INK, bg = 'none' }) {
  // Stepped K using a grid of squares — kilim pixel look.
  // 8-wide × 10-tall grid. 1 = filled.
  const G = [
    [1,1,0,0,0,0,1,1],
    [1,1,0,0,0,1,1,0],
    [1,1,0,0,1,1,0,0],
    [1,1,0,1,1,0,0,0],
    [1,1,1,1,0,0,0,0],
    [1,1,1,1,0,0,0,0],
    [1,1,0,1,1,0,0,0],
    [1,1,0,0,1,1,0,0],
    [1,1,0,0,0,1,1,0],
    [1,1,0,0,0,0,1,1],
  ];
  const cell = size / 10;
  return (
    <svg width={size * 0.8} height={size} viewBox={`0 0 ${8*cell} ${10*cell}`}
      style={{ background: bg }}>
      {G.flatMap((row, r) => row.map((v, c) => v ? (
        <rect key={`${r}-${c}`} x={c*cell} y={r*cell}
          width={cell} height={cell} fill={color} />
      ) : null))}
    </svg>
  );
}

// Kilim ornament strip — a row of diamonds between two lines
function KilimStrip({ width = 400, color = INK, tone = BR.terracotta }) {
  return (
    <svg width={width} height={18} viewBox={`0 0 ${width} 18`}>
      <line x1="0" y1="1" x2={width} y2="1" stroke={color} strokeWidth="1.5" />
      <line x1="0" y1="17" x2={width} y2="17" stroke={color} strokeWidth="1.5" />
      {Array.from({ length: Math.floor(width / 20) }).map((_, i) => (
        <g key={i} transform={`translate(${i * 20 + 10}, 9)`}>
          <polygon points="0,-6 6,0 0,6 -6,0"
            fill={i % 2 === 0 ? color : 'none'}
            stroke={color} strokeWidth="1.2" />
        </g>
      ))}
    </svg>
  );
}

function D2Primary({ mono = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
      <KilimK size={120} color={mono ? INK : BR.terracotta} />
      <div>
        <div style={{
          fontFamily: 'Fraunces, Georgia, serif',
          fontWeight: 600, fontSize: 64, color: INK,
          letterSpacing: -2, lineHeight: 0.95,
          fontVariationSettings: '"opsz" 144',
        }}>kelimely</div>
        <div style={{ marginTop: 6 }}>
          <KilimStrip width={380} color={mono ? INK : BR.terracotta} />
        </div>
      </div>
    </div>
  );
}

function D2Icon({ mono = false }) {
  return (
    <div style={{
      width: 180, height: 180, borderRadius: 36,
      background: mono ? INK : PAPER,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      gap: 8, position: 'relative',
    }}>
      <KilimK size={120} color={mono ? '#fff' : BR.terracotta} />
      <div style={{ position: 'absolute', bottom: 22 }}>
        <KilimStrip width={130} color={mono ? '#fff' : INK} />
      </div>
    </div>
  );
}

function D2Stacked({ mono = false }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', gap: 14,
    }}>
      <KilimK size={100} color={mono ? INK : BR.terracotta} />
      <div style={{
        fontFamily: 'Fraunces, Georgia, serif',
        fontSize: 44, fontWeight: 600, color: INK,
        letterSpacing: -1.5, lineHeight: 1,
      }}>kelimely</div>
      <KilimStrip width={280} color={mono ? INK : BR.terracotta} />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// DIRECTION 3 — "Petek K" (honeycomb)
// K formed from 3 hexagons. Nods to the Petek game in the family.
// Friendly, constructed.
// ═══════════════════════════════════════════════════════════════
function Hex({ size = 40, color = INK, stroke, sw = 2, letter, labelColor = '#fff' }) {
  const h = size;
  const w = size * Math.sqrt(3) / 2 * 1.1547; // regular hex by flat-top
  const pts = [];
  for (let i = 0; i < 6; i++) {
    const a = (Math.PI / 3) * i - Math.PI / 2;
    pts.push(`${Math.cos(a) * size / 2},${Math.sin(a) * size / 2}`);
  }
  return (
    <svg width={size} height={size} viewBox={`-${size/2} -${size/2} ${size} ${size}`}
      style={{ overflow: 'visible' }}>
      <polygon points={pts.join(' ')}
        fill={color} stroke={stroke} strokeWidth={sw}
        strokeLinejoin="round" />
      {letter && (
        <text x="0" y="2" textAnchor="middle" dominantBaseline="middle"
          fontFamily="Fraunces, Georgia, serif" fontWeight="700"
          fontSize={size * 0.55} fill={labelColor}>{letter}</text>
      )}
    </svg>
  );
}

function PetekK({ s = 40, mono = false }) {
  // 3 hexes arranged to form a K silhouette:
  // center-left (vertical stem), top-right, bottom-right
  const hexW = s * Math.sin(Math.PI/3);
  return (
    <div style={{
      position: 'relative',
      width: hexW * 2 + 6, height: s * 2 + 4,
    }}>
      <div style={{ position: 'absolute', left: 0, top: s/2 + 2 }}>
        <Hex size={s} color={mono ? INK : BR.saffron} letter="K" />
      </div>
      <div style={{ position: 'absolute', left: hexW - 2, top: 0 }}>
        <Hex size={s} color={mono ? INK : BR.rose} letter="E" />
      </div>
      <div style={{ position: 'absolute', left: hexW - 2, top: s + 4 }}>
        <Hex size={s} color={mono ? INK : BR.teal} letter="L" />
      </div>
    </div>
  );
}

function D3Primary({ mono = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
      <PetekK s={64} mono={mono} />
      <div style={{
        fontFamily: 'Fraunces, Georgia, serif',
        fontWeight: 600, fontSize: 62, color: INK,
        letterSpacing: -2, lineHeight: 1,
      }}>kelimely</div>
    </div>
  );
}

function D3Icon({ mono = false }) {
  const s = 58;
  const hexW = s * Math.sin(Math.PI/3);
  return (
    <div style={{
      width: 180, height: 180, borderRadius: 36,
      background: mono ? INK : PAPER,
      display: 'grid', placeItems: 'center',
    }}>
      <div style={{
        position: 'relative', width: hexW * 2 + 6, height: s * 2 + 4,
      }}>
        <div style={{ position: 'absolute', left: 0, top: s/2 + 2 }}>
          <Hex size={s} color={mono ? '#fff' : BR.saffron} letter="K" labelColor={mono ? INK : '#fff'} />
        </div>
        <div style={{ position: 'absolute', left: hexW - 2, top: 0 }}>
          <Hex size={s} color={mono ? '#fff' : BR.rose} letter="E" labelColor={mono ? INK : '#fff'} />
        </div>
        <div style={{ position: 'absolute', left: hexW - 2, top: s + 4 }}>
          <Hex size={s} color={mono ? '#fff' : BR.teal} letter="L" labelColor={mono ? INK : '#fff'} />
        </div>
      </div>
    </div>
  );
}

function D3Stacked({ mono = false }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', gap: 18,
    }}>
      <PetekK s={54} mono={mono} />
      <div style={{
        fontFamily: 'Fraunces, Georgia, serif',
        fontSize: 46, fontWeight: 600, color: INK,
        letterSpacing: -1.5,
      }}>kelimely</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// DIRECTION 4 — "Kelime Dizisi" (word in motion — letter tile strip)
// Scrabble-tile wordmark w/ NYT-crossword discipline. Each letter has
// a tile + point value. Single hero color.
// ═══════════════════════════════════════════════════════════════
function ScrTile({ letter, size = 68, points, color = INK, bg = PAPER }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 8,
      background: bg, color: color,
      border: `2.5px solid ${color}`,
      position: 'relative', boxShadow: '0 3px 0 rgba(0,0,0,0.18)',
      display: 'grid', placeItems: 'center',
    }}>
      <div style={{
        fontFamily: 'Fraunces, Georgia, serif',
        fontWeight: 700, fontSize: size * 0.58,
        letterSpacing: -1, lineHeight: 1,
      }}>{letter}</div>
      {points != null && (
        <div style={{
          position: 'absolute', bottom: 4, right: 6,
          fontSize: size * 0.18, fontWeight: 700,
          fontFamily: 'Inter, sans-serif',
        }}>{points}</div>
      )}
    </div>
  );
}

function D4Primary({ mono = false }) {
  const color = mono ? INK : INK;
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
      {[
        { l: 'K', p: 5 }, { l: 'E', p: 1 }, { l: 'L', p: 1 },
        { l: 'İ', p: 1 }, { l: 'M', p: 4 }, { l: 'E', p: 1 },
        { l: 'L', p: 1 }, { l: 'Y', p: 3 },
      ].map((t, i) => (
        <div key={i} style={{
          transform: i % 2 ? 'translateY(-3px)' : 'none',
        }}>
          <ScrTile letter={t.l} points={t.p} size={62} color={color}
            bg={mono ? '#fff' : PAPER} />
        </div>
      ))}
    </div>
  );
}

function D4Icon({ mono = false }) {
  return (
    <div style={{
      width: 180, height: 180, borderRadius: 36,
      background: mono ? INK : BR.plum,
      display: 'grid', placeItems: 'center', position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Stacked tiles effect */}
      <div style={{ position: 'absolute', transform: 'rotate(-10deg) translate(-24px, 6px)' }}>
        <ScrTile letter="E" size={100} color={INK} bg={mono ? '#fff' : BR.saffron} />
      </div>
      <div style={{ position: 'absolute', transform: 'rotate(8deg) translate(18px, -4px)' }}>
        <ScrTile letter="K" points={5} size={110} color={INK} bg="#fff" />
      </div>
    </div>
  );
}

function D4Stacked({ mono = false }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', gap: 12,
    }}>
      <div style={{ display: 'flex', gap: 4 }}>
        <ScrTile letter="K" points={5} size={56} color={INK} bg={PAPER} />
        <ScrTile letter="E" points={1} size={56} color={INK} bg={PAPER} />
        <ScrTile letter="L" points={1} size={56} color={INK} bg={PAPER} />
      </div>
      <div style={{
        fontFamily: 'Fraunces, Georgia, serif',
        fontSize: 32, fontWeight: 600, color: INK,
        letterSpacing: -1,
      }}>kelimely</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// CURRENT LOGO (for comparison)
// ═══════════════════════════════════════════════════════════════
function CurrentLogo() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <div style={{
        width: 64, height: 64, borderRadius: 14,
        background: `linear-gradient(135deg, #5ECEAB, #6B9CF5 50%, #A685F2)`,
        display: 'grid', placeItems: 'center',
        color: '#fff', fontWeight: 900, fontFamily: 'Fraunces, Georgia, serif',
        fontSize: 36, letterSpacing: -0.5,
      }}>K</div>
      <div style={{
        fontFamily: 'Fraunces, Georgia, serif',
        fontSize: 48, fontWeight: 700, color: INK,
        letterSpacing: -1.2,
      }}>kelimely</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// APP — design canvas with all 4 directions
// ═══════════════════════════════════════════════════════════════
function App() {
  const directions = [
    {
      n: 1, name: 'Harf Kutusu',
      tag: 'Letter-box tiles, playful. Each glyph stands alone with its own color.',
      Primary: D1Primary, Icon: D1Icon, Stacked: D1Stacked,
      heroColor: BR.rose, paper: true,
    },
    {
      n: 2, name: 'Kilim',
      tag: 'Stepped K drawn like a Turkish kilim pixel motif. Ornament strip for flourish.',
      Primary: D2Primary, Icon: D2Icon, Stacked: D2Stacked,
      heroColor: BR.terracotta, paper: true,
    },
    {
      n: 3, name: 'Petek',
      tag: 'K formed from three hexagons — nods to the Petek game in the family.',
      Primary: D3Primary, Icon: D3Icon, Stacked: D3Stacked,
      heroColor: BR.saffron, paper: true,
    },
    {
      n: 4, name: 'Kelime Dizisi',
      tag: 'Scrabble-style tiles with point values. Full wordmark becomes a playable rack.',
      Primary: D4Primary, Icon: D4Icon, Stacked: D4Stacked,
      heroColor: BR.plum, paper: true,
    },
  ];

  return (
    <DesignCanvas>
      {/* CURRENT */}
      <DCSection title="Where we are today"
        subtitle="Current mark: a gradient-K tile + Fraunces wordmark. Friendly, but color-unspecific and without a distinct Turkish voice.">
        <DCArtboard label="Current mark (header context)" width={680} height={220}>
          <div style={{
            height: '100%', background: PAPER,
            display: 'grid', placeItems: 'center',
          }}>
            <CurrentLogo />
          </div>
        </DCArtboard>
        <DCPostIt top={60} left={760} rotate={-3} width={240}>
          Refreshing toward: playful letters-as-objects AND a Turkish voice (kilim, ornament, type).
        </DCPostIt>
      </DCSection>

      {/* 4 DIRECTIONS */}
      {directions.map(d => (
        <DCSection key={d.n} title={`Direction ${d.n} · ${d.name}`} subtitle={d.tag}>
          {/* Primary lockup on paper */}
          <DCArtboard label="Primary lockup · on paper" width={780} height={260}>
            <div style={{
              height: '100%', background: PAPER,
              display: 'grid', placeItems: 'center', padding: 30,
            }}>
              <d.Primary />
            </div>
          </DCArtboard>

          {/* Primary on hero color (inverse) */}
          <DCArtboard label="On hero color" width={780} height={260}>
            <div style={{
              height: '100%', background: d.heroColor,
              display: 'grid', placeItems: 'center', padding: 30,
              filter: d.n === 1 ? 'none' : 'none',
            }}>
              <div style={{ filter: 'invert(1) hue-rotate(180deg)', opacity: 0 }} />
              <d.Primary mono={false} />
            </div>
          </DCArtboard>

          {/* Icon variations */}
          <DCArtboard label="App icon · color · mono light · mono dark"
            width={680} height={260}>
            <div style={{
              height: '100%', background: PAPER,
              display: 'flex', alignItems: 'center', justifyContent: 'space-around',
              padding: 20,
            }}>
              <d.Icon />
              <div style={{
                width: 180, height: 180, borderRadius: 36,
                background: INK, display: 'grid', placeItems: 'center',
              }}>
                <div style={{ filter: 'invert(1)' }}>
                  <d.Icon mono />
                </div>
              </div>
              <div style={{
                width: 180, height: 180, borderRadius: 36,
                background: '#fff', display: 'grid', placeItems: 'center',
                border: `2px solid ${LINE}`,
              }}>
                <d.Icon mono />
              </div>
            </div>
          </DCArtboard>

          {/* Stacked + sizes */}
          <DCArtboard label="Stacked lockup + small-size tests" width={560} height={320}>
            <div style={{
              height: '100%', background: PAPER, padding: 24,
              display: 'flex', flexDirection: 'column', gap: 16,
              alignItems: 'center', justifyContent: 'center',
            }}>
              <d.Stacked />
              <div style={{
                marginTop: 10, display: 'flex', gap: 20, alignItems: 'center',
                fontSize: 11, color: 'rgba(60,50,40,0.6)',
              }}>
                <div style={{ transform: 'scale(0.5)', transformOrigin: 'left center' }}>
                  <d.Icon />
                </div>
                <span>180 / 90 / 48 · app icon scales</span>
              </div>
            </div>
          </DCArtboard>
        </DCSection>
      ))}

      <DCPostIt top={32} left={40} rotate={-1.5} width={320}>
        4 polished directions. Each includes primary lockup, on-hero-color, app-icon + mono variants, and a stacked version for narrow placements.
      </DCPostIt>
    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);