const { Button, Card, Badge, Avatar } = window.GDVExpressDesignSystem_766357;

/* Member account hub: profile, membership status, and quick links. */
function MyAccount({ onNav }) {
  const links = [
    { k: "history", t: "Travel history", d: "Every stay you've booked", nav: "history" },
    { k: "prefs", t: "Travel preferences", d: "What Gigi watches for", nav: null },
    { k: "pay", t: "Payment & billing", d: "Card ending 4242 · renews Apr 30", nav: null },
    { k: "upgrade", t: "Upgrade to GDX", d: "More resorts, peak-season weeks", nav: null, gdx: true },
  ];
  return (
    <div style={{ maxWidth: "920px", margin: "0 auto", padding: "30px 30px 70px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: "16px", marginBottom: "24px" }}>
        <Avatar name="Dana" gigi={false} size={58} />
        <div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "26px", color: "var(--navy-800)", margin: 0 }}>Dana Whitfield</h1>
          <div style={{ display: "flex", alignItems: "center", gap: "10px", marginTop: "4px" }}>
            <span style={{ fontSize: "13px", color: "var(--muted)" }}>Member ID# GX98349</span>
            <Badge tone="success">Active</Badge>
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "18px", alignItems: "start" }}>
        <Card padding="20px">
          <div style={{ fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--gold-600)", fontWeight: 700, marginBottom: "10px" }}>Your membership</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: "10px", marginBottom: "6px" }}>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "22px", color: "var(--navy-800)" }}>GDV Express</span>
            <span style={{ fontSize: "13px", color: "var(--muted)" }}>$199 / year</span>
          </div>
          <p style={{ fontSize: "13.5px", color: "var(--muted)", lineHeight: 1.5, margin: "0 0 16px" }}>
            Renews <b style={{ color: "var(--ink-700)" }}>April 30, 2026</b>. Another year of member rates, more getaways, and Gigi in your corner.
          </p>
          <div style={{ display: "flex", gap: "10px" }}>
            <Button variant="primary" size="sm">Renew membership</Button>
            <Button variant="secondary" size="sm">Manage</Button>
          </div>
        </Card>

        <Card padding="20px">
          <div style={{ fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--gold-600)", fontWeight: 700, marginBottom: "8px" }}>Gigi is watching for</div>
          <div style={{ fontSize: "14px", color: "var(--ink-700)", lineHeight: 1.5, fontWeight: 600 }}>Beach week · the two of you · this season</div>
          <p style={{ fontSize: "12.5px", color: "var(--muted)", marginTop: "6px", lineHeight: 1.5 }}>She'll message you the moment a match opens up. No more checking back.</p>
        </Card>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: "12px", marginTop: "18px" }}>
        {links.map((l) => (
          <Card key={l.k} interactive padding="16px" onClick={() => l.nav && onNav(l.nav)}
            style={{ cursor: l.nav ? "pointer" : "default", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "10px" }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                <span style={{ fontWeight: 700, fontSize: "14px", color: "var(--navy-800)" }}>{l.t}</span>
                {l.gdx && <Badge tone="navy">GDX</Badge>}
              </div>
              <div style={{ fontSize: "12.5px", color: "var(--muted)", marginTop: "2px" }}>{l.d}</div>
            </div>
            <span style={{ color: "var(--navy-400)", fontSize: "18px" }}>›</span>
          </Card>
        ))}
      </div>
    </div>
  );
}
window.MyAccount = MyAccount;