/* WinAstro — Android screens (Material 3). Rendered inside <AndroidDevice>
   (status bar + gesture nav come from the frame). */
(() => {
const { MIcon: I, MCompass: Compass, MMedallion: Medallion, MAvatar: Avatar, MD: D, mINR: inr } = window;

const CAT_ICON = { career: "briefcase", relationship: "heart", compatibility: "users", relocation: "globe", business: "spark" };
const CAT_ACCENT = { career: "#0f766e", relationship: "#ba6f8f", compatibility: "#4f88a8", relocation: "#6f8f4e", business: "#c3532f" };

function AndNav({ active }) {
  const items = [
    { id: "today", label: "Today", icon: "home" },
    { id: "advisors", label: "Advisors", icon: "users" },
    { id: "consult", label: "Consult", icon: "compass" },
    { id: "wallet", label: "Wallet", icon: "wallet" },
    { id: "you", label: "You", icon: "user" },
  ];
  return (
    <nav className="m3-navbar">
      {items.map((t) => (
        <button key={t.id} className="m3-navitem" aria-selected={active === t.id}>
          <span className="pill"><I name={t.icon} className="ic-sm" /></span>
          {t.label}
        </button>
      ))}
    </nav>
  );
}

function AndAppBar({ title, onBack = true, action }) {
  return (
    <div className="m3-appbar">
      {onBack ? <button className="iconbtn"><I name="arrowLeft" className="ic" /></button> : <span style={{ width: 8 }} />}
      <span className="title">{title}</span>
      {action || <button className="iconbtn"><I name={action === undefined ? "search" : "search"} className="ic" /></button>}
    </div>
  );
}

function AndSteps({ step }) {
  return (
    <div className="m-steps" aria-hidden="true">
      {[0, 1, 2, 3, 4].map((i) => <span key={i} className={"s" + (i < step ? " done" : i === step ? " on" : "")} />)}
    </div>
  );
}

/* 1 — Home */
function AndHome() {
  return (
    <div className="m-screen">
      <div className="m-scroll">
        <header className="m-brandhead">
          <div className="row">
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="m-seal"><Compass size={24} /></span>
              <span className="m-word"><b>Win</b><i>Astro</i></span>
            </div>
            <span className="m-iconbtn"><I name="bell" className="ic-sm" /></span>
          </div>
          <h1 className="m-greet"><small>Tuesday · 27 June</small>Good evening, Anika.</h1>
        </header>

        <section className="m-section">
          <div className="m3-card m3-card--tonal">
            <p className="m-eyebrow">Today&rsquo;s window</p>
            <div style={{ display: "flex", gap: 12, alignItems: "center", marginTop: 8 }}>
              <span className="m-medallion m-glyph" style={{ width: 46, height: 46, fontSize: 22, "--mz": "#4f88a8" }}>☽</span>
              <div>
                <strong className="m-serif" style={{ fontSize: 16 }}>Moon trine your Sun</strong>
                <p className="m-muted" style={{ margin: "2px 0 0", fontSize: 13.5, lineHeight: 1.45 }}>A steady evening for career reflection — name the decision, not the fear.</p>
              </div>
            </div>
          </div>
        </section>

        <section className="m-section">
          <div className="m-section-title"><h3>Your chart</h3><a href="#">Open</a></div>
          <div className="m3-card m3-card--elev" style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <Medallion sign={D.signs.leo} size={56} />
            <div style={{ flex: 1 }}>
              <strong className="m-serif" style={{ fontSize: 18 }}>Leo</strong>
              <p className="m-muted" style={{ margin: "1px 0 8px", fontSize: 13 }}>Fire · Fixed · {D.signs.leo.dates}</p>
              <div className="m-tagrow">
                <span className="m-chip">Visibility</span>
                <span className="m-chip">Leadership</span>
              </div>
            </div>
          </div>
        </section>

        <section className="m-section" style={{ paddingBottom: 120 }}>
          <div className="m-section-title"><h3>Start with a decision</h3></div>
          <div style={{ display: "grid", gap: 10 }}>
            {D.categories.map((c) => (
              <div key={c.value} className="m3-card" style={{ margin: "0 16px", display: "flex", alignItems: "center", gap: 14, padding: "12px 16px" }}>
                <span style={{ width: 40, height: 40, borderRadius: "50%", display: "grid", placeItems: "center", color: "#fff", background: CAT_ACCENT[c.value], flex: "none" }}><I name={CAT_ICON[c.value]} className="ic-sm" /></span>
                <div style={{ flex: 1 }}><div style={{ fontSize: 15.5, fontWeight: 600 }}>{c.label}</div></div>
                <I name="chevronRight" className="ic-sm m-muted" />
              </div>
            ))}
          </div>
        </section>
      </div>
      <button className="m3-fab"><I name="spark" className="ic-sm" /> New brief</button>
      <AndNav active="today" />
    </div>
  );
}

/* 2 — New brief */
function AndBrief() {
  return (
    <div className="m-screen">
      <div className="m-scroll">
        <AndAppBar title="New brief" />
        <div style={{ padding: "0 24px 8px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <h1 className="m-serif" style={{ fontSize: 26, margin: 0 }}>Your decision</h1>
          <AndSteps step={0} />
        </div>

        <div style={{ padding: "8px 16px 4px" }}>
          <p style={{ margin: "0 0 10px 4px", fontSize: 13, fontWeight: 700, color: "var(--text-muted)" }}>What kind of decision?</p>
          <div className="m-tagrow">
            {D.categories.map((c, i) => (
              <span key={c.value} className={"m3-chip" + (i === 0 ? " m3-chip--on" : "")}>
                {i === 0 && <I name="check" className="ic-sm" style={{ width: 16, height: 16 }} />}{c.label}
              </span>
            ))}
          </div>
        </div>

        <div style={{ padding: "14px 16px 0", display: "grid", gap: 12 }}>
          <div className="m3-field">
            <label>Your question</label>
            <div style={{ fontSize: 16, padding: "2px 0 4px" }}>Should I switch jobs this year?</div>
          </div>
          <div className="m3-field">
            <label>Context</label>
            <div style={{ fontSize: 15.5, padding: "2px 0 4px", lineHeight: 1.45, color: "var(--text-body)" }}>I live abroad and feel torn between stability and growth. I want timing and a practical next step.</div>
          </div>
        </div>

        <div className="m3-card" style={{ marginTop: 16, display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{ width: 40, height: 40, borderRadius: "50%", display: "grid", placeItems: "center", background: "#de7d42", color: "#fff", fontFamily: "var(--font-display)", fontSize: 20, flex: "none" }}>♌</span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15.5, fontWeight: 600 }}>Anika · Leo</div>
            <div className="m-muted" style={{ fontSize: 13 }}>14 Aug 1992 · Mumbai · 09:30 · English</div>
          </div>
          <button className="m3-btn m3-btn--text" style={{ height: 36 }}>Edit</button>
        </div>

        <div style={{ padding: "14px 20px", display: "flex", gap: 8, alignItems: "center", color: "var(--text-muted)", fontSize: 12.5 }}>
          <I name="shield" className="ic-sm" style={{ color: "var(--wa-teal)" }} />
          Reflective guidance only — sensitive topics route to human support.
        </div>
      </div>
      <div style={{ padding: "10px 16px 12px", display: "flex", justifyContent: "flex-end", borderTop: "1px solid var(--wa-line)", background: "var(--wa-paper)" }}>
        <button className="m3-btn m3-btn--filled"><I name="spark" className="ic-sm" /> Generate brief &amp; matches</button>
      </div>
      <AndNav active="consult" />
    </div>
  );
}

/* 3 — Brief & chart */
function AndChart() {
  return (
    <div className="m-screen">
      <div className="m-scroll">
        <AndAppBar title="Your brief" action={<button className="iconbtn"><I name="heart" className="ic" /></button>} />
        <div style={{ padding: "0 20px 12px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <AndSteps step={2} />
          <span className="m-badge m-badge--ok"><span className="m-dot" /> Safe to continue</span>
        </div>

        <div className="m3-card m3-card--tonal">
          <div style={{ display: "flex", alignItems: "center", gap: 7, color: "var(--text-muted)", fontWeight: 800, fontSize: 13 }}>
            <span style={{ color: "var(--wa-gold)" }}>✦</span> AI decision assistant
          </div>
          <p style={{ margin: "10px 0 0", fontSize: 15, lineHeight: 1.5, color: "var(--text-body)" }}>
            You&rsquo;re weighing a career decision: &ldquo;Should I switch jobs this year?&rdquo; The consult should clarify timing, emotional context, tradeoffs, and one practical next step.
          </p>
          <p style={{ margin: "14px 0 6px", fontSize: 11.5, fontWeight: 900, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--text-muted)" }}>Questions to bring</p>
          <ul style={{ margin: 0, paddingLeft: 18, color: "var(--text-muted)", fontSize: 14, lineHeight: 1.5 }}>
            <li>Is this a better season for staying, switching, or preparing?</li>
            <li>What decision window should I pay attention to?</li>
          </ul>
        </div>

        <div className="m3-card m3-card--elev" style={{ paddingBottom: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, paddingBottom: 14, marginBottom: 14, borderBottom: "1px solid var(--wa-line)" }}>
            <Medallion sign={D.signs.leo} size={54} />
            <div style={{ flex: 1 }}>
              <strong className="m-serif" style={{ fontSize: 18 }}>Leo chart context</strong>
              <p className="m-muted" style={{ margin: "2px 0 0", fontSize: 13 }}>Fire · Fixed</p>
            </div>
            <span className="m-chip m-chip--gold">Low confidence</span>
          </div>
          <ul style={{ margin: 0, paddingLeft: 18, color: "var(--text-muted)", fontSize: 14, lineHeight: 1.55 }}>
            <li>Leo brings visibility, confidence, creative leadership into the brief.</li>
            <li>Use this as reflective context, not deterministic prediction.</li>
            <li>Add a birth time to sharpen house and timing interpretation.</li>
          </ul>
        </div>
        <div style={{ padding: "0 16px 16px", display: "flex", justifyContent: "flex-end" }}>
          <button className="m3-btn m3-btn--filled">See matched advisors <I name="arrowRight" className="ic-sm" /></button>
        </div>
      </div>
      <AndNav active="consult" />
    </div>
  );
}

/* 4 — Matched advisors */
function AndAdvisors() {
  return (
    <div className="m-screen">
      <div className="m-scroll">
        <header className="m-brandhead" style={{ paddingBottom: 16 }}>
          <div className="row">
            <button className="m-iconbtn"><I name="arrowLeft" className="ic-sm" /></button>
            <span style={{ fontWeight: 600, fontSize: 18 }}>Matched advisors</span>
            <button className="m-iconbtn"><I name="sliders" className="ic-sm" /></button>
          </div>
          <p style={{ margin: "12px 0 0", color: "rgba(255,250,240,0.72)", fontSize: 13.5 }}>3 vetted advisors for your career decision, ranked by fit.</p>
        </header>

        <div style={{ padding: "14px 16px 0" }}>
          <div className="m-tagrow">
            <span className="m3-chip m3-chip--on"><span className="m-dot" style={{ color: "#22c55e" }} /> Online</span>
            <span className="m3-chip">Career</span>
            <span className="m3-chip">Hindi</span>
            <span className="m3-chip"><I name="sliders" className="ic-sm" style={{ width: 15, height: 15 }} /> Filters</span>
          </div>
        </div>

        <div style={{ padding: "14px 16px 110px", display: "grid", gap: 14 }}>
          {D.advisors.map((a) => <AndAdvisorCard key={a.id} a={a} />)}
        </div>
      </div>
      <AndNav active="advisors" />
    </div>
  );
}

function AndAdvisorCard({ a }) {
  const online = a.availability === "online";
  return (
    <div className="m3-card m3-card--elev" style={{ margin: 0 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <Avatar name={a.name} size={46} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <strong className="m-serif" style={{ fontSize: 17 }}>{a.name}</strong>
          <p className="m-muted" style={{ margin: "1px 0 0", fontSize: 13 }}>{a.title}</p>
        </div>
        <span className={"m-badge " + (online ? "m-badge--ok" : "m-badge--busy")}><span className="m-dot" /> {online ? "Online" : "Busy"}</span>
      </div>
      <div className="m-tagrow" style={{ margin: "12px 0" }}>
        {a.specialties.slice(0, 3).map((s) => <span className="m-chip" key={s}>{s}</span>)}
      </div>
      <div className="m-statgrid">
        <div className="m-stat"><b style={{ display: "inline-flex", alignItems: "center", gap: 3 }}><I name="star" className="ic-sm" style={{ width: 13, height: 13, color: "var(--wa-gold)" }} />{a.rating}</b> rating</div>
        <div className="m-stat"><b>{a.sessions.toLocaleString()}</b> sessions</div>
        <div className="m-stat"><b>{inr(a.perMin)}</b>/min</div>
      </div>
      <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
        <button className="m3-btn m3-btn--tonal" style={{ flex: 1 }}>View profile</button>
        <button className="m3-btn m3-btn--filled" style={{ flex: 1 }}>Book</button>
      </div>
    </div>
  );
}

/* 5 — Advisor profile + consult */
function AndConsult() {
  const a = D.advisors[0];
  return (
    <div className="m-screen">
      <div className="m-scroll">
        <header className="m-brandhead" style={{ paddingBottom: 20 }}>
          <div className="row">
            <button className="m-iconbtn"><I name="arrowLeft" className="ic-sm" /></button>
            <button className="m-iconbtn"><I name="heart" className="ic-sm" /></button>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 12 }}>
            <Avatar name={a.name} size={62} accent="#1d2a24" />
            <div>
              <h1 style={{ margin: 0, fontFamily: "var(--font-heading)", fontSize: 24 }}>{a.name}</h1>
              <p style={{ margin: "2px 0 0", color: "rgba(255,250,240,0.74)", fontSize: 13.5 }}>{a.title}</p>
              <div style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 6, color: "var(--wa-gold)", fontWeight: 800, fontSize: 13 }}>
                <I name="star" className="ic-sm" style={{ width: 14, height: 14 }} /> {a.rating}
                <span style={{ color: "rgba(255,250,240,0.6)", fontWeight: 600 }}>· {a.sessions.toLocaleString()} sessions</span>
              </div>
            </div>
          </div>
        </header>

        <div style={{ padding: "14px 16px 0" }}>
          <div className="m-tagrow">
            {D.trust.map((t) => <span className="m-chip" key={t}><I name="check" className="ic-sm" style={{ width: 13, height: 13 }} />{t}</span>)}
          </div>
        </div>

        <section className="m-section" style={{ paddingBottom: 16 }}>
          <div className="m-section-title"><h3>Consult options</h3></div>
          {D.packages.map((p) => (
            <div key={p.id} className={"m3-card " + (p.featured ? "m3-card--elev" : "")} style={{ display: "flex", alignItems: "center", gap: 12, ...(p.featured ? { border: "1px solid rgba(195,83,47,0.4)" } : {}) }}>
              <div style={{ flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                  <strong className="m-serif" style={{ fontSize: 16 }}>{p.name}</strong>
                  {p.featured && <span className="m-chip" style={{ background: "rgba(195,83,47,0.12)", color: "var(--wa-terracotta)" }}>Most booked</span>}
                </div>
                <p className="m-muted" style={{ margin: "3px 0 0", fontSize: 13 }}>{p.min} min · {p.desc}</p>
              </div>
              <div className="m-serif" style={{ fontWeight: 900, fontSize: 18 }}>{inr(p.price)}</div>
            </div>
          ))}
          <div className="m3-card m3-card--tonal" style={{ display: "flex", alignItems: "center", gap: 12, background: "rgba(200,169,106,0.14)" }}>
            <div style={{ flex: 1 }}>
              <strong className="m-serif" style={{ fontSize: 16 }}>Live follow-up</strong>
              <p className="m-muted" style={{ margin: "3px 0 0", fontSize: 13 }}>Wallet mode · est. {inr(a.perMin * 12)} for 12 min</p>
            </div>
            <div className="m-serif" style={{ fontWeight: 900, fontSize: 18 }}>{inr(a.perMin)}<span style={{ fontSize: 12, color: "var(--text-muted)" }}>/min</span></div>
          </div>
        </section>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "12px 16px", borderTop: "1px solid var(--wa-line)", background: "var(--wa-paper)" }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 700 }}>Deep Decision Session</div>
          <div className="m-serif" style={{ fontWeight: 900, fontSize: 20 }}>{inr(249900)}</div>
        </div>
        <button className="m3-btn m3-btn--filled" style={{ height: 48 }}>Book consult</button>
      </div>
    </div>
  );
}

Object.assign(window, { AndHome, AndBrief, AndChart, AndAdvisors, AndConsult });
})();