// NuerCarb — landing page
const { useState, useMemo, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#1A1612","#B0322B","#D9A648","#F2EDE2"],
  "heroVariant": "bilingual",
  "showThai": true
}/*EDITMODE-END*/;

// ─── data ──────────────────────────────────────────────────────────────

const CARBS = [
  { id: 'rice',  name: 'Jasmine Rice', th: 'ข้าวหอมมะลิ', price: 0,  note: 'Absorbs sauce. Wok smoke.' },
  { id: 'fried', name: 'Fried Rice Base', th: 'ข้าวผัด',  price: 15, note: 'Beef-fat seasoned.' },
  { id: 'udon',  name: 'Udon',         th: 'อุด้ง',       price: 20, note: 'Body. Holds heat.' },
  { id: 'flat',  name: 'Flat Noodle',  th: 'เส้นใหญ่',    price: 10, note: 'Wok-charred edges.' },
  { id: 'pasta', name: 'Pasta',        th: 'พาสต้า',      price: 25, note: 'Butter & cream loves.' },
];

const PROTEINS = [
  { id: 'striploin', name: 'Striploin', th: 'เนื้อสันนอก', grade: 'AUS MB 3+', price: 120, note: 'House cut.' },
  { id: 'ribeye',    name: 'Ribeye',    th: 'เนื้อริบอาย', grade: 'AUS MB 5+', price: 180, note: 'Fat marbled.' },
  { id: 'wagyu',     name: 'Wagyu A4',  th: 'วากิว A4',    grade: 'JPN A4',    price: 320, note: 'Slow render.' },
  { id: 'minced',    name: 'Minced Beef', th: 'เนื้อสับ',  grade: 'Fresh',     price: 90,  note: 'Wok-loose.' },
  { id: 'pork',      name: 'Pork',      th: 'หมู',         grade: 'Fresh',     price: 80,  note: 'For basil burn.' },
  { id: 'shrimp',    name: 'Shrimp',    th: 'กุ้ง',         grade: 'Fresh',     price: 110, note: 'For tom yum.' },
];

const FLAVORS = [
  { id: 'basil',  name: 'Basil Burn',   th: 'กะเพรา',   color: 'oklch(0.55 0.14 145)',
    desc: 'Dry wok heat. Garlic forward. Chili underneath. The smell hits before the plate lands.',
    aroma: 'Toasted garlic', taste: 'Spicy + salty', mouthfeel: 'Oily, crisp basil', aftertaste: 'Pepper heat' },
  { id: 'tomyum', name: 'Tom Yum',      th: 'ต้มยำ',    color: 'oklch(0.68 0.18 35)',
    desc: 'Citrus heat. Kaffir lime. Chili paste. Acidic and aromatic. Works with noodle carbs best.',
    aroma: 'Kaffir lime',    taste: 'Sour + spicy', mouthfeel: 'Brothy', aftertaste: 'Herb freshness' },
  { id: 'green',  name: 'Green Curry',  th: 'แกงเขียวหวาน', color: 'oklch(0.62 0.13 155)',
    desc: 'Creamy, herbal, warm spice. The richest base in the system. Egg amplifies it.',
    aroma: 'Thai basil',     taste: 'Creamy + warm', mouthfeel: 'Velvet', aftertaste: 'Spice lingers' },
  { id: 'garlic', name: 'Garlic Pepper', th: 'พริกไทยกระเทียม', color: 'oklch(0.45 0.08 75)',
    desc: 'Clean, savory, direct. Works across all proteins. High repeat-order — the least divisive.',
    aroma: 'Black pepper',   taste: 'Savory', mouthfeel: 'Glossy', aftertaste: 'Pepper bite' },
  { id: 'beeffat', name: 'Beef Fat Rice', th: 'ข้าวมันเนื้อ', color: 'oklch(0.42 0.10 35)',
    desc: 'Smoky, fatty, umami. Not a sauce — a technique. Beef dripping absorbed directly into rice.',
    aroma: 'Wok smoke',      taste: 'Fatty + umami', mouthfeel: 'Rich', aftertaste: 'Smoky finish' },
];

const UPGRADES = [
  { id: 'none',   name: 'No upgrade',     th: 'ไม่เพิ่ม',         price: 0  },
  { id: 'crispy', name: 'Crispy Fried Egg', th: 'ไข่ดาวกรอบ',     price: 20 },
  { id: 'onsen',  name: 'Onsen Egg',      th: 'ไข่ออนเซ็น',       price: 25 },
  { id: 'omelet', name: 'Omelette Wrap',  th: 'ห่อไข่',           price: 30 },
  { id: 'extra',  name: 'Extra Protein',  th: 'เพิ่มเนื้อ',        price: 60 },
];

const SIGNATURES = [
  { id: 1, th: 'ข้าวกะเพราเนื้อ', en: 'BASIL BURN BEEF', recipe: 'Jasmine rice · Sliced striploin · Basil burn · Crispy fried egg', price: 245 },
  { id: 2, th: 'เส้นต้มยำกุ้ง',    en: 'TOM YUM NOODLE',  recipe: 'Flat noodle · Shrimp · Tom yum · Crispy garlic', price: 220 },
  { id: 3, th: 'อุด้งเนื้อพริกไทยดำ', en: 'BLACK PEPPER UDON', recipe: 'Udon · Wagyu A4 · Garlic pepper · Onsen egg', price: 420 },
  { id: 4, th: 'พาสต้าแกงเขียว', en: 'GREEN CURRY PASTA', recipe: 'Pasta · Minced beef · Green curry · Soft scramble', price: 260 },
];

const EGG_OPTIONS = [
  { name: 'Crispy Fried Egg',  th: 'ไข่ดาวกรอบ',    why: 'Caramel edge · runny centre' },
  { name: 'Omelette Wrap',     th: 'ห่อไข่',         why: 'Holds the dish · textural' },
  { name: 'Onsen Egg',         th: 'ไข่ออนเซ็น',     why: 'Slower · premium plating' },
  { name: 'Soft Scramble',     th: 'ไข่กวน',         why: 'Pasta formats only' },
];

// ─── small components ──────────────────────────────────────────────────

function BrandLockup() {
  return (
    <div className="brand-lockup">
      <span className="th">เนื้อคาร์บ</span>
      <span className="en">Nuer / Carb</span>
    </div>
  );
}

function Nav() {
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <BrandLockup />
        <nav className="nav-links">
          <a href="#build">Build</a>
          <a href="#beef">Beef</a>
          <a href="#flavor">Flavors</a>
          <a href="#signatures">Menu</a>
          <a href="#visit">Visit</a>
          <a className="nav-cta" href="#build">
            Order via LINE <span className="arr">→</span>
          </a>
        </nav>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-top">
          <div className="tag-row">
            <span className="pill"><i className="dot"></i>Now Open · Online First</span>
            <span className="badge">EST. 2026 · Bangkok</span>
          </div>
          <span className="badge">N°001 — เนื้อคาร์บ</span>
        </div>

        <h1 className="hero-thai" aria-label="Nuer Carb">
          เนื้อ<span className="stroke">คาร์บ</span>
        </h1>
        <h2 className="hero-en">
          NUER<span className="x-mark">×</span>CARB
        </h2>

        <div className="hero-tag">
          <h2>
            <em>Choose your carb,</em> choose your meat,<br/>
            and let's eat.
          </h2>
          <p>
            A modular Thai culinary system. Both halves premium by default —
            the carb carries flavor, the beef is the standard, and the customer builds it.
          </p>
        </div>

        <div className="formula-bar" role="group" aria-label="The NuerCarb formula">
          <div className="cell"><span className="k">01 / Carb</span><span className="v">คาร์บ</span></div>
          <div className="op">+</div>
          <div className="cell"><span className="k">02 / Protein</span><span className="v">เนื้อ</span></div>
          <div className="op">+</div>
          <div className="cell"><span className="k">03 / Flavor</span><span className="v">รส</span></div>
          <div className="op">+</div>
          <div className="cell"><span className="k">04 / Upgrade</span><span className="v">ไข่</span></div>
        </div>
      </div>
    </section>
  );
}

function Strip() {
  const item = (
    <>
      <span>Best + Best</span><span className="star">✦</span>
      <span className="th">ค้าบ</span><span className="star">✦</span>
      <span>Choose Your Carb</span><span className="star">✦</span>
      <span>Choose Your Meat</span><span className="star">✦</span>
      <span className="th">เนื้อคาร์บ</span><span className="star">✦</span>
      <span>And Let's Eat</span><span className="star">✦</span>
    </>
  );
  return (
    <div className="strip" aria-hidden="true">
      <div className="strip-track">
        {item}{item}{item}
      </div>
    </div>
  );
}

// ─── builder ───────────────────────────────────────────────────────────

function OptionRow({ opt, selected, onClick, showThai }) {
  return (
    <button className={"opt" + (selected ? " selected" : "")} onClick={onClick}>
      <span className="check" aria-hidden="true"></span>
      <span className="name">
        {opt.name}
        {showThai && opt.th && <small>{opt.th}{opt.note ? ' · ' + opt.note : ''}</small>}
        {(!showThai && opt.note) && <small>{opt.note}</small>}
      </span>
      <span className="price">{opt.price === 0 ? '—' : `+${opt.price}`}</span>
    </button>
  );
}

function BuilderCol({ stepNum, stepLabel, title, titleTh, options, value, onChange, showThai, foot }) {
  return (
    <div className="builder-col">
      <div className="col-head">
        <span className="step">{stepLabel}</span>
        <span className="num">{stepNum}</span>
      </div>
      <h4 className="col-title">{title}</h4>
      {showThai && <p className="col-title-th">{titleTh}</p>}
      <div className="options">
        {options.map(o => (
          <OptionRow
            key={o.id}
            opt={o}
            selected={value === o.id}
            onClick={() => onChange(o.id)}
            showThai={showThai}
          />
        ))}
      </div>
      <div className="col-foot">{foot}</div>
    </div>
  );
}

function Builder({ showThai }) {
  const [carb,    setCarb]    = useState('rice');
  const [protein, setProtein] = useState('striploin');
  const [flavor,  setFlavor]  = useState('basil');
  const [upgrade, setUpgrade] = useState('crispy');

  const carbObj    = CARBS.find(x => x.id === carb);
  const proteinObj = PROTEINS.find(x => x.id === protein);
  const flavorObj  = FLAVORS.find(x => x.id === flavor);
  const upObj      = UPGRADES.find(x => x.id === upgrade);

  const base = 140;
  const total = base + (carbObj?.price || 0) + (proteinObj?.price || 0) + (upObj?.price || 0);

  return (
    <section className="builder" id="build">
      <div className="wrap">
        <div className="builder-head">
          <h3>
            Build Your <span className="accent">Nuer</span>Carb
          </h3>
          <p className="builder-sub">
            Four steps. Both halves premium by default. The kitchen pre-preps the bases —
            the assembly is yours.
          </p>
        </div>

        <div className="builder-grid">
          <BuilderCol
            stepNum="01"
            stepLabel="Step · Carb"
            title="The Carb"
            titleTh="คาร์บ · ค้าบ"
            options={CARBS}
            value={carb} onChange={setCarb}
            showThai={showThai}
            foot="Carb carries flavor — not filler"
          />
          <BuilderCol
            stepNum="02"
            stepLabel="Step · Protein"
            title="The Beef"
            titleTh="เนื้อ"
            options={PROTEINS}
            value={protein} onChange={setProtein}
            showThai={showThai}
            foot="Freshly sliced · cut & grade shown"
          />
          <BuilderCol
            stepNum="03"
            stepLabel="Step · Flavor"
            title="The Flavor"
            titleTh="รสชาติ"
            options={FLAVORS.map(f => ({ id: f.id, name: f.name, th: f.th, price: 0, note: f.aroma }))}
            value={flavor} onChange={setFlavor}
            showThai={showThai}
            foot="Thai-rooted · recognizable in one bite"
          />
          <BuilderCol
            stepNum="04"
            stepLabel="Step · Upgrade"
            title="The Edge"
            titleTh="เพิ่มเติม"
            options={UPGRADES}
            value={upgrade} onChange={setUpgrade}
            showThai={showThai}
            foot="Egg is the visual anchor"
          />
        </div>

        <div className="builder-receipt">
          <div className="receipt-main">
            <span className="your">Your build · เมนูของคุณ</span>
            <h4 className="line">
              {proteinObj.name}<span className="sep">/</span>{flavorObj.name}<span className="sep">/</span>{carbObj.name}
            </h4>
            {showThai && <div className="th">{flavorObj.th}{proteinObj.th}{carbObj.th ? ' · ' + carbObj.th : ''}{upObj.id !== 'none' ? ' + ' + upObj.th : ''}</div>}
            {!showThai && upObj.id !== 'none' && <div className="th">+ {upObj.name}</div>}
          </div>
          <div className="receipt-side">
            <div>
              <div className="total-k">Total · รวม</div>
              <div className="total-v">฿{total}</div>
            </div>
            <button className="order-btn">
              Send to LINE <span>→</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── beef standard ─────────────────────────────────────────────────────

function BeefStandard() {
  const [cut, setCut] = useState('striploin');
  const cuts = {
    striploin: { name: 'STRIPLOIN', th: 'เนื้อสันนอก', marble: 'MB 3+', origin: 'Australia', price: '฿120', desc: 'Lean, firm bite. Our default cut. Wok-finished — never bulk-cooked.' },
    ribeye:    { name: 'RIBEYE',    th: 'เนื้อริบอาย', marble: 'MB 5+', origin: 'Australia', price: '฿180', desc: 'Fat marbled through. Works hardest in Garlic Pepper and Beef Fat Rice.' },
    wagyu:     { name: 'WAGYU A4',  th: 'วากิว A4',    marble: 'A4',    origin: 'Japan',     price: '฿320', desc: 'Slow render in the wok. Reserved for udon and rice — never tom yum.' },
  };
  const c = cuts[cut];

  return (
    <section className="beef" id="beef">
      <div className="wrap">
        <div className="beef-grid">
          <div>
            <span className="meta meta-strong" style={{color:'var(--yolk)'}}>01 · The Beef Standard</span>
            <h3>
              Beef is the<br/>
              brand <span className="red">name</span>.<br/>
              And the brand<br/>
              <span className="red">promise.</span>
            </h3>
            <p className="lede">
              <strong style={{color:'var(--cream)'}}>เนื้อ</strong> means beef. That is not incidental.
              The protein side of every dish meets a clear standard — and the customer
              sees what they're getting before it hits the wok.
            </p>

            <div className="beef-stand">
              <div className="row">
                <span className="n">01</span>
                <div className="t">Freshly sliced, not pre-cooked in bulk
                  <span>The slicer is in the line of sight. Always.</span>
                </div>
              </div>
              <div className="row">
                <span className="n">02</span>
                <div className="t">Cut selection is visible
                  <span>You see the cut, the grade, the marbling — before you order.</span>
                </div>
              </div>
              <div className="row">
                <span className="n">03</span>
                <div className="t">No weak default
                  <span>Choose pork, chicken, or shrimp — quality does not drop.</span>
                </div>
              </div>
              <div className="row">
                <span className="n">04</span>
                <div className="t">The product shows itself
                  <span>No copy needed. The slice is the proof.</span>
                </div>
              </div>
            </div>
          </div>

          <div className="cut-card">
            <span className="meta">Today on the slicer</span>
            <h4>{c.name}</h4>
            <div className="th">{c.th}</div>
            <div className="cut-tabs">
              {Object.entries(cuts).map(([k, v]) => (
                <button key={k}
                  className={"cut-tab" + (k === cut ? " active" : "")}
                  onClick={() => setCut(k)}>{v.name}</button>
              ))}
            </div>
            <div className="cut-stats">
              <div className="stat"><div className="k">Marbling</div><div className="v">{c.marble}</div></div>
              <div className="stat"><div className="k">Origin</div><div className="v">{c.origin}</div></div>
              <div className="stat"><div className="k">Per 80g</div><div className="v">{c.price}</div></div>
            </div>
            <p className="cut-desc">{c.desc}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── flavor system ─────────────────────────────────────────────────────

function FlavorSystem({ showThai }) {
  return (
    <section className="flavor" id="flavor">
      <div className="wrap">
        <div className="flavor-head">
          <h3>
            Five Flavors.<br/>
            <span className="it">รสชาติไทย</span><br/>
            Thai-rooted.
          </h3>
          <p>
            Each flavor is built across four layers — aroma, immediate taste, mouthfeel, aftertaste.
            Designed for the aftertaste first. That's what brings people back.
          </p>
        </div>
        <div className="flavor-grid">
          {FLAVORS.map((f, i) => (
            <div className="flavor-card" key={f.id}>
              <div className="swatch" style={{ background: f.color }}></div>
              {showThai && <div className="name-th">{f.th}</div>}
              <div className="name-en">{f.name}</div>
              <p className="desc">{f.desc}</p>
              <div className="layers">
                <div className="l"><span>Aroma</span><b>{f.aroma}</b></div>
                <div className="l"><span>Taste</span><b>{f.taste}</b></div>
                <div className="l"><span>Mouthfeel</span><b>{f.mouthfeel}</b></div>
                <div className="l"><span>Aftertaste</span><b>{f.aftertaste}</b></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── signatures ────────────────────────────────────────────────────────

function Signatures() {
  return (
    <section className="signatures" id="signatures">
      <div className="wrap">
        <div className="sig-head">
          <h3>The Back <span className="ru">Menu</span> — Curated.</h3>
          <p className="right">
            For when you don't want to decide. Four combinations the kitchen stands behind —
            no discount tier, no compromise. Best + Best, already built.
          </p>
        </div>
        <div className="sig-grid">
          {SIGNATURES.map(s => (
            <div className="sig-card" key={s.id}>
              <div className="sig-card-left">
                <div className="num">N° {String(s.id).padStart(2, '0')} · Signature</div>
                <h4 className="th">{s.th}</h4>
                <div className="en">{s.en}</div>
                <p className="recipe">{s.recipe}</p>
              </div>
              <div className="price-block">
                <div>
                  <div className="p">฿{s.price}</div>
                  <div className="b">incl. base</div>
                </div>
                <button className="add">Add →</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── egg philosophy ────────────────────────────────────────────────────

function EggPhilosophy({ showThai }) {
  return (
    <section className="egg">
      <div className="egg-yolk" aria-hidden="true"></div>
      <div className="wrap">
        <div className="egg-grid">
          <div>
            <span className="meta">04 · The Egg Philosophy</span>
            <h3>
              Egg is not a side.<br/>
              It is the <span className="y">visual anchor.</span>
            </h3>
            <p className="body">
              A well-executed egg increases <strong>richness</strong> without adding protein complexity.
              It softens aggressive heat without killing flavor. It adds visual contrast — yolk color,
              crispy edge — and creates emotional comfort. Egg is familiar in every Thai food context.
            </p>
            <p className="body" style={{marginTop: 12}}>
              It lifts perceived value significantly for a low cost. Which is why
              <strong> the egg goes on top.</strong> Always.
            </p>
          </div>
          <div>
            <div className="egg-list">
              {EGG_OPTIONS.map((e, i) => (
                <div className="item" key={i}>
                  <div className="nm">
                    {e.name}
                    {showThai && <small>{e.th}</small>}
                  </div>
                  <div className="why">{e.why}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── visit ─────────────────────────────────────────────────────────────

function Visit({ showThai }) {
  return (
    <section className="visit" id="visit">
      <div className="wrap">
        <div className="visit-grid">
          <div>
            <span className="meta" style={{color:'rgba(248,244,234,.85)'}}>Order · สั่ง</span>
            <h3>
              Pick up. Delivery.<br/>
              <span className="th">ค้าบ.</span>
            </h3>
            <p>
              We're online-first. Order on LINE, GrabFood, or Robinhood — same kitchen, same standard.
              Café concept coming. Quietly. When the food is ready.
            </p>
            <div className="visit-cta-row">
              <a className="vbtn" href="#">Order on LINE <span>→</span></a>
              <a className="vbtn ghost" href="#">GrabFood <span>→</span></a>
              <a className="vbtn ghost" href="#">Robinhood <span>→</span></a>
            </div>
          </div>
          <div className="visit-side">
            <span className="meta">Where to find us</span>
            <div className="row">
              <span className="k">Hours</span>
              <span className="v">11:00 — 21:30
                {showThai && <span className="alt">เปิดทุกวัน</span>}
              </span>
            </div>
            <div className="row">
              <span className="k">Kitchen</span>
              <span className="v">Ari, Bangkok
                {showThai && <span className="alt">อารีย์ · กรุงเทพ</span>}
              </span>
            </div>
            <div className="row">
              <span className="k">LINE</span>
              <span className="v">@nuercarb</span>
            </div>
            <div className="row">
              <span className="k">IG · TikTok</span>
              <span className="v">@nuercarb</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── footer ────────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="bigmark">เนื้อคาร์บ</div>
            <div className="submark">NUER × CARB</div>
            <p className="lcol">
              A modular Thai culinary system. Best + Best — the carb and the protein are both premium by default.
              Engineered comfort food.
            </p>
          </div>
          <div className="col">
            <h5>Eat</h5>
            <a href="#build">Build your bowl</a>
            <a href="#signatures">Signatures</a>
            <a href="#flavor">Flavor system</a>
            <a href="#beef">Beef cuts</a>
          </div>
          <div className="col">
            <h5>Order</h5>
            <a href="#">LINE @nuercarb</a>
            <a href="#">GrabFood</a>
            <a href="#">Robinhood</a>
            <a href="#">Catering</a>
          </div>
          <div className="col">
            <h5>Follow</h5>
            <a href="#">Instagram</a>
            <a href="#">TikTok</a>
            <a href="#">Press kit</a>
            <a href="#">Newsletter</a>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 NuerCarb · เนื้อคาร์บ Co. · Bangkok</span>
          <span>Best + Best — ค้าบ</span>
        </div>
      </div>
    </footer>
  );
}

// ─── tweaks ────────────────────────────────────────────────────────────

const PALETTES = [
  ["#1A1612","#B0322B","#D9A648","#F2EDE2"], // signature warm
  ["#0F0F0F","#E2553D","#F2C14E","#FAF6EC"], // bright fire
  ["#1C1A18","#5B8C5A","#D9A648","#EFE9DB"], // basil + yolk
  ["#171313","#7B2D26","#C49A4A","#E8DEC9"], // wagyu earthy
  ["#13110F","#1F1B17","#D9A648","#F2EDE2"], // mono + yolk
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply palette to CSS vars
  useEffect(() => {
    const [ink, beef, yolk, bg] = t.palette;
    const root = document.documentElement;
    root.style.setProperty('--ink', ink);
    root.style.setProperty('--beef', beef);
    root.style.setProperty('--yolk', yolk);
    root.style.setProperty('--bg', bg);
    root.style.setProperty('--paper', mix(bg, '#ffffff', 0.4));
    root.style.setProperty('--bg-soft', mix(bg, ink, 0.06));
    root.style.setProperty('--cream', mix(bg, '#ffffff', 0.5));
    root.style.setProperty('--ink-soft', mix(ink, bg, 0.35));
  }, [t.palette]);

  return (
    <>
      <Nav />
      <Hero />
      <Strip />
      <Builder showThai={t.showThai} />
      <BeefStandard />
      <Strip />
      <FlavorSystem showThai={t.showThai} />
      <Signatures />
      <EggPhilosophy showThai={t.showThai} />
      <Visit showThai={t.showThai} />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakColor
          label="Brand palette"
          value={t.palette}
          options={PALETTES}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label="Localization" />
        <TweakToggle
          label="Show Thai script"
          value={t.showThai}
          onChange={(v) => setTweak('showThai', v)}
        />
      </TweaksPanel>
    </>
  );
}

// helper: mix two hex colors
function mix(a, b, t) {
  const pa = hexToRgb(a), pb = hexToRgb(b);
  if (!pa || !pb) return a;
  const r = Math.round(pa.r + (pb.r - pa.r) * t);
  const g = Math.round(pa.g + (pb.g - pa.g) * t);
  const bl = Math.round(pa.b + (pb.b - pa.b) * t);
  return `rgb(${r},${g},${bl})`;
}
function hexToRgb(h) {
  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
  return m ? { r: parseInt(m[1],16), g: parseInt(m[2],16), b: parseInt(m[3],16) } : null;
}

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