/* global React */
// Cartela mockup — fakes a personal color-analysis infographic.
// Used in the hero and in the cartela showcase.

const { useState } = React;

// Placeholder portrait — neutral, soft, ambient. Built from SVG so we
// don't need to source/avoid AI-image attribution and it stays on-brand.
function PortraitPlaceholder({ tone = "warm" }) {
  // tone shifts the skin/background palette to match each "estação"
  const palettes = {
    warm:  { bg: "#F2C9B1", skin: "#E8B68F", hair: "#4B3A2E", neck: "#D9A47A" },
    cool:  { bg: "#D6D6E2", skin: "#E5C9BD", hair: "#2E2B30", neck: "#C9A89A" },
    light: { bg: "#F5E6D7", skin: "#EFCEB1", hair: "#A47648", neck: "#E0BB99" },
    deep:  { bg: "#C7B49E", skin: "#A87B5B", hair: "#241712", neck: "#8E6649" },
  };
  const p = palettes[tone] || palettes.warm;
  return (
    <svg viewBox="0 0 200 240" style={{ width: "100%", height: "100%", display: "block", borderRadius: 14 }} preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id={`bgg-${tone}`} cx="50%" cy="35%" r="75%">
          <stop offset="0%" stopColor={p.bg} stopOpacity="1" />
          <stop offset="100%" stopColor={p.bg} stopOpacity="0.6" />
        </radialGradient>
        <linearGradient id={`skg-${tone}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={p.skin} />
          <stop offset="100%" stopColor={p.neck} />
        </linearGradient>
      </defs>
      <rect width="200" height="240" fill={`url(#bgg-${tone})`} />
      {/* shoulders */}
      <path d={`M 0 240 Q 100 170 200 240 L 200 240 L 0 240 Z`} fill={p.neck} opacity="0.85" />
      {/* neck */}
      <rect x="84" y="135" width="32" height="40" fill={`url(#skg-${tone})`} />
      {/* head */}
      <ellipse cx="100" cy="105" rx="42" ry="52" fill={`url(#skg-${tone})`} />
      {/* hair shape */}
      <path d={`M 58 95 Q 58 50 100 50 Q 142 50 142 95 Q 142 80 130 75 Q 120 65 100 65 Q 80 65 70 75 Q 58 80 58 95 Z`} fill={p.hair} />
      <path d={`M 58 95 Q 56 130 70 145 L 65 100 Z`} fill={p.hair} opacity="0.9" />
      <path d={`M 142 95 Q 144 130 130 145 L 135 100 Z`} fill={p.hair} opacity="0.9" />
      {/* features */}
      <ellipse cx="86" cy="108" rx="2.6" ry="1.6" fill="#2A1F1A" opacity="0.7" />
      <ellipse cx="114" cy="108" rx="2.6" ry="1.6" fill="#2A1F1A" opacity="0.7" />
      <path d="M 92 130 Q 100 134 108 130" stroke="#7C4E3B" strokeWidth="1.4" fill="none" strokeLinecap="round" />
      <ellipse cx="80" cy="116" rx="6" ry="3" fill={p.bg} opacity="0.35" />
      <ellipse cx="120" cy="116" rx="6" ry="3" fill={p.bg} opacity="0.35" />
    </svg>
  );
}

// A single color swatch with hex label
function Swatch({ color, name, size = 36, showLabel = false }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, minWidth: size }}>
      <div style={{
        width: size, height: size, borderRadius: 8,
        background: color,
        boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.45), 0 4px 10px -4px rgba(74,61,54,0.18)",
      }} />
      {showLabel && (
        <div style={{ fontSize: 9, color: "#7B665B", letterSpacing: "0.04em", fontFamily: "Montserrat" }}>
          {name}
        </div>
      )}
    </div>
  );
}

// Library of cartelas — content varies by "tipo".
const CARTELAS = {
  geral: {
    titulo: "Cartela Geral",
    estacao: "Outono Quente",
    subtitulo: "Sua estação cromática",
    descricao: "Subtom quente • Contraste médio • Profundidade média",
    portrait: "warm",
    paleta: [
      { c: "#C66B4C", n: "Terracota" },
      { c: "#D6A55A", n: "Dourado" },
      { c: "#A47640", n: "Caramelo" },
      { c: "#7B4E2B", n: "Conhaque" },
      { c: "#A9BC8C", n: "Sálvia" },
      { c: "#6E8A7B", n: "Pinheiro" },
      { c: "#D88A6E", n: "Coral Terra" },
      { c: "#E6B89C", n: "Pêssego" },
    ],
    neutros: ["#F0E2CB", "#C9B49A", "#7B665B", "#3E2F26"],
    metal: "Ouro envelhecido",
    secoes: [
      { t: "Cores que valorizam", v: "Tons terrosos, dourados, ferrugem, oliva e mostarda" },
      { t: "Cores que apagam", v: "Pastéis frios, fúcsia, preto puro e branco neve" },
    ],
  },
  cores: {
    titulo: "Cartela de Cores",
    estacao: "Roupas e tecidos",
    subtitulo: "Sua paleta para o guarda-roupa",
    descricao: "16 cores que harmonizam com o seu subtom",
    portrait: "warm",
    paleta: [
      { c: "#C66B4C", n: "Terracota" }, { c: "#A4452C", n: "Telha" },
      { c: "#D6A55A", n: "Mostarda" }, { c: "#7B4E2B", n: "Conhaque" },
      { c: "#A9BC8C", n: "Sálvia" }, { c: "#6E8A7B", n: "Pinheiro" },
      { c: "#3F5F4E", n: "Verde Musgo" }, { c: "#5B6A4A", n: "Oliva" },
      { c: "#D88A6E", n: "Coral" }, { c: "#E6B89C", n: "Pêssego" },
      { c: "#B5874A", n: "Bronze" }, { c: "#8B5E3C", n: "Mocha" },
      { c: "#F0E2CB", n: "Areia" }, { c: "#C9B49A", n: "Camel" },
      { c: "#3E2F26", n: "Café" }, { c: "#7B665B", n: "Taupe" },
    ],
    neutros: ["#F0E2CB", "#C9B49A", "#7B665B", "#3E2F26"],
    metal: "Ouro",
    secoes: [
      { t: "Tecidos ideais", v: "Linho, lã, suede, veludo cotelê e algodão amarrotado" },
      { t: "Estampas", v: "Animal print, paisley, xadrez e tons terrosos sobrepostos" },
    ],
  },
  cabelo: {
    titulo: "Cartela de Cabelo",
    estacao: "Coloração e cortes",
    subtitulo: "Tons que iluminam o seu rosto",
    descricao: "Tons quentes com profundidade média",
    portrait: "warm",
    paleta: [
      { c: "#4B3A2E", n: "Castanho" },
      { c: "#7B4E2B", n: "Chocolate" },
      { c: "#A47640", n: "Caramelo" },
      { c: "#C99057", n: "Mel" },
      { c: "#D6A55A", n: "Dourado" },
      { c: "#8B5E3C", n: "Cobre Suave" },
      { c: "#B5874A", n: "Bronze" },
      { c: "#5C3A23", n: "Café" },
    ],
    neutros: ["#F0E2CB", "#C9B49A", "#7B665B", "#3E2F26"],
    metal: "Ouro",
    secoes: [
      { t: "Cortes recomendados", v: "Long bob, ondas suaves, franja cortininha" },
      { t: "Técnicas ideais", v: "Balayage caramelo, mechas mel, iluminado natural" },
    ],
  },
  maquiagem: {
    titulo: "Cartela de Maquiagem",
    estacao: "Make do dia ao especial",
    subtitulo: "Base, blush, batom e olhos",
    descricao: "Tons quentes e aterrados que iluminam",
    portrait: "warm",
    paleta: [
      { c: "#D88A6E", n: "Coral" },
      { c: "#C66B4C", n: "Terracota" },
      { c: "#A4452C", n: "Tijolo" },
      { c: "#7B4E2B", n: "Marsala" },
      { c: "#E6B89C", n: "Pêssego" },
      { c: "#C99057", n: "Bronze" },
      { c: "#8B5E3C", n: "Café Quente" },
      { c: "#D6A55A", n: "Dourado" },
    ],
    neutros: ["#F0E2CB", "#C9B49A", "#7B665B", "#3E2F26"],
    metal: "Ouro",
    secoes: [
      { t: "Batom", v: "Terracota, marsala, nude pêssego e coral aterrado" },
      { t: "Olhos", v: "Bronze, cobre, dourado e marrom quente" },
      { t: "Blush", v: "Pêssego e coral suave" },
    ],
  },
  acessorios: {
    titulo: "Cartela de Acessórios",
    estacao: "Metais, óculos e joias",
    subtitulo: "Acabamentos que harmonizam",
    descricao: "Ouro e tons quentes como base",
    portrait: "warm",
    paleta: [
      { c: "#D6A55A", n: "Ouro" },
      { c: "#B5874A", n: "Ouro Velho" },
      { c: "#A47640", n: "Bronze" },
      { c: "#7B4E2B", n: "Conhaque" },
      { c: "#8B5E3C", n: "Tartaruga" },
      { c: "#3E2F26", n: "Casco" },
      { c: "#C9B49A", n: "Pérola Champagne" },
      { c: "#E6B89C", n: "Âmbar Claro" },
    ],
    neutros: ["#F0E2CB", "#C9B49A", "#7B665B", "#3E2F26"],
    metal: "Ouro e bronze",
    secoes: [
      { t: "Óculos", v: "Armações tartaruga, âmbar e dourado fosco" },
      { t: "Joias", v: "Ouro amarelo, pedras quentes — citrino e granada" },
    ],
  },
};

function CartelaMockup({ tipo = "geral", compact = false }) {
  const data = CARTELAS[tipo] || CARTELAS.geral;

  return (
    <div className="cartela" style={{
      padding: compact ? 20 : 28,
      minHeight: compact ? 360 : 480,
    }}>
      {/* Header */}
      <div style={{ position: "relative", zIndex: 1, paddingRight: 80 }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>Cromia Studio</div>
        <div className="display" style={{ fontSize: compact ? 22 : 28, lineHeight: 1.1 }}>
          {data.titulo}
        </div>
        <div style={{ fontFamily: "Parisienne", fontSize: compact ? 18 : 22, color: "#D6A55A", marginTop: 6, lineHeight: 1.25 }}>
          {data.estacao}
        </div>
        <div style={{
          position: "absolute", top: 0, right: 0,
          textAlign: "right", fontSize: 10, color: "#A89489", letterSpacing: "0.08em", lineHeight: 1.4,
        }}>
          PALETA<br />PERSONALIZADA
        </div>
      </div>

      {/* Portrait + palette */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "minmax(110px, 130px) 1fr",
        gap: compact ? 14 : 18,
        marginTop: compact ? 16 : 22,
        position: "relative", zIndex: 1,
      }}>
        <div style={{
          aspectRatio: "5/6",
          borderRadius: 14,
          overflow: "hidden",
          boxShadow: "0 14px 30px -14px rgba(74,61,54,0.30)",
        }}>
          <PortraitPlaceholder tone={data.portrait} />
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: compact ? 10 : 14 }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "#A89489", marginBottom: 8 }}>
              Paleta principal
            </div>
            <div style={{
              display: "grid",
              gridTemplateColumns: `repeat(${compact ? 4 : 4}, 1fr)`,
              gap: 8,
            }}>
              {data.paleta.slice(0, compact ? 8 : 8).map((s, i) => (
                <Swatch key={i} color={s.c} name={s.n} size={compact ? 28 : 34} showLabel={!compact} />
              ))}
            </div>
          </div>

          <div>
            <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "#A89489", marginBottom: 6 }}>
              Neutros ideais
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              {data.neutros.map((c, i) => (
                <div key={i} style={{
                  flex: 1, height: 22, borderRadius: 6, background: c,
                  boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.5)",
                }} />
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Sections */}
      {!compact && (
        <div style={{
          marginTop: 22,
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 14,
          position: "relative", zIndex: 1,
        }}>
          {data.secoes.slice(0, 2).map((sec, i) => (
            <div key={i} style={{
              background: "rgba(255,255,255,0.55)",
              borderRadius: 12,
              padding: "12px 14px",
              border: "1px solid rgba(123,102,91,0.10)",
            }}>
              <div style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "#B5874A", marginBottom: 4 }}>
                {sec.t}
              </div>
              <div style={{ fontSize: 12, color: "#4A3D36", lineHeight: 1.5 }}>
                {sec.v}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Footer */}
      <div style={{
        marginTop: compact ? 14 : 20,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontSize: 10, color: "#A89489", letterSpacing: "0.10em",
        position: "relative", zIndex: 1,
      }}>
        <span>{data.descricao}</span>
        <span style={{ fontFamily: "Parisienne", fontSize: 14, color: "#D6A55A", letterSpacing: 0 }}>cromia</span>
      </div>
    </div>
  );
}

Object.assign(window, { CartelaMockup, PortraitPlaceholder, Swatch, CARTELAS });