// ============================================
// minhahistória — SVG glyphs for book covers + character avatars.
// Single-color, geometric, evocative. Stand-ins for full illustrations.
// ============================================

const Glyph = ({ name, color = "white", size = "100%" }) => {
  const stroke = color;
  const fill = color;
  const common = {
    width: size, height: size, viewBox: "0 0 100 100",
    fill: "none", xmlns: "http://www.w3.org/2000/svg",
  };

  switch (name) {
    case "rocket":
      return (
        <svg {...common}>
          <path d="M50 12c10 6 18 18 18 32 0 9-3 16-8 22l-10 6-10-6c-5-6-8-13-8-22 0-14 8-26 18-32z" stroke={stroke} strokeWidth="3" />
          <circle cx="50" cy="38" r="6" stroke={stroke} strokeWidth="3" />
          <path d="M32 56l-8 12 14-4M68 56l8 12-14-4M50 72v14" stroke={stroke} strokeWidth="3" strokeLinecap="round" />
        </svg>
      );
    case "tree":
      return (
        <svg {...common}>
          <path d="M50 14l16 22h-8l14 20H58l16 22H26l16-22H28l14-20h-8L50 14z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <path d="M44 78v10h12V78" stroke={stroke} strokeWidth="3" />
        </svg>
      );
    case "ship":
      return (
        <svg {...common}>
          <path d="M50 14v40M30 30l20-8 20 8M30 30l20 24 20-24" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <path d="M14 60h72l-8 22H22L14 60z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <path d="M22 70h56" stroke={stroke} strokeWidth="2" opacity="0.6" />
        </svg>
      );
    case "castle":
      return (
        <svg {...common}>
          <path d="M18 84V44h10v-8h8v8h12v-12h12v12h12v-8h8v8h10v40H18z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <path d="M44 84V66h12v18M28 56h6M66 56h6" stroke={stroke} strokeWidth="3" />
          <path d="M40 30l4-10 4 10M58 26l4-10 4 10" stroke={stroke} strokeWidth="2" strokeLinecap="round" />
        </svg>
      );
    case "dino":
      return (
        <svg {...common}>
          <path d="M22 68c0-18 14-28 30-28 12 0 18-6 18-12l8 4c-2 10-8 14-12 16 6 4 10 10 10 18v14H22V68z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <circle cx="68" cy="52" r="2.5" fill={fill} />
          <path d="M28 80v8M40 80v8M56 80v8M68 80v8" stroke={stroke} strokeWidth="3" strokeLinecap="round" />
          <path d="M40 52l-4 4M52 52l-4 4M64 60l-4 4" stroke={stroke} strokeWidth="2" />
        </svg>
      );
    case "treasure":
      return (
        <svg {...common}>
          <path d="M20 36h60v44H20z" stroke={stroke} strokeWidth="3" />
          <path d="M20 36c0-10 8-16 30-16s30 6 30 16" stroke={stroke} strokeWidth="3" />
          <path d="M20 52h60M44 48h12v10H44z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <circle cx="50" cy="30" r="2" fill={fill} />
        </svg>
      );
    case "tiger":
      return (
        <svg {...common}>
          <circle cx="50" cy="54" r="26" stroke={stroke} strokeWidth="3" />
          <path d="M30 36l-2-12 14 8M70 36l2-12-14 8" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <circle cx="42" cy="52" r="2.5" fill={fill} />
          <circle cx="58" cy="52" r="2.5" fill={fill} />
          <path d="M48 64h4M44 70c2 2 4 3 6 3s4-1 6-3" stroke={stroke} strokeWidth="2.5" strokeLinecap="round" />
          <path d="M28 50l-6-2M28 56l-6 0M72 50l6-2M72 56l6 0" stroke={stroke} strokeWidth="2" strokeLinecap="round" />
        </svg>
      );
    case "wand":
      return (
        <svg {...common}>
          <path d="M58 24l8 8-40 40-8-8z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <path d="M62 12l3 7 7 3-7 3-3 7-3-7-7-3 7-3z" stroke={stroke} strokeWidth="2.5" strokeLinejoin="round" />
          <circle cx="80" cy="32" r="2" fill={fill} />
          <circle cx="76" cy="50" r="2" fill={fill} />
          <circle cx="22" cy="20" r="2" fill={fill} />
        </svg>
      );
    case "anchor":
      return (
        <svg {...common}>
          <circle cx="50" cy="26" r="6" stroke={stroke} strokeWidth="3" />
          <path d="M50 32v44M38 40h24" stroke={stroke} strokeWidth="3" strokeLinecap="round" />
          <path d="M22 60c0 12 12 22 28 22s28-10 28-22" stroke={stroke} strokeWidth="3" strokeLinecap="round" />
          <path d="M22 60h-6l6-6M78 60h6l-6-6" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
        </svg>
      );
    case "crown":
      return (
        <svg {...common}>
          <path d="M16 36l10 30h48l10-30-16 12-18-22-18 22z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <path d="M22 74h56v8H22z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <circle cx="16" cy="36" r="3" fill={fill} />
          <circle cx="84" cy="36" r="3" fill={fill} />
          <circle cx="50" cy="26" r="3" fill={fill} />
        </svg>
      );
    case "leaf":
      return (
        <svg {...common}>
          <path d="M50 14C30 22 18 38 18 58c0 16 10 26 26 26 20 0 38-18 38-50 0-8-2-14-4-20-6 2-18 6-28 0z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <path d="M40 78c4-22 14-38 30-50" stroke={stroke} strokeWidth="2.5" strokeLinecap="round" />
        </svg>
      );
    case "globe":
      return (
        <svg {...common}>
          <circle cx="50" cy="50" r="32" stroke={stroke} strokeWidth="3" />
          <ellipse cx="50" cy="50" rx="14" ry="32" stroke={stroke} strokeWidth="2.5" />
          <path d="M18 50h64M22 34h56M22 66h56" stroke={stroke} strokeWidth="2.5" />
        </svg>
      );
    case "lens":
      return (
        <svg {...common}>
          <circle cx="42" cy="42" r="22" stroke={stroke} strokeWidth="3" />
          <path d="M58 58l22 22" stroke={stroke} strokeWidth="4" strokeLinecap="round" />
          <path d="M34 38c2-6 6-8 12-8" stroke={stroke} strokeWidth="2.5" strokeLinecap="round" />
        </svg>
      );
    case "mountain":
      return (
        <svg {...common}>
          <path d="M10 78l22-36 14 20 10-14 18 30z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <path d="M28 50l4-4 4 4M66 60l4-4 4 4" stroke={stroke} strokeWidth="2.5" />
          <circle cx="68" cy="22" r="6" stroke={stroke} strokeWidth="2.5" />
        </svg>
      );
    case "star":
      return (
        <svg {...common}>
          <path d="M50 14l10 24 26 2-20 17 7 25-23-14-23 14 7-25-20-17 26-2z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
        </svg>
      );
    case "moon":
      return (
        <svg {...common}>
          <path d="M62 16c-3 4-5 9-5 16 0 16 12 28 28 28-4 14-18 24-34 24-20 0-36-16-36-36s16-36 36-36c4 0 8 1 11 4z" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
          <circle cx="22" cy="28" r="2" fill={fill} />
          <circle cx="76" cy="74" r="2" fill={fill} />
        </svg>
      );
    default:
      return null;
  }
};

// A tiny child character — reusable inside BookCover and elsewhere.
const TinyChar = ({ skin = "#F4C99A", hair = "#3F2410", shirt = "#FFFFFF", accent = "#FF7A3A", size = 30 }) => {
  const id = "tcc_" + (skin + hair).replace(/#/g, "");
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ flex: "0 0 auto", display: "block" }}>
      <defs>
        <clipPath id={id}><circle cx="16" cy="16" r="15" /></clipPath>
      </defs>
      <circle cx="16" cy="16" r="15" fill="rgba(255,255,255,0.92)" />
      <g clipPath={`url(#${id})`}>
        {/* shirt */}
        <path d="M2 32 Q2 24 16 22 Q30 24 30 32 Z" fill={shirt} />
        <path d="M16 22 L13 32 M16 22 L19 32" stroke={accent} strokeWidth="1.2" />
        {/* neck */}
        <path d="M13 19 L13 23 Q16 24 19 23 L19 19 Z" fill={skin} />
        {/* head */}
        <circle cx="16" cy="13" r="9" fill={skin} />
        {/* hair */}
        <path d="M7 13 Q6 5 16 4 Q26 5 25 13 Q22 9 16 8 Q10 9 7 13 Z" fill={hair} />
        {/* cheeks */}
        <circle cx="11.5" cy="15" r="1.2" fill={accent} opacity="0.32" />
        <circle cx="20.5" cy="15" r="1.2" fill={accent} opacity="0.32" />
        {/* eyes */}
        <circle cx="12.5" cy="13.5" r="1.1" fill="#1A1A1A" />
        <circle cx="19.5" cy="13.5" r="1.1" fill="#1A1A1A" />
        <circle cx="13" cy="13.1" r="0.35" fill="white" />
        <circle cx="20" cy="13.1" r="0.35" fill="white" />
        {/* smile */}
        <path d="M12.5 17.5 Q16 20 19.5 17.5" stroke="#1A1A1A" strokeWidth="1.2" fill="none" strokeLinecap="round" />
      </g>
      <circle cx="16" cy="16" r="15" fill="none" stroke="rgba(0,0,0,0.08)" strokeWidth="0.8" />
    </svg>
  );
};

// A full styled book cover with title + personalization stripe + character.
const BookCover = ({ product, small = false, personalization }) => {
  const { brand, title, cover, glyph, coverImage } = product;
  const p = {
    name: personalization?.name || "[ Seu Nome ]",
    skin: personalization?.skin || "#F4C99A",
    hair: personalization?.hair || "#3F2410",
  };

  if (coverImage) {
    return (
      <div className={`book-art-wrap cover-${cover}`} style={{
        width: "100%", height: "100%",
        borderRadius: small ? 10 : 12,
        boxShadow: "0 10px 22px rgba(15,15,35,0.24), inset 0 0 0 1px rgba(255,255,255,0.20)",
        position: "relative",
        overflow: "hidden",
        background: "#fff",
      }}>
        <img
          src={coverImage}
          alt={`Livro personalizado infantil ${title}`}
          loading="lazy"
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
        />
      </div>
    );
  }

  return (
    <div className={`book-art-wrap cover-${cover}`} style={{
      width: "100%", height: "100%",
      borderRadius: small ? 10 : 12,
      display: "flex", flexDirection: "column",
      padding: small ? "10px 10px 9px" : "18px 16px 14px",
      color: "white",
      boxShadow: "0 10px 22px rgba(15,15,35,0.24), inset 0 0 0 1px rgba(255,255,255,0.20), inset 0 -28px 50px rgba(0,0,0,0.10)",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* haze */}
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(circle at 80% 0%, rgba(255,255,255,0.26), transparent 55%), radial-gradient(circle at 20% 100%, rgba(0,0,0,0.18), transparent 55%)",
        pointerEvents: "none",
      }} />
      {/* edge highlight */}
      <div aria-hidden style={{
        position: "absolute", left: 4, right: 4, top: 4, bottom: 4,
        border: "1px solid rgba(255,255,255,0.14)", borderRadius: small ? 8 : 10,
        pointerEvents: "none",
      }} />

      <div style={{ position: "relative", zIndex: 1 }}>
        <div style={{
          fontFamily: "'Fredoka', sans-serif",
          fontWeight: 700,
          fontSize: small ? 8 : 11,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          opacity: 0.82,
        }}>{brand}</div>
        <div className="font-display" style={{
          fontWeight: 800,
          fontSize: small ? 13 : 18,
          lineHeight: 1.05,
          marginTop: 3,
          textShadow: "0 1px 0 rgba(0,0,0,0.20)",
          textWrap: "balance",
          letterSpacing: "-0.01em",
        }}>{title}</div>
      </div>

      <div style={{ position: "relative", zIndex: 1, flex: 1, display: "flex", alignItems: "center", justifyContent: "center", marginTop: 4 }}>
        <div style={{ width: small ? "56%" : "66%", opacity: 0.94 }}>
          <Glyph name={glyph} color="white" />
        </div>
      </div>

      {/* personalization stripe */}
      <div style={{
        position: "relative", zIndex: 1,
        marginTop: "auto",
        display: "flex", alignItems: "center", gap: small ? 6 : 8,
        background: "rgba(0,0,0,0.22)",
        borderRadius: 999,
        padding: small ? "3px 8px 3px 3px" : "4px 12px 4px 4px",
      }}>
        <TinyChar skin={p.skin} hair={p.hair} size={small ? 22 : 30}
                  shirt={cover === "yellow" ? "#1B3C7A" : "#FFFFFF"} />
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1, minWidth: 0 }}>
          <div style={{
            fontSize: small ? 6 : 8, letterSpacing: "0.16em",
            opacity: 0.75, textTransform: "uppercase", fontWeight: 800,
          }}>uma aventura para</div>
          <div className="font-display" style={{
            fontWeight: 800,
            fontSize: small ? 11 : 16,
            letterSpacing: "0.02em",
            marginTop: 1,
            whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
          }}>{p.name}</div>
        </div>
      </div>
    </div>
  );
};

// Small character avatar (used in circular carousel).
const CharacterAvatar = ({ character }) => (
  <div className="avatar-ring" style={{
    background: `conic-gradient(from 200deg, ${character.color}, var(--yellow), var(--cyan), ${character.color})`,
  }}>
    <div className="avatar-inner" style={{ background: character.color }}>
      <div style={{ width: "60%", color: "white" }}>
        <Glyph name={character.icon} color="white" />
      </div>
    </div>
  </div>
);

Object.assign(window, { Glyph, BookCover, CharacterAvatar, TinyChar });