const { useState, useEffect, useMemo } = React;

// === DATA ======================================================
const LOAF_WEIGHT = 700;

const LOAVES = [
  {
    id: "classic", name_en: "Classic Sourdough", name_th: "คลาสสิก", price: 180, image: "assets/classic.png",
    tag_en: "Slow Fermented", tag_th: "หมักช้า",
    desc_en: "The honest one. Crackling crust, open airy crumb, a gentle tang from a 24–48 hour cold ferment.",
    desc_th: "ขนมปังซาวร์โดว์ดั้งเดิม เปลือกกรอบ เนื้อในโปร่งนุ่ม หมักเย็น 24–48 ชม. เพื่อรสเปรี้ยวละมุน",
    ingredients_en: "Wheat flour, water, sourdough starter, salt",
    ingredients_th: "แป้งสาลี, น้ำ, หัวเชื้อซาวร์โดว์, เกลือ",
    allergens_en: "Contains gluten (wheat)",
    allergens_th: "มีกลูเตน (ข้าวสาลี)",
    badges_en: ["Gut Friendly", "No Commercial Yeast", "No Preservatives"],
    badges_th: ["ดีต่อลำไส้", "ไม่ใช้ยีสต์อุตสาหกรรม", "ไม่ใส่สารกันบูด"],
    nutrition: { kcal: 1400, carb: 280, protein: 42, fat: 4, fiber: "10–12g", sodium: "1,800mg" }
  },
  {
    id: "cheese", name_en: "Cheddar Cheese Sourdough", name_th: "เชดดาร์ชีส", price: 240, image: "assets/cheese.png",
    tag_en: "High Protein", tag_th: "โปรตีนสูง",
    desc_en: "Generous pockets of melted cheddar throughout. Rich, savory, indulgent — a standout toasted.",
    desc_th: "เชดดาร์ชีสละลายซ่อนอยู่ในเนื้อขนมปัง รสชาติเข้มข้น เค็มมัน ยิ่งอร่อยเมื่อปิ้ง",
    ingredients_en: "Wheat flour, water, sourdough starter, cheddar cheese, salt",
    ingredients_th: "แป้งสาลี, น้ำ, หัวเชื้อซาวร์โดว์, เชดดาร์ชีส, เกลือ",
    allergens_en: "Contains gluten (wheat), milk",
    allergens_th: "มีกลูเตน (ข้าวสาลี), นม",
    badges_en: ["High Protein", "Rich & Savory"],
    badges_th: ["โปรตีนสูง", "เข้มข้น เค็มมัน"],
    nutrition: { kcal: 1850, carb: 270, protein: 60, fat: 55, fiber: "10g", sodium: "2,200mg" }
  },
  {
    id: "cinnamon-raisin", name_en: "Cinnamon Raisin Sourdough", name_th: "ซินนามอน เรซิ่น", price: 220, image: "assets/raisin.png",
    tag_en: "Naturally Sweet", tag_th: "หวานธรรมชาติ",
    desc_en: "Warm cinnamon swirled through the crumb with plump raisins. Toast it, butter it, swoon.",
    desc_th: "ขนมปังหอมซินนามอนกับลูกเกดอวบฉ่ำ ปิ้งกับเนยอุ่นๆ อร่อยจนต้องหลับตา",
    ingredients_en: "Wheat flour, water, sourdough starter, raisins, cinnamon, salt",
    ingredients_th: "แป้งสาลี, น้ำ, หัวเชื้อซาวร์โดว์, ลูกเกด, ซินนามอน, เกลือ",
    allergens_en: "Contains gluten (wheat)",
    allergens_th: "มีกลูเตน (ข้าวสาลี)",
    badges_en: ["No Refined Sugar", "No Commercial Yeast"],
    badges_th: ["ไม่ใส่น้ำตาลขัดขาว", "ไม่ใช้ยีสต์อุตสาหกรรม"],
    nutrition: { kcal: 1700, carb: 330, protein: 44, fat: 5, fiber: "12–14g", sodium: "1,800mg" }
  },
  {
    id: "double-chocolate", name_en: "Double Chocolate Sourdough", name_th: "ดับเบิ้ลช็อกโกแลต", price: 220, image: "assets/chocolate.png",
    tag_en: "Indulgent", tag_th: "หอมเข้มข้น",
    desc_en: "Cocoa-rich dough studded with dark chocolate. Surprisingly grown-up — try it warm with sea salt.",
    desc_th: "แป้งโกโก้เข้มข้นใส่ดาร์กช็อกโกแลต รสผู้ใหญ่อย่างน่าประหลาดใจ ลองปิ้งอุ่นโรยเกลือทะเล",
    ingredients_en: "Wheat flour, water, sourdough starter, cocoa powder, dark chocolate, salt",
    ingredients_th: "แป้งสาลี, น้ำ, หัวเชื้อซาวร์โดว์, ผงโกโก้, ดาร์กช็อกโกแลต, เกลือ",
    allergens_en: "Contains gluten (wheat); may contain milk and soy (chocolate)",
    allergens_th: "มีกลูเตน (ข้าวสาลี); อาจมีนมและถั่วเหลือง (ช็อกโกแลต)",
    badges_en: ["Cocoa-Rich", "No Commercial Yeast"],
    badges_th: ["โกโก้แท้", "ไม่ใช้ยีสต์อุตสาหกรรม"],
    nutrition: { kcal: 1900, carb: 300, protein: 46, fat: 45, fiber: "12g", sodium: "1,800mg" }
  },
  {
    id: "multigrain", name_en: "Multigrain Sourdough", name_th: "มัลติเกรน", price: 200, image: "assets/grain.png",
    tag_en: "Very High Fiber", tag_th: "ไฟเบอร์สูงมาก",
    desc_en: "Whole grains and a generous mix of seeds — sunflower, flax, sesame. The heartiest loaf we make.",
    desc_th: "โฮลเกรนผสมเมล็ดทานตะวัน แฟล็กซ์ และงา ไฟเบอร์สูง หนักแน่นที่สุดในร้าน",
    ingredients_en: "Wheat flour, whole grains, seeds (sunflower, flax, sesame), water, sourdough starter, salt",
    ingredients_th: "แป้งสาลี, ธัญพืชเต็มเมล็ด, เมล็ดธัญพืช (ทานตะวัน แฟล็กซ์ งา), น้ำ, หัวเชื้อซาวร์โดว์, เกลือ",
    allergens_en: "Contains gluten (wheat), seeds (sesame)",
    allergens_th: "มีกลูเตน (ข้าวสาลี), งา",
    badges_en: ["Very High Fiber", "Wholegrain", "Supports Digestion"],
    badges_th: ["ไฟเบอร์สูงมาก", "โฮลเกรน", "ดีต่อการย่อย"],
    nutrition: { kcal: 1600, carb: 260, protein: 50, fat: 30, fiber: "16–20g", sodium: "1,800mg" }
  },
  {
    id: "cranberry-walnut", name_en: "Cranberry Walnut Sourdough", name_th: "แครนเบอร์รี่ วอลนัท", price: 240, image: "assets/walnut.png",
    tag_en: "Sweet & Buttery", tag_th: "หวานละมุน",
    desc_en: "Dried cranberries and toasted walnuts folded through the dough. Sweet-tart, buttery, no refined sugar.",
    desc_th: "แครนเบอร์รี่อบแห้งและวอลนัทคั่ว รสหวานอมเปรี้ยว มันนุ่ม ไม่ใช้น้ำตาลขัดขาว",
    ingredients_en: "Wheat flour, water, sourdough starter, dried cranberries, walnuts, salt",
    ingredients_th: "แป้งสาลี, น้ำ, หัวเชื้อซาวร์โดว์, แครนเบอร์รี่อบแห้ง, วอลนัท, เกลือ",
    allergens_en: "Contains gluten (wheat), tree nuts (walnuts)",
    allergens_th: "มีกลูเตน (ข้าวสาลี), ถั่ว (วอลนัท)",
    badges_en: ["No Refined Sugar", "Heart-Healthy Fats"],
    badges_th: ["ไม่ใส่น้ำตาลขัดขาว", "ไขมันดี"],
    nutrition: { kcal: 1800, carb: 300, protein: 48, fat: 40, fiber: "14–16g", sodium: "1,800mg" }
  }
];

// === SVG bread illustration (unique crumb pattern per loaf) ====
function LoafIllus({ seed = 0 }) {
  // Generate deterministic variations from seed
  const hues = ["#c9a672", "#b8864b", "#a06f38", "#d2b27a", "#c49660", "#b87a3d", "#d9b87a"];
  const hue = hues[seed % hues.length];
  const scores = 3 + (seed % 3);
  return (
    <svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <defs>
        <linearGradient id={`lg-${seed}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={hue} stopOpacity="0.95"/>
          <stop offset="100%" stopColor="#6d3b22" stopOpacity="0.9"/>
        </linearGradient>
        <filter id={`grain-${seed}`}>
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed={seed}/>
          <feColorMatrix values="0 0 0 0 0.35  0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0.2 0"/>
          <feComposite in2="SourceGraphic" operator="in"/>
        </filter>
      </defs>
      {/* board/surface line */}
      <line x1="10" y1="100" x2="190" y2="100" stroke="#6d3b22" strokeWidth="0.5" opacity="0.3"/>
      <line x1="20" y1="103" x2="180" y2="103" stroke="#6d3b22" strokeWidth="0.3" opacity="0.2"/>
      {/* shadow */}
      <ellipse cx="100" cy="99" rx="72" ry="5" fill="#3a1d10" opacity="0.15"/>
      {/* loaf body */}
      <path d={`M 30 98 Q 28 60 55 50 Q 100 38 145 50 Q 172 60 170 98 Z`} fill={`url(#lg-${seed})`} stroke="#5a2f1c" strokeWidth="0.8"/>
      {/* grain texture */}
      <path d={`M 30 98 Q 28 60 55 50 Q 100 38 145 50 Q 172 60 170 98 Z`} fill={`url(#lg-${seed})`} filter={`url(#grain-${seed})`} opacity="0.6"/>
      {/* scoring */}
      {Array.from({ length: scores }).map((_, i) => {
        const x1 = 55 + i * (90 / (scores)) + (seed % 2 === 0 ? 0 : 3);
        const y1 = 52 + (i * 2);
        const x2 = x1 + 25;
        const y2 = y1 + 18;
        return (
          <path key={i} d={`M ${x1} ${y1} Q ${x1 + 12} ${y1 + 4} ${x2} ${y2}`} stroke="#3a1d10" strokeWidth="1.2" fill="none" opacity="0.6" strokeLinecap="round"/>
        );
      })}
      {/* highlights */}
      <path d={`M 60 54 Q 100 46 140 54`} stroke="#f6efe0" strokeWidth="1" fill="none" opacity="0.3"/>
    </svg>
  );
}

// === WHEAT ACCENT ============================================
function WheatAccent() {
  return (
    <svg viewBox="0 0 120 28" xmlns="http://www.w3.org/2000/svg">
      <g stroke="#b8864b" strokeWidth="1" fill="none" strokeLinecap="round">
        <line x1="2" y1="14" x2="40" y2="14"/>
        <line x1="80" y1="14" x2="118" y2="14"/>
      </g>
      <g fill="#b8864b">
        <ellipse cx="54" cy="8" rx="1.5" ry="4" transform="rotate(-25 54 8)"/>
        <ellipse cx="60" cy="6" rx="1.5" ry="4"/>
        <ellipse cx="66" cy="8" rx="1.5" ry="4" transform="rotate(25 66 8)"/>
        <ellipse cx="52" cy="14" rx="1.5" ry="4" transform="rotate(-25 52 14)"/>
        <ellipse cx="60" cy="12" rx="1.5" ry="4"/>
        <ellipse cx="68" cy="14" rx="1.5" ry="4" transform="rotate(25 68 14)"/>
        <ellipse cx="54" cy="20" rx="1.5" ry="4" transform="rotate(-25 54 20)"/>
        <ellipse cx="60" cy="18" rx="1.5" ry="4"/>
        <ellipse cx="66" cy="20" rx="1.5" ry="4" transform="rotate(25 66 20)"/>
      </g>
      <line x1="60" y1="6" x2="60" y2="28" stroke="#8b5a2b" strokeWidth="0.8"/>
    </svg>
  );
}

// === HEADER ==================================================
function Header({ lang, setLang }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <nav className="nav">
        <div className="nav-inner wrap">
          <a href="#top" className="nav-logo" onClick={() => setOpen(false)}>
            <img src="assets/wilder-logo.png" alt="Wilder Sourdough" />
          </a>
          <div className="nav-links">
            <a href="#loaves"><span data-en>Loaves</span><span data-th>ขนมปัง</span></a>
            <a href="#story"><span data-en>Our story</span><span data-th>เรื่องราว</span></a>
            <a href="#process"><span data-en>Process</span><span data-th>กระบวนการ</span></a>
            <a href="#order"><span data-en>Order</span><span data-th>สั่งซื้อ</span></a>
          </div>
          <div className="nav-right">
            <div className="lang-toggle" role="group" aria-label="Language">
              <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
              <button className={lang === "th" ? "active" : ""} onClick={() => setLang("th")}>ไทย</button>
            </div>
            <button className="burger" onClick={() => setOpen(!open)} aria-label="Menu">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            </button>
          </div>
        </div>
        <div className={`mobile-menu ${open ? "open" : ""}`}>
          <a href="#loaves" onClick={() => setOpen(false)}><span data-en>Loaves</span><span data-th>ขนมปัง</span></a>
          <a href="#story" onClick={() => setOpen(false)}><span data-en>Our story</span><span data-th>เรื่องราว</span></a>
          <a href="#process" onClick={() => setOpen(false)}><span data-en>Process</span><span data-th>กระบวนการ</span></a>
          <a href="#order" onClick={() => setOpen(false)}><span data-en>Order</span><span data-th>สั่งซื้อ</span></a>
        </div>
      </nav>
    </>
  );
}

// === HERO ====================================================
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <div className="eyebrow">
            <span data-en>Chiang Mai · Made to Order</span>
            <span data-th>เชียงใหม่ · ทำตามออเดอร์</span>
          </div>
          <h1>
            <span data-en><span className="script">Naturally</span><br/>fermented<br/>sourdough.</span>
            <span data-th>ซาวร์โดว์<br/>หมักธรรมชาติ<br/>ทุกก้อน</span>
          </h1>
          <p className="lede">
            <span data-en>Handcrafted by Mini Wilder in a small home kitchen in Chiang Mai. Slow-fermented for 24+ hours with a wild starter — no commercial yeast, no preservatives, no shortcuts.</span>
            <span data-th>อบด้วยมือโดย Mini Wilder ในครัวเล็กๆ ที่เชียงใหม่ หมักช้ากว่า 24 ชม. ด้วยหัวเชื้อธรรมชาติ ไม่ใช้ยีสต์อุตสาหกรรม ไม่ใส่สารกันบูด ไม่มีทางลัด</span>
          </p>
          <div className="hero-cta">
            <a className="btn" href="#order">
              <span data-en>Place an order</span><span data-th>สั่งซื้อ</span>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
            <a className="btn ghost" href="#loaves">
              <span data-en>See the loaves</span><span data-th>ดูขนมปัง</span>
            </a>
          </div>
          <div className="hero-meta">
            <span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
              <span data-en>24h+ cold ferment</span><span data-th>หมักเย็น 24+ ชม.</span>
            </span>
            <span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z"/></svg>
              <span data-en>No commercial yeast</span><span data-th>ไม่ใช้ยีสต์อุตสาหกรรม</span>
            </span>
            <span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
              <span data-en>Chiang Mai, TH</span><span data-th>เชียงใหม่</span>
            </span>
          </div>
        </div>
        <div className="hero-visual">
          <div className="hero-photo">
            <img src="assets/hero1.png" alt="Freshly baked Wilder Sourdough loaves" loading="eager" />
            <div className="hero-photo-caption">
              <span data-en>This morning's bake · Chiang Mai</span>
              <span data-th>ขนมปังที่อบเช้านี้ · เชียงใหม่</span>
            </div>
          </div>
          <img className="hero-stamp" src="assets/wilder-sticker.png" alt="Wilder Sourdough stamp" />
          <div className="hero-badge">
            <span className="big">฿180</span>
            <span data-en>from · 700g loaf</span><span data-th>เริ่มต้น · ก้อน 700g</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// === MARQUEE ================================================
function Marquee() {
  const items_en = ["Slow Fermented", "Handcrafted", "No Commercial Yeast", "Gut Friendly", "Naturally Fermented", "Made to Order", "Wholegrain Options", "Chiang Mai"];
  const items_th = ["หมักช้า", "ทำมือ", "ไม่ใช้ยีสต์อุตสาหกรรม", "ดีต่อลำไส้", "หมักธรรมชาติ", "ทำตามออเดอร์", "มีโฮลเกรน", "เชียงใหม่"];
  const render = (arr) => arr.map((t, i) => (
    <span className="marquee-item" key={i}>{t}<span className="sep">·</span></span>
  ));
  return (
    <div className="marquee" style={{ padding: "22px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--cream-2)" }}>
      <div className="marquee-track">
        <span data-en style={{ display: "inline-flex" }}>{render(items_en)}{render(items_en)}</span>
        <span data-th style={{ display: "inline-flex" }}>{render(items_th)}{render(items_th)}</span>
      </div>
    </div>
  );
}

// === STORY ===================================================
function Story() {
  return (
    <section className="sec about" id="story">
      <div className="wrap about-grid">
        <div className="about-photo">
          <div className="placeholder" style={{ padding: 18 }}>
            <img
              src="assets/miniphoto.png"
              alt="Mini Wilder in her Chiang Mai kitchen"
              loading="lazy"
              style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 2, boxShadow: "0 4px 14px rgba(58,29,16,.18)" }}
            />
          </div>
        </div>
        <div className="about-body">
          <div className="eyebrow"><span data-en>Meet the baker</span><span data-th>ผู้อบ</span></div>
          <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 500, fontSize: "clamp(32px, 5vw, 52px)", margin: "10px 0 24px", lineHeight: 1.05, color: "var(--cocoa-3)" }}>
            <span data-en><span className="script" style={{ fontSize: "1.4em", color: "var(--cocoa)", lineHeight: .7 }}>A baker,</span><br/>a mother, a builder of strong bodies.</span>
            <span data-th>นักอบ แม่ และผู้สร้างร่างกายที่แข็งแรง</span>
          </h2>
          <p data-en>Mini is a Chiang Mai local, mother of a beautiful three-year-old, a certified personal trainer, and a competitive bikini and fit-model athlete. Her husband Don is an American designer and hobbyist bodybuilder.</p>
          <p data-en>Cooking has always been her love language. Wilder Sourdough is an extension of her kitchen — a way to share food that fuels the best in us. Every loaf is slow, intentional, and made by hand.</p>
          <p data-th>มินิเป็นคนเชียงใหม่ คุณแม่ของลูกสาววัย 3 ขวบ เทรนเนอร์ส่วนตัว และนักฟิตโมเดลสายแข่งขัน ดอน สามีของเธอ เป็นนักออกแบบชาวอเมริกันและนักเพาะกายสายสมัครเล่น</p>
          <p data-th>การทำอาหารคือภาษาแห่งความรักของเธอเสมอมา Wilder Sourdough คือสิ่งที่ต่อยอดมาจากครัวของเธอ — วิธีแบ่งปันอาหารที่เติมพลังให้เราเป็นเวอร์ชันที่ดีที่สุด ขนมปังทุกก้อนใช้เวลาและทำด้วยมือ</p>
          <div className="about-signature">
            <div className="name">Mini Wilder</div>
            <div className="title"><span data-en>Baker & Founder</span><span data-th>ผู้ก่อตั้ง & ผู้อบ</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === LOAVES ==================================================
function Loaves({ lang, onPick }) {
  return (
    <section className="sec" id="loaves">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow"><span data-en>The loaves</span><span data-th>รายการขนมปัง</span></div>
          <h2>
            <span data-en>Six loaves, <span className="script">baked with intention.</span></span>
            <span data-th>ขนมปังหกชนิด อบอย่างตั้งใจ</span>
          </h2>
          <p>
            <span data-en>All made to order. Every loaf is 700g (dough weight before baking), ฿180–240 depending on the flavor. Tap any loaf for full ingredients and nutrition.</span>
            <span data-th>ทุกก้อนทำตามออเดอร์ น้ำหนักแป้งก่อนอบ 700g ราคา 180–240 บาทตามรสชาติ กดที่ขนมปังเพื่อดูส่วนผสมและโภชนาการ</span>
          </p>
        </div>
        <div className="loaves-grid">
          {LOAVES.map((l, i) => (
            <article className="loaf" key={l.id}>
              <div className="loaf-illus" style={{ padding: 0, overflow: "hidden" }}>
                <img src={l.image} alt={l.name_en} loading="lazy"
                  style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div>
                <div className="loaf-tag">{lang === "en" ? l.tag_en : l.tag_th}</div>
                <div className="loaf-top">
                  <h3 className="loaf-name">{lang === "en" ? l.name_en : l.name_th}</h3>
                  <div className="loaf-weight">{LOAF_WEIGHT}g</div>
                </div>
              </div>
              <p className="loaf-desc">{lang === "en" ? l.desc_en : l.desc_th}</p>
              <div className="loaf-foot">
                <div className="loaf-price">฿{l.price} <small>/ {lang === "en" ? "loaf" : "ก้อน"}</small></div>
                <button className="loaf-btn" onClick={() => onPick(l)}>
                  {lang === "en" ? "Details →" : "รายละเอียด →"}
                </button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// === MODAL ==================================================
function LoafModal({ loaf, lang, onClose }) {
  useEffect(() => {
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", h); document.body.style.overflow = ""; };
  }, [onClose]);
  if (!loaf) return null;
  const n = loaf.nutrition;
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </button>
        <div className="loaf-tag" style={{ marginBottom: 6 }}>{lang === "en" ? loaf.tag_en : loaf.tag_th}</div>
        <h3>{lang === "en" ? loaf.name_en : loaf.name_th}</h3>
        <div className="weight">{LOAF_WEIGHT}g · ฿{loaf.price}</div>
        <div style={{ aspectRatio: "16/10", background: "var(--cream-2)", borderRadius: 6, overflow: "hidden", marginBottom: 16 }}>
          <img src={loaf.image} alt={loaf.name_en} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        </div>
        <p>{lang === "en" ? loaf.desc_en : loaf.desc_th}</p>

        <h4>{lang === "en" ? "Per loaf (estimated, 700g dough before baking)" : "ต่อก้อน (โดยประมาณ จากแป้ง 700g ก่อนอบ)"}</h4>
        <div className="nutrition">
          <div><div className="v">{n.kcal}</div><div className="l">kcal</div></div>
          <div><div className="v">{n.carb}g</div><div className="l">{lang === "en" ? "Carbs" : "คาร์บ"}</div></div>
          <div><div className="v">{n.protein}g</div><div className="l">{lang === "en" ? "Protein" : "โปรตีน"}</div></div>
          <div><div className="v">{n.fat}g</div><div className="l">{lang === "en" ? "Fat" : "ไขมัน"}</div></div>
        </div>
        <p style={{ fontSize: 13, color: "var(--muted)", marginTop: -8 }}>
          {lang === "en"
            ? `Fiber: ${n.fiber} · Sodium: ${n.sodium}`
            : `ไฟเบอร์: ${n.fiber} · โซเดียม: ${n.sodium}`}
        </p>

        <h4>{lang === "en" ? "Ingredients" : "ส่วนผสม"}</h4>
        <p>{lang === "en" ? loaf.ingredients_en : loaf.ingredients_th}</p>

        <h4>{lang === "en" ? "Allergens" : "สารก่อภูมิแพ้"}</h4>
        <p>{lang === "en" ? loaf.allergens_en : loaf.allergens_th}</p>

        <h4>{lang === "en" ? "Notes" : "หมายเหตุ"}</h4>
        <div className="tags">
          {(lang === "en" ? loaf.badges_en : loaf.badges_th).map((b, i) => (
            <span className="tag" key={i}>{b}</span>
          ))}
        </div>

        <div style={{ marginTop: 22, display: "flex", gap: 10, flexWrap: "wrap" }}>
          <a className="btn" href="#order" onClick={onClose}>
            {lang === "en" ? "Order this loaf" : "สั่งขนมปังนี้"}
          </a>
          <button className="btn ghost" onClick={onClose}>
            {lang === "en" ? "Close" : "ปิด"}
          </button>
        </div>
      </div>
    </div>
  );
}

// === PROCESS ================================================
function Process() {
  return (
    <section className="sec process" id="process">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow"><span data-en>Our process</span><span data-th>กระบวนการ</span></div>
          <h2 style={{ color: "var(--cream)" }}>
            <span data-en>Four days from <span className="script" style={{ color: "var(--wheat)", fontSize: "1.4em", lineHeight: .7 }}>flour to loaf.</span></span>
            <span data-th>สี่วันจากแป้งสู่ขนมปัง</span>
          </h2>
        </div>
        <div className="process-grid">
          {[
            { n: "01", en_t: "Feed the starter", th_t: "ปลุกหัวเชื้อ", en_d: "A living culture of wild yeast and lactobacilli, fed twice daily until it doubles.", th_d: "หัวเชื้อธรรมชาติของยีสต์ป่าและแลคโตบาซิลไล เลี้ยงวันละสองครั้งจนฟูเท่าตัว", hrs: "12 HRS" },
            { n: "02", en_t: "Mix & autolyse", th_t: "ผสมและพักแป้ง", en_d: "Flour and water rest together, then salt and starter fold in. Gentle stretches build structure.", th_d: "ผสมแป้งกับน้ำและพักไว้ ก่อนใส่เกลือและหัวเชื้อ ดึงแป้งเบามือเพื่อสร้างโครงสร้าง", hrs: "4–6 HRS" },
            { n: "03", en_t: "Cold ferment", th_t: "หมักเย็น", en_d: "The shaped loaves rest in the cold for 24+ hours. Flavor deepens. Gluten strengthens.", th_d: "ปั้นเป็นก้อนแล้วพักในที่เย็นกว่า 24 ชม. รสชาติเข้มขึ้น โครงสร้างแข็งแรงขึ้น", hrs: "24+ HRS" },
            { n: "04", en_t: "Bake fresh", th_t: "อบสด", en_d: "Scored and baked with steam the morning you receive them — crust crackling, crumb still warm.", th_d: "กรีดลายและอบด้วยไอน้ำในเช้าวันที่คุณรับ — เปลือกกรอบ ไส้ในยังอุ่น", hrs: "45 MIN" }
          ].map((s, i) => (
            <div className="step" key={i}>
              <div className="step-num">— {s.n} —</div>
              <h3><span data-en>{s.en_t}</span><span data-th>{s.th_t}</span></h3>
              <p><span data-en>{s.en_d}</span><span data-th>{s.th_d}</span></p>
              <div className="hrs">{s.hrs}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === ORDER FORM =============================================
const EMPTY_FORM = {
  name: "", email: "", phone: "",
  contactPref: "line", lineId: "", igHandle: "",
  fulfill: "pickup",
  slice: "whole",
  addressLine: "", district: "", province: "", postal: "",
  date: "", notes: ""
};

function Order({ lang }) {
  const [qty, setQty] = useState(() => Object.fromEntries(LOAVES.map(l => [l.id, 0])));
  const [form, setForm] = useState(EMPTY_FORM);
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState("");

  const totalItems = useMemo(() => Object.values(qty).reduce((a, b) => a + b, 0), [qty]);
  const subtotal = useMemo(() => LOAVES.reduce((s, l) => s + qty[l.id] * l.price, 0), [qty]);
  const deliveryFee = useMemo(() => {
    if (form.fulfill !== "shipping" || totalItems === 0) return 0;
    return 60 + Math.max(0, totalItems - 1) * 20;
  }, [form.fulfill, totalItems]);
  const total = subtotal + deliveryFee;

  const setQ = (id, d) => setQty(q => ({ ...q, [id]: Math.max(0, q[id] + d) }));

  const submit = async (e) => {
    e.preventDefault();
    if (totalItems === 0 || submitting) return;
    setSubmitting(true);
    setSubmitError("");
    const items = LOAVES.filter(l => qty[l.id] > 0).map(l => ({
      id: l.id, name: l.name_en, qty: qty[l.id], price: l.price, lineTotal: qty[l.id] * l.price
    }));
    const slicePref = form.slice === "sliced" ? "Pre-sliced" : "Whole loaf";
    try {
      const res = await fetch("/api/order", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, slicePref, items, totalItems, subtotal, deliveryFee, total, lang })
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || "Submission failed");
      }
      setSubmitted(true);
    } catch (err) {
      setSubmitError(lang === "en"
        ? "Could not send order. Please try LINE or email instead — your details are below."
        : "ส่งออเดอร์ไม่สำเร็จ กรุณาทักผ่าน LINE หรืออีเมลแทน — ดูช่องทางด้านล่าง");
    } finally {
      setSubmitting(false);
    }
  };

  const reset = () => {
    setSubmitted(false);
    setQty(Object.fromEntries(LOAVES.map(l => [l.id, 0])));
    setForm(EMPTY_FORM);
  };

  const minDate = new Date(Date.now() + 3 * 86400000).toISOString().slice(0, 10); // min 3 days out

  if (submitted) {
    return (
      <section className="sec" id="order" style={{ background: "var(--cream-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div className="form-card submitted" style={{ maxWidth: 600, margin: "0 auto" }}>
            <div style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--cocoa)", color: "var(--paper)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto" }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12l5 5 9-11"/></svg>
            </div>
            <h3>{lang === "en" ? "Your order is in." : "ได้รับออเดอร์แล้ว"}</h3>
            <p>
              {lang === "en"
                ? "Mini will reach out within 24 hours through your preferred contact channel to confirm. Once confirmed, scan the PromptPay QR below to complete payment — Mini bakes after payment is received. Pickup orders can also pay cash on collection."
                : "มินิจะติดต่อกลับภายใน 24 ชั่วโมงทางช่องทางที่คุณเลือกเพื่อยืนยัน เมื่อยืนยันแล้ว สแกน QR พร้อมเพย์ด้านล่างเพื่อชำระเงิน — มินิจะอบหลังได้รับชำระเงิน ออเดอร์รับเองที่ร้านชำระเงินสดได้"}
            </p>
            <div style={{ marginTop: 24, padding: 16, background: "var(--cream)", border: "1px solid var(--line)", borderRadius: 12, maxWidth: 480, marginLeft: "auto", marginRight: "auto" }}>
              <div style={{ fontSize: 12, letterSpacing: ".15em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 12 }}>
                {lang === "en" ? "PromptPay · After confirmation" : "พร้อมเพย์ · หลังยืนยัน"}
              </div>
              <img src="assets/qrpay.png" alt="PromptPay QR" style={{ width: "100%", height: "auto", display: "block", borderRadius: 6 }} />
              <div style={{ marginTop: 12, fontSize: 13, color: "var(--muted)" }}>
                <a href="pay.html" style={{ color: "var(--cocoa-3)" }}>{lang === "en" ? "Open full payment page →" : "เปิดหน้าชำระเงินแบบเต็ม →"}</a>
              </div>
            </div>
            <div style={{ marginTop: 24 }}>
              <button className="btn ghost" onClick={reset}>
                {lang === "en" ? "Place another order" : "สั่งอีกครั้ง"}
              </button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="sec" id="order" style={{ background: "var(--cream-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow"><span data-en>Made to order</span><span data-th>ทำตามออเดอร์</span></div>
          <h2>
            <span data-en>Reserve your <span className="script">fresh loaves.</span></span>
            <span data-th>จองขนมปังสดของคุณ</span>
          </h2>
          <p>
            <span data-en>Every loaf is baked just for you. Please order at least 3 days ahead — we'll confirm your pickup or delivery day within 24 hours.</span>
            <span data-th>ขนมปังทุกก้อนอบเพื่อคุณโดยเฉพาะ กรุณาสั่งล่วงหน้าอย่างน้อย 3 วัน เราจะยืนยันวันรับหรือจัดส่งภายใน 24 ชั่วโมง</span>
          </p>
        </div>

        <div className="order-grid">
          <form className="form-card" onSubmit={submit}>
            <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, margin: "0 0 18px", color: "var(--cocoa-3)" }}>
              {lang === "en" ? "1. Choose your loaves" : "1. เลือกขนมปัง"}
            </h3>
            <div className="qty-list">
              {LOAVES.map(l => (
                <div className={`qty-row ${qty[l.id] > 0 ? "active" : ""}`} key={l.id}>
                  <div>
                    <span className="nm">{lang === "en" ? l.name_en : l.name_th}</span>
                    <span className="pr">฿{l.price} · {LOAF_WEIGHT}g</span>
                  </div>
                  <div className="qty-ctrl">
                    <button type="button" onClick={() => setQ(l.id, -1)} aria-label="decrease">−</button>
                    <span className="n">{qty[l.id]}</span>
                    <button type="button" onClick={() => setQ(l.id, 1)} aria-label="increase">+</button>
                  </div>
                </div>
              ))}
            </div>

            <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, margin: "26px 0 4px", color: "var(--cocoa-3)" }}>
              {lang === "en" ? "2. Your details" : "2. ข้อมูลของคุณ"}
            </h3>
            <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 14 }}>
              <span style={{ color: "#b03a2a" }}>*</span> {lang === "en" ? "required" : "จำเป็น"}
            </div>

            <div className="form-row two">
              <div>
                <label>{lang === "en" ? "Name" : "ชื่อ"} <span style={{ color: "#b03a2a" }}>*</span></label>
                <input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
              </div>
              <div>
                <label>
                  {lang === "en" ? "Phone" : "เบอร์โทร"}{" "}
                  {form.fulfill === "pickup"
                    ? <span style={{ color: "var(--muted)", fontWeight: 400, textTransform: "none", letterSpacing: 0 }}>{lang === "en" ? "(optional)" : "(ไม่บังคับ)"}</span>
                    : <span style={{ color: "#b03a2a" }}>*</span>}
                </label>
                <input
                  required={form.fulfill !== "pickup"}
                  type="tel"
                  value={form.phone}
                  onChange={e => setForm({ ...form, phone: e.target.value })}
                  placeholder={form.fulfill === "pickup" ? (lang === "en" ? "optional for pickup" : "ไม่บังคับสำหรับรับเอง") : ""}
                />
              </div>
            </div>
            <div className="form-row two">
              <div>
                <label>Email <span style={{ color: "#b03a2a" }}>*</span></label>
                <input required type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
              </div>
              <div>
                <label>
                  {lang === "en" ? "Preferred date" : "วันที่ต้องการ"}{" "}
                  <span style={{ color: "var(--muted)", fontWeight: 400, textTransform: "none", letterSpacing: 0 }}>{lang === "en" ? "(optional)" : "(ไม่บังคับ)"}</span>
                </label>
                <input type="date" min={minDate} value={form.date} onChange={e => setForm({ ...form, date: e.target.value })} />
              </div>
            </div>
            <div className="form-row two">
              <div>
                <label>{lang === "en" ? "Preferred contact" : "ช่องทางที่อยากให้ติดต่อ"} <span style={{ color: "#b03a2a" }}>*</span></label>
                <select value={form.contactPref} onChange={e => setForm({ ...form, contactPref: e.target.value })}>
                  <option value="line">LINE</option>
                  <option value="email">Email</option>
                  <option value="instagram">Instagram</option>
                  <option value="phone">{lang === "en" ? "Phone call" : "โทรศัพท์"}</option>
                </select>
              </div>
              <div>
                {form.contactPref === "line" && (
                  <>
                    <label>LINE ID <span style={{ color: "#b03a2a" }}>*</span></label>
                    <input required value={form.lineId} onChange={e => setForm({ ...form, lineId: e.target.value })} placeholder={lang === "en" ? "your LINE ID" : "LINE ID ของคุณ"} />
                  </>
                )}
                {form.contactPref === "instagram" && (
                  <>
                    <label>Instagram <span style={{ color: "#b03a2a" }}>*</span></label>
                    <input required value={form.igHandle} onChange={e => setForm({ ...form, igHandle: e.target.value })} placeholder="@yourhandle" />
                  </>
                )}
                {(form.contactPref === "email" || form.contactPref === "phone") && (
                  <>
                    <label style={{ visibility: "hidden" }}>spacer</label>
                    <div style={{ fontSize: 13, color: "var(--muted)", padding: "12px 0" }}>
                      {lang === "en" ? "We'll use the email/phone above." : "เราจะใช้อีเมล/เบอร์ด้านบน"}
                    </div>
                  </>
                )}
              </div>
            </div>

            <div className="form-row">
              <div>
                <label>{lang === "en" ? "Slicing preference" : "ลักษณะการตัด"} <span style={{ color: "#b03a2a" }}>*</span></label>
                <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                  {[
                    { v: "whole",  l_en: "Whole loaf",  l_th: "ก้อนเต็ม" },
                    { v: "sliced", l_en: "Pre-sliced",  l_th: "หั่นมาแล้ว" }
                  ].map(opt => (
                    <label key={opt.v}
                      className={`qty-row ${form.slice === opt.v ? "active" : ""}`}
                      style={{ flex: "1 1 180px", cursor: "pointer", padding: "12px 14px" }}>
                      <input type="radio" name="slice" value={opt.v}
                        checked={form.slice === opt.v}
                        onChange={e => setForm({ ...form, slice: e.target.value })}
                        style={{ marginRight: 10, accentColor: "var(--cocoa)" }} />
                      <span className="nm" style={{ fontWeight: 500 }}>{lang === "en" ? opt.l_en : opt.l_th}</span>
                    </label>
                  ))}
                </div>
              </div>
            </div>

            <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, margin: "26px 0 12px", color: "var(--cocoa-3)" }}>
              {lang === "en" ? "3. Fulfillment" : "3. วิธีรับสินค้า"}
            </h3>
            <div className="qty-list">
              {[
                { v: "pickup",   t_en: "Pickup in Chiang Mai", t_th: "รับที่เชียงใหม่",
                  note_en: "Free · pickup spot sent in your confirmation · cash or PromptPay on collection",
                  note_th: "ฟรี · จุดรับจะส่งให้ในข้อความยืนยัน · ชำระเงินสดหรือพร้อมเพย์ตอนรับ" },
                { v: "grab",     t_en: "Grab delivery (Chiang Mai)", t_th: "Grab จัดส่ง (เชียงใหม่)",
                  note_en: "You pay the Grab fee on arrival · loaf cost via PromptPay before bake",
                  note_th: "ค่า Grab จ่ายตอนรับ · ค่าขนมปังพร้อมเพย์ก่อนเริ่มอบ" },
                { v: "shipping", t_en: "Shipping (rest of Thailand)", t_th: "พัสดุ (ทั่วประเทศ)",
                  note_en: "฿60 first loaf + ฿20 each additional · paid via PromptPay before shipping",
                  note_th: "ก้อนแรก 60฿ ก้อนถัดไป 20฿/ก้อน · พร้อมเพย์ก่อนจัดส่ง" }
              ].map(opt => (
                <label key={opt.v} className={`qty-row ${form.fulfill === opt.v ? "active" : ""}`} style={{ alignItems: "flex-start", cursor: "pointer" }}>
                  <input type="radio" name="fulfill" value={opt.v} checked={form.fulfill === opt.v}
                    onChange={e => setForm({ ...form, fulfill: e.target.value })}
                    style={{ marginTop: 4, marginRight: 12, accentColor: "var(--cocoa)" }} />
                  <div style={{ flex: 1 }}>
                    <div className="nm" style={{ fontWeight: 500, color: "var(--cocoa-3)" }}>{lang === "en" ? opt.t_en : opt.t_th}</div>
                    <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4, lineHeight: 1.45 }}>{lang === "en" ? opt.note_en : opt.note_th}</div>
                  </div>
                </label>
              ))}
            </div>

            {form.fulfill === "grab" && (
              <div className="form-row" style={{ marginTop: 14 }}>
                <div>
                  <label>{lang === "en" ? "Delivery address (Chiang Mai)" : "ที่อยู่จัดส่ง (เชียงใหม่)"}</label>
                  <textarea required value={form.addressLine} onChange={e => setForm({ ...form, addressLine: e.target.value })}
                    placeholder={lang === "en" ? "Building, road, neighborhood, any landmarks..." : "อาคาร ถนน หมู่บ้าน จุดสังเกต..."} />
                </div>
              </div>
            )}
            {form.fulfill === "shipping" && (
              <>
                <div className="form-row" style={{ marginTop: 14 }}>
                  <div>
                    <label>{lang === "en" ? "Address line" : "ที่อยู่"}</label>
                    <textarea required value={form.addressLine} onChange={e => setForm({ ...form, addressLine: e.target.value })}
                      placeholder={lang === "en" ? "House number, road, soi" : "บ้านเลขที่ ถนน ซอย"} />
                  </div>
                </div>
                <div className="form-row two">
                  <div>
                    <label>{lang === "en" ? "District / Subdistrict" : "ตำบล / อำเภอ"}</label>
                    <input required value={form.district} onChange={e => setForm({ ...form, district: e.target.value })} />
                  </div>
                  <div>
                    <label>{lang === "en" ? "Province" : "จังหวัด"}</label>
                    <input required value={form.province} onChange={e => setForm({ ...form, province: e.target.value })} />
                  </div>
                </div>
                <div className="form-row">
                  <div>
                    <label>{lang === "en" ? "Postal code" : "รหัสไปรษณีย์"}</label>
                    <input required pattern="[0-9]{5}" maxLength="5" value={form.postal}
                      onChange={e => setForm({ ...form, postal: e.target.value })} placeholder="50000" />
                  </div>
                </div>
              </>
            )}

            <div className="form-row" style={{ marginTop: 14 }}>
              <div>
                <label>{lang === "en" ? "Notes" : "บันทึกเพิ่มเติม"}</label>
                <textarea value={form.notes} onChange={e => setForm({ ...form, notes: e.target.value })}
                  placeholder={lang === "en" ? "Anything we should know?" : "มีอะไรให้ทราบไหม?"} />
              </div>
            </div>

            <div className="lead-time">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ flex: "none", marginTop: 2 }}><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 2"/></svg>
              <span>
                <span data-en>
                  No payment now. Mini will confirm within 24 hours and{" "}
                  <a href="pay.html" style={{ color: "var(--cocoa-3)", fontWeight: 600 }}>send the PromptPay QR</a>.
                  Pickup orders can pay cash on collection.
                </span>
                <span data-th>
                  ยังไม่ต้องชำระเงิน มินิจะยืนยันภายใน 24 ชั่วโมงและ
                  <a href="pay.html" style={{ color: "var(--cocoa-3)", fontWeight: 600 }}>ส่ง QR พร้อมเพย์</a>
                  ให้ ออเดอร์รับเองที่ร้านชำระเงินสดได้
                </span>
              </span>
            </div>

            <div className="total-row">
              <div>
                <div className="lbl">{lang === "en" ? "Loaf subtotal" : "ราคาขนมปัง"}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>
                  {totalItems} {lang === "en" ? (totalItems === 1 ? "loaf" : "loaves") : "ก้อน"}
                </div>
              </div>
              <div className="v" style={{ fontSize: 22 }}>฿{subtotal}</div>
            </div>
            {form.fulfill === "shipping" && (
              <div className="total-row" style={{ borderTop: "1px dashed var(--line)", paddingTop: 10, marginTop: 0 }}>
                <div>
                  <div className="lbl">{lang === "en" ? "Shipping" : "ค่าจัดส่ง"}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>
                    {lang === "en" ? "฿60 first + ฿20 each additional" : "ก้อนแรก 60฿ ก้อนถัดไป 20฿"}
                  </div>
                </div>
                <div className="v" style={{ fontSize: 22 }}>฿{deliveryFee}</div>
              </div>
            )}
            <div className="total-row" style={{ borderTop: "1px solid var(--cocoa)", marginTop: 0 }}>
              <div>
                <div className="lbl" style={{ color: "var(--cocoa-3)" }}>{lang === "en" ? "Total due after confirmation" : "ยอดที่ต้องชำระหลังยืนยัน"}</div>
                {form.fulfill === "grab" && (
                  <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>
                    {lang === "en" ? "+ Grab fee paid on arrival" : "+ ค่า Grab จ่ายตอนรับ"}
                  </div>
                )}
              </div>
              <div className="v">฿{total}</div>
            </div>

            {submitError && (
              <div style={{ marginTop: 12, padding: 12, background: "#f9e0d5", color: "#7a2415", borderRadius: 6, fontSize: 13 }}>{submitError}</div>
            )}

            <button type="submit" className="btn"
              style={{ width: "100%", justifyContent: "center", marginTop: 14, opacity: (totalItems === 0 || submitting) ? .5 : 1, cursor: (totalItems === 0 || submitting) ? "not-allowed" : "pointer" }}
              disabled={totalItems === 0 || submitting}>
              {submitting
                ? (lang === "en" ? "Sending…" : "กำลังส่ง…")
                : (lang === "en" ? "Send order" : "ส่งออเดอร์")}
              {!submitting && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>}
            </button>
          </form>

          <div>
            <div className="info-card">
              <h3>{lang === "en" ? "Prefer to chat?" : "อยากคุยส่วนตัว?"}</h3>
              <p>
                <span data-en>Message Mini directly on LINE or give her a ring. She answers when she's not elbow-deep in dough.</span>
                <span data-th>ทักแชทหามินิทาง LINE หรือโทรหาเธอได้เลย จะตอบตอนที่มือไม่เลอะแป้ง</span>
              </p>
              <div className="info-contacts">
                <a className="btn line" href="https://line.me/R/ti/p/@342lyepp" target="_blank" rel="noopener" style={{ justifyContent: "center" }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 5.58 2 10c0 2.88 1.91 5.39 4.77 6.8-.2.74-.75 2.8-.86 3.24-.13.55.2.54.42.4.17-.12 2.7-1.83 3.79-2.58.62.09 1.25.14 1.88.14 5.52 0 10-3.58 10-8S17.52 2 12 2zM8 12H6v-4h.75v3.25H8V12zm2.5 0h-.75V8h.75v4zm4.25 0H14l-1.5-2.25V12h-.75V8h.75l1.5 2.25V8h.75v4zm3.5-3.25h-1.5v.75h1.5v.75h-1.5v1h1.5v.75H16V8h2.25v.75z"/></svg>
                  LINE: @342lyepp
                </a>
                <a href="https://instagram.com/wilder.sourdough" target="_blank" rel="noopener">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
                  @wilder.sourdough
                </a>
                <a href="mailto:wildersourdough@gmail.com">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>
                  wildersourdough@gmail.com
                </a>
              </div>
            </div>
            <div className="info-card">
              <h3>{lang === "en" ? "How it works" : "ขั้นตอน"}</h3>
              <ol style={{ paddingLeft: 18, margin: 0, color: "#3a2a1f", fontSize: 15 }}>
                <li style={{ marginBottom: 8 }}><span data-en>Place your order at least 3 days ahead</span><span data-th>สั่งล่วงหน้าอย่างน้อย 3 วัน</span></li>
                <li style={{ marginBottom: 8 }}><span data-en>Mini confirms via your preferred channel within 24h</span><span data-th>มินิยืนยันผ่านช่องทางที่คุณเลือกภายใน 24 ชม.</span></li>
                <li style={{ marginBottom: 8 }}>
                  <a href="pay.html" style={{ color: "var(--cocoa-3)", textDecoration: "underline", textUnderlineOffset: "3px" }}>
                    <span data-en>Pay via PromptPay</span><span data-th>ชำระเงินผ่านพร้อมเพย์</span>
                  </a>
                  <span data-en> (or cash on pickup)</span><span data-th> (หรือเงินสดตอนรับ)</span>
                </li>
                <li><span data-en>Mini bakes and you receive your warm loaves</span><span data-th>มินิเริ่มอบ และคุณจะได้รับขนมปังอุ่นๆ</span></li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === WHOLESALE ===============================================
function Wholesale({ lang }) {
  return (
    <section className="sec wholesale" id="wholesale">
      <div className="wrap wholesale-inner">
        <div>
          <div className="eyebrow"><span data-en>Wholesale & cafés</span><span data-th>ขายส่ง & คาเฟ่</span></div>
          <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 500, fontSize: "clamp(32px, 5vw, 48px)", margin: "10px 0 18px", color: "var(--cocoa-3)", lineHeight: 1.05 }}>
            <span data-en><span className="script" style={{ fontSize: "1.3em", color: "var(--cocoa)", lineHeight: .7 }}>Serving</span> our sourdough in your space?</span>
            <span data-th>อยากเสิร์ฟซาวร์โดว์ของเราที่ร้านคุณ?</span>
          </h2>
          <p style={{ fontSize: 17, color: "#3a2a1f", maxWidth: "54ch", marginBottom: 24 }}>
            <span data-en>We work with a small number of Chiang Mai cafés, restaurants, and gyms who care about quality ingredients. Reach out directly for volume pricing and standing orders.</span>
            <span data-th>เรามีพาร์ทเนอร์เป็นคาเฟ่ ร้านอาหาร และยิมในเชียงใหม่ไม่กี่แห่งที่ใส่ใจในวัตถุดิบ ติดต่อโดยตรงเพื่อราคาขายส่งและออเดอร์ประจำ</span>
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            <a className="btn" href="mailto:wildersourdough@gmail.com?subject=Wholesale%20inquiry">
              <span data-en>Wholesale inquiry</span><span data-th>สอบถามขายส่ง</span>
            </a>
            <a className="btn ghost" href="#order">
              <span data-en>Or place an order</span><span data-th>หรือสั่งซื้อ</span>
            </a>
          </div>
        </div>
        <div style={{ padding: 30, background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 10 }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", fontSize: 22, color: "var(--cocoa)", lineHeight: 1.4, marginBottom: 18 }}>
            <span data-en>"The kind of bread you build a breakfast menu around — honest crumb, long ferment, and you can taste the care."</span>
            <span data-th>"ขนมปังที่คุณจะใช้เป็นหัวใจของเมนูเช้า — เนื้อจริงใจ หมักนาน ชิมแล้วรู้ว่าใส่ใจ"</span>
          </div>
          <div style={{ fontSize: 12, letterSpacing: ".15em", textTransform: "uppercase", color: "var(--muted)" }}>
            <span data-en>— Judy Mills, Chiang Mai café owner</span><span data-th>— จูดี้ มิลส์ เจ้าของคาเฟ่ในเชียงใหม่</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// === FOOTER =================================================
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="f-grid">
          <div>
            <div className="f-logo">Wilder</div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, color: "var(--cream)", marginTop: -8, letterSpacing: ".02em" }}>Sourdough</div>
            <div className="f-tag">
              <span data-en>Handcrafted · Naturally Fermented · Chiang Mai</span>
              <span data-th>ทำมือ · หมักธรรมชาติ · เชียงใหม่</span>
            </div>
          </div>
          <div>
            <h4><span data-en>Explore</span><span data-th>เมนู</span></h4>
            <a href="#loaves"><span data-en>The loaves</span><span data-th>ขนมปัง</span></a>
            <a href="#story"><span data-en>Our story</span><span data-th>เรื่องราว</span></a>
            <a href="#process"><span data-en>Process</span><span data-th>กระบวนการ</span></a>
            <a href="#wholesale"><span data-en>Wholesale</span><span data-th>ขายส่ง</span></a>
          </div>
          <div>
            <h4><span data-en>Find us</span><span data-th>ติดต่อ</span></h4>
            <a href="https://line.me/R/ti/p/@342lyepp" target="_blank" rel="noopener">LINE: @342lyepp</a>
            <a href="https://instagram.com/wilder.sourdough" target="_blank" rel="noopener">Instagram @wilder.sourdough</a>
            <a href="mailto:wildersourdough@gmail.com">wildersourdough@gmail.com</a>
            <a href="https://wildersourdough.com">wildersourdough.com</a>
          </div>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 18, paddingBottom: 24, color: "rgba(246,239,224,.78)", fontSize: 16, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.4 }}>
          <span><span data-en>Naturally fermented 24–48 hours</span><span data-th>หมักธรรมชาติ 24–48 ชม.</span></span>
          <span aria-hidden="true">·</span>
          <span><span data-en>No preservatives</span><span data-th>ไม่ใส่สารกันบูด</span></span>
          <span aria-hidden="true">·</span>
          <span><span data-en>Easier digestion than commercial bread</span><span data-th>ย่อยง่ายกว่าขนมปังทั่วไป</span></span>
          <span aria-hidden="true">·</span>
          <span><span data-en>Handmade in small batches</span><span data-th>ทำมือล็อตเล็ก</span></span>
          <span aria-hidden="true">·</span>
          <span><span data-en>Pre-order only</span><span data-th>รับเฉพาะพรีออเดอร์</span></span>
        </div>
        <div className="f-bottom" style={{ marginTop: 24 }}>
          <div>© 2026 Wilder Sourdough. <span data-en>All rights reserved.</span><span data-th>สงวนลิขสิทธิ์</span></div>
          <div><span data-en>Baked with love in Chiang Mai</span><span data-th>อบด้วยใจในเชียงใหม่</span></div>
        </div>
      </div>
    </footer>
  );
}

// === APP ====================================================
function App() {
  const [lang, setLang] = useState(() => localStorage.getItem("wilder_lang") || "en");
  const [modalLoaf, setModalLoaf] = useState(null);

  useEffect(() => {
    document.body.classList.toggle("th", lang === "th");
    document.documentElement.lang = lang;
    localStorage.setItem("wilder_lang", lang);
  }, [lang]);

  return (
    <>
      <Header lang={lang} setLang={setLang} />
      <Hero />
      <Marquee />
      <Story />
      <Loaves lang={lang} onPick={setModalLoaf} />
      <div className="wheat-divider"><WheatAccent /></div>
      <Process />
      <Order lang={lang} />
      <Wholesale lang={lang} />
      <Footer />
      {modalLoaf && <LoafModal loaf={modalLoaf} lang={lang} onClose={() => setModalLoaf(null)} />}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);