// SVG decorativos do sistema visual Revisão Rápida
// Cores do projeto:
const RR = {
  primary: "#673a8f",
  secondary: "#8f3a8b",
  light: "#e4d7eb",
  deep: "#3d2963",
  text: "#575756",
};

// Logo da Revisão Rápida — efeito de "outline + fill" empilhado como no SVG original.
// Usa Poppins black com letter-spacing apertado e stroke fino.
function LogoRevisaoRapida({ color = RR.primary, width = 140, light = false }) {
  const fillColor = light ? "#fff" : color;
  const strokeColor = light ? "#fff" : color;
  return (
    <div
      className="rr-logo"
      style={{
        fontFamily: '"Poppins", "Inter", sans-serif',
        fontWeight: 900,
        fontSize: width / 5.6,
        lineHeight: 0.92,
        color: fillColor,
        letterSpacing: "-0.015em",
        textTransform: "uppercase",
        WebkitTextStroke: `${Math.max(0.5, width / 220)}px ${strokeColor}`,
        userSelect: "none",
      }}
    >
      <div>Revisão</div>
      <div>Rápida</div>
    </div>
  );
}

// === Formas decorativas ===
// Pílula inclinada (asset 08, 09, 11, 12, 13, 17 — todas variações da mesma forma)
function PillShape({ color = RR.primary, size = 200, rotate = 0, style = {}, opacity = 1, className = "" }) {
  return (
    <svg
      className={className}
      viewBox="0 0 252.17 249.71"
      width={size}
      height={size}
      style={{ transform: `rotate(${rotate}deg)`, opacity, ...style }}
    >
      <path
        fill={color}
        d="M234.37,18.61h0c-23.38-23.83-61.65-24.19-85.48-.81L18.61,145.62c-23.83,23.38-24.19,61.65-.81,85.48h0c23.38,23.83,61.65,24.19,85.48.81l130.27-127.82c23.83-23.38,24.19-61.65.81-85.48Z"
      />
    </svg>
  );
}

// Pílula com outline apenas
function PillOutline({ color = RR.primary, size = 200, rotate = 0, strokeWidth = 4, style = {}, className = "" }) {
  return (
    <svg
      className={className}
      viewBox="0 0 252.17 249.71"
      width={size}
      height={size}
      style={{ transform: `rotate(${rotate}deg)`, ...style }}
    >
      <path
        fill="none"
        stroke={color}
        strokeWidth={strokeWidth}
        d="M234.37,18.61h0c-23.38-23.83-61.65-24.19-85.48-.81L18.61,145.62c-23.83,23.38-24.19,61.65-.81,85.48h0c23.38,23.83,61.65,24.19,85.48.81l130.27-127.82c23.83-23.38,24.19-61.65.81-85.48Z"
      />
    </svg>
  );
}

// Círculo simples (asset 10)
function CircleDot({ color = RR.primary, size = 40, style = {}, className = "" }) {
  return (
    <svg className={className} viewBox="0 0 67.79 67.79" width={size} height={size} style={style}>
      <circle cx="33.89" cy="33.89" r="33.89" fill={color} />
    </svg>
  );
}

// Círculos concêntricos (asset 15)
function ConcentricCircles({ color = RR.deep, size = 180, style = {}, className = "" }) {
  return (
    <svg className={className} viewBox="0 0 180.43 180.43" width={size} height={size} style={style}>
      <circle cx="90.21" cy="90.21" r="89.5" fill="none" stroke={color} strokeWidth="0.8" />
      <circle cx="90.21" cy="90.21" r="54.6" fill="none" stroke={color} strokeWidth="0.8" />
      <circle cx="90.21" cy="90.21" r="19.69" fill={color} />
    </svg>
  );
}

// Pontos diagonais (asset 14) — 4 dots em linha diagonal
function DotsDiagonal({ color = RR.deep, size = 90, style = {}, className = "" }) {
  return (
    <svg className={className} viewBox="0 0 87.94 65.99" width={size} height={size * (65.99 / 87.94)} style={style}>
      {[
        [4, 60.5],
        [30, 41.5],
        [56, 22.5],
        [82, 3.5],
      ].map(([cx, cy], i) => (
        <circle key={i} cx={cx} cy={cy} r="4.6" fill={color} />
      ))}
    </svg>
  );
}

// Pílula com furo de círculo (asset 16)
function PillWithDot({ color = RR.primary, size = 130, dotColor = "#fff", style = {} }) {
  return (
    <svg viewBox="0 0 129.4 128.13" width={size} height={size} style={style}>
      <path
        fill={color}
        d="M120.48,9.33h0c-12.05-12.28-31.76-12.46-44.04-.42L9.33,74.76c-12.28,12.05-12.46,31.76-.42,44.04h0c12.05,12.28,31.76,12.46,44.04.42L120.07,53.37c12.28-12.05,12.46-31.76.42-44.04Z"
      />
      <circle cx="45.32" cy="40.48" r="17.9" fill={dotColor} />
    </svg>
  );
}

// Ondinhas (asset 18) — 3 linhas onduladas paralelas
function Waves({ color = RR.secondary, width = 90, strokeWidth = 1.6, style = {} }) {
  return (
    <svg viewBox="0 0 84.24 23.09" width={width} height={width * (23.09 / 84.24)} style={style}>
      <path
        fill="none"
        stroke={color}
        strokeWidth={strokeWidth}
        d="M84.24,22.59c-4.68,0-4.68-5.05-9.36-5.05s-4.68,5.05-9.36,5.05-4.68-5.05-9.36-5.05-4.68,5.05-9.36,5.05c-4.68,0-4.68-5.05-9.36-5.05-4.68,0-4.68,5.05-9.36,5.05-4.68,0-4.68-5.05-9.36-5.05-4.68,0-4.68,5.05-9.37,5.05-4.68,0-4.68-5.05-9.37-5.05"
      />
      <path
        fill="none"
        stroke={color}
        strokeWidth={strokeWidth}
        d="M84.24,14.07c-4.68,0-4.68-5.05-9.36-5.05s-4.68,5.05-9.36,5.05c-4.68,0-4.68-5.05-9.36-5.05-4.68,0-4.68,5.05-9.36,5.05-4.68,0-4.68-5.05-9.36-5.05-4.68,0-4.68,5.05-9.36,5.05-4.68,0-4.68-5.05-9.36-5.05-4.68,0-4.68,5.05-9.37,5.05C4.68,14.07,4.68,9.02,0,9.02"
      />
      <path
        fill="none"
        stroke={color}
        strokeWidth={strokeWidth}
        d="M84.24,5.55c-4.68,0-4.68-5.05-9.36-5.05s-4.68,5.05-9.36,5.05S60.85.5,56.17.5c-4.68,0-4.68,5.05-9.36,5.05-4.68,0-4.68-5.05-9.36-5.05-4.68,0-4.68,5.05-9.36,5.05-4.68,0-4.68-5.05-9.36-5.05s-4.68,5.05-9.37,5.05C4.68,5.55,4.68.5,0,.5"
      />
    </svg>
  );
}

// Logotipo Fiocruz (texto + imagem castelo)
function LogoFiocruz({ height = 28, color = "#3a3a3a" }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: height * 0.25, color }}>
      <svg viewBox="0 0 100 100" width={height * 1.05} height={height} fill="currentColor">
        {/* Castelo simplificado — o asset original é um JPG; usamos uma silhueta limpa */}
        <g>
          <rect x="14" y="48" width="72" height="38" fill="none" stroke="currentColor" strokeWidth="6"/>
          <rect x="6" y="78" width="88" height="10" fill="none" stroke="currentColor" strokeWidth="6"/>
          <rect x="22" y="58" width="10" height="20" fill="currentColor"/>
          <rect x="68" y="58" width="10" height="20" fill="currentColor"/>
          <rect x="44" y="38" width="12" height="48" fill="none" stroke="currentColor" strokeWidth="6"/>
          {/* torres */}
          <rect x="14" y="20" width="14" height="28" fill="none" stroke="currentColor" strokeWidth="6"/>
          <circle cx="21" cy="14" r="5" fill="currentColor"/>
          <rect x="20" y="6" width="2" height="10" fill="currentColor"/>
          <rect x="72" y="20" width="14" height="28" fill="none" stroke="currentColor" strokeWidth="6"/>
          <circle cx="79" cy="14" r="5" fill="currentColor"/>
          <rect x="78" y="6" width="2" height="10" fill="currentColor"/>
        </g>
      </svg>
      <span
        style={{
          fontFamily: '"Poppins", sans-serif',
          fontWeight: 600,
          fontSize: height * 0.78,
          letterSpacing: "0.04em",
          color: "currentColor",
        }}
      >
        FIOCRUZ
      </span>
    </div>
  );
}

// Ícone de busca
function SearchIcon({ size = 20, color = "currentColor", strokeWidth = 2 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="7" />
      <line x1="21" y1="21" x2="16.5" y2="16.5" />
    </svg>
  );
}

// Ícone PDF / arquivo
function FileIcon({ size = 18, color = "currentColor", strokeWidth = 1.8 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
      <polyline points="14 2 14 8 20 8" />
    </svg>
  );
}

// Ícone download
function DownloadIcon({ size = 18, color = "currentColor", strokeWidth = 2 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
      <polyline points="7 10 12 15 17 10" />
      <line x1="12" y1="15" x2="12" y2="3" />
    </svg>
  );
}

// Ícone seta direita
function ArrowRight({ size = 16, color = "currentColor", strokeWidth = 2 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="12 5 19 12 12 19" />
    </svg>
  );
}

Object.assign(window, {
  RR,
  LogoRevisaoRapida,
  PillShape,
  PillOutline,
  CircleDot,
  ConcentricCircles,
  DotsDiagonal,
  PillWithDot,
  Waves,
  LogoFiocruz,
  SearchIcon,
  FileIcon,
  DownloadIcon,
  ArrowRight,
});