// Kotleto · icons + layout primitives

const Ico = {
  Cart:  (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/><path d="M3 4h2l2.2 11.2a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.6L20 7H6.2"/></svg>,
  User:  (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 5-6 8-6s6.5 2 8 6"/></svg>,
  Pin:   (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 22s-7-7.5-7-13a7 7 0 1 1 14 0c0 5.5-7 13-7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>,
  Clock: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  Phone: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 4h4l2 5-3 2a14 14 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2C9 22 2 15 2 6a2 2 0 0 1 2-2z"/></svg>,
  Star:  (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l3 6.5 7 .8-5.2 4.7 1.5 7L12 17.6 5.7 21l1.5-7L2 9.3l7-.8L12 2z"/></svg>,
  Fire:  (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2c1 4-3 5-3 9a3 3 0 0 0 6 0c0-1-.4-2-1-3 3 1 5 4 5 7a7 7 0 1 1-14 0c0-5 4-8 7-13z"/></svg>,
  Plus:  (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  Minus: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" {...p}><path d="M5 12h14"/></svg>,
  X:     (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M6 6l12 12M18 6l-12 12"/></svg>,
  Arrow: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  Sparkle:(p)=> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>,
  Bag:   (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 8h14l-1 13H6L5 8z"/><path d="M9 8a3 3 0 1 1 6 0"/></svg>,
  Chart: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 20h16M7 16l3-4 3 2 4-6"/></svg>,
  Cog:   (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="3"/><path d="M19 14l1 1-2 3-2-1M5 14l-1 1 2 3 2-1M5 10L4 9l2-3 2 1M19 10l1-1-2-3-2 1M12 4v-1M12 21v-1"/></svg>,
  Truck: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 6h11v10H3zM14 9h4l3 3v4h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>,
  Scooter:(p)=> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="5" cy="18" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M7.5 18h5.8l2.2-6H10l-2-4H5M15 8h3l2 3M15.5 12H20"/></svg>,
  Package:(p)=> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 7l8-4 8 4v10l-8 4-8-4zM4 7l8 4 8-4M12 11v10M8 5l8 4"/></svg>,
  Store: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 10v10h16V10M3 4h18l-2 6H5zM8 20v-6h8v6"/></svg>,
  Home:  (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 11l9-8 9 8M5 10v11h14V10M9 21v-7h6v7"/></svg>,
  Search:(p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.5-4.5"/></svg>,
  Check: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12l5 5L20 7"/></svg>,
  Heart: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 21s-7-4.5-9.5-9.5C.8 7.5 3.5 4 7 4c2 0 3.6 1 5 2.5C13.4 5 15 4 17 4c3.5 0 6.2 3.5 4.5 7.5C19 16.5 12 21 12 21z"/></svg>,
  Dot:   (p) => <svg width="8" height="8" viewBox="0 0 8 8" {...p}><circle cx="4" cy="4" r="4" fill="currentColor"/></svg>,
  Bell:  (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2h-15L6 16z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>,
  Menu:  (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M4 7h16M4 12h16M4 17h16"/></svg>,
};

function KotletoMark({ light = false, scale = 1 }) {
  const { lang } = useLang();
  const c = light ? "#FFF4E2" : "#1A1410";
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 10 * scale, lineHeight: 1 }}>
      <div style={{
        width: 40 * scale, height: 40 * scale, borderRadius: 12 * scale,
        background: "var(--brand)", color: "#fff", display: "grid", placeItems: "center",
        fontFamily: "var(--display)", fontSize: 22 * scale, paddingBottom: 3,
        boxShadow: "inset 0 -4px 0 rgba(0,0,0,0.18)"
      }}>K</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
        <span className="display" style={{ color: c, fontSize: 22 * scale, lineHeight: 1 }}>{lang === "fa" ? "کتلتُ" : "Kotleto"}</span>
        <span className="display" style={{ color: c, fontSize: 11 * scale, letterSpacing: "0.22em", opacity: .65, marginTop: 3 }}>{lang === "fa" ? "KOTLETO" : "SHIRAZ"}</span>
      </div>
    </div>
  );
}

function SectionTitle({ eyebrow, title, sub, align = "start", accent }) {
  const { lang } = useLang();
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14, textAlign: align, alignItems: align === "center" ? "center" : "flex-start" }}>
      {eyebrow && (
        <span className="chip outline" style={{ borderColor: accent || "var(--ink)", color: accent || "var(--ink)" }}>
          <Ico.Dot /> {pick(eyebrow, lang)}
        </span>
      )}
      <h2 className="display" style={{
        margin: 0,
        fontSize: "clamp(40px, 6vw, 78px)",
        lineHeight: 0.95,
        color: "var(--ink)",
        letterSpacing: "-0.01em",
      }}>{pick(title, lang)}</h2>
      {sub && <p style={{ margin: 0, maxWidth: 580, color: "var(--ink-3)", fontSize: 18, lineHeight: 1.6 }}>{pick(sub, lang)}</p>}
    </div>
  );
}

function Wrap({ children, style, className, id }) {
  return <div id={id} className={className} style={{ maxWidth: 1280, margin: "0 auto", padding: "0 28px", ...style }}>{children}</div>;
}

Object.assign(window, { Ico, KotletoMark, SectionTitle, Wrap });
