// Logo — two render modes:
//  - default (`variant="inline"`): horizontal SVG symbol + wordmark, legible at small heights (nav)
//  - `variant="image"`: real brand JPG (stacked mark+wordmark), ideal for footer/badges at larger sizes
const Logo = ({ height = 40, light = false, variant = "inline" }) => {
  if (variant === "image") {
    const img = (
      <img
        src="assets/logo-dallacosta.png"
        alt="Dalla Costa · Contabilidade e Isenções PCD"
        style={{ height, width: "auto", display: "block", objectFit: "contain" }}
      />
    );
    if (light) {
      return (
        <div style={{
          display: "inline-flex",
          alignItems: "center",
          background: "#fff",
          padding: "10px 14px",
          borderRadius: 12,
          boxShadow: "0 4px 16px rgba(0,0,0,0.22)",
        }}>{img}</div>
      );
    }
    return <div style={{ display: "inline-flex", alignItems: "center" }}>{img}</div>;
  }

  const color = light ? "#fff" : "#001e40";
  const sub = light ? "rgba(255,255,255,0.72)" : "#43474f";
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 10, height }}>
      <svg height={height} viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Logo Dalla Costa" role="img">
        {/* Orange ascending arrow (outline) */}
        <path d="M8 48 L8 18 L14 18 L20 8 L26 18 L26 48 Z" fill="none" stroke="#F37021" strokeWidth="2.6" strokeLinejoin="round"/>
        {/* Navy ascending arrow (solid) */}
        <path d="M22 48 L22 22 L28 22 L32 14 L36 22 L36 48 Z" fill="#001e40"/>
        {/* Person circle (head + body) */}
        <circle cx="44" cy="22" r="3.2" fill="#001e40"/>
        <path d="M37 32 a8 8 0 0 0 14 0" stroke="#001e40" strokeWidth="2.6" fill="none" strokeLinecap="round"/>
      </svg>
      <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", lineHeight: 1 }}>
        <span style={{
          fontSize: Math.round(height * 0.38),
          fontWeight: 900,
          color,
          letterSpacing: "-0.01em"
        }}>DALLA COSTA</span>
        <span style={{
          fontSize: Math.round(height * 0.2),
          fontWeight: 700,
          color: sub,
          letterSpacing: "0.16em",
          marginTop: 3,
          textTransform: "uppercase",
        }}>Isenções PCD · CRC-RS</span>
      </div>
    </div>
  );
};

// Puzzle heart — 4 colors, radial 3D + "Autismo" rainbow underline
const PuzzleHeart = ({ size = 180 }) => {
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
      <svg width={size} height={size} viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <radialGradient id="p-red" cx="0.3" cy="0.3">
            <stop offset="0%" stopColor="#ff7a7a"/>
            <stop offset="100%" stopColor="#c0392b"/>
          </radialGradient>
          <radialGradient id="p-blue" cx="0.3" cy="0.3">
            <stop offset="0%" stopColor="#5aa7e6"/>
            <stop offset="100%" stopColor="#1e5fa3"/>
          </radialGradient>
          <radialGradient id="p-yellow" cx="0.3" cy="0.3">
            <stop offset="0%" stopColor="#ffe066"/>
            <stop offset="100%" stopColor="#e0a000"/>
          </radialGradient>
          <radialGradient id="p-green" cx="0.3" cy="0.3">
            <stop offset="0%" stopColor="#7edba1"/>
            <stop offset="100%" stopColor="#1a7a4a"/>
          </radialGradient>
        </defs>
        {/* Heart split in 4 puzzle pieces */}
        <g transform="translate(100 100)">
          {/* top-left red */}
          <path d="M 0,-60 C -18,-82 -60,-75 -60,-40 C -60,-25 -50,-12 -35,0 L 0,0 Z" fill="url(#p-red)" stroke="#fff" strokeWidth="2.5"/>
          {/* top-right blue */}
          <path d="M 0,-60 C 18,-82 60,-75 60,-40 C 60,-25 50,-12 35,0 L 0,0 Z" fill="url(#p-blue)" stroke="#fff" strokeWidth="2.5"/>
          {/* bottom-left yellow */}
          <path d="M -35,0 L 0,0 L 0,55 C -20,42 -35,20 -35,0 Z" fill="url(#p-yellow)" stroke="#fff" strokeWidth="2.5"/>
          {/* bottom-right green */}
          <path d="M 35,0 L 0,0 L 0,55 C 20,42 35,20 35,0 Z" fill="url(#p-green)" stroke="#fff" strokeWidth="2.5"/>
          {/* tiny puzzle knobs as highlights */}
          <circle cx="-18" cy="-30" r="3" fill="rgba(255,255,255,0.4)"/>
          <circle cx="18" cy="-30" r="3" fill="rgba(255,255,255,0.4)"/>
        </g>
      </svg>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
        <span style={{ fontWeight: 800, fontSize: 18, color: "#001e40", letterSpacing: "-0.01em" }}>Autismo</span>
        <svg width={90} height={8} viewBox="0 0 90 8">
          <rect x="0" y="2" width="22.5" height="4" rx="2" fill="#c0392b"/>
          <rect x="22.5" y="2" width="22.5" height="4" rx="2" fill="#1e5fa3"/>
          <rect x="45" y="2" width="22.5" height="4" rx="2" fill="#e0a000"/>
          <rect x="67.5" y="2" width="22.5" height="4" rx="2" fill="#1a7a4a"/>
        </svg>
      </div>
    </div>
  );
};

Object.assign(window, { Logo, PuzzleHeart });