const { useState, useEffect, useMemo } = React;

// === DATA ======================================================
const LOAVES = [
  {
    id: "classic", name_en: "Classic", name_th: "คลาสสิก",
    tag_en: "Slow Fermented", tag_th: "หมักช้า",
    weight: 550, price: 170,
    desc_en: "The honest one. Crackling crust, open airy crumb, a gentle tang from a 24-hour cold ferment.",
    desc_th: "ขนมปังซาวร์โดว์ดั้งเดิม เปลือกกรอบ เนื้อในโปร่งนุ่ม หมักเย็น 24 ชม. เพื่อรสเปรี้ยวละมุน",
    ingredients_en: "Bread flour, water, natural sourdough starter (flour, water), salt",
    ingredients_th: "แป้งขนมปัง, น้ำ, หัวเชื้อซาวร์โดว์ธรรมชาติ (แป้ง, น้ำ), เกลือ",
    allergens_en: "Contains gluten (wheat)",
    allergens_th: "มีกลูเตน (ข้าวสาลี)",
    badges_en: ["Gut Friendly", "No Commercial Yeast", "No Preservatives"],
    badges_th: ["ดีต่อลำไส้", "ไม่ใช้ยีสต์อุตสาหกรรม", "ไม่ใส่สารกันบูด"],
    nutrition: { kcal: 1250, carb: 245, protein: 38, fat: 6 }
  },
  {
    id: "rosemary", name_en: "Rosemary", name_th: "โรสแมรี่",
    tag_en: "Aromatic", tag_th: "หอมกรุ่น",
    weight: 550, price: 170,
    desc_en: "Classic dough scented with fresh rosemary. Pairs beautifully with olive oil and aged cheese.",
    desc_th: "แป้งคลาสสิกผสมโรสแมรี่สด หอมกลิ่นสมุนไพร เข้ากันดีกับน้ำมันมะกอกและชีสบ่ม",
    ingredients_en: "Bread flour, water, natural sourdough starter (flour, water), salt, rosemary",
    ingredients_th: "แป้งขนมปัง, น้ำ, หัวเชื้อซาวร์โดว์ธรรมชาติ, เกลือ, โรสแมรี่",
    allergens_en: "Contains gluten (wheat)",
    allergens_th: "มีกลูเตน (ข้าวสาลี)",
    badges_en: ["Herbaceous", "No Commercial Yeast"],
    badges_th: ["หอมสมุนไพร", "ไม่ใช้ยีสต์อุตสาหกรรม"],
    nutrition: { kcal: 1260, carb: 245, protein: 38, fat: 6 }
  },
  {
    id: "wholegrain", name_en: "Wholegrain", name_th: "โฮลเกรน",
    tag_en: "High Fiber", tag_th: "ไฟเบอร์สูง",
    weight: 550, price: 170,
    desc_en: "50–70% whole wheat flour. Nutty, hearty, and generously nourishing. A digestive-friendly daily loaf.",
    desc_th: "ใช้แป้งโฮลวีต 50–70% รสเข้มถั่วๆ เนื้อแน่นอิ่มท้อง ไฟเบอร์สูง ดีต่อระบบย่อย",
    ingredients_en: "Bread flour, whole wheat flour, water, natural sourdough starter, salt",
    ingredients_th: "แป้งขนมปัง, แป้งโฮลวีต, น้ำ, หัวเชื้อซาวร์โดว์ธรรมชาติ, เกลือ",
    allergens_en: "Contains gluten (wheat)",
    allergens_th: "มีกลูเตน (ข้าวสาลี)",
    badges_en: ["High Fiber", "Wholegrain", "Supports Digestion"],
    badges_th: ["ไฟเบอร์สูง", "โฮลเกรน", "ดีต่อการย่อย"],
    nutrition: { kcal: 1200, carb: 230, protein: 42, fat: 8, fiber: "25–30g" }
  },
  {
    id: "cranberry-walnut", name_en: "Cranberry Walnut", name_th: "แครนเบอร์รี่ วอลนัท",
    tag_en: "Naturally Sweet", tag_th: "หวานธรรมชาติ",
    weight: 650, price: 230,
    desc_en: "Dried cranberries and toasted walnuts folded through the dough. Sweet-tart, buttery, no refined sugar.",
    desc_th: "แครนเบอร์รี่อบแห้งและวอลนัทคั่ว รสหวานอมเปรี้ยว มันนุ่ม ไม่ใช้น้ำตาลขัดขาว",
    ingredients_en: "Bread flour, water, natural sourdough starter, dried cranberries, walnuts, salt",
    ingredients_th: "แป้งขนมปัง, น้ำ, หัวเชื้อซาวร์โดว์ธรรมชาติ, แครนเบอร์รี่อบแห้ง, วอลนัท, เกลือ",
    allergens_en: "Contains gluten (wheat), tree nuts (walnuts)",
    allergens_th: "มีกลูเตน (ข้าวสาลี), ถั่ว (วอลนัท)",
    badges_en: ["No Refined Sugar", "No Commercial Yeast"],
    badges_th: ["ไม่ใส่น้ำตาลขัดขาว", "ไม่ใช้ยีสต์อุตสาหกรรม"],
    nutrition: { kcal: 1650, carb: 285, protein: 45, fat: 32 }
  },
  {
    id: "pumpkin-sesame", name_en: "Pumpkin Black Sesame", name_th: "ฟักทอง งาดำ",
    tag_en: "Nutrient Dense", tag_th: "สารอาหารสูง",
    weight: 650, price: 230,
    desc_en: "Roasted pumpkin and toasted black sesame. Earthy, softly sweet, and loaded with antioxidants.",
    desc_th: "ฟักทองอบและงาดำคั่ว รสหวานละมุน อุดมด้วยสารต้านอนุมูลอิสระ",
    ingredients_en: "Bread flour, water, pumpkin, natural sourdough starter, black sesame seeds, salt",
    ingredients_th: "แป้งขนมปัง, น้ำ, ฟักทอง, หัวเชื้อซาวร์โดว์ธรรมชาติ, งาดำ, เกลือ",
    allergens_en: "Contains gluten (wheat), sesame",
    allergens_th: "มีกลูเตน (ข้าวสาลี), งา",
    badges_en: ["Antioxidant-Rich", "Nutrient Dense"],
    badges_th: ["ต้านอนุมูลอิสระ", "สารอาหารสูง"],
    nutrition: { kcal: 1480, carb: 270, protein: 42, fat: 14 }
  },
  {
    id: "cheese", name_en: "Cheese", name_th: "ชีส",
    tag_en: "High Protein", tag_th: "โปรตีนสูง",
    weight: 650, price: 230,
    desc_en: "Generous pockets of melted cheese throughout. Rich, savory, indulgent — a standout toasted.",
    desc_th: "ชีสละลายซ่อนอยู่ในเนื้อขนมปัง รสชาติเข้มข้น เค็มมัน ยิ่งอร่อยเมื่อปิ้ง",
    ingredients_en: "Bread flour, water, natural sourdough starter, cheese (milk), salt",
    ingredients_th: "แป้งขนมปัง, น้ำ, หัวเชื้อซาวร์โดว์ธรรมชาติ, ชีส (นม), เกลือ",
    allergens_en: "Contains gluten (wheat), milk",
    allergens_th: "มีกลูเตน (ข้าวสาลี), นม",
    badges_en: ["High Protein", "Rich & Savory"],
    badges_th: ["โปรตีนสูง", "เข้มข้น เค็มมัน"],
    nutrition: { kcal: 1700, carb: 250, protein: 55, fat: 45 }
  },
  {
    id: "wholegrain-seed", name_en: "Wholegrain Seed", name_th: "โฮลเกรน ธัญพืช",
    tag_en: "Very High Fiber", tag_th: "ไฟเบอร์สูงมาก",
    weight: 650, price: 230,
    desc_en: "Our wholegrain base with sunflower, pumpkin, and flax. The heartiest loaf we make.",
    desc_th: "โฮลเกรนผสมเมล็ดทานตะวัน ฟักทอง และแฟล็กซ์ ไฟเบอร์สูงมาก หนักแน่นที่สุดในร้าน",
    ingredients_en: "Bread flour, whole wheat flour, water, natural sourdough starter, mixed seeds (sunflower, pumpkin, flax), salt",
    ingredients_th: "แป้งขนมปัง, แป้งโฮลวีต, น้ำ, หัวเชื้อซาวร์โดว์ธรรมชาติ, ธัญพืชรวม (ทานตะวัน ฟักทอง แฟล็กซ์), เกลือ",
    allergens_en: "Contains gluten (wheat), seeds",
    allergens_th: "มีกลูเตน (ข้าวสาลี), ธัญพืช",
    badges_en: ["Very High Fiber", "Wholegrain"],
    badges_th: ["ไฟเบอร์สูงมาก", "โฮลเกรน"],
    nutrition: { kcal: 1500, carb: 240, protein: 48, fat: 28 }
  }
];

// === 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="https://images.unsplash.com/photo-1585478259715-876acc5be8eb?auto=format&fit=crop&w=1400&q=80"
              alt="A table of freshly baked 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">฿170</span>
            <span data-en>from · per loaf</span><span data-th>เริ่มต้น · ต่อก้อน</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">
            <div>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", fontSize: 28, marginBottom: 8, color: "var(--cocoa-3)" }}>Mini Wilder</div>
              <div className="mono">[ Portrait · Mini in kitchen ]</div>
              <div className="mono" style={{ marginTop: 6, opacity: .5 }}>4:5 · drop photo here</div>
            </div>
          </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>Seven loaves, <span className="script">baked with intention.</span></span>
            <span data-th>ขนมปังเจ็ดชนิด อบอย่างตั้งใจ</span>
          </h2>
          <p>
            <span data-en>All made to order. Smaller 550g loaves are ฿170, larger 650g loaves with add-ins are ฿230. Tap any loaf for full ingredients and nutrition.</span>
            <span data-th>ทุกก้อนทำตามออเดอร์ ก้อนเล็ก 550g ราคา 170 บาท ก้อนใหญ่ 650g ที่มีส่วนผสมพิเศษ ราคา 230 บาท กดที่ขนมปังเพื่อดูส่วนผสมและโภชนาการ</span>
          </p>
        </div>
        <div className="loaves-grid">
          {LOAVES.map((l, i) => (
            <article className="loaf" key={l.id}>
              <div className="loaf-illus"><LoafIllus seed={i} /></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">{l.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, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
          <div style={{ width: "65%" }}><LoafIllus seed={LOAVES.findIndex(x => x.id === loaf.id)} /></div>
        </div>
        <p>{lang === "en" ? loaf.desc_en : loaf.desc_th}</p>

        <h4>{lang === "en" ? "Per loaf (estimated)" : "ต่อก้อน (โดยประมาณ)"}</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>
        {n.fiber && <p style={{ fontSize: 13, color: "var(--muted)", marginTop: -8 }}>{lang === "en" ? `Fiber: ${n.fiber}` : `ไฟเบอร์: ${n.fiber}`}</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 =============================================
function Order({ lang }) {
  const [qty, setQty] = useState(() => Object.fromEntries(LOAVES.map(l => [l.id, 0])));
  const [form, setForm] = useState({ name: "", phone: "", line: "", date: "", fulfill: "pickup", address: "", notes: "" });
  const [submitted, setSubmitted] = useState(false);

  const total = useMemo(() =>
    LOAVES.reduce((s, l) => s + qty[l.id] * l.price, 0)
  , [qty]);
  const totalItems = useMemo(() => Object.values(qty).reduce((a, b) => a + b, 0), [qty]);

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

  const submit = (e) => {
    e.preventDefault();
    if (totalItems === 0) return;
    setSubmitted(true);
  };

  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: 560, 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 confirm availability and bake date within 24 hours via LINE or phone. Thank you for supporting a small kitchen."
                : "มินิจะยืนยันคิวและวันที่อบภายใน 24 ชั่วโมงทาง LINE หรือโทรศัพท์ ขอบคุณที่สนับสนุนครัวเล็กๆ"}
            </p>
            <button className="btn ghost" onClick={() => { setSubmitted(false); setQty(Object.fromEntries(LOAVES.map(l => [l.id, 0]))); setForm({ name: "", phone: "", line: "", date: "", fulfill: "pickup", address: "", notes: "" }); }}>
              {lang === "en" ? "Place another order" : "สั่งอีกครั้ง"}
            </button>
          </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} · {l.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 12px", color: "var(--cocoa-3)" }}>
              {lang === "en" ? "2. Your details" : "2. ข้อมูลของคุณ"}
            </h3>

            <div className="form-row two">
              <div>
                <label>{lang === "en" ? "Name" : "ชื่อ"}</label>
                <input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
              </div>
              <div>
                <label>{lang === "en" ? "Phone" : "เบอร์โทร"}</label>
                <input required type="tel" value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} />
              </div>
            </div>
            <div className="form-row two">
              <div>
                <label>LINE ID</label>
                <input value={form.line} onChange={e => setForm({ ...form, line: e.target.value })} placeholder={lang === "en" ? "optional" : "ไม่บังคับ"} />
              </div>
              <div>
                <label>{lang === "en" ? "Preferred date" : "วันที่ต้องการ"}</label>
                <input type="date" min={minDate} value={form.date} onChange={e => setForm({ ...form, date: e.target.value })} />
              </div>
            </div>
            <div className="form-row">
              <div>
                <label>{lang === "en" ? "Fulfillment" : "วิธีรับสินค้า"}</label>
                <select value={form.fulfill} onChange={e => setForm({ ...form, fulfill: e.target.value })}>
                  <option value="pickup">{lang === "en" ? "Pickup in Chiang Mai" : "รับที่เชียงใหม่"}</option>
                  <option value="delivery">{lang === "en" ? "Delivery (Chiang Mai area)" : "จัดส่ง (ในเขตเชียงใหม่)"}</option>
                  <option value="grab">{lang === "en" ? "Grab / Lalamove (customer arranged)" : "Grab / Lalamove (ลูกค้าจัด)"}</option>
                </select>
              </div>
            </div>
            {form.fulfill !== "pickup" && (
              <div className="form-row">
                <div>
                  <label>{lang === "en" ? "Delivery address / area" : "ที่อยู่ / พื้นที่จัดส่ง"}</label>
                  <textarea value={form.address} onChange={e => setForm({ ...form, address: e.target.value })} />
                </div>
              </div>
            )}
            <div className="form-row">
              <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>Minimum 3 days lead time. We bake 2–3 days a week depending on the order volume.</span>
                <span data-th>ต้องสั่งล่วงหน้าอย่างน้อย 3 วัน อบสัปดาห์ละ 2–3 วันตามจำนวนออเดอร์</span>
              </span>
            </div>

            <div className="total-row">
              <div>
                <div className="lbl">{lang === "en" ? "Estimated total" : "ยอดรวมโดยประมาณ"}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>
                  {totalItems} {lang === "en" ? (totalItems === 1 ? "loaf" : "loaves") : "ก้อน"}
                </div>
              </div>
              <div className="v">฿{total}</div>
            </div>
            <button type="submit" className="btn" style={{ width: "100%", justifyContent: "center", opacity: totalItems === 0 ? .5 : 1, cursor: totalItems === 0 ? "not-allowed" : "pointer" }} disabled={totalItems === 0}>
              {lang === "en" ? "Send order" : "ส่งออเดอร์"}
              <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="#" onClick={(e) => e.preventDefault()} 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>
                  @wildersourdough
                </a>
                <a href="tel:+66000000000">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                  +66 00 000 0000
                </a>
                <a href="mailto:hello@wilderfood.fit">
                  <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>
                  hello@wilderfood.fit
                </a>
              </div>
            </div>
            <div className="info-card">
              <h3>{lang === "en" ? "How it works" : "ขั้นตอน"}</h3>
              <ul>
                <li><span data-en>Place your order at least 3 days ahead</span><span data-th>สั่งล่วงหน้าอย่างน้อย 3 วัน</span></li>
                <li><span data-en>Mini confirms your bake day within 24h</span><span data-th>มินิยืนยันวันอบภายใน 24 ชม.</span></li>
                <li><span data-en>Pay on pickup — cash or PromptPay</span><span data-th>ชำระตอนรับ เงินสดหรือพร้อมเพย์</span></li>
                <li><span data-en>Collect your warm loaf in Chiang Mai</span><span data-th>รับขนมปังอุ่นๆ ที่เชียงใหม่</span></li>
              </ul>
            </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:hello@wilderfood.fit?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>— A Chiang Mai café owner (placeholder)</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="#">LINE @wildersourdough</a>
            <a href="#">Instagram @wildersourdough</a>
            <a href="mailto:hello@wilderfood.fit">hello@wilderfood.fit</a>
            <a href="#">WilderFood.Fit</a>
          </div>
        </div>
        <div className="f-bottom">
          <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 />);