/* JothidaKural mockups — 5 mobile app screens */

/* ───────────────────────── 1 · DASHBOARD ───────────────────────── */
function ScreenDashboard() {
  return (
    <>
      <div className="topbar">
        <div className="ph round" style={{ width: 42, height: 42 }}><span>photo</span></div>
        <div style={{ flex: 1, lineHeight: 1.25 }}>
          <div className="faint" style={{ fontSize: 12, fontWeight: 700 }}>Vanakkam 🙏</div>
          <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: "-.01em" }}>Anbazhagan</div>
        </div>
        <div className="iconbtn" style={{ position: "relative" }}><Icon name="bell" /><span className="dot"></span></div>
      </div>

      <div className="scroll-pad" style={{ gap: 16 }}>
        <div className="dash-hero">
          <div className="rayfield"></div>
          <span className="eyebrow">This month · June</span>
          <div className="dash-earn">₹84,500</div>
          <div className="dash-sub"><Icon name="trend" size={15} /> +18% vs May · settled to your bank</div>
        </div>

        <div className="kpi-row">
          <div className="kpi">
            <div className="kpi-ic" style={{ background: "var(--brand-soft)", color: "var(--brand)" }}><Icon name="cal" /></div>
            <div className="kpi-n">32</div>
            <div className="kpi-l">Consultations</div>
          </div>
          <div className="kpi">
            <div className="kpi-ic" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}><Icon name="users" /></div>
            <div className="kpi-n">118</div>
            <div className="kpi-l">Total clients</div>
          </div>
        </div>

        <div>
          <div className="seclabel" style={{ marginBottom: 12 }}>
            <h3>Today · 4 bookings</h3>
            <a>Calendar</a>
          </div>
          <div className="col" style={{ gap: 10 }}>
            <div className="appt next">
              <div className="appt-time"><b>5:30</b><span>pm</span></div>
              <div className="appt-main">
                <div className="appt-name">Meena Krishnan</div>
                <div className="appt-svc">Jathagam reading · 45 min</div>
              </div>
              <div className="appt-mode"><Icon name="video" /></div>
            </div>
            <div className="appt">
              <div className="appt-time"><b>6:30</b><span>pm</span></div>
              <div className="appt-main">
                <div className="appt-name">Senthil Kumar</div>
                <div className="appt-svc">Phone consultation · 30 min</div>
              </div>
              <div className="appt-mode" style={{ background: "var(--brand-soft)", color: "var(--brand)" }}><Icon name="phone" /></div>
            </div>
            <div className="appt">
              <div className="appt-time"><b>7:15</b><span>pm</span></div>
              <div className="appt-main">
                <div className="appt-name">Priya & Arun</div>
                <div className="appt-svc">Marriage matching · 60 min</div>
              </div>
              <div className="appt-mode" style={{ background: "var(--brand-soft)", color: "var(--brand)" }}><Icon name="phone" /></div>
            </div>
          </div>
        </div>
      </div>

      <TabBar active="home" />
    </>
  );
}

/* ───────────────────────── 2 · CLIENT BRIEF ───────────────────────── */
function ScreenBrief() {
  return (
    <>
      <div className="topbar">
        <div className="iconbtn"><Icon name="arrowL" /></div>
        <div className="tb-title" style={{ flex: 1 }}>Client brief</div>
        <div className="iconbtn"><Icon name="message" /></div>
      </div>

      <div className="brief-head">
        <div className="rayfield"></div>
        <div className="ph round"><span>photo</span></div>
        <div style={{ flex: 1, position: "relative" }}>
          <div className="bh-name">Meena Krishnan</div>
          <div className="bh-meta">Coimbatore · 34 yrs</div>
          <div className="brief-tags mt8">
            <span className="chip chip-accent">Returning · 6 visits</span>
            <span className="chip"><span className="ta">தமிழ்</span></span>
          </div>
        </div>
      </div>

      <div className="scroll-pad" style={{ gap: 16, marginTop: 18 }}>
        <div>
          <div className="seclabel" style={{ marginBottom: 10 }}><h3>Birth details</h3></div>
          <div className="field-grid">
            <div className="fg"><div className="fg-k">Date of birth</div><div className="fg-v">14 Aug 1991</div></div>
            <div className="fg"><div className="fg-k">Time</div><div className="fg-v">04:25 AM</div></div>
            <div className="fg"><div className="fg-k">Place</div><div className="fg-v">Madurai</div></div>
            <div className="fg"><div className="fg-k">Nakshatram</div><div className="fg-v"><span className="ta">ரோகிணி</span></div></div>
          </div>
        </div>

        <div>
          <div className="seclabel" style={{ marginBottom: 10 }}><h3>Last consultation note</h3></div>
          <div className="note">
            <div className="note-top">
              <span className="note-date">12 May 2026</span>
              <span className="note-svc">Jathagam reading</span>
            </div>
            <p>Sani peyarchi affecting career house. Advised gemstone + Thursday parihaaram. Follow up after Aadi for marriage muhurtham.</p>
          </div>
        </div>

        <div>
          <div className="seclabel" style={{ marginBottom: 12 }}><h3>History</h3><a>6 sittings</a></div>
          <div className="timeline">
            <div className="tl done"><div className="tl-t">Jathagam reading</div><div className="tl-d">12 May · ₹1,200 · paid</div></div>
            <div className="tl done"><div className="tl-t">Phone consultation</div><div className="tl-d">28 Mar · ₹600 · paid</div></div>
            <div className="tl done"><div className="tl-t">Muhurtham — Gruhapravesam</div><div className="tl-d">9 Feb · ₹900 · paid</div></div>
          </div>
        </div>
      </div>
    </>
  );
}

/* ───────────────────────── 3 · PUBLIC BOOKING ───────────────────────── */
function ScreenStore() {
  return (
    <>
      <div className="store-cover">
        <div className="chakra"></div>
        <div className="sc-back"><Icon name="arrowL" size={19} /></div>
        <div className="sc-share"><Icon name="share" size={18} /></div>
      </div>

      <div className="store-id">
        <div className="ph round"><span>photo</span></div>
        <div className="store-name">
          Anbazhagan Sharma
          <svg className="verify" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true">
            <path d="M12 1.5l2.4 1.8 3 .1.9 2.8 2.4 1.8-.9 2.9.9 2.9-2.4 1.8-.9 2.8-3 .1L12 22.5l-2.4-1.8-3-.1-.9-2.8L3.3 16l.9-2.9-.9-2.9 2.4-1.8.9-2.8 3-.1z"/>
            <path d="M8.5 12.2l2.3 2.3 4.7-4.7" fill="none" stroke="var(--surface)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div className="store-title">Vedic · Nadi · Prasanna astrologer</div>

        <div className="store-stats">
          <div className="ss"><div className="ss-v"><Icon name="star" size={15} /> 4.9</div><div className="ss-k">2,310 reviews</div></div>
          <div className="ss"><div className="ss-v">18 yrs</div><div className="ss-k">Experience</div></div>
          <div className="ss"><div className="ss-v">12k+</div><div className="ss-k">Consults</div></div>
        </div>
      </div>

      <div className="scroll-pad" style={{ gap: 11, marginTop: 16 }}>
        <div className="seclabel"><h3>Book a consultation</h3></div>

        <div className="svc">
          <div className="svc-ic"><Icon name="scroll" /></div>
          <div className="svc-main">
            <div className="svc-name">Jathagam reading</div>
            <div className="svc-meta"><Icon name="clock" /> 45 min · Video call</div>
          </div>
          <div className="svc-price"><b>₹1,200</b><span>Book</span></div>
        </div>

        <div className="svc">
          <div className="svc-ic"><Icon name="phone" /></div>
          <div className="svc-main">
            <div className="svc-name">Phone consultation</div>
            <div className="svc-meta"><Icon name="clock" /> 30 min · Phone</div>
          </div>
          <div className="svc-price"><b>₹600</b><span>Book</span></div>
        </div>

        <div className="svc">
          <div className="svc-ic"><Icon name="ring" /></div>
          <div className="svc-main">
            <div className="svc-name">Marriage matching</div>
            <div className="svc-meta"><Icon name="clock" /> 60 min · Video call</div>
          </div>
          <div className="svc-price"><b>₹1,500</b><span>Book</span></div>
        </div>

        <div className="svc">
          <div className="svc-ic"><Icon name="cal" /></div>
          <div className="svc-main">
            <div className="svc-name">Muhurtham timing</div>
            <div className="svc-meta"><Icon name="clock" /> 30 min · Phone</div>
          </div>
          <div className="svc-price"><b>₹900</b><span>Book</span></div>
        </div>

        <div className="powered"><span>Powered by</span><span className="logo-mark"></span></div>
      </div>
    </>
  );
}

/* ───────────────────────── 4 · PICK A TIME ───────────────────────── */
function ScreenSlots() {
  const days = [
    ["", ""], ["", ""], ["", ""], ["", ""], ["", ""], ["", ""], ["1", ""],
    ["2", ""], ["3", "has"], ["4", ""], ["5", "has"], ["6", "has"], ["7", ""], ["8", "has"],
    ["9", ""], ["10", "has"], ["11", "has"], ["12", "sel"], ["13", "has"], ["14", "has"], ["15", ""],
    ["16", "has"], ["17", "has"], ["18", ""], ["19", "has"], ["20", "has"], ["21", "has"], ["22", "has"],
  ];
  return (
    <>
      <div className="topbar">
        <div className="iconbtn"><Icon name="arrowL" /></div>
        <div className="tb-title" style={{ flex: 1 }}>Pick a time</div>
      </div>

      <div className="bk-summary">
        <div className="bks-ic"><Icon name="scroll" /></div>
        <div style={{ flex: 1 }}>
          <div className="bks-name">Jathagam reading</div>
          <div className="bks-meta">45 min · Video call · ₹1,200</div>
        </div>
        <span className="bks-edit">Change</span>
      </div>

      <div className="scroll-pad" style={{ gap: 18, marginTop: 18 }}>
        <div className="cal">
          <div className="cal-head">
            <b>June 2026</b>
            <div className="cal-nav">
              <button><Icon name="chevL" size={15} /></button>
              <button><Icon name="chevR" size={15} /></button>
            </div>
          </div>
          <div className="cal-grid">
            {["M", "T", "W", "T", "F", "S", "S"].map((d, i) => <div key={"d" + i} className="dow">{d}</div>)}
            {days.map(([n, cls], i) => (
              <div key={i} className={"day" + (cls ? " " + cls : "") + (!n ? " muteday" : "")}>{n}</div>
            ))}
          </div>
        </div>

        <div className="slots-wrap">
          <div className="slot-period"><Icon name="sun" /> Morning</div>
          <div className="slot-grid">
            <div className="slot gone">9:00</div>
            <div className="slot">10:00</div>
            <div className="slot">11:30</div>
          </div>
          <div className="slot-period" style={{ marginTop: 6 }}><Icon name="moon" /> Evening</div>
          <div className="slot-grid">
            <div className="slot">5:00</div>
            <div className="slot sel">5:30</div>
            <div className="slot">6:30</div>
            <div className="slot gone">7:15</div>
            <div className="slot">8:00</div>
            <div className="slot">8:45</div>
          </div>
        </div>
      </div>

      <div className="sticky-cta">
        <div className="sc-row">
          <div className="sc-price">
            <span>Thu, 12 Jun · 5:30 PM</span>
            <b>₹1,200</b>
          </div>
          <button className="btn btn-primary btn-lg" style={{ flex: 1 }}>Continue <Icon name="arrow" /></button>
        </div>
      </div>
    </>
  );
}

/* ───────────────────────── 5 · CONFIRMED ───────────────────────── */
function ScreenConfirmed() {
  return (
    <div className="confirm">
      <div className="confirm-top">
        <div className="rayfield"></div>
        <div className="tick"><Icon name="check" size={46} /></div>
        <h2>Booking confirmed</h2>
        <p className="csub">Paid via UPI. A confirmation with calendar invite is on its way to you.</p>
      </div>

      <div className="ticket">
        <div className="ticket-top">
          <div className="ph round"><span>photo</span></div>
          <div style={{ flex: 1 }}>
            <div className="tt-name">Anbazhagan Sharma</div>
            <div className="tt-svc">Jathagam reading · 45 min</div>
          </div>
          <span className="chip chip-accent"><Icon name="video" size={13} /> Video</span>
        </div>
        <div className="ticket-rows notch">
          <div className="trow">
            <span className="tk"><Icon name="cal" /> When</span>
            <span className="tv">Thu, 12 Jun · 5:30 PM</span>
          </div>
          <div className="trow">
            <span className="tk"><Icon name="wallet" /> Paid</span>
            <span className="tv paid">₹1,200 · UPI</span>
          </div>
          <div className="trow">
            <span className="tk"><Icon name="shield" /> Reference</span>
            <span className="tv">JK-7K2M9</span>
          </div>
        </div>
      </div>

      <div className="confirm-actions">
        <button className="btn btn-primary btn-lg btn-block"><Icon name="cal" /> Add to calendar</button>
        <div className="addcal"><Icon name="share" /> Share booking details</div>
      </div>
    </div>
  );
}

/* ───────────────────────── shared tab bar ───────────────────────── */
function TabBar({ active }) {
  const tabs = [["home", "Home"], ["cal", "Calendar"], ["users", "Clients"], ["wallet", "Payouts"]];
  return (
    <div className="tabbar">
      {tabs.map(([ic, label]) => (
        <div key={ic} className={"tab" + (active === ic || (active === "home" && ic === "home") ? " active" : "")}>
          <Icon name={ic} /><span>{label}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { ScreenDashboard, ScreenBrief, ScreenStore, ScreenSlots, ScreenConfirmed, TabBar });