// landing-mocks.jsx — embedded product mini-mockups

// ─── Hero product preview ───────────────────────────────────────────────
function HeroPreview() {
  return (
    <div className="hp">
      <div className="hp-chrome">
        <span className="hp-dot" /><span className="hp-dot" /><span className="hp-dot" />
        <span className="hp-url">lomas.ai / aarav / today</span>
        <span className="hp-tag">● TUE · 14 JUN</span>
      </div>
      <div className="hp-body">
        <aside className="hp-side">
          <div className="hp-brand"><i /><b>Lomas</b></div>

          <div className="hp-mode">
            <span className="hp-mode-h">VIEW</span>
            <div className="hp-mode-tabs">
              <span className="hp-mode-tab">Life</span>
              <span className="hp-mode-tab">Work</span>
              <span className="hp-mode-tab on">Both</span>
            </div>
          </div>

          <div className="hp-side-group">
            <span className="hp-side-h">DAILY</span>
            <a className="hp-side-l on"><i className="dot" />Today</a>
            <a className="hp-side-l"><i className="dot dim" />Reminders <span className="hp-pill">7</span></a>
            <a className="hp-side-l"><i className="dot dim" />Ask Lomas</a>
            <a className="hp-side-l"><i className="dot dim" />Inbox <span className="hp-pill">12</span></a>
          </div>
          <div className="hp-side-group">
            <span className="hp-side-h">LIFE</span>
            <a className="hp-side-l"><i className="dot dim life" />Family</a>
            <a className="hp-side-l"><i className="dot dim life" />Health</a>
            <a className="hp-side-l"><i className="dot dim life" />Money</a>
          </div>
          <div className="hp-side-group">
            <span className="hp-side-h">WORK</span>
            <a className="hp-side-l"><i className="dot dim work" />Ledger</a>
            <a className="hp-side-l"><i className="dot dim work" />Invoices</a>
            <a className="hp-side-l"><i className="dot dim work" />GST · 3B <span className="hp-pill warn">DUE</span></a>
          </div>
        </aside>
        <main className="hp-main">
          <div className="hp-row">
            <div className="hp-h">
              <h3>Good morning, Aarav.</h3>
              <p><b>7 things</b> need you today. <span className="hp-link">See plan →</span></p>
            </div>
            <div className="hp-actions">
              <button className="hp-btn"><span className="hp-btn-ic">🎙</span>Hold to speak</button>
              <button className="hp-btn primary">Plan my day</button>
            </div>
          </div>

          <div className="hp-kpis">
            <div className="hp-kpi">
              <span className="hp-kpi-l"><span className="kpi-chip life">LIFE</span> Next reminder</span>
              <span className="hp-kpi-v">Mom · meds</span>
              <span className="hp-kpi-d">9:30 AM · 22 min</span>
            </div>
            <div className="hp-kpi">
              <span className="hp-kpi-l"><span className="kpi-chip life">LIFE</span> Spending · week</span>
              <span className="hp-kpi-v">₹ 8,240</span>
              <span className="hp-kpi-d up">↘ 12% vs avg</span>
            </div>
            <div className="hp-kpi">
              <span className="hp-kpi-l"><span className="kpi-chip work">WORK</span> Outstanding dues</span>
              <span className="hp-kpi-v">₹ 1.42 L</span>
              <span className="hp-kpi-d">4 customers · chasing</span>
            </div>
            <div className="hp-kpi">
              <span className="hp-kpi-l"><span className="kpi-chip work">WORK</span> Revenue · June</span>
              <span className="hp-kpi-v">₹ 14.82 L</span>
              <span className="hp-kpi-d up">↗ 11.3%</span>
            </div>
          </div>

          <div className="hp-grid">
            <div className="hp-panel hp-plan">
              <div className="hp-panel-h">
                <span>Today's plan</span>
                <span className="hp-tab on">Auto-built · 6:02 AM</span>
              </div>
              <ul className="hp-plan-list">
                <li>
                  <span className="hp-pl-t">09:30</span>
                  <span className="hp-pl-tag life">LIFE</span>
                  <span className="hp-pl-x">Remind Mom — BP medicine · WhatsApp draft ready</span>
                </li>
                <li>
                  <span className="hp-pl-t">10:00</span>
                  <span className="hp-pl-tag work">WORK</span>
                  <span className="hp-pl-x">Send Sharma-ji firm reminder · ₹ 42,300 · 11 days overdue</span>
                </li>
                <li>
                  <span className="hp-pl-t">11:30</span>
                  <span className="hp-pl-tag life">LIFE</span>
                  <span className="hp-pl-x">Renew car insurance · expires Friday · 3 quotes ready</span>
                </li>
                <li>
                  <span className="hp-pl-t">14:00</span>
                  <span className="hp-pl-tag work">WORK</span>
                  <span className="hp-pl-x">Approve June GSTR-3B draft · ₹ 47,118 · filing Friday</span>
                </li>
                <li>
                  <span className="hp-pl-t">17:30</span>
                  <span className="hp-pl-tag life">LIFE</span>
                  <span className="hp-pl-x">Anjali's school PTM — leave by 5 to make it on time</span>
                </li>
                <li>
                  <span className="hp-pl-t">19:00</span>
                  <span className="hp-pl-tag life">LIFE</span>
                  <span className="hp-pl-x">Rakesh's wedding card · pick up from press</span>
                </li>
                <li className="hp-pl-done">
                  <span className="hp-pl-t">— —</span>
                  <span className="hp-pl-tag done">DONE</span>
                  <span className="hp-pl-x">Posted ₹ 8,420 fuel · WhatsApp from driver Khanna</span>
                </li>
              </ul>
            </div>
            <div className="hp-panel">
              <div className="hp-panel-h">
                <span>Recent activity</span>
                <span className="hp-tab on">Live</span>
              </div>
              <ul className="hp-feed">
                <li><i className="hp-tick" />Logged ₹ 380 — chai for the office</li>
                <li><i className="hp-tick" />Mom's medicine ordered · delivery today</li>
                <li><i className="hp-tick" />Posted ₹ 8,420 fuel · truck 4471</li>
                <li><i className="hp-tick warn" />Sharma-ji overdue · 11 days</li>
                <li><i className="hp-tick" />Saved birthday for Priya · 21 July</li>
                <li><i className="hp-tick" />47 receipts read from WhatsApp</li>
              </ul>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

// ─── Mock 1 · Receipt to Journal ─────────────────────────────────────────
function MockReceipt() {
  return (
    <div className="m-rc">
      <div className="m-rc-paper">
        <div className="m-rc-h">INDIAN OIL · KHANNA</div>
        <div className="m-rc-l"><span>DIESEL</span><span>62 L</span></div>
        <div className="m-rc-l"><span>RATE</span><span>₹ 89.40</span></div>
        <div className="m-rc-l"><span>GST 18%</span><span>₹ 1,001</span></div>
        <div className="m-rc-l m-rc-tot"><span>TOTAL</span><span>₹ 8,420</span></div>
        <div className="m-rc-scanner" />
      </div>
      <div className="m-rc-flow">
        <span className="m-rc-arrow">→</span>
      </div>
      <div className="m-rc-card">
        <div className="m-rc-card-h">JOURNAL · #J-7842</div>
        <div className="m-rc-card-r">
          <span className="dr">DR</span>
          <span>Fuel Expense</span>
          <span className="amt">₹ 7,419</span>
        </div>
        <div className="m-rc-card-r">
          <span className="dr">DR</span>
          <span>Input GST</span>
          <span className="amt">₹ 1,001</span>
        </div>
        <div className="m-rc-card-r">
          <span className="cr">CR</span>
          <span>HDFC Current</span>
          <span className="amt">₹ 8,420</span>
        </div>
        <div className="m-rc-stamp">● POSTED</div>
      </div>
    </div>
  );
}

// ─── Mock 2 · GST Filing ─────────────────────────────────────────────────
function MockGST() {
  return (
    <div className="m-gst">
      <div className="m-gst-head">
        <div>
          <div className="m-gst-k">GSTR-3B · JUNE 2026</div>
          <div className="m-gst-org">Pathak Textiles · 03ABCDE1234F1Z5</div>
        </div>
        <span className="m-gst-status">● Ready to file</span>
      </div>
      <div className="m-gst-rows">
        <div className="m-gst-row"><span>3.1(a) Outward taxable</span><span>₹ 14,82,000</span></div>
        <div className="m-gst-row"><span>4(A)(5) ITC available</span><span>₹ 1,23,440</span></div>
        <div className="m-gst-row"><span>Net liability</span><span className="hl">₹ 47,118</span></div>
        <div className="m-gst-row"><span>Due date</span><span>20 Jul 2026</span></div>
      </div>
      <div className="m-gst-cta">
        <button className="m-gst-btn">File on 18 Jul, 06:00 IST</button>
        <span className="m-gst-hint">Auto-pause anytime · 1-click submit</span>
      </div>
    </div>
  );
}

// ─── Mock 3 · Bank Reconciliation ────────────────────────────────────────
function MockBank() {
  const rows = [
    { d: '06.14', desc: 'IMPS · KHANNA DEPOT', amt: '−₹ 8,420', match: 'matched' },
    { d: '06.14', desc: 'NEFT · STRIPE PAYOUT', amt: '+₹ 4,12,890', match: 'matched' },
    { d: '06.13', desc: 'UPI · BLUE TOKAI', amt: '−₹ 3,840', match: 'matched' },
    { d: '06.13', desc: 'ACH · TATA POWER', amt: '−₹ 9,820', match: 'review' },
    { d: '06.12', desc: 'IMPS · ZOMATO', amt: '−₹ 1,840', match: 'matched' }
  ];
  return (
    <div className="m-bk">
      <div className="m-bk-head">
        <span className="m-bk-bank">HDFC · CURRENT · ****4471</span>
        <span className="m-bk-prog"><i style={{width: '92%'}} /> 92% reconciled</span>
      </div>
      <div className="m-bk-rows">
        {rows.map((r, i) => (
          <div key={i} className={'m-bk-row ' + r.match}>
            <span className="d">{r.d}</span>
            <span className="ds">{r.desc}</span>
            <span className={'amt ' + (r.amt.startsWith('+') ? 'pos' : 'neg')}>{r.amt}</span>
            <span className="tag">{r.match === 'matched' ? '✓ MATCHED' : '⚠ REVIEW'}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Mock 4 · P&L Report Written in Plain English ───────────────────────
function MockReport() {
  return (
    <div className="m-rp">
      <div className="m-rp-head">
        <span className="m-rp-k">MEMO · JUNE 2026</span>
        <span className="m-rp-by">Written by Lomas · 04:02 IST</span>
      </div>
      <div className="m-rp-body">
        <p>
          June was your <span className="m-rp-up">best fuel month</span> in fourteen.
          Revenue up <span className="m-rp-up">11.3%</span>, driven by the Karnataka contract.
        </p>
        <p>
          Two anomalies caught: <span className="m-rp-warn">Khanna depot double-billed</span> on 06.07 —
          refund of ₹ 14,200 requested.
        </p>
        <p>
          GSTR-3B is computed at <span className="m-rp-up">₹ 47,118</span>. Filing Friday at 06:00 IST.
        </p>
      </div>
      <div className="m-rp-foot">
        P&L · CASH FLOW · BALANCE SHEET — ready for your CA
      </div>
    </div>
  );
}

// ─── Mock 1 · Voice → Ledger entries ─────────────────────────────────────
function MockVoice() {
  return (
    <div className="m-vc">
      <div className="m-vc-mic">
        <div className="m-vc-mic-dot" />
        <span>● LISTENING</span>
      </div>
      <div className="m-vc-wave" aria-hidden="true">
        {Array.from({ length: 28 }).map((_, i) => (
          <span key={i} style={{ '--i': i, '--h': 30 + Math.abs(Math.sin(i * 0.6)) * 70 + '%' }} />
        ))}
      </div>
      <div className="m-vc-transcript">
        <span className="m-vc-said">“आज दस कुर्ते बेचे, सात सौ के रेट से, पचास का discount”</span>
        <span className="m-vc-en">“Sold ten kurtas today at ₹700 each, ₹50 discount each”</span>
      </div>
      <div className="m-vc-out">
        <div className="m-vc-out-row">
          <span className="dr">DR</span>
          <span>Cash · Counter</span>
          <span className="amt">₹ 6,500</span>
        </div>
        <div className="m-vc-out-row">
          <span className="dr">CR</span>
          <span>Sales · Kurta</span>
          <span className="amt">₹ 7,000</span>
        </div>
        <div className="m-vc-out-row">
          <span className="dr alt">CR</span>
          <span>Discount allowed</span>
          <span className="amt">₹ 500</span>
        </div>
        <div className="m-vc-stamp">● POSTED · 14:02</div>
      </div>
    </div>
  );
}

// ─── Mock 2 · WhatsApp payment reminder ──────────────────────────────────
function MockWhatsApp() {
  return (
    <div className="m-wa">
      <div className="m-wa-head">
        <div className="m-wa-av" />
        <div>
          <div className="m-wa-name">Sharma-ji · Wholesale</div>
          <div className="m-wa-sub">Online · last seen 12:42</div>
        </div>
        <span className="m-wa-tag">via Lomas</span>
      </div>
      <div className="m-wa-msgs">
        <div className="m-wa-bubble out">
          <p>Namaste Sharma-ji 🙏 Bill #1209 for ₹ 42,300 is due — 3 days overdue. Convenient to clear today?</p>
          <span className="m-wa-time">10:02 AM ✓✓</span>
        </div>
        <div className="m-wa-bubble in">
          <p>Sorry yaar, bhej raha hoon abhi. UPI link bhejo</p>
          <span className="m-wa-time">10:14 AM</span>
        </div>
        <div className="m-wa-bubble out">
          <p>Of course — <span className="m-wa-link">upi://lomas/pathak?amt=42300</span></p>
          <span className="m-wa-time">10:14 AM ✓✓</span>
        </div>
        <div className="m-wa-pay">
          <span>● Payment received · ₹ 42,300 · HDFC ****4471</span>
        </div>
      </div>
    </div>
  );
}

// ─── Mock 3 · Assistant chat ─────────────────────────────────────────────
function MockAssistant() {
  return (
    <div className="m-as">
      <div className="m-as-head">
        <span className="m-as-l">Ask Lomas</span>
        <span className="m-as-r">All-time data</span>
      </div>
      <div className="m-as-q">
        <span className="m-as-bullet">?</span>
        “Kitna baaki hai Sharma-ji se?”
      </div>
      <div className="m-as-a">
        <p>
          <b>₹ 1,12,400</b> across 3 invoices. Oldest is <b>#1186</b> (₹ 42,300), due 11 days ago.
          Two reminders sent. Last reply: <em>“bhej raha hoon abhi”</em> on 12 June.
        </p>
        <div className="m-as-actions">
          <button className="m-as-act primary">Send firmer reminder</button>
          <button className="m-as-act">See full history</button>
        </div>
      </div>
      <div className="m-as-foot">
        Sourced from 47 voice notes · 12 WhatsApp threads · 2 bank ledgers
      </div>
    </div>
  );
}

// ─── Mock 4 · Friday insight memo ────────────────────────────────────────
function MockInsight() {
  return (
    <div className="m-in">
      <div className="m-in-head">
        <span className="m-in-k">MEMO · WEEK 24</span>
        <span className="m-in-by">Written by Lomas · Friday 06:02</span>
      </div>
      <div className="m-in-body">
        <p>
          Kurta sales up <span className="m-in-up">31%</span> this week — third Friday in a row.
          Push the same SKUs to <span className="m-in-up">Surat customers</span>; pattern is strong.
        </p>
        <p>
          <span className="m-in-warn">Sharma-ji owes ₹ 1.12 L</span> across three invoices.
          Send a personal call — past data shows replies but no follow-through on WhatsApp alone.
        </p>
        <p>
          Diesel up <span className="m-in-warn">18%</span> month-on-month, mostly on the Mumbai run.
          Check driver Rakesh — claim is ₹ 22% above route average.
        </p>
      </div>
      <div className="m-in-foot">
        Three things to do Monday · Tap a sentence to act
      </div>
    </div>
  );
}

Object.assign(window, { HeroPreview, MockReceipt, MockGST, MockBank, MockReport, MockVoice, MockWhatsApp, MockAssistant, MockInsight });