// ET Storefront concept — shared data, icons, placeholders
// Round 002 · et.co.th theme concept. Placeholder SKUs (6 real ones incoming).

const money = (n) => "฿" + n.toLocaleString("en-US");

// ── On-brand placeholder catalogue (quirky / rare imported finds) ──────────
const PRODUCTS = [
  {
    id: "meteorite",
    name: "Campo del Cielo Meteorite Slice",
    nameTh: "อุกกาบาตเหล็ก กัมโปเดลเซียโล",
    origin: "Imported · Argentina",
    vibe: "cabinet",
    price: 4900,
    badge: "Rare find",
    badgeTone: "brand",
    rarity: "ชิ้นเดียวในร้าน",
    rating: 5.0,
    reviews: 28,
    short: "เหล็กจากอวกาศอายุราว 4,500 ปี เจียรเปิดผิวให้เห็นลาย Widmanstätten ที่เกิดขึ้นได้เฉพาะในอวกาศเท่านั้น",
    photo: ["meteorite · hero", "meteorite · etch detail", "meteorite · in hand", "meteorite · stand"],
    story: [
      { k: "ตกที่ไหน", t: "พุ่งชนทุ่ง Gran Chaco ทางเหนือของอาร์เจนตินาเมื่อราว 4,500 ปีก่อน ทิ้งหลุมอุกกาบาตไว้กว่า 20 หลุม", slot: "story · crater field" },
      { k: "ทำไมหายาก", t: "เป็นเหล็ก-นิกเกิลจากแกนดาวเคราะห์น้อยที่แตกสลาย ลาย Widmanstätten ใช้เวลาเย็นตัวนับล้านปี — ปลอมไม่ได้", slot: "story · widmanstätten" },
      { k: "เราได้มายังไง", t: "คัดจากดีลเลอร์อุกกาบาตที่มีใบรับรอง พร้อมการ์ดระบุพิกัดและน้ำหนักของชิ้นนี้โดยเฉพาะ", slot: "story · certificate" },
    ],
    benefits: [
      "ผ่านการตรวจสอบของแท้ พร้อมใบรับรอง",
      "เคลือบกันสนิมมาแล้ว เก็บในกล่องไม้บุผ้า",
      "มีขาตั้งอะคริลิกใสให้ตั้งโชว์ได้ทันที",
    ],
    specs: [
      ["ที่มา", "Campo del Cielo, อาร์เจนตินา"],
      ["ชนิด", "Iron meteorite (Group IAB)"],
      ["น้ำหนัก", "118 g"],
      ["ขนาด", "ราว 7 × 5 ซม."],
      ["ความแท้", "มีใบรับรอง + การ์ดประจำชิ้น"],
    ],
  },
  {
    id: "morpho",
    name: "Framed Blue Morpho Butterfly",
    nameTh: "ผีเสื้อมอร์โฟสีน้ำเงิน ใส่กรอบ",
    origin: "Imported · Peru",
    vibe: "wall",
    price: 1680,
    badge: "New",
    badgeTone: "neutral",
    rarity: "เข้าใหม่ 6 ชิ้น",
    rating: 4.9,
    reviews: 41,
    short: "ปีกสะท้อนแสงเป็นสีน้ำเงินโลหะ จัดในกรอบกระจกไร้กรด เลี้ยงจากฟาร์มยั่งยืน",
    photo: ["morpho · framed", "morpho · wing macro", "morpho · on wall"],
  },
  {
    id: "orrery",
    name: "Antique Brass Orrery",
    nameTh: "ออร์เรอรี ทองเหลืองโบราณ",
    origin: "Imported · England",
    vibe: "cabinet",
    price: 12500,
    badge: "1 of 1",
    badgeTone: "brand",
    rarity: "ชิ้นเดียวในร้าน",
    rating: 5.0,
    reviews: 12,
    short: "แบบจำลองระบบสุริยะหมุนด้วยมือ ทองเหลืองขัดเงา ของสะสมยุคต้นศตวรรษที่ 20",
    photo: ["orrery · full", "orrery · gears", "orrery · brass detail"],
  },
  {
    id: "nepenthes",
    name: "Live Nepenthes Pitcher Plant",
    nameTh: "หม้อข้าวหม้อแกงลิง เนเพนthes",
    origin: "Imported · Borneo",
    vibe: "living",
    price: 890,
    badge: "Living",
    badgeTone: "ok",
    rarity: "ของมีชีวิต",
    rating: 4.8,
    reviews: 63,
    short: "พืชกินแมลงสายพันธุ์หายากจากบอร์เนียว ส่งพร้อมคู่มือดูแลฉบับ ET",
    photo: ["nepenthes · plant", "nepenthes · pitcher", "nepenthes · care"],
  },
  {
    id: "octopus",
    name: "Murano Glass Octopus",
    nameTh: "ปลาหมึกแก้วมูราโน เป่ามือ",
    origin: "Imported · Italy",
    vibe: "cabinet",
    price: 3200,
    badge: "Handblown",
    badgeTone: "neutral",
    rarity: "งานเป่ามือ ไม่มีชิ้นไหนเหมือนกัน",
    rating: 4.9,
    reviews: 19,
    short: "งานแก้วเป่ามือจากเกาะมูราโน เวนิส แต่ละหนวดบิดด้วยมือช่าง",
    photo: ["octopus · glass", "octopus · tentacle", "octopus · light"],
  },
  {
    id: "clock",
    name: "Soviet Submarine Deck Clock",
    nameTh: "นาฬิกาเรือดำน้ำโซเวียต",
    origin: "Imported · Russia",
    vibe: "machines",
    price: 6400,
    badge: "Only 2 left",
    badgeTone: "warn",
    rarity: "เหลือ 2 เรือน",
    rating: 4.7,
    reviews: 9,
    short: "นาฬิกาทองเหลืองไขลานจากเรือดำน้ำยุคสงครามเย็น ผ่านการล้างเครื่องแล้ว",
    photo: ["clock · face", "clock · brass case", "clock · movement"],
  },
];

const byId = (id) => PRODUCTS.find((p) => p.id === id);

const VIBES = [
  { id: "all", th: "ทั้งหมด", en: "All" },
  { id: "cabinet", th: "ของขึ้นหิ้ง", en: "Cabinet pieces" },
  { id: "living", th: "ของมีชีวิต", en: "Living things" },
  { id: "machines", th: "จักรกล & เวลา", en: "Machines & time" },
  { id: "wall", th: "ของแขวนผนัง", en: "For the wall" },
];

// ── Placeholder photo panel — cream/stone seamless + faint clover watermark ───
function PhotoSlot({ label, ratio = "1 / 1", radius = "var(--r-3)", tone = "soft" }) {
  const bg =
    tone === "band"
      ? "linear-gradient(160deg, var(--et-cream) 0%, var(--et-stone) 100%)"
      : "linear-gradient(160deg, #F7EBDD 0%, #E7DCCD 100%)";
  return (
    <div
      style={{
        position: "relative",
        aspectRatio: ratio,
        borderRadius: radius,
        background: bg,
        border: "1px solid var(--line-hairline)",
        overflow: "hidden",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      {/* seamless hairline stripes */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage:
            "repeating-linear-gradient(135deg, rgba(162,105,57,0.05) 0 1px, transparent 1px 16px)",
        }}
      />
      <img src="et-mark-gold.svg" alt="" style={{ width: "40%", opacity: 0.22 }} />
      {label ? (
        <span
          style={{
            position: "absolute",
            bottom: 8,
            left: 10,
            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
            fontSize: 9.5,
            letterSpacing: "0.04em",
            color: "rgba(0,0,0,0.34)",
            textTransform: "lowercase",
          }}
        >
          {label}
        </span>
      ) : null}
    </div>
  );
}

// ── Minimal stroke icon set (Lucide-spirit, 1.5 weight, round caps) ────────
function Icon({ name, size = 22, stroke = "currentColor", sw = 1.5 }) {
  const common = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke,
    strokeWidth: sw,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    style: { display: "block" },
  };
  const P = {
    menu: <><path d="M3 7h18" /><path d="M3 12h18" /><path d="M3 17h18" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></>,
    bag: <><path d="M6 8h12l-1 12H7L6 8Z" /><path d="M9 8V6a3 3 0 0 1 6 0v2" /></>,
    heart: <path d="M12 20s-7-4.4-9.2-8.4C1.3 8.9 2.6 5.5 6 5.5c2 0 3.2 1.3 4 2.6.8-1.3 2-2.6 4-2.6 3.4 0 4.7 3.4 3.2 6.1C19 15.6 12 20 12 20Z" />,
    chevL: <path d="m15 5-7 7 7 7" />,
    chevR: <path d="m9 5 7 7-7 7" />,
    chevD: <path d="m5 9 7 7 7-7" />,
    plus: <><path d="M12 5v14" /><path d="M5 12h14" /></>,
    minus: <path d="M5 12h14" />,
    x: <><path d="M6 6l12 12" /><path d="M18 6 6 18" /></>,
    check: <path d="m4 12 5 5L20 6" />,
    truck: <><path d="M3 7h11v9H3z" /><path d="M14 10h4l3 3v3h-7" /><circle cx="7" cy="18" r="1.6" /><circle cx="17.5" cy="18" r="1.6" /></>,
    shield: <path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z" />,
    globe: <><circle cx="12" cy="12" r="8.5" /><path d="M3.5 12h17" /><path d="M12 3.5c2.4 2.3 3.6 5.4 3.6 8.5S14.4 18.2 12 20.5C9.6 18.2 8.4 15.1 8.4 12S9.6 5.8 12 3.5Z" /></>,
    sparkle: <path d="M12 3.5l1.7 5.3 5.3 1.7-5.3 1.7L12 17.5l-1.7-5.3L5 10.5l5.3-1.7L12 3.5Z" />,
    chat: <path d="M5 5h14v10H9l-4 4V5Z" />,
    star: null,
    arrowR: <><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></>,
    user: <><circle cx="12" cy="8" r="3.5" /><path d="M5 20c1-3.6 4-5.5 7-5.5s6 1.9 7 5.5" /></>,
    home: <><path d="M4 11 12 4l8 7" /><path d="M6 10v10h12V10" /></>,
    grid: <><rect x="4" y="4" width="7" height="7" rx="1" /><rect x="13" y="4" width="7" height="7" rx="1" /><rect x="4" y="13" width="7" height="7" rx="1" /><rect x="13" y="13" width="7" height="7" rx="1" /></>,
  };
  if (name === "star") {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill={stroke} style={{ display: "block" }}>
        <path d="M12 3l2.6 5.6 6 .7-4.5 4.1 1.2 6L12 16.9 6.7 19.4l1.2-6L3.4 9.3l6-.7L12 3Z" />
      </svg>
    );
  }
  return <svg {...common}>{P[name]}</svg>;
}

function Stars({ value = 5, size = 13 }) {
  return (
    <span style={{ display: "inline-flex", gap: 2, alignItems: "center" }}>
      {[0, 1, 2, 3, 4].map((i) => (
        <Icon key={i} name="star" size={size} stroke={i < Math.round(value) ? "var(--et-honey)" : "rgba(0,0,0,0.14)"} />
      ))}
    </span>
  );
}

// LINE glyph (brand-neutral speech bubble wordmark stand-in)
function LineGlyph({ size = 18, color = "#fff" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "block" }}>
      <path
        d="M12 3.6c-4.9 0-8.9 3.2-8.9 7.2 0 3.6 3.2 6.6 7.5 7.1.3 0 .7.2.8.5.1.3 0 .7 0 .9l-.1.8c0 .3-.2 1 .9.6 1.1-.5 6-3.5 8.2-6h0c1.5-1.6 2.5-3.3 2.5-4.9 0-4-4-7.2-8.9-7.2Z"
        fill={color}
      />
    </svg>
  );
}

Object.assign(window, { money, PRODUCTS, byId, VIBES, PhotoSlot, Icon, Stars, LineGlyph });