/* DealerSaarthi — the flagship product page.
 * Built on the same design system as the rest of the site (pp-* classes,
 * Geist + Instrument Serif, mint accent). Reuses Nav + Footer.
 * Lives at /dealersaarthi (see vercel.json + dealersaarthi.html shell).
 */

function DSStage() {
  return (
    <div className="ds-stage" aria-hidden="true">
      <div className="ds-snap">
        <div className="ds-snap-top">
          <span className="eyebrow">Showroom · today</span>
          <span className="ds-live">● live</span>
        </div>
        <div className="ds-snap-row">
          <div><div className="ds-big">7</div><div className="ds-cap">new leads</div></div>
          <div><div className="ds-big">3</div><div className="ds-cap">test drives</div></div>
          <div><div className="ds-big">2</div><div className="ds-cap">booked</div></div>
        </div>
      </div>

      <div className="ds-leads">
        <div className="ds-leads-h"><span className="eyebrow">Live pipeline</span></div>
        <div className="ds-lead">
          <div><div className="ds-car">Maruti Swift VXI · 2019</div><div className="ds-meta">WhatsApp · 2 min ago</div></div>
          <span className="ds-pill new">New</span>
        </div>
        <div className="ds-lead">
          <div><div className="ds-car">Hyundai Creta SX · 2021</div><div className="ds-meta">Test drive · today 6 PM</div></div>
          <span className="ds-pill book">Booked</span>
        </div>
        <div className="ds-lead">
          <div><div className="ds-car">Honda City ZX · 2020</div><div className="ds-meta">Follow-up · auto-sent</div></div>
          <span className="ds-pill done">Replied</span>
        </div>
      </div>

      <div className="ds-chat">
        <div className="ds-chat-top"><span className="ds-chat-pfp">D</span><div><div className="ds-chat-nm">DealerSaarthi</div><div className="ds-chat-st">● on your number</div></div></div>
        <div className="ds-bub in">Swift 2019 available hai?</div>
        <div className="ds-bub out">Haan ji! 42k km, ₹5.6L. Test drive kab rakhein? <span className="ds-t">10:02 ✓✓</span></div>
      </div>

      <style>{`
        .ds-stage { position: relative; display: flex; flex-direction: column; gap: 14px; }
        .ds-snap { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow); }
        .ds-snap-top { display: flex; align-items: center; justify-content: space-between; }
        .ds-snap .eyebrow { color: color-mix(in oklab, var(--paper) 58%, var(--ink)); }
        .ds-live { font: 500 10px/1 var(--f-mono); color: var(--accent); text-transform: uppercase; letter-spacing: .12em; }
        .ds-snap-row { display: flex; gap: 28px; margin-top: 14px; }
        .ds-big { font-family: var(--f-serif); font-style: italic; font-size: 40px; line-height: 1; letter-spacing: -.02em; }
        .ds-cap { font-size: 12px; color: color-mix(in oklab, var(--paper) 55%, var(--ink)); margin-top: 4px; }

        .ds-leads { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); }
        .ds-leads-h { margin-bottom: 6px; }
        .ds-lead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
        .ds-lead:last-child { border-bottom: none; }
        .ds-car { font-size: 13.5px; font-weight: 500; }
        .ds-meta { font-size: 11.5px; color: var(--muted); font-family: var(--f-mono); margin-top: 2px; }
        .ds-pill { font: 600 10px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; white-space: nowrap; }
        .ds-pill.new { background: var(--accent-soft); color: var(--accent-ink); }
        .ds-pill.book { background: var(--ink); color: var(--paper); }
        .ds-pill.done { background: var(--paper-3); color: var(--muted); }

        .ds-chat { background: #0b3621; border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow); }
        .ds-chat-top { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.08); }
        .ds-chat-pfp { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--f-serif); font-style: italic; font-weight: 600; }
        .ds-chat-nm { color: #eaf3ee; font-size: 13px; font-weight: 500; }
        .ds-chat-st { color: var(--accent); font-size: 11px; }
        .ds-bub { max-width: 86%; font-size: 12.5px; line-height: 1.4; padding: 8px 11px; border-radius: 11px; margin-bottom: 8px; }
        .ds-bub.in { background: #1f3b2e; color: #dce9e2; border-bottom-left-radius: 4px; }
        .ds-bub.out { background: #005c4b; color: #eafff4; margin-left: auto; border-bottom-right-radius: 4px; }
        .ds-t { display: block; font-size: 9px; opacity: .7; text-align: right; margin-top: 3px; }

        @media (max-width: 900px) { .ds-stage { margin-top: 8px; } }
      `}</style>
    </div>
  );
}

function DSHero() {
  return (
    <section className="pp-hero pp-tone-paper">
      <div className="wrap">
        <a href="/products" className="pp-back"><span aria-hidden="true">←</span> onlyWA products</a>
        <div className="pp-hero-grid">
          <div>
            <div className="pp-eyebrow"><span className="pp-eyebrow-dot" /> Flagship product · Live in real showrooms</div>
            <h1 className="pp-title">The operating system for <span className="serif">used-car dealers</span>.</h1>
            <p className="pp-sub">Every lead, car, booking, follow-up and rupee — in one screen. Built by a dealer who's run a showroom since 1992, and runs it on DealerSaarthi every single day.</p>
            <div className="pp-cta-row">
              <a href="https://wa.me/918873002702?text=Hi!%20I'd%20like%20a%20DealerSaarthi%20demo%20for%20my%20showroom." className="btn primary" target="_blank" rel="noreferrer">Book a demo <Ic.arrow size={14} /></a>
              <a href="#ds-how" className="btn ghost">How it works</a>
            </div>
          </div>
          <DSStage />
        </div>
      </div>
    </section>
  );
}

function DSCapabilities() {
  const caps = [
    { t: "Inventory & listings", b: "Every car — photos, price, condition, status. Auto-syncs to your own website and marketplace feeds the moment stock changes." },
    { t: "Leads + CRM", b: "Buyer and seller leads from WhatsApp, web, and ads land in one pipeline. Each one owned, claimed, and followed up — nothing slips." },
    { t: "WhatsApp follow-up", b: "A bot on your own number answers in seconds, sends photos and price, and books the test drive — 24/7, even at 2am." },
    { t: "Bookings & test drives", b: "Slot-based scheduling with reminders and no-show follow-ups. Your floor team always knows who's coming and when." },
    { t: "Finance & deal desk", b: "Quotation, down payment, dues and margin — clean numbers on every deal, in one place your accountant trusts." },
    { t: "Your own website", b: "A branded site that lists your live stock automatically. Every visit ends in a WhatsApp chat to you." },
  ];
  return (
    <section className="pp-block">
      <div className="wrap">
        <div className="sec-head">
          <h2>One system for the <span className="serif">whole showroom</span>.</h2>
          <p>The pieces a used-car dealer juggles across registers, Sheets and WhatsApp — finally under one roof.</p>
        </div>
        <div className="pp-cap-grid">
          {caps.map((c, i) => (
            <div key={i} className="pp-cap">
              <div className="pp-cap-check"><Ic.check size={14} /></div>
              <div className="pp-cap-title">{c.t}</div>
              <div className="pp-cap-body">{c.b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DSEvidence() {
  const points = [
    "WhatsApp Cloud API bot routes buyer leads, inventory queries and test-drive bookings",
    "Buyer + seller (C2C) + workshop pipelines, claimed by sales execs in real time",
    "Live inventory feed into the website and Meta Business AI — never stale",
    "KPI snapshots feed an owner dashboard you actually open every morning",
  ];
  const tech = ["WhatsApp Cloud API", "Next.js", "MongoDB", "Meta Webhooks", "Role-based admin"];
  return (
    <section className="pp-block">
      <div className="wrap">
        <div className="pp-evidence">
          <div className="pp-evidence-tag">Live deployment</div>
          <h3 className="pp-evidence-headline">Runs a working used-car dealership in India today — 48,000+ customers and 1,00,000+ WhatsApp messages flowing through one system.</h3>
          <ul className="pp-evidence-points">
            {points.map((pt, i) => (
              <li key={i}><span className="pp-evidence-bullet"><Ic.check size={12} /></span>{pt}</li>
            ))}
          </ul>
          <div className="pp-tech-row">
            {tech.map(t => <span key={t} className="pp-tech-chip">{t}</span>)}
          </div>
        </div>
      </div>
    </section>
  );
}

function DSHowItWorks() {
  const steps = [
    { n: "01", t: "Bring your stock in.", b: "We import your current inventory and customer list. Day one, your real cars are in the system." },
    { n: "02", t: "Wire your WhatsApp.", b: "Cloud API on your own number, bot scripted in your showroom's voice and approved by Meta." },
    { n: "03", t: "Go live in days.", b: "Website, lead pipeline and bookings switched on. Your team trained in an afternoon." },
    { n: "04", t: "We tune to your floor.", b: "First weeks, we adjust the flows to exactly how your showroom actually works." },
  ];
  return (
    <section id="ds-how" className="pp-block pp-tone-paper-2">
      <div className="wrap">
        <div className="sec-head">
          <h2>From your register to live — <span className="serif">in days</span>.</h2>
          <p>No six-month software project. We've done this on a real showroom; yours is next.</p>
        </div>
        <div className="pp-steps">
          {steps.map((s, i) => (
            <div key={i} className="pp-step">
              <div className="pp-step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DSCTA() {
  return (
    <section className="pp-block">
      <div className="wrap">
        <div className="pp-cta-card">
          <div>
            <div className="pp-eyebrow"><span className="pp-eyebrow-dot" /> See it live</div>
            <h2 className="pp-cta-title">Want this running in your showroom?</h2>
            <p className="pp-cta-sub">A 15-minute demo on the live system — not a slideshow. We'll show you exactly how it would run on your stock.</p>
          </div>
          <div className="pp-cta-actions">
            <a href="https://wa.me/918873002702?text=Hi!%20I'd%20like%20a%20DealerSaarthi%20demo%20for%20my%20showroom." className="btn primary" target="_blank" rel="noreferrer">Book a demo <Ic.arrow size={14} /></a>
            <a href="https://wa.me/918873002702" className="btn ghost" target="_blank" rel="noreferrer"><Ic.waLogo size={16} /> WhatsApp us</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function DealerSaarthi() {
  return (
    <>
      <DSHero />
      <DSCapabilities />
      <DSEvidence />
      <DSHowItWorks />
      <DSCTA />
    </>
  );
}
window.DealerSaarthi = DealerSaarthi;