// ============================================
// LOGO / WORDMARK COMPONENTS — usa o PNG oficial
// ============================================
const { useState, useEffect, useRef } = React;

const LOGO_SRC = "assets/logo.png";

// Logo oficial (oval "mário · choperia ·"). invert=true para fundos escuros.
function Logo({ size = 220, invert = false, style = {} }) {
  return (
    <img
      src={LOGO_SRC}
      alt="Choperia do Mário"
      style={{
        width: size,
        height: "auto",
        display: "block",
        filter: invert ? "invert(1) brightness(1.1)" : "none",
        ...style
      }}
    />
  );
}

// Selo de 30 anos — marca comemorativa oficial (2026)
function Selo30({ size = 180, invert = false }) {
  return (
    <img
      src="assets/logo-30anos.png"
      alt="Choperia do Mário · 30 anos"
      style={{
        width: size,
        height: "auto",
        display: "block",
        filter: invert ? "invert(1) brightness(1.05)" : "none"
      }}
    />
  );
}

Object.assign(window, { Selo30 });

// Wordmark = logo oficial + selo "Desde 1996 · Uberaba MG" opcional
function Wordmark({ size = 1, invert = false, withTag = true }) {
  const color = invert ? "var(--creme)" : "var(--ink)";
  const accent = invert ? "var(--dourado-claro)" : "var(--ambar)";
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
      {withTag && (
        <div style={{
          fontSize: 13,
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontWeight: 500,
          color: accent
        }}>
          Desde 1996
        </div>
      )}
      <Logo size={260 * size} invert={invert} />
      {withTag && (
        <div style={{
          fontSize: 13,
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontWeight: 500,
          color: invert ? "rgba(250,246,236,0.7)" : "var(--ink-soft)"
        }}>
          Uberaba · MG
        </div>
      )}
    </div>
  );
}

// Monograma "M" em círculo — derivado, para favicon/avatar
function Monogram({ size = 80, dark = false }) {
  const bg = dark ? "var(--carvao)" : "var(--creme)";
  const fg = dark ? "var(--creme)" : "var(--carvao)";
  return (
    <div style={{
      width: size, height: size,
      background: bg,
      color: fg,
      border: `2px solid ${fg}`,
      borderRadius: "50%",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontFamily: "'Fraunces', 'Alegreya', Georgia, serif",
      fontWeight: 700,
      fontSize: size * 0.5,
      position: "relative",
      flexShrink: 0,
      lineHeight: 1
    }}>
      <span style={{ transform: "translateY(-1px)" }}>m</span>
      <div style={{
        position: "absolute", inset: 5, border: `1px solid ${fg}`, borderRadius: "50%", opacity: 0.55
      }} />
    </div>
  );
}

function OrnamentalDivider({ width = 200 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, width, color: "var(--ambar)" }}>
      <div style={{ flex: 1, height: 1, background: "currentColor" }} />
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
        <circle cx="7" cy="7" r="2.5" fill="currentColor"/>
        <circle cx="7" cy="7" r="5.5" stroke="currentColor"/>
      </svg>
      <div style={{ flex: 1, height: 1, background: "currentColor" }} />
    </div>
  );
}

Object.assign(window, { Logo, Wordmark, Monogram, OrnamentalDivider });