/* G8well iOS app, UI kit screens. Composes design-system primitives from the
   bundle (window.G8wellDesignSystem_2a45c3) and adds app-specific views.
   Exported to window for the inline mount in index.html. */
const { useState } = React;
const DS = window.G8wellDesignSystem_2a45c3;
const { Button, IconButton, Badge, Card, Icon, Input } = DS;

/* ---------- shared bits ---------- */
function StatusBar({ dark }) {
  const c = dark ? "var(--ivory-100)" : "var(--carbon-900)";
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 26px 6px", color: c, fontWeight: 600, fontSize: 15 }}>
      <span>9:41</span>
      <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
        <Icon name="waves" size={16} /><Icon name="activity" size={16} />
        <span style={{ width: 24, height: 12, border: `1.5px solid ${c}`, borderRadius: 3, display: "inline-block", position: "relative" }}>
          <span style={{ position: "absolute", inset: 1.5, right: 5, background: c, borderRadius: 1 }}></span>
        </span>
      </div>
    </div>
  );
}

const SERVICES = [
  { key: "movement", name: "Movement", icon: "activity", desc: "Stretch & mobility studio", dur: "25 min" },
  { key: "recovery", name: "Recovery", icon: "waves", desc: "Massage · compression · sauna", dur: "40 min" },
  { key: "sleep", name: "Sleep", icon: "moon", desc: "Private nap pod", dur: "60 min" },
  { key: "cold", name: "Cold", icon: "snowflake", desc: "Cold plunge & contrast", dur: "20 min" },
  { key: "hydrate", name: "Hydrate", icon: "droplet", desc: "Functional nutrition bar", dur: "15 min" },
  { key: "refresh", name: "Refresh", icon: "bath", desc: "Showers & change rooms", dur: "20 min" },
];

function Eyebrow({ children, style }) {
  return <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-subtle)", fontWeight: 600, ...style }}>{children}</div>;
}

/* ---------- Home ---------- */
function Home({ go }) {
  return (
    <div style={{ padding: "4px 20px 110px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginTop: 8 }}>
        <div>
          <Eyebrow>DXB · Terminal 3 · airside</Eyebrow>
          <h1 style={{ margin: "6px 0 0", fontSize: 30, fontWeight: 600, letterSpacing: "-0.02em", lineHeight: 1.05 }}>Good evening,<br />Amara</h1>
        </div>
        <IconButton name="bell" variant="outline" label="Notifications" />
      </div>

      <Card tone="dark" radius="xl" padding="lg" style={{ marginTop: 20 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon name="plane" size={18} /><span style={{ fontWeight: 600 }}>EK 231</span><span style={{ opacity: 0.6 }}>DXB → SIN</span></div>
          <Badge tone="accent">Boarding 21:40</Badge>
        </div>
        <div style={{ display: "flex", gap: 26, marginTop: 18 }}>
          <div><div style={{ fontSize: 12, opacity: 0.6 }}>Until boarding</div><div style={{ fontSize: 22, fontWeight: 600 }}>3h 20m</div></div>
          <div><div style={{ fontSize: 12, opacity: 0.6 }}>Gate</div><div style={{ fontSize: 22, fontWeight: 600 }}>A12</div></div>
          <div><div style={{ fontSize: 12, opacity: 0.6 }}>Terminal walk</div><div style={{ fontSize: 22, fontWeight: 600 }}>6 min</div></div>
        </div>
      </Card>

      <Card tone="accent" radius="xl" padding="lg" interactive onClick={() => go("coach")} style={{ marginTop: 14 }}>
        <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
          <Icon name="sparkles" size={22} />
          <div>
            <div style={{ fontWeight: 600, fontSize: 17 }}>You've got 3 hours before boarding.</div>
            <div style={{ fontSize: 14, marginTop: 2, opacity: 0.75 }}>Your AI trainer planned a 75-minute reset. Tap to review.</div>
          </div>
        </div>
      </Card>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", margin: "26px 0 12px" }}>
        <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>Book a session</h2>
        <span style={{ fontSize: 14, color: "var(--text-muted)" }}>All airside</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        {SERVICES.map((s) => (
          <Card key={s.key} radius="lg" padding="md" interactive onClick={() => go("book", s)}>
            <div style={{ width: 42, height: 42, borderRadius: "var(--radius-md)", background: "var(--surface-sunken)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-olive)" }}><Icon name={s.icon} size={22} /></div>
            <div style={{ fontWeight: 600, marginTop: 12 }}>{s.name}</div>
            <div style={{ fontSize: 12.5, color: "var(--text-muted)", marginTop: 2, lineHeight: 1.4 }}>{s.desc}</div>
            <div style={{ fontSize: 12, color: "var(--text-subtle)", marginTop: 8 }}>{s.dur}</div>
          </Card>
        ))}
      </div>
    </div>
  );
}

/* ---------- Booking ---------- */
function Book({ service, go }) {
  const s = service || SERVICES[3];
  const [dur, setDur] = useState(1);
  const [slot, setSlot] = useState(null);
  const [done, setDone] = useState(false);
  const durs = ["15 min", "20 min", "30 min"];
  const slots = ["19:00", "19:20", "19:40", "20:00", "20:20", "20:40"];
  return (
    <div style={{ padding: "4px 20px 120px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 8 }}>
        <IconButton name="chevron-right" variant="ghost" label="Back" style={{ transform: "rotate(180deg)" }} onClick={() => go("home")} />
        <h1 style={{ margin: 0, fontSize: 24, fontWeight: 600 }}>{s.name}</h1>
      </div>
      <Card tone="sage" radius="xl" padding="lg" elevation="none" style={{ marginTop: 16 }}>
        <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
          <div style={{ width: 52, height: 52, borderRadius: "var(--radius-md)", background: "var(--ivory-50)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-olive)" }}><Icon name={s.icon} size={26} /></div>
          <div><div style={{ fontWeight: 600, fontSize: 17 }}>{s.desc}</div><div style={{ fontSize: 13, color: "var(--text-muted)", marginTop: 2 }}>Zone B · 40m from your gate</div></div>
        </div>
      </Card>

      <Eyebrow style={{ marginTop: 24 }}>Duration</Eyebrow>
      <div style={{ display: "flex", gap: 10, marginTop: 10 }}>
        {durs.map((d, i) => (
          <button key={d} onClick={() => setDur(i)} style={{ flex: 1, padding: "12px 0", borderRadius: "var(--radius-pill)", border: `1px solid ${dur === i ? "var(--carbon-800)" : "var(--border-default)"}`, background: dur === i ? "var(--carbon-800)" : "transparent", color: dur === i ? "var(--ivory-100)" : "var(--text-body)", fontWeight: 600, fontFamily: "var(--font-sans)", cursor: "pointer" }}>{d}</button>
        ))}
      </div>

      <Eyebrow style={{ marginTop: 24 }}>Available times</Eyebrow>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginTop: 10 }}>
        {slots.map((t) => (
          <button key={t} onClick={() => setSlot(t)} style={{ padding: "14px 0", borderRadius: "var(--radius-md)", border: `1px solid ${slot === t ? "var(--accent-muted)" : "var(--border-subtle)"}`, background: slot === t ? "var(--surface-accent-soft)" : "var(--surface-card)", color: "var(--text-strong)", fontWeight: 600, fontFamily: "var(--font-sans)", cursor: "pointer", boxShadow: slot === t ? "0 0 0 3px var(--focus-ring)" : "none" }}>{t}</button>
        ))}
      </div>

      <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "16px 20px 30px", background: "linear-gradient(to top, var(--surface-page) 70%, transparent)" }}>
        <Button fullWidth size="lg" variant="primary" glow disabled={!slot} iconRight="check" onClick={() => setDone(true)}>{slot ? `Book ${s.name} · ${slot}` : "Choose a time"}</Button>
      </div>

      {done ? (
        <div style={{ position: "absolute", inset: 0, background: "rgba(23,23,23,0.55)", backdropFilter: "blur(6px)", display: "flex", alignItems: "flex-end" }} onClick={() => { setDone(false); go("home"); }}>
          <div style={{ background: "var(--surface-page)", borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: "30px 24px 34px", width: "100%", textAlign: "center" }}>
            <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px", color: "var(--carbon-900)" }}><Icon name="check" size={34} stroke={2.2} /></div>
            <h2 style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>You're booked</h2>
            <p style={{ color: "var(--text-muted)", margin: "8px 0 20px" }}>{s.name} · {slot} · {durs[dur]}. We'll remind you 15 minutes before, timed around EK 231.</p>
            <Button fullWidth variant="secondary" onClick={() => { setDone(false); go("home"); }}>Done</Button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

/* ---------- Pass ---------- */
function Pass() {
  const cells = Array.from({ length: 121 }, () => Math.random() > 0.5);
  return (
    <div style={{ padding: "4px 20px 110px" }}>
      <h1 style={{ margin: "10px 0 0", fontSize: 26, fontWeight: 600 }}>Access pass</h1>
      <p style={{ color: "var(--text-muted)", marginTop: 4 }}>Scan at any G8well entrance, gate-to-gate.</p>
      <Card tone="dark" radius="2xl" padding="lg" style={{ marginTop: 16 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div><div style={{ fontSize: 12, opacity: 0.6 }}>Member</div><div style={{ fontWeight: 600, fontSize: 18 }}>Amara Okafor</div></div>
          <Badge tone="accent">Founding</Badge>
        </div>
        <div style={{ background: "var(--ivory-100)", borderRadius: "var(--radius-lg)", padding: 18, margin: "20px 0", display: "flex", justifyContent: "center" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(11, 1fr)", gap: 3, width: 176 }}>
            {cells.map((on, i) => <div key={i} style={{ paddingBottom: "100%", background: on ? "var(--carbon-900)" : "transparent", borderRadius: 1 }}></div>)}
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, opacity: 0.75 }}>
          <span>Unlimited resets</span><span>Renews 12 Sep</span>
        </div>
      </Card>
      <Card radius="xl" padding="md" style={{ marginTop: 14, display: "flex", alignItems: "center", gap: 12 }}>
        <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--surface-sunken)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-olive)" }}><Icon name="map-pin" size={20} /></div>
        <div style={{ flex: 1 }}><div style={{ fontWeight: 600 }}>Nearest lounge</div><div style={{ fontSize: 13, color: "var(--text-muted)" }}>T3 · Concourse B · 6 min walk</div></div>
        <Icon name="chevron-right" size={20} />
      </Card>
    </div>
  );
}

/* ---------- Coach (AI trainer) ---------- */
function Coach() {
  const plan = [
    { t: "19:00", name: "Cold plunge", icon: "snowflake", dur: "20 min" },
    { t: "19:25", name: "Mobility flow", icon: "activity", dur: "25 min" },
    { t: "19:55", name: "Shower & refresh", icon: "bath", dur: "15 min" },
    { t: "20:15", name: "Hydration bar", icon: "droplet", dur: "10 min" },
  ];
  return (
    <div style={{ padding: "4px 20px 110px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 10 }}>
        <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--carbon-900)" }}><Icon name="sparkles" size={22} /></div>
        <div><h1 style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>AI trainer</h1><div style={{ fontSize: 13, color: "var(--text-muted)" }}>Planning around EK 231</div></div>
      </div>

      <div style={{ background: "var(--surface-sunken)", borderRadius: "var(--radius-lg)", padding: "14px 16px", marginTop: 18, fontSize: 15, lineHeight: 1.5 }}>
        You land from a 7-hour flight and have <b>3 hours</b> before your next. I'd prioritise circulation and sleep debt. Here's a 70-minute reset.
      </div>

      <Eyebrow style={{ marginTop: 22 }}>Tonight's reset</Eyebrow>
      <div style={{ marginTop: 12, position: "relative" }}>
        <div style={{ position: "absolute", left: 19, top: 8, bottom: 8, width: 2, background: "var(--border-subtle)" }}></div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {plan.map((p) => (
            <div key={p.name} style={{ display: "flex", gap: 14, alignItems: "center", position: "relative" }}>
              <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--ivory-50)", border: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-olive)", zIndex: 1 }}><Icon name={p.icon} size={20} /></div>
              <Card radius="lg" padding="sm" style={{ flex: 1, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div><div style={{ fontWeight: 600 }}>{p.name}</div><div style={{ fontSize: 12.5, color: "var(--text-muted)" }}>{p.t} · {p.dur}</div></div>
                <Icon name="chevron-right" size={18} />
              </Card>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
        <Button fullWidth variant="primary" iconRight="check">Add to schedule</Button>
        <Button variant="outline" iconLeft="sparkles">Tweak</Button>
      </div>
    </div>
  );
}

/* ---------- You / Tracker ---------- */
function You() {
  const flights = [
    { code: "EK 231", route: "DXB → SIN", when: "Tonight · 21:40", reset: true },
    { code: "SQ 22", route: "SIN → EWR", when: "Wed · 09:15", reset: false },
    { code: "UA 88", route: "EWR → DXB", when: "Sun · 22:05", reset: false },
  ];
  return (
    <div style={{ padding: "4px 20px 110px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 10 }}>
        <h1 style={{ margin: 0, fontSize: 26, fontWeight: 600 }}>Your reset</h1>
        <IconButton name="user" variant="outline" label="Profile" />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginTop: 16 }}>
        {[["24", "resets"], ["18h", "recovered"], ["7", "airports"]].map(([n, l]) => (
          <Card key={l} radius="lg" padding="md" style={{ textAlign: "center" }}>
            <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em" }}>{n}</div>
            <div style={{ fontSize: 12, color: "var(--text-muted)" }}>{l}</div>
          </Card>
        ))}
      </div>

      <Card tone="accent" radius="xl" padding="lg" style={{ marginTop: 14 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div><div style={{ fontWeight: 600, fontSize: 17 }}>7-day reset streak</div><div style={{ fontSize: 13, opacity: 0.7, marginTop: 2 }}>Every travel day this week</div></div>
          <Icon name="star" size={28} />
        </div>
      </Card>

      <Eyebrow style={{ marginTop: 24 }}>Upcoming flights</Eyebrow>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 12 }}>
        {flights.map((f) => (
          <Card key={f.code} radius="lg" padding="md" style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--surface-sunken)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-olive)" }}><Icon name="plane" size={20} /></div>
            <div style={{ flex: 1 }}><div style={{ fontWeight: 600 }}>{f.code} <span style={{ color: "var(--text-muted)", fontWeight: 400 }}>· {f.route}</span></div><div style={{ fontSize: 13, color: "var(--text-muted)" }}>{f.when}</div></div>
            {f.reset ? <Badge tone="soft" icon="check">Reset set</Badge> : <Badge tone="outline" size="sm">Plan</Badge>}
          </Card>
        ))}
      </div>
    </div>
  );
}

/* ---------- App shell ---------- */
const TABS = [
  { key: "home", icon: "house", label: "Home" },
  { key: "book", icon: "calendar", label: "Book" },
  { key: "pass", icon: "qr-code", label: "Pass" },
  { key: "coach", icon: "sparkles", label: "Coach" },
  { key: "you", icon: "user", label: "You" },
];

function App() {
  const [tab, setTab] = useState("home");
  const [service, setService] = useState(null);
  const go = (t, s) => { if (s) setService(s); setTab(t); };
  const dark = false;
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", background: "var(--surface-page)", position: "relative", overflow: "hidden" }}>
      <StatusBar dark={dark} />
      <div style={{ flex: 1, overflowY: "auto", position: "relative" }}>
        {tab === "home" && <Home go={go} />}
        {tab === "book" && <Book service={service} go={go} />}
        {tab === "pass" && <Pass />}
        {tab === "coach" && <Coach />}
        {tab === "you" && <You />}
      </div>
      <div style={{ display: "flex", justifyContent: "space-around", padding: "10px 12px 26px", background: "rgba(248,255,242,0.85)", backdropFilter: "blur(14px)", borderTop: "1px solid var(--border-subtle)" }}>
        {TABS.map((t) => {
          const active = tab === t.key || (t.key === "book" && tab === "book");
          return (
            <button key={t.key} onClick={() => go(t.key)} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, background: "none", border: "none", cursor: "pointer", color: active ? "var(--carbon-900)" : "var(--text-subtle)", fontFamily: "var(--font-sans)", padding: 0 }}>
              <Icon name={t.icon} size={23} stroke={active ? 2 : 1.75} />
              <span style={{ fontSize: 10.5, fontWeight: active ? 600 : 500 }}>{t.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { GApp: App });
ReactDOM.createRoot(document.getElementById("root")).render(<App />);