// Logo.jsx — FixMyCasa logo with variants

const Logo = ({ variant = "default", size = 36, color = "currentColor", accent = "#C2552D" }) => {
  // Variant A: Wordmark with house glyph (roof peak as i-dot)
  // Variant B: Stacked lockup with arched door
  // Variant C: Compact mark with chimney + key
  // Variant D: Monoline house + serif Casa

  if (variant === "compact") {
    return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: size * 0.3, color }}>
        <svg width={size * 1.1} height={size} viewBox="0 0 44 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          {/* House outline with chimney */}
          <path d="M4 18 L22 4 L40 18 L40 36 L4 36 Z" stroke={color} strokeWidth="2.5" strokeLinejoin="round" fill="none"/>
          <rect x="32" y="8" width="5" height="7" fill={color}/>
          {/* Door arch */}
          <path d="M16 36 L16 26 Q22 22 28 26 L28 36" stroke={accent} strokeWidth="2.5" fill="none" strokeLinejoin="round"/>
          {/* Keyhole dot */}
          <circle cx="22" cy="29" r="1.5" fill={accent}/>
        </svg>
      </div>
    );
  }

  if (variant === "stacked") {
    return (
      <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", color, lineHeight: 0.95 }}>
        <svg width={size * 1.4} height={size * 0.9} viewBox="0 0 56 36" fill="none">
          <path d="M4 22 L28 6 L52 22" stroke={accent} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round" fill="none"/>
          <path d="M10 22 L10 32 L46 32 L46 22" stroke={color} strokeWidth="2.5" strokeLinejoin="round" fill="none"/>
          <rect x="24" y="22" width="8" height="10" fill={accent}/>
        </svg>
        <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: size * 0.5, letterSpacing: "-0.02em", marginTop: 4 }}>
          FixMy<span style={{ fontFamily: "'Newsreader', serif", fontStyle: "italic", fontWeight: 500, color: accent }}>Casa</span>
        </div>
      </div>
    );
  }

  if (variant === "monoline") {
    return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: size * 0.25, color }}>
        <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
          <circle cx="16" cy="16" r="15" stroke={color} strokeWidth="1.5" fill="none"/>
          <path d="M8 18 L16 11 L24 18 L24 23 L8 23 Z" stroke={accent} strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
          <path d="M14 23 L14 19 L18 19 L18 23" stroke={color} strokeWidth="1.5" fill="none"/>
        </svg>
        <div style={{ fontFamily: "'Newsreader', serif", fontWeight: 500, fontSize: size * 0.55, letterSpacing: "-0.01em" }}>
          Fix<span style={{ fontStyle: "italic" }}>My</span>Casa
        </div>
      </div>
    );
  }

  // Default: wordmark with roof glyph as i-dot replacement
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: size * 0.32, color }}>
      <svg width={size} height={size} viewBox="0 0 36 36" fill="none">
        {/* Solid house with roof peak */}
        <path d="M3 19 L18 5 L33 19 L33 32 Q33 33 32 33 L4 33 Q3 33 3 32 Z" fill={accent}/>
        {/* Window cross */}
        <rect x="14" y="22" width="8" height="8" fill={color === "currentColor" ? "#FAF6EF" : "#FAF6EF"}/>
        <line x1="18" y1="22" x2="18" y2="30" stroke={accent} strokeWidth="1"/>
        <line x1="14" y1="26" x2="22" y2="26" stroke={accent} strokeWidth="1"/>
        {/* Chimney */}
        <rect x="25" y="8" width="4" height="6" fill={accent}/>
      </svg>
      <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: size * 0.62, letterSpacing: "-0.025em", lineHeight: 1 }}>
        FixMy<span style={{ fontFamily: "'Newsreader', serif", fontStyle: "italic", fontWeight: 500, color: accent }}>Casa</span>
      </div>
    </div>
  );
};

window.Logo = Logo;