// ==============================================================================
// Author: Simon-Pierre Boucher <contact@spboucher.ai>
// File:   components/Logo.tsx
// Desc:   Icône officielle Resto·Ka — l'assiette servie, dans le langage
//         « éditorial sharp » du Groupe KA (grille 100 × 100) :
//         A. assiette : cercle ENCRE #141814 en contour seul (7,5 u) — la
//            bordure encre signature du groupe ;
//         B. couverts : fourchette (gauche) et couteau (droite) encre, traits
//            francs à bouts ronds ;
//         C. cœur d'assiette : disque central LIME électrique #d9f26b — le
//            plat servi, l'accent du groupe.
//         Version dark (fond encre) : contours papier, cœur lime inchangé.
//         Baseline : « Chaque resto, chaque plat, chaque prix. »
// ==============================================================================

/** Icône seule (fond transparent — dark = contours papier pour fond encre). */
export function LogoIcon({ size = 30, dark = false }: { size?: number; dark?: boolean }) {
  const ink = dark ? "#f5f3ee" : "#141814";
  return (
    <svg
      className="logo-ico"
      width={size}
      height={size}
      viewBox="0 0 100 100"
      fill="none"
      aria-hidden="true"
    >
      {/* B — fourchette (3 dents) à gauche */}
      <path
        d="M13 26 v14 M7.5 26 v9 M18.5 26 v9 M13 40 v34"
        stroke={ink}
        strokeWidth="5"
        strokeLinecap="round"
      />
      {/* B — couteau à droite (lame courbe) */}
      <path
        d="M87 26 q5 12 0 24 v24"
        stroke={ink}
        strokeWidth="5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      {/* C — cœur d'assiette : le plat servi, lime électrique */}
      <circle cx="50" cy="50" r="14" fill="#d9f26b" stroke={ink} strokeWidth="4" />
      {/* A — assiette : contour encre seul, bordure franche */}
      <circle cx="50" cy="50" r="31" stroke={ink} strokeWidth="7" />
    </svg>
  );
}

/** Logo horizontal complet : icône + wordmark « Resto-Ka » (Ka en pastille lime). */
export default function Logo({ size = 30 }: { size?: number }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: size * 0.3 }}>
      <LogoIcon size={size} />
      <span style={{ color: "#141814", fontWeight: 700, letterSpacing: "-0.03em" }}>
        Resto-
        <span style={{
          background: "#d9f26b", color: "#141814", padding: "1px 6px 3px",
          borderRadius: 5, marginLeft: 3, display: "inline-block",
          transform: "rotate(-2deg)",
        }}>
          Ka
        </span>
      </span>
    </span>
  );
}