/* Dealerships — the featured vertical, short.
 *
 * onlyWA is one app for any local business with a customer list, but it was
 * built inside a real Ranchi showroom first, and that is the only reason a
 * dealer should believe the vehicle features exist. So this block is proof,
 * not a second product: everything named here is shipped — the DMS import,
 * the four date reminders, Sales and Workshop on their own numbers, ad
 * results beside the leads they produced, and the showroom front door (a
 * dealership's whole menu on WhatsApp, 8 Oct 2026). The last line exists so
 * the 80% of visitors who are not dealers do not bounce.
 *
 * Since 10 Oct 2026 there is no dealer plan to point at: all of this is in
 * the one onlyWA plan and switches on because the business is a dealership,
 * so the button goes to the plan, not to an edition.
 */
function Dealers() {
  const points = [
    { t: 'Your DMS export goes straight in', d: 'Upload the CSV your DMS already produces — service, insurance, PUC and warranty dates included — with consent recorded per row.' },
    { t: 'Reminders write themselves', d: 'Service due, insurance expiry, PUC and warranty, each on an approved template, typically 30, 7 and 1 days out. A panel shows what goes out tomorrow.' },
    { t: 'Sales and Workshop on their own numbers', d: 'One login, one WhatsApp number per department, staff see only their own. After-sale follow-ups run per number.' },
    { t: 'A showroom menu on WhatsApp', d: 'Availability, price and offers, EMI, insurance, service, a sales executive, your location — each option collects the details and ends in a lead for the right desk.' },
  ];

  return (
    <section id="dealers" className="tight">
      <div className="wrap">
        <div className="deal">
          <div className="deal-copy">
            <div className="eyebrow">Built first for car dealerships</div>
            <h2>Your DMS knows when every service is due. <span className="serif">Now WhatsApp does too.</span></h2>
            <p>We built onlyWA inside a Ranchi dealership before we sold it to anyone. Ad results sit next to the WhatsApp leads they produced, so "did the ads work" has an answer on one screen.</p>
            <div className="deal-ctas">
              <a href="/pricing" className="btn primary">See pricing <Ic.arrow size={14} /></a>
              <a href="/dealersaarthi" className="btn ghost">DealerSaarthi, the full showroom</a>
            </div>
          </div>
          <ul className="deal-list">
            {points.map(p => (
              <li key={p.t}>
                <span className="deal-tick"><Ic.check size={13} strokeWidth={2.5} /></span>
                <div><h4>{p.t}</h4><p>{p.d}</p></div>
              </li>
            ))}
          </ul>
        </div>
        <p className="deal-note">
          Not a dealership? The vehicle reminders switch off and everything else stays — the same inbox, broadcasts and date reminders for any business with a customer list.
          Builders and developers get projects, site visits and buyer updates of their own: <a href="/builders" className="link">onlyWA for builders</a>.
        </p>
      </div>

      <style>{`
        .deal {
          display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start;
          border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper-2);
          padding: 44px;
        }
        html.dark .deal { background: var(--paper-3); }
        @media (max-width: 900px){ .deal { grid-template-columns: 1fr; gap: 32px; padding: 28px 22px; border-radius: var(--radius-lg); } }
        .deal-copy h2 { margin-top: 14px; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; }
        .deal-copy p { margin: 16px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; max-width: 44ch; }
        .deal-ctas { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
        .deal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
        .deal-list li { display: flex; gap: 14px; align-items: flex-start; }
        .deal-tick { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; margin-top: 1px; }
        .deal-list h4 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 4px; }
        .deal-list p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
        .deal-note { margin: 18px 4px 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 90ch; }
        @media (max-width: 620px){
          .deal-ctas .btn { width: 100%; }
        }
      `}</style>
    </section>
  );
}
window.Dealers = Dealers;