/* WinAstro — iOS screens (Human Interface Guidelines). Rendered inside
   <IOSDevice> (status bar + island + home indicator 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 IOSTabBar({ active }) {
  const tabs = [
    { 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 (
    <div className="ios-tabbar">
      {tabs.map((t) => (
        <button key={t.id} className="ios-tab" aria-selected={active === t.id}>
          <I name={t.icon} className="ic" />
          {t.label}
        </button>
      ))}
    </div>
  );
}

function IOSStepDots({ 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 / Today */
function IOSHome() {
  return (
    <div className="m-screen">
      <div className="m-scroll">
        <header className="m-brandhead" style={{ paddingTop: 54 }}>
          <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" style={{ marginTop: -10 }}>
          <div className="ios-card" style={{ borderTop: "3px solid var(--wa-gold)" }}>
            <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>
          <button className="ios-btn ios-btn--primary"><I name="spark" className="ic-sm" /> Start a decision brief</button>
        </section>

        <section className="m-section">
          <div className="m-section-title"><h3>Your chart</h3><a href="#">Open</a></div>
          <div className="ios-card" 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">
          <div className="m-section-title"><h3>Start with a decision</h3></div>
          <div className="ios-group">
            {D.categories.map((c) => (
              <div className="ios-row" key={c.value}>
                <span className="lead" style={{ background: CAT_ACCENT[c.value] }}><I name={CAT_ICON[c.value]} className="ic-sm" /></span>
                <div className="body"><div className="t">{c.label}</div></div>
                <I name="chevronRight" className="ic-sm m-muted" />
              </div>
            ))}
          </div>
        </section>

        <section className="m-section" style={{ paddingBottom: 18 }}>
          <div className="m-section-title"><h3>Continue</h3></div>
          <div className="ios-card" style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span className="m-medallion m-glyph" style={{ width: 40, height: 40, fontSize: 19, "--mz": "#de7d42" }}>♌</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <strong style={{ fontSize: 14.5 }}>Should I switch jobs this year?</strong>
              <p className="m-muted" style={{ margin: "2px 0 0", fontSize: 12.5 }}>Brief ready · 3 advisors matched</p>
            </div>
            <span className="m-chip m-chip--gold">Resume</span>
          </div>
        </section>
      </div>
      <IOSTabBar active="today" />
    </div>
  );
}

/* 2 — New brief (intake) */
function IOSBrief() {
  return (
    <div className="m-screen">
      <div className="m-scroll" style={{ background: "var(--wa-paper)" }}>
        <div className="ios-safetop" />
        <div className="ios-nav">
          <button className="btn"><I name="chevronLeft" className="ic-sm" /> Today</button>
          <span className="title">New brief</span>
          <button className="btn" style={{ visibility: "hidden" }}>Save</button>
        </div>
        <div style={{ padding: "2px 16px 12px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <h1 className="ios-largetitle" style={{ padding: 0 }}>Your decision</h1>
          <IOSStepDots step={0} />
        </div>

        <div style={{ padding: "0 16px 8px" }}>
          <p style={{ margin: "0 0 8px", fontSize: 13, fontWeight: 700, color: "var(--text-muted)" }}>What kind of decision?</p>
          <div className="ios-seg" role="tablist">
            {D.categories.slice(0, 3).map((c, i) => (
              <button key={c.value} aria-selected={i === 0}>{c.label}</button>
            ))}
          </div>
          <div className="ios-seg" style={{ marginTop: 6 }}>
            {D.categories.slice(3).map((c) => <button key={c.value} aria-selected={false}>{c.label}</button>)}
          </div>
        </div>

        <div style={{ height: 14 }} />
        <div className="ios-group" style={{ padding: 0 }}>
          <div style={{ padding: 14, borderBottom: "0.5px solid rgba(60,60,67,0.13)" }}>
            <label style={{ fontSize: 12, fontWeight: 700, color: "var(--text-muted)" }}>Your question</label>
            <div style={{ fontSize: 16, marginTop: 4 }}>Should I switch jobs this year?</div>
          </div>
          <div style={{ padding: 14 }}>
            <label style={{ fontSize: 12, fontWeight: 700, color: "var(--text-muted)" }}>Context</label>
            <div style={{ fontSize: 15.5, marginTop: 4, 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="ios-group">
          <div className="ios-row">
            <span className="lead" style={{ background: "#de7d42" }} >♌</span>
            <div className="body"><div className="t">Anika · Leo</div><div className="s">14 Aug 1992 · Mumbai, 09:30</div></div>
            <span className="ios-row"><I name="chevronRight" className="ic-sm m-muted" /></span>
          </div>
          <div className="ios-row">
            <span className="lead" style={{ background: "#0f766e" }}><I name="globe" className="ic-sm" /></span>
            <div className="body"><div className="t">Language</div></div>
            <span className="val">English</span>
            <I name="chevronRight" className="ic-sm m-muted" />
          </div>
        </div>

        <div style={{ padding: "0 16px", 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 className="ios-bottombar">
        <button className="ios-btn ios-btn--primary"><I name="spark" className="ic-sm" /> Generate brief &amp; matches</button>
      </div>
    </div>
  );
}

/* 3 — Brief & chart result */
function IOSChart() {
  return (
    <div className="m-screen">
      <div className="m-scroll" style={{ background: "var(--wa-paper)" }}>
        <div className="ios-safetop" />
        <div className="ios-nav">
          <button className="btn"><I name="chevronLeft" className="ic-sm" /> Brief</button>
          <span className="title">Your brief</span>
          <button className="btn">Share</button>
        </div>
        <div style={{ padding: "4px 16px 10px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <IOSStepDots step={2} />
          <span className="m-badge m-badge--ok"><span className="m-dot" /> Safe to continue</span>
        </div>

        <div className="ios-card">
          <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="ios-card" style={{ paddingBottom: 18 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, paddingBottom: 14, marginBottom: 14, borderBottom: "0.5px solid rgba(60,60,67,0.13)" }}>
            <Medallion sign={D.signs.leo} size={54} />
            <div>
              <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" style={{ marginLeft: "auto" }}>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>
      <div className="ios-bottombar">
        <button className="ios-btn ios-btn--primary">See matched advisors <I name="arrowRight" className="ic-sm" /></button>
      </div>
    </div>
  );
}

/* 4 — Matched advisors */
function IOSAdvisors() {
  return (
    <div className="m-screen">
      <div className="m-scroll" style={{ background: "var(--wa-paper)" }}>
        <header className="m-brandhead" style={{ paddingTop: 54, paddingBottom: 16 }}>
          <div className="row">
            <button className="m-iconbtn"><I name="chevronLeft" className="ic-sm" /></button>
            <span style={{ fontWeight: 700, fontSize: 16 }}>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>
          <div className="m-tagrow" style={{ marginTop: 12 }}>
            <span className="m-chip" style={{ background: "rgba(255,250,240,0.12)", color: "#fffaf0" }}><span className="m-dot" style={{ color: "#4ade80" }} /> Online</span>
            <span className="m-chip" style={{ background: "rgba(255,250,240,0.12)", color: "#fffaf0" }}>Career</span>
            <span className="m-chip" style={{ background: "rgba(255,250,240,0.12)", color: "#fffaf0" }}>Hindi</span>
          </div>
        </header>

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

function IOSAdvisorCard({ a }) {
  const online = a.availability === "online";
  return (
    <div className="ios-card" style={{ margin: 0, position: "relative", overflow: "hidden" }}>
      <span style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: "linear-gradient(90deg, var(--wa-teal), var(--wa-gold-bright), var(--wa-terracotta))" }} />
      <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>
      <ul style={{ margin: "12px 0 0", paddingLeft: 18, color: "var(--text-muted)", fontSize: 13, lineHeight: 1.5 }}>
        {a.reasons.map((r, i) => <li key={i}>{r}</li>)}
      </ul>
      <button className="ios-btn ios-btn--tinted" style={{ height: 42, marginTop: 14, fontSize: 15 }}>View profile</button>
    </div>
  );
}

/* 5 — Advisor profile + consult booking */
function IOSConsult() {
  const a = D.advisors[0];
  return (
    <div className="m-screen">
      <div className="m-scroll" style={{ background: "var(--wa-paper)" }}>
        <header className="m-brandhead" style={{ paddingTop: 54, paddingBottom: 20 }}>
          <div className="row">
            <button className="m-iconbtn"><I name="chevronLeft" 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", display: "flex", gap: 8, flexWrap: "wrap" }}>
          {D.trust.map((t) => <span className="m-chip" key={t} style={{ background: "rgba(15,118,110,0.1)" }}><I name="check" className="ic-sm" style={{ width: 13, height: 13 }} />{t}</span>)}
        </div>

        <section className="m-section">
          <div className="m-section-title"><h3>Consult options</h3></div>
          {D.packages.map((p) => (
            <div key={p.id} className="ios-card" style={{ margin: "0 16px 12px", display: "flex", alignItems: "center", gap: 12, ...(p.featured ? { borderColor: "rgba(195,83,47,0.4)", boxShadow: "0 8px 22px rgba(16,21,17,0.10)" } : {}) }}>
              <div style={{ flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <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 style={{ textAlign: "right" }}>
                <div className="m-serif" style={{ fontWeight: 900, fontSize: 18 }}>{inr(p.price)}</div>
              </div>
            </div>
          ))}
          <div className="ios-card" style={{ margin: "0 16px 12px", display: "flex", alignItems: "center", gap: 12, background: "rgba(200,169,106,0.1)", border: "1px solid rgba(200,169,106,0.4)" }}>
            <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 style={{ height: 8 }} />
      </div>
      <div className="ios-bottombar">
        <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="ios-btn ios-btn--primary" style={{ width: "auto", padding: "0 26px" }}>Book consult</button>
      </div>
    </div>
  );
}

Object.assign(window, { IOSHome, IOSBrief, IOSChart, IOSAdvisors, IOSConsult });
})();