/* ──────────────────────────────────────────────────────────────
   Sakura — icons + brand marks (SVG)
   Recreations of motifs spotted on the physical card.
   ────────────────────────────────────────────────────────────── */

/* "sakura" wordmark — bold lowercase geometric (Outfit 800) in gold.
   On the printed card the subtitle is set in caps between two hairlines.
   variant: 'lg' (hero) | 'sm' (chip)                                   */
const SakuraWordmark = ({ variant = 'lg', color = 'var(--sakura-gold)' }) => {
  if (variant === 'sm') {
    return (
      <span style={{
        fontFamily: 'var(--font-display)',
        fontWeight: 800,
        fontSize: 18,
        letterSpacing: '-0.01em',
        color,
        display: 'inline-flex',
        alignItems: 'center',
        gap: 6,
      }}>
        <SakuraGlyph size={14} color={color} />
        sakura
      </span>
    );
  }
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
      <span style={{
        fontFamily: 'var(--font-display)',
        fontWeight: 800,
        fontSize: 56,
        lineHeight: 0.95,
        letterSpacing: '-0.025em',
        color,
      }}>sakura</span>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        fontFamily: 'var(--font-display)', fontWeight: 500,
        fontSize: 9, letterSpacing: '0.22em',
        color,
        textTransform: 'uppercase',
      }}>
        <span style={{ width: 28, height: 1, background: color, opacity: 0.7 }} />
        Sushi Japonés y Cocina Asiática
        <span style={{ width: 28, height: 1, background: color, opacity: 0.7 }} />
      </div>
    </div>
  );
};

/* The little 5-petal blossom glyph that sits next to the small wordmark
   on the back of the printed card — gold solid silhouette.            */
const SakuraGlyph = ({ size = 16, color = 'var(--sakura-gold)' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
    {[0, 72, 144, 216, 288].map(rot => (
      <path
        key={rot}
        d="M12 12 C 11 7, 9 5, 12 3 C 15 5, 13 7, 12 12 Z"
        fill={color}
        transform={`rotate(${rot} 12 12)`}
      />
    ))}
    <circle cx="12" cy="12" r="1.4" fill="var(--sakura-paper)" opacity="0.9" />
  </svg>
);

/* ───────────── The STAMP — the heart of this design ─────────────────
   Real photo of the rubber stamp, background-removed.
   Empty cells = same image desaturated + very low opacity (subtle ghost).
   ───────────────────────────────────────────────────────────────── */
const StampGlyph = ({ filled, index = 0, size = 56 }) => {
  // deterministic hand-pressed rotation per cell
  const rot = ((index * 37) % 23) - 11;

  return (
    <div style={{
      width: size, height: size,
      position: 'relative',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {/* paper-halo behind the ink (matches the printed card's white spot) */}
      <div style={{
        position: 'absolute', inset: 0,
        borderRadius: '50%',
        background:
          'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 78%)',
        pointerEvents: 'none',
      }} />

      <img
        src="assets/stamp.png"
        alt=""
        style={{
          position: 'relative',
          width: '92%',
          height: '92%',
          objectFit: 'contain',
          transform: `rotate(${rot}deg)`,
          transition: 'transform .4s ease, filter .5s ease, opacity .5s ease',
          opacity: filled ? 1 : 0.18,
          filter: filled
            ? 'drop-shadow(0 0 10px rgba(47,91,170,0.35))'
            : 'grayscale(1) brightness(1.25)',
        }}
      />
    </div>
  );
};

/* Hand-painted watercolour blossom cluster (decorative corner motif,
   echoing the printed card's pink sakura flowers). Stylised SVG —
   not photorealistic but unmistakably from the same family.           */
const CornerBlossoms = ({ size = 200, flip = false, opacity = 0.85 }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 200 200"
    style={{ transform: flip ? 'scaleX(-1)' : 'none', opacity }}
    aria-hidden="true"
  >
    <defs>
      <radialGradient id="petal-grad" cx="0.5" cy="0.4" r="0.6">
        <stop offset="0%"  stopColor="#FFE3E3" />
        <stop offset="55%" stopColor="#F3B6BA" />
        <stop offset="100%" stopColor="#D87B82" />
      </radialGradient>
    </defs>
    {/* branch */}
    <path
      d="M 200 200 Q 150 170, 110 130 Q 80 105, 40 95"
      stroke="#8A6A4A" strokeWidth="2.2" fill="none" strokeLinecap="round" opacity="0.7"
    />
    <path
      d="M 130 140 Q 115 125, 85 130"
      stroke="#8A6A4A" strokeWidth="1.4" fill="none" strokeLinecap="round" opacity="0.6"
    />

    {/* five-petal flowers at a few positions */}
    {[
      { x: 40,  y: 90,  s: 1.2 },
      { x: 95,  y: 120, s: 1.05 },
      { x: 130, y: 150, s: 1.4 },
      { x: 165, y: 175, s: 0.9 },
      { x: 70,  y: 135, s: 0.75 },
    ].map((f, i) => (
      <g key={i} transform={`translate(${f.x} ${f.y}) scale(${f.s}) rotate(${i * 23})`}>
        {[0, 72, 144, 216, 288].map(rot => (
          <ellipse
            key={rot}
            cx="0" cy="-13" rx="9" ry="14"
            fill="url(#petal-grad)"
            transform={`rotate(${rot})`}
            opacity="0.92"
          />
        ))}
        <circle cx="0" cy="0" r="3" fill="#FBE3A0" />
        {[0, 72, 144, 216, 288].map(rot => (
          <circle
            key={rot}
            cx="0" cy="-5" r="0.9" fill="#C46B73"
            transform={`rotate(${rot})`}
          />
        ))}
      </g>
    ))}
  </svg>
);

/* Pseudo-QR — a deterministic block pattern with finder corners.
   For mock fidelity only; in production wire a real QR library.       */
const FakeQR = ({ size = 180, fg = '#0E0B07', bg = '#FFFFFF' }) => {
  const grid = 25;
  const cell = size / grid;
  // deterministic pseudo-random pattern
  const cells = [];
  let seed = 1337;
  const rand = () => {
    seed = (seed * 9301 + 49297) % 233280;
    return seed / 233280;
  };
  for (let y = 0; y < grid; y++) {
    for (let x = 0; x < grid; x++) {
      // skip finder zones
      const inFinder = (
        (x < 7 && y < 7) ||
        (x >= grid - 7 && y < 7) ||
        (x < 7 && y >= grid - 7)
      );
      if (inFinder) continue;
      if (rand() > 0.55) cells.push({ x, y });
    }
  }
  const Finder = ({ x, y }) => (
    <g transform={`translate(${x * cell} ${y * cell})`}>
      <rect width={cell * 7} height={cell * 7} fill={fg} />
      <rect x={cell} y={cell} width={cell * 5} height={cell * 5} fill={bg} />
      <rect x={cell * 2} y={cell * 2} width={cell * 3} height={cell * 3} fill={fg} />
    </g>
  );
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} shapeRendering="crispEdges">
      <rect width={size} height={size} fill={bg} />
      {cells.map((c, i) => (
        <rect key={i} x={c.x * cell} y={c.y * cell} width={cell} height={cell} fill={fg} />
      ))}
      <Finder x={0} y={0} />
      <Finder x={grid - 7} y={0} />
      <Finder x={0} y={grid - 7} />
    </svg>
  );
};

/* Tiny inline icons (gold/line). Stroke 1.5, 24px box.                 */
const Icon = ({ name, size = 20, color = 'currentColor' }) => {
  const s = { width: size, height: size, fill: 'none', stroke: color, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'clock':    return <svg viewBox="0 0 24 24" style={s}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'phone':    return <svg viewBox="0 0 24 24" style={s}><path d="M5 4h4l2 5-2 1a11 11 0 0 0 5 5l1-2 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case 'pin':      return <svg viewBox="0 0 24 24" style={s}><path d="M12 21s-7-7.2-7-12a7 7 0 0 1 14 0c0 4.8-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'qr':       return <svg viewBox="0 0 24 24" style={s}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><path d="M14 14h3v3h-3zM20 14v3M14 20h3M20 20v1"/></svg>;
    case 'home':     return <svg viewBox="0 0 24 24" style={s}><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"/></svg>;
    case 'gift':     return <svg viewBox="0 0 24 24" style={s}><rect x="3" y="8" width="18" height="5" rx="1"/><path d="M5 13v8h14v-8M12 8v13M8 8c-2 0-2-4 0-4s4 4 4 4-2 0-4 0zM16 8c2 0 2-4 0-4s-4 4-4 4 2 0 4 0z"/></svg>;
    case 'menu':     return <svg viewBox="0 0 24 24" style={s}><path d="M4 5h16M4 12h16M4 19h16"/></svg>;
    case 'user':     return <svg viewBox="0 0 24 24" style={s}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case 'check':    return <svg viewBox="0 0 24 24" style={s}><path d="M4 12l5 5L20 6"/></svg>;
    case 'plus':     return <svg viewBox="0 0 24 24" style={s}><path d="M12 5v14M5 12h14"/></svg>;
    case 'sparkle':  return <svg viewBox="0 0 24 24" style={s}><path d="M12 3v6m0 6v6m-9-9h6m6 0h6M6 6l4 4m4 4l4 4M6 18l4-4m4-4l4-4"/></svg>;
    case 'flash':    return <svg viewBox="0 0 24 24" style={s}><path d="M13 3L4 14h7l-1 7 9-11h-7z"/></svg>;
    case 'history':  return <svg viewBox="0 0 24 24" style={s}><path d="M3 12a9 9 0 1 0 3-6.7M3 4v5h5"/><path d="M12 8v5l3 2"/></svg>;
    case 'arrow-rt': return <svg viewBox="0 0 24 24" style={s}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    default: return null;
  }
};

Object.assign(window, {
  SakuraWordmark, SakuraGlyph, StampGlyph, CornerBlossoms, FakeQR, Icon,
});