// Landing page sections for YumVille. All styles inline + scoped via classNames
// to avoid collisions. Relies on window.P, CardFace, CardBack, avatars.
var { useState, useEffect, useRef } = React;
var P = window.P;
var { CardFace, CardBack, ChefAvatar, BearAvatar, FoxAvatar, OwlAvatar } = window;

// Shared tiny components ---------------------------------------------------

function Stamp({ children, rot = -3, color = P.red }) {
  return (
    <span
      style={{
        display: 'inline-block',
        transform: `rotate(${rot}deg)`,
        border: `3px solid ${color}`,
        color: color,
        padding: '4px 14px',
        fontWeight: 900,
        fontSize: 13,
        letterSpacing: 2,
        textTransform: 'uppercase',
        borderRadius: 6,
        background: 'transparent',
      }}
    >
      {children}
    </span>
  );
}

function Eyebrow({ children }) {
  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        fontSize: 12,
        fontWeight: 900,
        letterSpacing: 3,
        color: P.red,
        textTransform: 'uppercase',
      }}
    >
      <span style={{ width: 24, height: 2, background: P.red, borderRadius: 2 }} />
      {children}
    </div>
  );
}

function SectionTitle({ eyebrow, title, sub, inverted }) {
  return (
    <div style={{ marginBottom: 36 }}>
      <Eyebrow>{eyebrow}</Eyebrow>
      <h2
        style={{
          fontSize: 64,
          lineHeight: 0.95,
          letterSpacing: -2,
          margin: '12px 0 12px',
          color: inverted ? P.cream : P.brown,
          fontWeight: 900,
          textWrap: 'balance',
        }}
      >
        {title}
      </h2>
      {sub && (
        <p
          style={{
            maxWidth: 640,
            fontSize: 18,
            lineHeight: 1.5,
            color: inverted ? P.creamDark : P.brownLite,
            margin: 0,
            textWrap: 'pretty',
          }}
        >
          {sub}
        </p>
      )}
    </div>
  );
}

function Btn({ children, variant = 'primary', icon }) {
  const styles = {
    primary: { bg: P.red, fg: P.cream, border: P.brown, shadow: P.brown },
    secondary: { bg: P.cream, fg: P.brown, border: P.brown, shadow: P.brown },
    ghost: { bg: 'transparent', fg: P.cream, border: P.cream, shadow: P.cream },
  }[variant];
  return (
    <button
      onClick={(e) => e.preventDefault()}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        background: styles.bg,
        color: styles.fg,
        border: `3px solid ${styles.border}`,
        borderRadius: 999,
        padding: '14px 28px',
        fontWeight: 900,
        fontSize: 15,
        letterSpacing: 1.5,
        textTransform: 'uppercase',
        cursor: 'pointer',
        boxShadow: `0 4px 0 ${styles.shadow}`,
        fontFamily: 'inherit',
        transition: 'transform .15s ease, box-shadow .15s ease',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = 'translateY(-2px)';
        e.currentTarget.style.boxShadow = `0 6px 0 ${styles.shadow}`;
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = 'translateY(0)';
        e.currentTarget.style.boxShadow = `0 4px 0 ${styles.shadow}`;
      }}
    >
      {children}
      {icon && <span style={{ fontSize: 18 }}>{icon}</span>}
    </button>
  );
}

// Chunky pill for tags
function Pill({ children, bg = P.cream, fg = P.brown }) {
  return (
    <span
      style={{
        display: 'inline-block',
        background: bg,
        color: fg,
        border: `2px solid ${P.brown}`,
        borderRadius: 999,
        padding: '4px 10px',
        fontSize: 11,
        fontWeight: 900,
        letterSpacing: 1,
        textTransform: 'uppercase',
        boxShadow: `0 2px 0 ${P.brown}`,
      }}
    >
      {children}
    </span>
  );
}

// Large wordmark with pizza slice replacing the V
function Wordmark({ size = 1 }) {
  const s = size;
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 0, fontWeight: 900, letterSpacing: -4 * s, lineHeight: 0.85 }}>
      <span style={{ fontSize: 120 * s, color: P.brown }}>YUM</span>
      <span style={{ display: 'inline-block', transform: 'translateY(6px)', margin: `0 ${-6 * s}px 0 ${-4 * s}px` }}>
        <svg width={120 * s} height={130 * s} viewBox="0 0 120 130">
          {/* Giant V made of pizza slice */}
          <defs>
            <linearGradient id="vgrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor={P.orange} />
              <stop offset="1" stopColor={P.pizzaDeep} />
            </linearGradient>
          </defs>
          <path d="M 8 8 L 60 120 L 112 8 L 96 8 L 60 85 L 24 8 Z" fill="url(#vgrad)" stroke={P.brown} strokeWidth="4" strokeLinejoin="round" />
          {/* cheese drip */}
          <path d="M 30 20 Q 34 28, 38 22 Q 42 30, 48 24 L 48 30 Q 42 34, 38 28 Q 34 34, 30 28 Z" fill={P.yellow} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
          {/* pepperoni */}
          <circle cx="50" cy="50" r="8" fill={P.red} stroke={P.brown} strokeWidth="2.5" />
          <circle cx="70" cy="40" r="6" fill={P.red} stroke={P.brown} strokeWidth="2.5" />
          <circle cx="60" cy="72" r="7" fill={P.red} stroke={P.brown} strokeWidth="2.5" />
          {/* basil */}
          <ellipse cx="82" cy="55" rx="4" ry="2.5" fill={P.green} stroke={P.brown} strokeWidth="1.5" transform="rotate(30 82 55)" />
          <ellipse cx="42" cy="70" rx="4" ry="2.5" fill={P.green} stroke={P.brown} strokeWidth="1.5" transform="rotate(-20 42 70)" />
        </svg>
      </span>
      <span style={{ fontSize: 120 * s, color: P.brown }}>ILLE</span>
    </div>
  );
}

// HERO ---------------------------------------------------------------------

function Hero() {
  const [hoverCard, setHoverCard] = useState(null);
  const heroCards = [
    { kind: 'flour', x: -340, y: 40, rot: -18, z: 2 },
    { kind: 'sauce', x: -180, y: -10, rot: -8, z: 3 },
    { kind: 'professionalOven', x: 0, y: -40, rot: 0, z: 5 },
    { kind: 'familyFeast', x: 160, y: -10, rot: 8, z: 4 },
    { kind: 'jokerChef', x: 320, y: 40, rot: 18, z: 3 },
  ];
  return (
    <section
      style={{
        position: 'relative',
        padding: '24px 56px 80px',
        background: `
          radial-gradient(ellipse 80% 60% at 50% 30%, ${P.doughBase} 0%, transparent 70%),
          ${P.cream}
        `,
        overflow: 'hidden',
        minHeight: 780,
      }}
    >
      {/* tiling checker backdrop behind wordmark */}
      <div
        aria-hidden
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage: `
            radial-gradient(circle at 1px 1px, ${P.brown}12 1px, transparent 0)
          `,
          backgroundSize: '18px 18px',
          pointerEvents: 'none',
          opacity: 0.7,
        }}
      />

      {/* nav */}
      <nav
        style={{
          position: 'relative',
          zIndex: 5,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          paddingBottom: 48,
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <svg width="32" height="32" viewBox="0 0 32 32">
            <circle cx="16" cy="16" r="14" fill={P.orange} stroke={P.brown} strokeWidth="2.5" />
            <path d="M 16 4 L 26 24 Q 16 28, 6 24 Z" fill={P.yellow} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
            <circle cx="13" cy="16" r="1.8" fill={P.red} />
            <circle cx="18" cy="19" r="1.8" fill={P.red} />
            <circle cx="16" cy="22" r="1.5" fill={P.red} />
          </svg>
          <span style={{ fontWeight: 900, fontSize: 20, letterSpacing: -0.5, color: P.brown }}>YumVille</span>
          <span style={{ marginLeft: 4, fontSize: 11, fontWeight: 800, letterSpacing: 1.5, color: P.brownLite, border: `1.5px solid ${P.brown}`, padding: '2px 6px', borderRadius: 4 }}>
            PIZZA PIAZZA · v1
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          {['NASIL OYNANIR', 'KART KODEKSI', 'SABOTAJ', 'EDITIONS'].map((x) => (
            <a
              key={x}
              href="#"
              onClick={(e) => e.preventDefault()}
              style={{
                color: P.brown,
                textDecoration: 'none',
                fontWeight: 800,
                fontSize: 12,
                letterSpacing: 1.5,
              }}
            >
              {x}
            </a>
          ))}
          <Btn variant="primary">Hemen Oyna</Btn>
        </div>
      </nav>

      {/* bg emoji-ish flourishes */}
      <div aria-hidden style={{ position: 'absolute', top: 120, left: -20, opacity: 0.35, transform: 'rotate(-20deg)' }}>
        <svg width="140" height="140" viewBox="0 0 64 88"><CardBackInline variant="red" /></svg>
      </div>
      <div aria-hidden style={{ position: 'absolute', top: 160, right: -30, opacity: 0.35, transform: 'rotate(18deg)' }}>
        <svg width="140" height="140" viewBox="0 0 64 88"><CardBackInline variant="mixed" /></svg>
      </div>

      {/* headline */}
      <div style={{ position: 'relative', zIndex: 5, textAlign: 'center', paddingTop: 24 }}>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginBottom: 20 }}>
          <Stamp rot={-3} color={P.red}>Aile Kart Oyunu</Stamp>
          <Stamp rot={2} color={P.green}>2–4 Oyuncu</Stamp>
          <Stamp rot={-1} color={P.brown}>30 Dakika</Stamp>
        </div>
        <div style={{ display: 'inline-block' }}>
          <Wordmark size={1} />
        </div>
        <h1
          style={{
            fontSize: 28,
            fontWeight: 800,
            letterSpacing: -0.5,
            color: P.brownLite,
            margin: '4px 0 0',
            textWrap: 'balance',
            maxWidth: 760,
            marginLeft: 'auto',
            marginRight: 'auto',
          }}
        >
          Malzemeleri topla, hamuru yoğur, rakiplerine <span style={{ color: P.red, fontStyle: 'italic' }}>küf at</span> ve
          mahalleyi pizza imparatorluğuna çevir.
        </h1>

        <div style={{ display: 'flex', justifyContent: 'center', gap: 14, marginTop: 32 }}>
          <Btn variant="primary" icon="▸">Oyuna Başla</Btn>
          <Btn variant="secondary">Kural Kitabı</Btn>
        </div>
      </div>

      {/* hero card fan */}
      <div
        style={{
          position: 'relative',
          zIndex: 4,
          height: 340,
          marginTop: 48,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'flex-end',
        }}
      >
        <div style={{ position: 'relative', width: 800, height: 320 }}>
          {heroCards.map((c) => {
            const isHover = hoverCard === c.kind;
            return (
              <div
                key={c.kind}
                onMouseEnter={() => setHoverCard(c.kind)}
                onMouseLeave={() => setHoverCard(null)}
                style={{
                  position: 'absolute',
                  left: '50%',
                  bottom: 0,
                  transform: `translate(calc(-50% + ${c.x}px), ${c.y - (isHover ? 30 : 0)}px) rotate(${c.rot}deg) scale(${isHover ? 1.1 : 1})`,
                  transformOrigin: 'bottom center',
                  zIndex: isHover ? 20 : c.z,
                  transition: 'transform .35s cubic-bezier(.2,.8,.2,1)',
                  filter: `drop-shadow(0 18px 24px ${P.brown}55)`,
                  cursor: 'pointer',
                }}
              >
                <CardFace kind={c.kind} w={160} h={220} />
              </div>
            );
          })}
        </div>
      </div>

      {/* stat strip */}
      <div
        style={{
          position: 'relative',
          zIndex: 5,
          marginTop: 24,
          display: 'flex',
          justifyContent: 'center',
          gap: 64,
          flexWrap: 'wrap',
        }}
      >
        {[
          ['128', 'toplam kart'],
          ['20', 'farklı kart türü'],
          ['4', 'faz · her tur'],
          ['8', 'pizza · ödül havuzu'],
        ].map(([n, l]) => (
          <div key={l} style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 48, fontWeight: 900, color: P.red, letterSpacing: -1, lineHeight: 1 }}>{n}</div>
            <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 2, color: P.brownLite, textTransform: 'uppercase', marginTop: 4 }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Inline card back for decorative background
function CardBackInline({ variant = 'red' }) {
  const c = variant === 'mixed' ? { a: P.orange, c: P.green } : { a: P.red, c: P.yellow };
  const pid = `bgpat-${variant}`;
  return (
    <g>
      <defs>
        <pattern id={pid} width="10" height="10" patternUnits="userSpaceOnUse">
          <rect width="10" height="10" fill={c.a} />
          <path d="M0 5 L5 0 L10 5 L5 10 Z" fill={c.c} />
        </pattern>
      </defs>
      <rect x="1.25" y="1.25" width="61.5" height="85.5" rx="8" fill={P.cream} stroke={P.brown} strokeWidth="2.5" />
      <rect x="4" y="4" width="56" height="80" rx="5" fill={`url(#${pid})`} />
    </g>
  );
}

Object.assign(window, { Hero, SectionTitle, Eyebrow, Stamp, Btn, Pill });