// MiaCascinaLogo.jsx — Hand-drawn farmhouse mark for "Mia Cascina"
// A small barn silhouette with a sun behind it and a tuft of wheat.

function MiaCascinaLogoMark({ size = 40, primary = '#C8841A', secondary = '#6B7F47', accent = '#5C3D0A' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Mia Cascina">
      {/* sun behind */}
      <circle cx="46" cy="20" r="9" fill={primary} opacity="0.22"/>
      <circle cx="46" cy="20" r="5" fill={primary}/>

      {/* ground line */}
      <path d="M4 54 L60 54" stroke={accent} strokeWidth="1.5" strokeLinecap="round" opacity="0.35"/>

      {/* wheat tuft (left) */}
      <g stroke={secondary} strokeWidth="1.6" strokeLinecap="round" fill="none">
        <path d="M10 54 L10 42"/>
        <path d="M10 46 Q7 44 6 41"/>
        <path d="M10 46 Q13 44 14 41"/>
        <path d="M10 42 Q8 40 7 37"/>
        <path d="M10 42 Q12 40 13 37"/>
      </g>

      {/* barn body */}
      <path d="M18 54 L18 34 L32 22 L46 34 L46 54 Z"
        fill="#FBF6E6" stroke={accent} strokeWidth="2" strokeLinejoin="round"/>

      {/* roof accent */}
      <path d="M18 34 L32 22 L46 34"
        fill="none" stroke={primary} strokeWidth="2.2" strokeLinejoin="round" strokeLinecap="round"/>

      {/* door */}
      <path d="M28 54 L28 44 Q28 42 30 42 L34 42 Q36 42 36 44 L36 54"
        fill={primary} stroke={accent} strokeWidth="1.3" strokeLinejoin="round"/>

      {/* small window */}
      <rect x="21" y="38" width="4" height="4" rx="0.5" fill={secondary} stroke={accent} strokeWidth="1"/>
      <rect x="39" y="38" width="4" height="4" rx="0.5" fill={secondary} stroke={accent} strokeWidth="1"/>

      {/* roof flag / cross */}
      <path d="M32 22 L32 18" stroke={accent} strokeWidth="1.6" strokeLinecap="round"/>
      <circle cx="32" cy="17" r="1.4" fill={primary}/>
    </svg>
  );
}

function MiaCascinaLogo({ size = 40, color = '#5C3D0A', primary = '#C8841A', secondary = '#6B7F47', layout = 'horizontal' }) {
  const FFD = "'Lora', Georgia, serif";
  const FFB = "'Nunito', sans-serif";
  if (layout === 'mark') {
    return <MiaCascinaLogoMark size={size} primary={primary} secondary={secondary} accent={color} />;
  }
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <MiaCascinaLogoMark size={size} primary={primary} secondary={secondary} accent={color} />
      <div>
        <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: size * 0.46, color, letterSpacing: '-0.01em', lineHeight: 1 }}>
          Mia Cascina
        </div>
        <div style={{ fontFamily: FFB, fontSize: size * 0.28, color, opacity: 0.65, marginTop: 4, letterSpacing: 0.3 }}>
          L'app per la tua cascina
        </div>
      </div>
    </div>
  );
}

window.MiaCascinaLogo = MiaCascinaLogo;
window.MiaCascinaLogoMark = MiaCascinaLogoMark;