// Producer App — three phone shells with shared theme state + brand selection.

const BRANDS = [
  { id: "kht",  initial: "K", name: "Khao Hom Thai",   sub: "ข้าวหอมมะลิ · 0105561234567" },
  { id: "khp",  initial: "K", name: "Khao Hom Premium",sub: "ข้าวพรีเมียม · ใหม่ Q1 2026" },
  { id: "rmc",  initial: "R", name: "Riang Mai Coffee",sub: "กาแฟดอย · 3 SKU" },
];

function ProducerApp() {
  const [brand, setBrand] = React.useState(BRANDS[0]);
  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem("thaihao-producer-theme") || "light"; } catch { return "light"; }
  });
  React.useEffect(() => { try { localStorage.setItem("thaihao-producer-theme", theme); } catch {} }, [theme]);
  const toggleTheme = () => setTheme(t => t === "dark" ? "light" : "dark");

  const [tab1, setTab1] = React.useState("home");
  const [tab2, setTab2] = React.useState("money");
  const [tab3, setTab3] = React.useState("alerts");

  return (
    <div className="stage">
      <div className="kit-header">
        <h1>ThaiHao · ผู้ผลิต (Producer portal)</h1>
        <p>th-TH · mobile-first · medium density · tap the moon in any topbar to switch night mode</p>
      </div>

      <PhoneShell title="หน้าหลัก · Owner" tab={tab1} setTab={setTab1} brand={brand} setBrand={setBrand} brands={BRANDS} theme={theme} onToggleTheme={toggleTheme}>
        <HomeScreen brand={brand} />
      </PhoneShell>

      <PhoneShell title="การชำระเงิน · Settlement" tab={tab2} setTab={setTab2} brand={brand} setBrand={setBrand} brands={BRANDS} theme={theme} onToggleTheme={toggleTheme}>
        <SettlementScreen />
      </PhoneShell>

      <PhoneShell title="สถานะการเปิดบัญชี" tab={tab3} setTab={setTab3} brand={brand} setBrand={setBrand} brands={BRANDS} theme={theme} onToggleTheme={toggleTheme}>
        <OnboardingScreen />
      </PhoneShell>
    </div>
  );
}

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