// Cafe page

function CafePage() {
  const { lang } = useT();
  const L = window.I18N[lang].cafe;
  const [tab, setTab] = useState(0);

  const menus = {
    en: [
      // hot
      [
        { name: "Espresso", price: 70, note: "double shot, no nonsense" },
        { name: "Americano", price: 80, note: "watered down on purpose" },
        { name: "Cappuccino", price: 110, note: "with foam art (sometimes)" },
        { name: "Latte", price: 120, note: "oat milk +20" },
        { name: "Mocha", price: 130, note: "chocolate AND coffee" },
        { name: "Hot chocolate", price: 110, note: "for the kids (and you)" },
      ],
      // cold
      [
        { name: "Iced Americano", price: 90, note: "extra ice, less judgment" },
        { name: "Iced Latte", price: 130, note: "thai/cold/perfect" },
        { name: "Cold Brew", price: 140, note: "16-hour steeped" },
        { name: "Matcha Latte", price: 150, note: "ceremonial grade" },
        { name: "Strawberry Milk", price: 130, note: "made by the kids (sometimes)" },
        { name: "Cucumber Lime Soda", price: 110, note: "surprisingly nice" },
      ],
      // snacks
      [
        { name: "Choc Chip Cookie", price: 60, note: "from a real oven" },
        { name: "Banana Bread Slice", price: 80, note: "with butter — fight me" },
        { name: "Almond Croissant", price: 110, note: "flaky chaos" },
        { name: "Yuzu Tart", price: 130, note: "tangy and yellow" },
        { name: "Pandan Brownie", price: 90, note: "green and proud" },
      ],
      // bites
      [
        { name: "Ham & Cheese Toastie", price: 180, note: "old-school" },
        { name: "Avocado Sourdough", price: 220, note: "millennial special" },
        { name: "Tomato Mozzarella", price: 240, note: "fresh basil" },
        { name: "Mini Quiche", price: 180, note: "rotating fillings" },
        { name: "Chicken Caesar Wrap", price: 220, note: "no anchovies sorry" },
      ],
    ],
    th: [
      [
        { name: "เอสเปรสโซ่", price: 70, note: "ดับเบิ้ลช็อต ไม่ขอ" },
        { name: "อเมริกาโน่", price: 80, note: "เจือจางโดยตั้งใจ" },
        { name: "คาปูชิโน่", price: 110, note: "มีลายฟอม (บางครั้ง)" },
        { name: "ลาเต้", price: 120, note: "นมข้าวโอ๊ต +20" },
        { name: "มอคค่า", price: 130, note: "ทั้งช็อกและกาแฟ" },
        { name: "ช็อกโกแลตร้อน", price: 110, note: "สำหรับเด็ก (และคุณ)" },
      ],
      [
        { name: "อเมริกาโน่เย็น", price: 90, note: "น้ำแข็งเยอะ ตัดสินน้อย" },
        { name: "ลาเต้เย็น", price: 130, note: "ไทย/เย็น/เป๊ะ" },
        { name: "โคลด์บรู", price: 140, note: "สกัด 16 ชั่วโมง" },
        { name: "มัทฉะลาเต้", price: 150, note: "เกรดพิธีกรรม" },
        { name: "นมสตรอเบอรี่", price: 130, note: "เด็กทำ (บางครั้ง)" },
        { name: "โซดาแตงกวามะนาว", price: 110, note: "อร่อยจริงๆนะ" },
      ],
      [
        { name: "คุกกี้ช็อกชิป", price: 60, note: "จากเตาจริงๆ" },
        { name: "กล้วยขนมปัง", price: 80, note: "ใส่เนย — เถียงเลย" },
        { name: "ครัวซองอัลมอนด์", price: 110, note: "ฟูฟ่อนวุ่นวาย" },
        { name: "ทาร์ตยูซุ", price: 130, note: "เปรี้ยวเหลือง" },
        { name: "บราวนี่ใบเตย", price: 90, note: "เขียวและภูมิใจ" },
      ],
      [
        { name: "โทสตี้แฮมชีส", price: 180, note: "ออลด์สคูล" },
        { name: "ขนมปังเปรี้ยวอะโวคาโด", price: 220, note: "สเปเชียลมิลเลนเนียล" },
        { name: "มะเขือเทศมอสซาเรลล่า", price: 240, note: "เบซิลสด" },
        { name: "มินิคีช", price: 180, note: "ไส้หมุนเวียน" },
        { name: "แรปไก่ซีซาร์", price: 220, note: "ไม่มีปลาแอนโชวี่ ขอโทษด้วย" },
      ],
    ],
  };

  return (
    <div className="page-enter">
      <section style={{ paddingTop: 60 }}>
        <div className="container">
          <div className="eyebrow">{L.eyebrow} ☕</div>
          <h1 style={{ marginTop: 18 }}>{L.title}</h1>
          <p style={{ fontSize: "1.2rem", maxWidth: 720 }}>{L.sub}</p>
        </div>
      </section>

      {/* Vibe card */}
      <section style={{ paddingTop: 20 }}>
        <div className="container">
          <div className="grid grid-3">
            {L.perks.map((p, i) => (
              <div key={i} className="card" style={{
                background: ["var(--paper)","var(--paper)","var(--paper)","var(--green)","var(--paper)","var(--orange)"][i],
                color: [3].includes(i) ? "#fff" : "var(--ink)",
                transform: `rotate(${[-1.2,0.8,-0.8,1.4,-1,0.6][i]}deg)`,
              }}>
                <div style={{ fontSize: "2rem", marginBottom: 8 }}>{["📶","🔌","🪟","📚","🤫","☕"][i]}</div>
                <div className="display" style={{ fontSize: "1.05rem", marginBottom: 6 }}>{p.t}</div>
                <p style={{ margin: 0 }}>{p.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Menu */}
      <section className="paper-bg">
        <div className="container-narrow">
          <div style={{ textAlign: "center", marginBottom: 32 }}>
            <div className="eyebrow">{L.menuEyebrow}</div>
            <h2 style={{ marginTop: 18 }}>{L.menuTitle}</h2>
          </div>

          {/* Tabs */}
          <div className="row row-center" style={{ gap: 10, marginBottom: 28 }}>
            {L.tabs.map((t, i) => (
              <button key={i} onClick={() => setTab(i)} className="btn btn-small" style={{
                background: tab === i ? "var(--ink)" : "var(--paper)",
                color: tab === i ? "var(--paper)" : "var(--ink)",
              }}>{t}</button>
            ))}
          </div>

          {/* Menu list */}
          <div className="card" style={{ background: "var(--paper)", padding: 36 }}>
            <div className="tape" style={{ background: "var(--red)", opacity: 0.6 }} />
            <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
              {menus[lang][tab].map((item, i) => (
                <li key={i} style={{
                  display: "flex",
                  alignItems: "baseline",
                  gap: 12,
                  padding: "14px 0",
                  borderBottom: "1px dashed rgba(0,0,0,0.15)",
                }}>
                  <span className="display" style={{ fontSize: "1.05rem", flexShrink: 0 }}>{item.name}</span>
                  <span style={{ flex: 1, borderBottom: "2px dotted rgba(0,0,0,0.2)", margin: "0 4px", alignSelf: "flex-end", marginBottom: 6 }} />
                  <span className="hand" style={{ flexShrink: 0, opacity: 0.6, fontSize: "0.95rem", maxWidth: 220, textAlign: "right" }}>{item.note}</span>
                  <span className="display" style={{ flexShrink: 0, fontSize: "1.1rem", minWidth: 60, textAlign: "right" }}>{item.price} ฿</span>
                </li>
              ))}
            </ul>
          </div>
          <p className="hand center" style={{ marginTop: 16, opacity: 0.6 }}>
            {lang === "th" ? "ราคาทั้งหมดเป็นบาท · มีแล็กโตสฟรีและกลูเตนฟรี" : "All prices in THB · lactose-free and gluten-free options available"}
          </p>
        </div>
      </section>

      {/* Big quote */}
      <section>
        <div className="container-narrow center">
          <div style={{ fontSize: "5rem", lineHeight: 1, color: "var(--red)" }}>"</div>
          <p className="hand" style={{ fontSize: "1.8rem", lineHeight: 1.4, maxWidth: 720, margin: "0 auto" }}>
            {lang === "th"
              ? "ฉันส่งลูกเข้าเวิร์กช็อป สั่งลาเต้ อ่านหนังสือไป 60 หน้า แล้วลูกออกมาพร้อมเกมจริงๆ คุ้มยิ่งกว่าโยคะ"
              : "I dropped my kid off, ordered a latte, finished 60 pages of a novel, and he came out with a real game. Worth it more than my yoga membership."}
          </p>
          <div className="hand mt-3" style={{ opacity: 0.7 }}>— {lang === "th" ? "คุณแม่ของแทน, 7 ขวบ" : "Tan's mum, 7 years old"}</div>
        </div>
      </section>
    </div>
  );
}

window.CafePage = CafePage;