// Confinement Flow — Main landing page app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "warmth": "cream",
  "heroVariant": "split",
  "showFloatingCards": true
} /*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [billing, setBilling] = React.useState("monthly");
  const [scrolled, setScrolled] = React.useState(false);
  const [openFaq, setOpenFaq] = React.useState(0);
  const [loginOpen, setLoginOpen] = React.useState(false);
  const [demoOpen, setDemoOpen] = React.useState(false);
  const [subOpen, setSubOpen] = React.useState(false);
  const [subPlan, setSubPlan] = React.useState(null);
  const [paymentResult, setPaymentResult] = React.useState(null); // null | "success" | "failure"
  const [showAbandonedBanner, setShowAbandonedBanner] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Detect return from Billplz payment page, or an abandoned mid-payment session
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const paid = params.get("billplz[paid]");
    if (paid) {
      window.history.replaceState({}, "", window.location.pathname);
      if (paid === "true") {
        setPaymentResult("success");
        try { localStorage.removeItem("cf_pending_plan"); } catch (_) {}
      } else {
        setPaymentResult("failure");
        // Restore the pending plan so Try Again re-opens the correct plan
        try {
          const pending = JSON.parse(localStorage.getItem("cf_pending_plan") || "null");
          if (pending) {
            const match = plans.find((p) => p.id === pending.planId);
            if (match) { setSubPlan(match); setBilling(pending.billing); }
          }
        } catch (_) {}
      }
    } else {
      // No Billplz callback — check if user navigated away mid-payment (e.g. browser back)
      try {
        const pending = JSON.parse(localStorage.getItem("cf_pending_plan") || "null");
        if (pending) {
          const match = plans.find((p) => p.id === pending.planId);
          if (match) {
            setSubPlan(match);
            setBilling(pending.billing);
            setShowAbandonedBanner(true);
          }
        }
      } catch (_) {}
    }
  }, []);

  // Apply warmth tweak
  React.useEffect(() => {
    const root = document.documentElement;
    if (tweaks.warmth === "warm") {
      root.style.setProperty("--paper", "#fff5ec");
      root.style.setProperty("--cream", "#fde7da");
    } else if (tweaks.warmth === "cool") {
      root.style.setProperty("--paper", "#fbfaf7");
      root.style.setProperty("--cream", "#f3eee7");
    } else {
      root.style.removeProperty("--paper");
      root.style.removeProperty("--cream");
    }
  }, [tweaks.warmth]);

  const plans = [
  {
    id: "starter",
    name: "Starter",
    desc: "For boutique centres.",
    monthly: 149,
    yearly: 1490,
    yearlyMonthly: 124,
    limits: [
    { label: "Active mothers", value: "Up to 8" },
    { label: "Branch users", value: "Up to 8" }],

    features: [
    { text: "All core operations", on: true },
    { text: "12 alert presets", on: true },
    { text: "Dashboard charts", on: true },
    { text: "All reports + PDF + WhatsApp", on: true },
    { text: "Internal reports", on: false },
    { text: "Staff workload chart", on: false }]

  },
  {
    id: "growth",
    name: "Growth",
    desc: "For growing centres ready to scale.",
    monthly: 349,
    yearly: 3490,
    yearlyMonthly: 291,
    featured: true,
    limits: [
    { label: "Active mothers", value: "Up to 18" },
    { label: "Branch users", value: "Up to 18" }],

    features: [
    { text: "Everything in Starter", on: true },
    { text: "Internal reports", on: true },
    { text: "Staff workload chart", on: true },
    { text: "Dashboard data export", on: true },
    { text: "Cross-branch analytics", on: false },
    { text: "Custom PDF branding", on: false }]

  },
  {
    id: "enterprise",
    name: "Enterprise",
    desc: "For multi-branch groups and franchises with custom needs.",
    monthly: "Custom",
    yearly: "Custom",
    limits: [
    { label: "Active mothers", value: "Unlimited" },
    { label: "Branch users", value: "Unlimited" }],

    features: [
    { text: "Everything in Growth", on: true },
    { text: "Cross-branch analytics", on: true },
    { text: "Report builder + saved filters", on: true },
    { text: "AI report summary", on: true },
    { text: "Custom PDF branding", on: true }]

  }];


  const openSubscribe = (plan) => {
    if (plan.id === "enterprise") {
      setDemoOpen(true);
      return;
    }
    setSubPlan(plan);
    setSubOpen(true);
  };

  return (
    <>
      {/* PAYMENT RESULT BANNERS */}
      {paymentResult === "success" && (
        <div className="payment-banner payment-banner-success">
          <Icon.Check size={15} />
          <span>You're subscribed! Check your inbox for your receipt and onboarding guide.</span>
          <button className="payment-banner-dismiss" onClick={() => setPaymentResult(null)} aria-label="Dismiss">
            <Icon.X size={14} />
          </button>
        </div>
      )}
      {paymentResult === "failure" && (
        <div className="payment-banner payment-banner-failure">
          <Icon.X size={15} />
          <span>Payment was not completed.</span>
          <button
            className="payment-banner-retry"
            onClick={() => { setPaymentResult(null); setSubOpen(true); }}
          >
            Try again
          </button>
          <button className="payment-banner-dismiss" onClick={() => setPaymentResult(null)} aria-label="Dismiss">
            <Icon.X size={14} />
          </button>
        </div>
      )}
      {showAbandonedBanner && (
        <div className="payment-banner payment-banner-info">
          <Icon.Bell size={15} />
          <span>You left before completing payment for <strong>{subPlan?.name}</strong>.</span>
          <button
            className="payment-banner-retry"
            onClick={() => { setShowAbandonedBanner(false); setSubOpen(true); }}
          >
            Resume payment
          </button>
          <button
            className="payment-banner-dismiss"
            onClick={() => {
              setShowAbandonedBanner(false);
              try { localStorage.removeItem("cf_pending_plan"); } catch (_) {}
            }}
            aria-label="Dismiss"
          >
            <Icon.X size={14} />
          </button>
        </div>
      )}

      {/* NAV */}
      <nav className={"nav" + (scrolled ? " scrolled" : "")}>
        <div className="container nav-inner">
          <a href="#top" style={{ display: "flex", alignItems: "center" }}>
            <img src="assets/lockup-horizontal-primary.svg" alt="ConfinementFlow" style={{ height: 36 }} />
          </a>
          <div className="nav-links">
            <a className="nav-link" href="#features">Features</a>
            <a className="nav-link" href="#how">How it works</a>
            <a className="nav-link" href="#preview">Dashboard preview</a>
            <a className="nav-link" href="#pricing">Pricing</a>
            <a className="nav-link" href="#faq">FAQ</a>
          </div>
          <div className="nav-cta">
            <a className="btn btn-ghost" href="https://app-dev.confinementflow.com/login">Sign in</a>
            <button className="btn btn-primary" onClick={() => setDemoOpen(true)}>
              Request demo <Icon.Arrow />
            </button>
          </div>
        </div>
      </nav>

      {/* HERO */}
      <section id="top" className="hero">
        <div className="orb orb-1"></div>
        <div className="orb orb-2"></div>
        <div className="container">
          <div className="hero-grid">
            <div className="hero-copy">
              <span className="eyebrow">For confinement centres in Malaysia</span>
              <h1 className="display">
                <span style={{ display: "block" }}>One system</span>
                <span style={{ display: "block" }}>Every care detail</span>
                <span style={{ display: "block" }}><em>Zero paperwork</em></span>
              </h1>
              <p className="lede">ConfinementFlow gives centre owners, nurses, and parents one connected system — so nothing is missed, nothing is lost, and every care decision is backed by real data.

              </p>
              <div className="hero-cta">
                <button className="btn btn-primary btn-lg" onClick={() => setDemoOpen(true)}>
                  Request a demo <Icon.Arrow />
                </button>
                <a href="#pricing" className="btn btn-outline btn-lg">See pricing</a>
              </div>
            </div>

            <div className="preview-stack">
              {tweaks.showFloatingCards &&
              <>
                  <div className="float-card float-1">
                    <div className="icon-sq"><Icon.Heart size={16} /></div>
                    <div>
                      <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>Baby Aiman</div>
                      <div style={{ fontWeight: 500 }}>Fed at 09:42 — 60ml</div>
                    </div>
                  </div>
                  <div className="float-card float-2">
                    <div className="icon-sq"><Icon.Bell size={16} /></div>
                    <div>
                      <div style={{ fontSize: 12, opacity: 0.7 }}>Reminder</div>
                      <div style={{ fontWeight: 500 }}>Suite 07 feed in 8 min</div>
                    </div>
                  </div>
                </>
              }
              <div className="preview-card">
                <div className="preview-card-head">
                  <div className="dots"><span></span><span></span><span></span></div>
                  <div className="crumb">today · Selangor branch</div>
                  <div style={{ width: 36 }}></div>
                </div>
                <div className="preview-card-body">
                  <HeroMiniDash />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WHO IT'S FOR */}
      <section className="who-section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow no-rule">Who it's for</span>
            <h2 className="h2" style={{ marginTop: 14 }}>
              One system,<br />
              <span style={{ fontStyle: "italic", fontWeight: 400 }}>three perspectives.</span>
            </h2>
          </div>
          <div className="who-grid">
            <div className="who-card">
              <div className="who-icon"><Icon.Chart size={22} /></div>
              <div className="who-label">Centre owners &amp; admins</div>
              <div className="who-quote">"Full visibility, zero guesswork."</div>
              <ul className="who-list">
                <li>Live dashboard showing every room, resident, and alert</li>
                <li>Reports generated automatically — no manual compiling</li>
                <li>Staff activity and care quality tracked in one place</li>
                <li>Multi-branch overview if you run more than one centre</li>
              </ul>
            </div>
            <div className="who-card">
              <div className="who-icon"><Icon.Heart size={22} /></div>
              <div className="who-label">Nursing staff</div>
              <div className="who-quote">"Less admin. More care."</div>
              <ul className="who-list">
                <li>Log baby and mother observations in seconds</li>
                <li>Instant alerts when health readings need attention</li>
                <li>Pick up exactly where the last shift left off</li>
                <li>See exactly what needs attention when you clock in</li>
              </ul>
            </div>
            <div className="who-card">
              <div className="who-icon"><Icon.Mail size={22} /></div>
              <div className="who-label">Parents</div>
              <div className="who-quote">"Every detail. Every day."</div>
              <ul className="who-list">
                <li>Receive daily care reports on your baby via WhatsApp</li>
                <li>Know feeding times, diaper counts, and vitals without calling</li>
                <li>Weekly and full stay reports at discharge</li>
                <li>Peace of mind backed by data, not just reassurance</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* PROBLEMS */}
      <section className="section problems-section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow no-rule">The problem</span>
            <h2 className="h2">Most centres still run on <em>paper</em></h2>
            <p className="lede">Here's what costs you every day — and how ConfinementFlow fixes it.</p>
          </div>

          <div className="problems-list">
            {[
            {
              q: "Baby and mother health records written on paper — no visibility for management, and no proper summary to share with parents when they ask for updates.",
              a: "Every feeding, vital, and recovery observation logged digitally in real time. Parents receive daily and weekly reports."
            },
            {
              q: "Room availability, pre-bookings, check-ins, and check-outs tracked manually — easy to double-book or lose track of who's where.",
              a: "Live room status, pre-booking reservations, and occupancy managed from one calendar view. Always accurate."
            },
            {
              q: "Critical health flags — an overdue feeding, a high jaundice reading, an upcoming discharge — easy to miss with no alert system in place.",
              a: "12 configurable alert rules fire automatically. The right staff notified instantly, every alert logged with who acknowledged it and when."
            }].
            map((p, i) =>
            <div className="problem-card" key={i}>
                <div className="problem-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="problem-body">
                  <div className="problem-q">{p.q}</div>
                  <div className="problem-a">
                    <span className="check-pill"><Icon.Check size={12} /></span>
                    <span>{p.a}</span>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section id="features" className="section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow no-rule">Everything in one place</span>
            <h2 className="h2" style={{ width: "720px" }}>Built for the rhythm of <em>confinement care</em></h2>
            <p className="lede">From the first booking to the final report — every detail your nurses, mothers and admins need, woven into one quiet workflow.</p>
          </div>
          <div className="features-grid">
            <div className="feature">
              <div className="feature-icon"><Icon.Heart /></div>
              <h3>Mother & Baby Care Logs</h3>
              <p>Feeding, diapers, sleep, weight, temperature, and jaundice for baby. Vitals, pain levels, and lactation progress for mother. Every entry timestamped, attributed to the nurse who recorded it.</p>
            </div>
            <div className="feature">
              <div className="feature-icon"><Icon.Bed /></div>
              <h3>Rooms, bookings &amp; calendar</h3>
              <p>Room types, real-time room status, pre-bookings, mid-stay transfers, live occupancy calendar, smooth check-in and check-out — without spreadsheets or sticky notes.</p>
            </div>
            <div className="feature">
              <div className="feature-icon"><Icon.Mail /></div>
              <h3>Mother & Baby Reports</h3>
              <p>Daily, weekly, and full stay care reports for babies and mothers — sent directly to parents via WhatsApp. PDF export included. Custom branding available.</p>
            </div>
            <div className="feature">
              <div className="feature-icon"><Icon.Bell /></div>
              <h3>Alerts, Reminders & Notes</h3>
              <p>12 configurable alert rules — overdue feedings, high jaundice, abnormal vitals, and more. Fires instantly via push notification. Notes and reminders tied to every mother and baby record.</p>
            </div>
            <div className="feature">
              <div className="feature-icon"><Icon.Chart /></div>
              <h3>Analytics & Reports</h3>
              <p>Occupancy trends, average stay length, care quality metrics, staff workload summaries, and more — all in one view. Cross-branch analytics available.</p>
            </div>
            <div className="feature">
              <div className="feature-icon"><Icon.Lock size={22} /></div>
              <h3>Audit Trail & Data Security</h3>
              <p>Every action logged — who recorded it, who edited it, and when. Staff access revoked instantly on deactivation. All data encrypted and PDPA-compliant. Your centre fully protected and accountable.</p>
            </div>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section id="how" className="section steps-section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow no-rule">How it works</span>
            <h2 className="h2">Set up in a morning. <em>Calm</em> by sundown.</h2>
            <p className="lede">No IT team or heavy setup required. Most centres are fully onboarded in under a week.</p>
          </div>
          <div className="steps steps-3">
            <div className="step">
              <div className="step-num">01</div>
              <h3>Book a demo</h3>
              <p>A 30-minute walkthrough of ConfinementFlow. See every feature before you commit — no preparation needed.</p>
            </div>
            <div className="step">
              <div className="step-num">02</div>
              <h3>We set you up together</h3>
              <p>We help configure your staff, rooms, packages, alerts, and reports. No clean data needed — we work with what you have.</p>
            </div>
            <div className="step">
              <div className="step-num">03</div>
              <h3>Go live with confidence</h3>
              <p>Admit your first resident, start logging, and let the system handle the rest. Alerts fire. Reports go out. Your centre runs on a system, not on paper.</p>
            </div>
          </div>

          <ul className="included-row">
            <li><span className="sparkle">✦</span> Free onboarding included on every plan</li>
            <li><span className="sparkle">✦</span> Live training included with yearly subscription</li>
            <li><span className="sparkle">✦</span> WhatsApp support Mon–Fri 9am–6pm</li>
          </ul>
        </div>
      </section>

      {/* LIVE PREVIEW */}
      <section id="preview" className="section preview-section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow no-rule">Live preview</span>
            <h2 className="h2">A dashboard that feels like a <em>quiet room</em></h2>
            <p className="lede">Click around — every tab is real. This is exactly what your team will see each morning.</p>
          </div>
          <DashboardPreview />
        </div>
      </section>

      {/* PRICING */}
      <section id="pricing" className="pricing-section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow no-rule">Pricing</span>
            <h2 className="h2">Simple, <em>honest</em> pricing.</h2>
            <p className="lede">No hidden fees. No per-user charges. Scales with your centre.</p>
            <div className="toggle-wrap">
              <button className={"toggle-opt" + (billing === "monthly" ? " active" : "")} onClick={() => setBilling("monthly")}>Monthly</button>
              <button className={"toggle-opt" + (billing === "yearly" ? " active" : "")} onClick={() => setBilling("yearly")}>
                Yearly <span className="save-pill">2 months free</span>
              </button>
            </div>
          </div>
          <div className="plans">
            {plans.map((p) => <div key={p.id} className={"plan" + (p.featured ? " plan-featured" : "")}>
                {p.featured && <div className="plan-tag">Most popular</div>}
                <div>
                  <div className="plan-name">{p.name}</div>
                  <div className="plan-desc">{p.desc}</div>
                </div>
                <div className="plan-price">
                  {typeof p.monthly === "number" ? <>
                      <span className="plan-price-amt">RM{billing === "yearly" ? p.yearlyMonthly : p.monthly}</span>
                      <span className="plan-price-suf">/ branch / month</span>
                    </> :
                <span className="plan-price-amt" style={{ fontSize: 40 }}>Custom</span>
                }
                </div>
                {typeof p.monthly === "number" && billing === "yearly" &&
              <div className="plan-price-note">
                    Billed RM{p.yearly} yearly
                  </div>
              }
                <div className="plan-limits">
                  <div className="plan-limits-label">Limits</div>
                  {p.limits.map((l) =>
                <div key={l.label} className="plan-limit-row">
                      <span>{l.label}</span>
                      <span className={"plan-limit-val" + (l.value === "Unlimited" ? " plan-limit-unl" : "")}>{l.value}</span>
                    </div>
                )}
                </div>
                <ul className="plan-features">
                  {p.features.map((f) =>
                <li key={f.text} className={f.on ? "" : "off"}>
                      {f.on ?
                  <Icon.Check size={14} /> :
                  <span className="x-mark"><Icon.X size={12} /></span>
                  }
                      <span>{f.text}</span>
                    </li>
                )}
                </ul>
                <button
                className={"btn " + (p.featured ? "btn-primary" : p.id === "enterprise" ? "btn-outline" : "btn-primary")}
                onClick={() => openSubscribe(p)}>
                  {p.id === "enterprise" ? "Contact sales" : "Subscribe to " + p.name} <Icon.Arrow />
                </button>
              </div>
            )}
          </div>
          <div className="annual-policy">
            <div className="annual-policy-head">Annual plan policy</div>
            <div className="annual-policy-row">
              <span className="ap-icon ok"><Icon.Check size={12} /></span>
              <div><strong>Upgrades anytime</strong> — prorated difference charged immediately.</div>
            </div>
            <div className="annual-policy-row">
              <span className="ap-icon no"><Icon.X size={12} /></span>
              <div><strong>No mid-year downgrades</strong> — takes effect at next renewal.</div>
            </div>
            <div className="annual-policy-row">
              <span className="ap-icon info">i</span>
              <div><strong>Manual renewal</strong> — reminder email sent 7 days before expiry. 14-day grace period after expiry before branch becomes read-only.</div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow no-rule">Frequently asked</span>
            <h2 className="h2">Questions, <em>answered gently</em></h2>
          </div>
          <div className="faq-list">
            {[
            { q: "How long does it take to get started?", a: "Most centres are fully onboarded in 5–7 days. We import your rooms, staff and existing bookings, then run a live training session with your nurses in BM, English or 中文." },
            { q: "Can mothers see their baby's logs?", a: "Yes. Each evening, ConfinementFlow sends a beautifully designed daily summary — feedings, sleep, poo, photos and notes — to the mother via WhatsApp or email. You can preview every report before it goes out." },
            { q: "Is it suitable for centres with multiple branches?", a: "The Pro plan supports up to 20 rooms in one branch. Our Enterprise plan adds a group dashboard, single sign-on and consolidated reporting across unlimited branches." },
            { q: "Does it work on tablets and phones?", a: "Yes. ConfinementFlow is designed mobile-first so nurses can log feeds and notes at the bedside, and admins can manage rooms and bookings on the go. Any modern browser works." },
            { q: "How is patient data kept safe?", a: "All data is encrypted in transit and at rest, hosted on Malaysia-based servers, and access is role-based. We follow PDPA guidelines and provide a data processing agreement on request." },
            { q: "Can I cancel anytime?", a: "Yes. Monthly plans cancel at the end of the cycle. Yearly plans get a prorated refund within the first 30 days. No long lock-ins, ever." }].
            map((item, i) =>
            <div key={i} className={"faq-item" + (openFaq === i ? " open" : "")}>
                <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                  <span>{item.q}</span>
                  <span className="faq-toggle"><Icon.Plus /></span>
                </button>
                <div className="faq-a">{item.a}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="cta-section">
        <div className="container">
          <div className="cta-card">
            <span className="eyebrow no-rule" style={{ color: "rgba(254,242,236,0.7)" }}>Ready when you are</span>
            <h2 className="h2" style={{ marginTop: 14 }}>Your centre deserves better than <em>spreadsheets.</em></h2>
            <p className="lede" style={{ marginTop: 16 }}>Book a free demo and see ConfinementFlow in action.</p>
            <div className="hero-cta" style={{ marginTop: 32 }}>
              <button className="btn btn-pink btn-lg" onClick={() => setDemoOpen(true)}>
                Request a demo <Icon.Arrow />
              </button>
              <a className="btn btn-outline btn-lg" href="https://app-dev.confinementflow.com/login" style={{ borderColor: "rgba(254,242,236,0.3)", color: "var(--paper)" }}>
                Sign in
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="footer">
        <div className="container">
          <div className="footer-grid">
            <div className="footer-brand">
              <img src="assets/lockup-horizontal-dark.svg" alt="ConfinementFlow" style={{ height: 30, alignSelf: "flex-start" }} />
              <p className="footer-tagline">Built for Malaysian confinement centres.</p>
            </div>
            <div className="footer-col">
              <h5>Product</h5>
              <ul>
                <li><a href="#features">Features</a></li>
                <li><a href="#how">How it works</a></li>
                <li><a href="#preview">Dashboard preview</a></li>
                <li><a href="#pricing">Pricing</a></li>
                <li><a href="#faq">FAQ</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h5>Contact</h5>
              <ul>
                <li><a href="mailto:hello@confinementflow.my">hello@confinementflow.my</a></li>
                <li><a href="tel:+60327871234">+60 3 2787 1234</a></li>
              </ul>
            </div>
          </div>
          <div className="footer-bottom">
            <div>© 2026 ConfinementFlow. All rights reserved.</div>
            <div className="footer-legal">
              <a href="#">Privacy</a>
              <a href="#">Terms</a>
              <a href="#">Cookies</a>
            </div>
          </div>
        </div>
      </footer>

      {/* MODALS */}
      <LoginModal
        open={loginOpen}
        onClose={() => setLoginOpen(false)}
        onSwitchToDemo={() => setDemoOpen(true)} />
      
      <DemoModal open={demoOpen} onClose={() => setDemoOpen(false)} />
      <SubscribeModal open={subOpen} onClose={() => setSubOpen(false)} plan={subPlan} billing={billing} />

      {/* TWEAKS */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Atmosphere">
          <TweakRadio
            label="Background warmth"
            value={tweaks.warmth}
            options={[
            { value: "cool", label: "Cool" },
            { value: "cream", label: "Cream" },
            { value: "warm", label: "Warm" }]
            }
            onChange={(v) => setTweak("warmth", v)} />
          
          <TweakToggle
            label="Floating preview cards"
            value={tweaks.showFloatingCards}
            onChange={(v) => setTweak("showFloatingCards", v)} />
          
        </TweakSection>
      </TweaksPanel>
    </>);

}

function HeroMiniDash() {
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
        <div>
          <div className="eyebrow no-rule" style={{ marginBottom: 4 }}>Tuesday morning</div>
          <div className="serif" style={{ fontSize: 20, letterSpacing: "-0.02em" }}>14 mothers · 15 babies</div>
        </div>
        <span className="todo-tag">Live</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 14 }}>
        <div className="mini-stat" style={{ padding: "10px 12px" }}>
          <div className="lbl" style={{ fontSize: 10 }}>Occupancy</div>
          <div className="num" style={{ fontSize: 22 }}>87%<span className="delta" style={{ fontSize: 11 }}>+4</span></div>
        </div>
        <div className="mini-stat" style={{ padding: "10px 12px" }}>
          <div className="lbl" style={{ fontSize: 10 }}>Feeds today</div>
          <div className="num" style={{ fontSize: 22 }}>108<span className="delta" style={{ fontSize: 11 }}>on track</span></div>
        </div>
      </div>
      <div style={{ border: "1px solid var(--line-soft)", borderRadius: 10, padding: "10px 14px", background: "var(--paper)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
          <div style={{ fontSize: 12, fontWeight: 500 }}>Next reminders</div>
          <div style={{ fontSize: 11, color: "var(--ink-mute)", fontFamily: "var(--mono)" }}>3 due</div>
        </div>
        <div className="todo-row" style={{ padding: "6px 0", fontSize: 12 }}>
          <div className="todo-check"></div>
          <span>Baby Aiman — feed</span>
          <span className="todo-time">10:30</span>
        </div>
        <div className="todo-row done" style={{ padding: "6px 0", fontSize: 12 }}>
          <div className="todo-check"></div>
          <span className="todo-text">Mei Lin — herbal bath</span>
          <span className="todo-time">09:00</span>
        </div>
        <div className="todo-row" style={{ padding: "6px 0", fontSize: 12, borderBottom: "none" }}>
          <div className="todo-check"></div>
          <span>Baby Sofea — jaundice check</span>
          <span className="todo-time">11:00</span>
        </div>
      </div>
    </div>);

}

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