/* ============================================================
   FRUTA FRESCA — Account dashboard
   ============================================================ */
function AccountScreen() {
  const { go } = useApp();
  const [tab, setTab] = useState("orders");
  const orders = [
    { id: "FF-24817", date: "28 May 2026", status: "Out for delivery", total: 1840, items: 3, track: true },
    { id: "FF-24590", date: "19 May 2026", status: "Delivered", total: 2499, items: 5, track: false },
    { id: "FF-24122", date: "06 May 2026", status: "Delivered", total: 980, items: 2, track: false },
  ];
  const tabs = [["orders", "Orders", "bag"], ["subs", "Subscriptions", "calendar"],
    ["addresses", "Addresses", "mappin"], ["rewards", "Rewards", "sparkle"]];

  return (
    <div data-screen-label="Account" className="container" style={{ paddingBlock: 28 }}>
      {/* Header */}
      <div className="row" style={{ gap: 16, marginBottom: 24 }}>
        <span style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--green)", color: "#fff",
          display: "grid", placeItems: "center", fontFamily: "var(--display)", fontSize: 24, fontWeight: 600, flex: "none" }}>A</span>
        <div>
          <h1 className="h3">Hello, Ananya</h1>
          <p className="small muted">Member since 2024 · Andheri West, Mumbai</p>
        </div>
      </div>

      {/* Stat cards */}
      <div className="acct-stats" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 12, marginBottom: 28 }}>
        {[["1,240", "Reward points", "sparkle", "var(--citrus)"], ["2", "Active subscriptions", "calendar", "var(--green)"],
          ["12", "Orders this year", "bag", "var(--leaf)"], ["Gold", "Membership tier", "award", "var(--berry)"]].map(([n, l, ic, c]) => (
          <div key={l} className="surface-card" style={{ padding: 16 }}>
            <Icon name={ic} size={20} style={{ color: c, marginBottom: 8 }} />
            <div className="serif" style={{ fontSize: 24, fontWeight: 600 }}>{n}</div>
            <div className="small muted">{l}</div>
          </div>
        ))}
      </div>

      {/* Tabs */}
      <div className="pilltabs" style={{ marginBottom: 22, overflowX: "auto", maxWidth: "100%" }}>
        {tabs.map(([v, t]) => <button key={v} className={tab === v ? "on" : ""} onClick={() => setTab(v)} style={{ whiteSpace: "nowrap" }}>{t}</button>)}
      </div>

      {tab === "orders" && (
        <div style={{ display: "grid", gap: 12 }}>
          {orders.map((o) => (
            <div key={o.id} className="surface-card" style={{ padding: 18 }}>
              <div className="between wrap" style={{ gap: 12 }}>
                <div>
                  <div className="row" style={{ gap: 10 }}>
                    <span style={{ fontWeight: 600 }}>{o.id}</span>
                    <span className={`badge ${o.status === "Delivered" ? "badge--instock" : "badge--season"}`}>{o.status}</span>
                  </div>
                  <div className="small muted" style={{ marginTop: 4 }}>{o.date} · {o.items} items · {FF.rupee(o.total)}</div>
                </div>
                <div className="row" style={{ gap: 8 }}>
                  {o.track && <button className="btn btn--ink btn--sm" onClick={() => go("tracking")}>Track order</button>}
                  <button className="btn btn--ghost btn--sm">Reorder</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === "subs" && (
        <div style={{ display: "grid", gap: 12 }}>
          {FF.subscriptions.slice(0, 2).map((s) => (
            <div key={s.id} className="surface-card" style={{ padding: 16 }}>
              <div className="row" style={{ gap: 14 }}>
                <img src={FF.img(s.img, 160)} alt="" style={{ width: 64, height: 64, borderRadius: 12, objectFit: "cover", flex: "none" }} />
                <div style={{ flex: 1 }}>
                  <div className="between"><span style={{ fontWeight: 600 }}>{s.name}</span><span className="badge badge--instock"><span className="dot"></span>Active</span></div>
                  <div className="small muted" style={{ marginTop: 4 }}>Next delivery: 02 Jun 2026 · {FF.rupee(s.price)} {s.cadence}</div>
                  <div className="row" style={{ gap: 8, marginTop: 12 }}>
                    <button className="btn btn--ghost btn--sm">Skip next</button>
                    <button className="btn btn--ghost btn--sm">Pause</button>
                    <button className="btn btn--ghost btn--sm">Edit</button>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === "addresses" && (
        <div className="acct-stats" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 12 }}>
          {[["Home", "A-1203, Oberoi Springs, Andheri West, Mumbai 400053", true],
            ["Work", "5th Floor, BKC One, Bandra Kurla Complex, Mumbai 400051", false]].map(([t, a, def]) => (
            <div key={t} className="surface-card" style={{ padding: 18 }}>
              <div className="between"><span className="row" style={{ gap: 8 }}><Icon name="mappin" size={17} style={{ color: "var(--green)" }} />
                <strong>{t}</strong>{def && <span className="badge badge--organic">Default</span>}</span>
                <button className="btn btn--ghost btn--sm">Edit</button></div>
              <p className="small muted" style={{ marginTop: 8 }}>{a}</p>
            </div>
          ))}
          <button className="btn btn--outline" style={{ justifySelf: "start" }}><Icon name="plus" size={16} /> Add address</button>
        </div>
      )}

      {tab === "rewards" && (
        <div className="surface-card" style={{ padding: 24, background: "var(--green)", color: "#fff" }}>
          <div className="between"><span className="eyebrow" style={{ color: "var(--citrus)" }}>Fresh Rewards</span><Icon name="sparkle" size={22} style={{ color: "var(--citrus)" }} /></div>
          <div className="serif" style={{ fontSize: 46, fontWeight: 600, marginTop: 8 }}>1,240 <span style={{ fontSize: 18 }}>points</span></div>
          <p style={{ color: "rgba(255,255,255,.85)", fontSize: 14.5, marginTop: 4 }}>260 points to your next ₹250 reward</p>
          <div style={{ height: 8, background: "rgba(255,255,255,.2)", borderRadius: 4, marginTop: 14, overflow: "hidden" }}>
            <div style={{ width: "82%", height: "100%", background: "var(--citrus)" }}></div></div>
          <div className="row wrap" style={{ gap: 10, marginTop: 18 }}>
            <button className="btn btn--primary btn--sm">Redeem points</button>
            <span className="row small" style={{ gap: 7, color: "rgba(255,255,255,.85)" }}>Earn 1 pt per ₹10 spent</span>
          </div>
        </div>
      )}
    </div>
  );
}

/* ============================================================
   FRUTA FRESCA — Order Tracking
   ============================================================ */
function TrackingScreen() {
  const { go } = useApp();
  const steps = [
    { k: "Confirmed", t: "Today, 9:42 AM", d: "Order FF-24817 confirmed", done: true },
    { k: "Preparing", t: "Today, 10:15 AM", d: "Hand-picking & cold-packing your fruit", done: true },
    { k: "Dispatched", t: "Today, 11:30 AM", d: "Out for delivery with Rajesh", done: true, active: true },
    { k: "Delivered", t: "Expected by 1:30 PM", d: "Andheri West, Mumbai", done: false },
  ];
  return (
    <div data-screen-label="Order tracking" className="container" style={{ paddingBlock: 28, maxWidth: 760 }}>
      <button className="row small muted" style={{ background: "none", border: "none", marginBottom: 16 }}
        onClick={() => go("account")}><Icon name="chevronL" size={16} /> Back to account</button>

      <div className="surface-card" style={{ overflow: "hidden", marginBottom: 22 }}>
        <div style={{ padding: "22px 22px 0" }}>
          <div className="between wrap" style={{ gap: 10 }}>
            <div><span className="eyebrow" style={{ margin: 0 }}>Order FF-24817</span>
              <h1 className="h2" style={{ marginTop: 6 }}>Arriving today</h1></div>
            <span className="badge badge--season" style={{ fontSize: 13, padding: "8px 14px" }}>
              <Icon name="clock" size={14} /> ETA 1:30 PM</span>
          </div>
        </div>
        {/* Map placeholder */}
        <div style={{ position: "relative", height: 180, margin: "18px 0 0", background:
          "repeating-linear-gradient(45deg, var(--surface), var(--surface) 12px, var(--green-tint) 12px, var(--green-tint) 24px)" }}>
          <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
            <span className="badge badge--origin"><Icon name="truck" size={15} style={{ color: "var(--green)" }} /> 2.3 km away · 3 stops</span>
          </div>
        </div>
      </div>

      {/* Timeline */}
      <div className="surface-card" style={{ padding: 24 }}>
        <h3 className="h3" style={{ marginBottom: 20 }}>Delivery status</h3>
        <div>
          {steps.map((s, i) => (
            <div key={s.k} className="row" style={{ gap: 16, alignItems: "flex-start" }}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", flex: "none" }}>
                <span style={{ width: 30, height: 30, borderRadius: "50%", display: "grid", placeItems: "center",
                  background: s.done ? "var(--green)" : "var(--paper)", border: `2px solid ${s.done ? "var(--green)" : "var(--border)"}`,
                  color: s.done ? "#fff" : "var(--muted)", boxShadow: s.active ? "0 0 0 5px var(--green-tint)" : "none" }}>
                  {s.done ? <Icon name="check" size={15} stroke={3} /> : <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--border)" }}></span>}
                </span>
                {i < steps.length - 1 && <span style={{ width: 2, height: 44, background: s.done ? "var(--green)" : "var(--border)" }}></span>}
              </div>
              <div style={{ paddingBottom: 18 }}>
                <div className="row" style={{ gap: 8 }}>
                  <span style={{ fontWeight: 600, fontSize: 15.5, color: s.done ? "var(--ink)" : "var(--muted)" }}>{s.k}</span>
                  {s.active && <span className="badge badge--season">In progress</span>}
                </div>
                <div className="small muted" style={{ marginTop: 2 }}>{s.t}</div>
                <div className="small" style={{ marginTop: 2 }}>{s.d}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="hr" style={{ margin: "8px 0 18px" }}></div>
        <div className="between wrap" style={{ gap: 12 }}>
          <span className="row small muted" style={{ gap: 8 }}><Icon name="shield" size={16} style={{ color: "var(--green)" }} /> Freshness guaranteed on arrival</span>
          <button className="btn btn--outline btn--sm"><Icon name="whatsapp" size={16} /> Chat with support</button>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { AccountScreen, TrackingScreen });