/* /builders — onlyWA for builders and developers.
 *
 * Why this page exists: builders are the second vertical the app is built for
 * (projects, units, site visits, bookings, progress updates — all shipped on
 * 10 Sep 2026, see docs/REAL-ESTATE-ROADMAP.md), but until now the site had
 * nowhere to send one. The /demo/realty link existed and no page pointed at
 * it; a builder who clicked an ad landed on a page about service reminders
 * for cars.
 *
 * What it says, in this order: the four moments of a builder's day that the
 * app puts on WhatsApp (roadmap §2.1, §2.2, §2.4 and the channel-partner desk
 * W5), then broadcasts and the owner's evening summary, then what it
 * deliberately does not do. The "does not" block is part of the pitch, not a
 * disclaimer: a builder's fear is a bot that quotes the wrong price or asks
 * for money on WhatsApp, and saying plainly that it never does is what makes
 * the rest believable.
 *
 * Rules this file keeps (docs/MARKETING.md §1):
 *  - Say the job, not the category. No "platform", "CRM", "engagement".
 *  - No invented numbers. Every figure in an illustration belongs to
 *    Aarambh Developers, the FICTIONAL builder from the app's demo
 *    (src/app/mock.jsx), and the illustration says so. No real client's
 *    name appears here, ever — this page is shared with prospects.
 *  - No prices. Our fee lives in pricing.jsx and Meta's rates on /pricing;
 *    a figure typed here would be a third copy that drifts.
 *
 * Same design system as dealersaarthi.jsx (pp-* classes from styles.css,
 * tokens only so html.dark keeps working); page-scoped CSS below is prefixed
 * .bl-. Mounted by builders.html with Nav + Footer. Lives at /builders
 * (cleanUrls in vercel.json serves builders.html there).
 */

// The platform's own number, as in contact.jsx. The `DEMO BUILDERS` prefix is
// the entry code: the onlyWA demo journey files it as entry:BUILDERS, so the
// Journeys funnel shows how many builders came from this page
// (docs/DEMO-NUMBER.md → Entry codes).
const BL_WA_HREF = 'https://wa.me/919288416463?text=' + encodeURIComponent('DEMO BUILDERS');
// A redirect in vercel.json to the app running on the fictional builder's
// fixtures (/app?mock=1&industry=real_estate). Nothing a visitor does there
// reaches a server, which is why it is safe to hand to anyone.
const BL_DEMO_HREF = '/demo/realty';

/* The hero illustration: an enquiry answered, and the availability chart the
 * app draws from the units table. Both are pictures of real screens with the
 * demo builder's data — aria-hidden because the copy beside it already says
 * everything they show. */
function BLStage() {
  // Tower B, floors 6 → 1, four flats a floor. a = available, h = on hold,
  // b = booked. Illustrative only; the real chart is rendered per project.
  const floors = [
    ['6', 'aabh'], ['5', 'abba'], ['4', 'bbab'],
    ['3', 'bhbb'], ['2', 'bbbb'], ['1', 'babb'],
  ];
  return (
    <div className="bl-stage" aria-hidden="true">
      <div className="bl-chat">
        <div className="bl-chat-top">
          <span className="bl-chat-pfp">A</span>
          <div><div className="bl-chat-nm">Aarambh Developers</div><div className="bl-chat-st">● your own number</div></div>
        </div>
        <div className="bl-bub in">Shanti Crest mein 3BHK ka rate kya hai? <span className="bl-t">11:04 pm</span></div>
        <div className="bl-bub out">
          <strong>Shanti Crest Residency</strong> · Kanke Road<br />
          3BHK, 1,550 sq ft carpet — around ₹84–88 L as of today. Our executive confirms the exact unit and price.<br />
          <span className="bl-dim">RERA: JHRERA/PRJ/RAN/2025/00412 (demo)</span>
          <span className="bl-t">11:04 pm ✓✓</span>
        </div>
        <div className="bl-btns">
          <span>Book a site visit</span><span>Send price list</span><span>Call me</span>
        </div>
      </div>

      <div className="bl-chart">
        <div className="bl-chart-top">
          <span className="eyebrow">Tower B · availability</span>
          <span className="bl-asof">as of today, 6:40 pm</span>
        </div>
        <div className="bl-floors">
          {floors.map(([f, row]) => (
            <div className="bl-floor" key={f}>
              <span className="bl-fl">{f}</span>
              {row.split('').map((s, i) => <span key={i} className={`bl-u bl-u-${s}`} />)}
            </div>
          ))}
        </div>
        <div className="bl-legend">
          <span><i className="bl-u bl-u-a" /> available</span>
          <span><i className="bl-u bl-u-h" /> on hold</span>
          <span><i className="bl-u bl-u-b" /> booked</span>
        </div>
      </div>

      <p className="bl-stage-note">Illustration from the demo app. Aarambh Developers is a fictional builder.</p>

      <style>{`
        .bl-stage { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

        /* WhatsApp's own dark palette, like .ds-chat — the chat is a picture
           of WhatsApp, so it stays WhatsApp-coloured in either site theme. */
        .bl-chat { background: #0b3621; border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow); }
        .bl-chat-top { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.08); }
        .bl-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; }
        .bl-chat-nm { color: #eaf3ee; font-size: 13px; font-weight: 500; }
        .bl-chat-st { color: var(--accent); font-size: 11px; }
        .bl-bub { max-width: 88%; font-size: 12.5px; line-height: 1.45; padding: 8px 11px; border-radius: 11px; margin-bottom: 8px; }
        .bl-bub.in { background: #1f3b2e; color: #dce9e2; border-bottom-left-radius: 4px; }
        .bl-bub.out { background: #005c4b; color: #eafff4; margin-left: auto; border-bottom-right-radius: 4px; }
        .bl-dim { opacity: .72; font-size: 11.5px; }
        .bl-t { display: block; font-size: 9px; opacity: .7; text-align: right; margin-top: 3px; }
        .bl-btns { display: flex; flex-direction: column; gap: 5px; max-width: 88%; margin-left: auto; }
        .bl-btns span { background: #005c4b; color: #7fe0c0; font-size: 12px; text-align: center; padding: 7px 10px; border-radius: 9px; }

        .bl-chart { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); }
        .bl-chart-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
        .bl-asof { font: 500 10.5px/1 var(--f-mono); color: var(--muted); }
        .bl-floors { display: flex; flex-direction: column; gap: 5px; }
        .bl-floor { display: flex; align-items: center; gap: 5px; }
        .bl-fl { width: 18px; font: 500 11px/1 var(--f-mono); color: var(--muted); }
        .bl-u { display: inline-block; width: 38px; height: 16px; border-radius: 4px; }
        .bl-u-a { background: var(--accent); }
        .bl-u-h { background: #f5a524; }
        .bl-u-b { background: color-mix(in oklab, var(--ink) 22%, var(--paper)); }
        .bl-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
        .bl-legend span { display: inline-flex; align-items: center; gap: 6px; }
        .bl-legend .bl-u { width: 12px; height: 12px; border-radius: 3px; }

        .bl-stage-note { margin: 0; font-size: 12px; color: var(--muted); }

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

function BLHero() {
  return (
    <section className="pp-hero pp-tone-paper">
      <div className="wrap">
        <a href="/" className="pp-back"><span aria-hidden="true">←</span> Home</a>
        <div className="pp-hero-grid">
          <div>
            <div className="pp-eyebrow"><span className="pp-eyebrow-dot" /> onlyWA · for builders and developers</div>
            <h1 className="pp-title">Answer every enquiry and every buyer on WhatsApp — <span className="serif">from your own number</span>.</h1>
            <p className="pp-sub">
              The brochure and price band in seconds, even at 11 pm. Site visits booked and reminded.
              Construction updates in every buyer's chat until possession. Every lead a channel partner
              sends, registered with the time. One app your whole sales team replies from.
            </p>
            <div className="pp-cta-row">
              <a href={BL_DEMO_HREF} className="btn primary">See the builder demo <Ic.arrow size={14} /></a>
              <a href={BL_WA_HREF} className="btn ghost" target="_blank" rel="noreferrer"><Ic.waLogo size={16} /> Ask us on WhatsApp</a>
            </div>
            {/* Said up front because the demo is the fixture, not a login: a
                builder should know before clicking that nothing they try there
                sends a real message. */}
            <p className="bl-hero-note">The demo opens the real app on a fictional builder's projects. Click anything; nothing is sent.</p>
          </div>
          <BLStage />
        </div>
      </div>
      <style>{`
        .bl-hero-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); max-width: 52ch; }
      `}</style>
    </section>
  );
}

/* The four moments, in the order a buyer lives them. Each "points" line names
 * something that is shipped today — if a line here stops being true, the line
 * goes, not the caveat. Where each one lives (checked 18 Sep 2026):
 *   01  journeys/presets.js realty_lead_intake (brochure, dated price lines,
 *       RERA line, the three buttons, sets interested_project_id)
 *   02  vertical/real_estate.js site_visit_reminder [1, 0] — sent by the
 *       morning reminders run (09:00–12:00 IST), so "the day before", not
 *       "the evening before" as the roadmap first had it; automations
 *       post_visit_nudge and site_visit_no_show; the #/site-visits board
 *   03  bookings/upsert.js (the "Your home" card), projects/progress.js,
 *       agreement_due / registry_due / possession_soon
 *   04  _lib/cp.js (contact card → registration, 60-day window, refusal
 *       without naming the other partner), cron/cp-digest.js (Monday board);
 *       availability on request is the AI assistant's send_availability_chart
 *       tool, so that line says it needs the assistant. */
function BLMoments() {
  const moments = [
    {
      n: '01',
      t: 'An enquiry gets its answer in seconds',
      b: 'Whether they tapped a Facebook ad, scanned the QR code on a hoarding or typed the project\'s name, the reply arrives while they are still looking.',
      points: [
        'Brochure, price band on carpet area, location and RERA number',
        'Three buttons: book a site visit, send the price list, call me',
        'Every price is dated "as of", so nobody is quoted last month\'s rate',
        'The lead lands in your list, filed under the project they asked about',
      ],
    },
    {
      n: '02',
      t: 'Site visits booked, reminded and followed up',
      b: 'Weekend slots offered first, because that is when families visit. Your team sees today\'s visits on one board.',
      points: [
        'A confirmation with the location and who will meet them',
        'A reminder the day before, and again on the morning of the visit',
        'Visited but not booked: a thank-you and the price list the next day',
        'No-show: two new slots the same day, one more nudge three days on',
      ],
    },
    {
      n: '03',
      t: 'Buyers hear from you until possession',
      b: 'Delay and silence are what buyers complain about between booking and possession. You cannot always fix the first; one photo and one line a month fixes the second.',
      points: [
        'A "Your home" card at booking: project, unit, possession date',
        'Post a progress photo once; every buyer of that project gets it',
        'Reminders for agreement, registry and possession dates',
        'No demand notes and no payment requests, ever',
      ],
    },
    {
      n: '04',
      t: 'A channel-partner desk on WhatsApp',
      b: '"Who brought this client?" ends when every lead a partner sends carries a time stamp.',
      points: [
        'A partner forwards a contact card and gets it registered to them, with the time',
        'Another partner is told the lead is taken, without being told by whom',
        'With the AI assistant on, partners ask what is left and get the dated chart',
        'Every Monday, each partner\'s rank by bookings — no commission figures',
      ],
    },
  ];
  return (
    <section id="bl-moments" className="pp-block">
      <div className="wrap">
        <div className="sec-head">
          <h2>Four moments of a builder's day, <span className="serif">on WhatsApp</span>.</h2>
          <p>Each one used to be a phone call someone forgot to make. Now it goes out from your number on its own, and your team steps in when a buyer wants a person.</p>
        </div>
        <div className="bl-moments">
          {moments.map(m => (
            <article key={m.n} className="bl-moment fade-in-up">
              <div className="pp-step-num">{m.n}</div>
              <h3>{m.t}</h3>
              <p>{m.b}</p>
              <ul>
                {m.points.map(pt => (
                  <li key={pt}><span className="bl-tick" aria-hidden="true"><Ic.check size={12} /></span>{pt}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .bl-moments { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
        @media (max-width: 820px) { .bl-moments { grid-template-columns: 1fr; } }
        .bl-moment { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); padding: 26px 24px 24px; }
        html.dark .bl-moment { background: var(--paper-3); }
        .bl-moment h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; margin: 14px 0 8px; }
        .bl-moment > p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; }
        .bl-moment ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
        .bl-moment li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; }
        .bl-tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-top: 1px; }
        @media (max-width: 480px) { .bl-moment { padding: 22px 18px 20px; } }
      `}</style>
    </section>
  );
}

/* Broadcasts and the owner's summary sit apart from the four moments: they
 * are not a step in a buyer's journey, they are how the owner reaches
 * everyone at once and how he hears what happened. The summary illustration
 * uses the demo builder's names and is labelled as such. */
function BLOwner() {
  return (
    <section className="pp-block pp-tone-paper-2">
      <div className="wrap">
        <div className="bl-owner">
          <div>
            <div className="sec-head bl-owner-head">
              <h2>Reach everyone at once. <span className="serif">Hear how the day went.</span></h2>
            </div>
            <div className="bl-owner-cards">
              <div className="pp-cap">
                <div className="pp-cap-check"><Ic.check size={14} /></div>
                <div className="pp-cap-title">Broadcasts without getting blocked</div>
                <div className="pp-cap-body">A new launch, a Dhanteras booking offer, a price revision, "4 flats left in Tower B" — to your whole list from your own number, on Meta's official platform, paced to your number's daily limit. Only people who agreed to hear from you, and STOP is honoured in English and Hindi.</div>
              </div>
              <div className="pp-cap">
                <div className="pp-cap-check"><Ic.check size={14} /></div>
                <div className="pp-cap-title">The owner's summary on WhatsApp</div>
                <div className="pp-cap-body">At 9 pm, or the hour you pick: enquiries by source, visits booked and done, bookings, what each site visit cost from your real Facebook ad spend (once your ad account is connected), and which leads nobody has touched for two days. No dashboard to open.</div>
              </div>
            </div>
          </div>

          <div className="bl-digest" role="figure" aria-label="Example evening summary for the fictional builder Aarambh Developers">
            <div className="bl-digest-top"><span className="eyebrow">Evening summary · example</span></div>
            <div className="bl-digest-bub">
              <strong>Aarambh Developers — today</strong><br />
              Enquiries: 14 (Facebook 8, portal 4, hoarding 2)<br />
              Site visits: 6 booked, 2 visited, 1 no-show<br />
              Bookings: 1 — Shanti Crest B-704<br />
              Ravi has 3 leads untouched for 48 h
            </div>
            <p className="bl-digest-note">Figures from the fictional demo builder, not a client.</p>
          </div>
        </div>
      </div>
      <style>{`
        .bl-owner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
        @media (max-width: 900px) { .bl-owner { grid-template-columns: 1fr; } }
        .bl-owner-head { margin-bottom: 24px; }
        .bl-owner-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        @media (max-width: 620px) { .bl-owner-cards { grid-template-columns: 1fr; } }
        .bl-digest { background: #0b3621; border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow); }
        .bl-digest .eyebrow { color: #9fc9b4; }
        .bl-digest-top { margin-bottom: 10px; }
        .bl-digest-bub { background: #1f3b2e; color: #dce9e2; font-size: 13px; line-height: 1.6; padding: 10px 12px; border-radius: 11px; border-bottom-left-radius: 4px; }
        .bl-digest-note { margin: 10px 0 0; font-size: 11.5px; color: #9fc9b4; }
      `}</style>
    </section>
  );
}

/* What it will not do. Each line is a decision in REAL-ESTATE-ROADMAP.md §0 /
 * §7, and each is something a builder has been burned by or fears. */
function BLLimits() {
  const limits = [
    { t: 'No payments on WhatsApp', b: 'No demand notes, payment links, EMI or receipts. Money stays with your accounts team.' },
    { t: 'No exact prices or discounts from the assistant', b: 'It quotes the dated price band you set and hands the exact unit price, discounts, loans and legal questions to your team.' },
    { t: 'No "assured returns" talk', b: 'Anything shaped like guaranteed returns or buyback is refused and handed to a person.' },
    { t: 'Your sheet stays the record', b: 'Holds and allotments stay in your sheet or your CRM. The app mirrors the unit status you mark and counts "flats left" from it, never from a typed number.' },
  ];
  return (
    <section className="pp-block">
      <div className="wrap">
        <div className="sec-head">
          <h2>What it will <span className="serif">never</span> do.</h2>
          <p>What a builder worries about most, answered before you ask.</p>
        </div>
        <div className="pp-cap-grid bl-limits">
          {limits.map(l => (
            <div key={l.t} className="pp-cap">
              <div className="pp-cap-title">{l.t}</div>
              <div className="pp-cap-body">{l.b}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .bl-limits { grid-template-columns: repeat(4, 1fr); }
        @media (max-width: 1000px) { .bl-limits { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 600px) { .bl-limits { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

/* Going live, in the order docs/CLIENT-ONBOARDING.md insists on: projects
 * before leads, because every lead, visit and price hangs off a project. */
function BLHowItWorks() {
  const steps = [
    { n: '01', t: 'Your projects first.', b: 'Configurations, carpet areas, price bands, RERA number, possession date — and the unit list if you keep one.' },
    { n: '02', t: 'Your leads come in.', b: 'Upload your telecalling sheet or a portal export. Each lead is matched to its project.' },
    { n: '03', t: 'Your number goes live.', b: 'Your own WhatsApp number on Meta\'s official platform, the messages approved by Meta, set up with you.' },
    { n: '04', t: 'Your team replies from one app.', b: 'One shared inbox for every executive, a login each, and the evening summary for you.' },
  ];
  return (
    <section className="pp-block pp-tone-paper-2">
      <div className="wrap">
        <div className="sec-head">
          <h2>From your spreadsheet to live, <span className="serif">done with you</span>.</h2>
          <p>Meta's business verification is the longest step. We start it on day one and set up everything else alongside.</p>
        </div>
        <div className="pp-steps">
          {steps.map(s => (
            <div key={s.n} className="pp-step">
              <div className="pp-step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BLCTA() {
  return (
    <section className="pp-block">
      <div className="wrap">
        <div className="pp-cta-card">
          <div>
            <div className="pp-eyebrow"><span className="pp-eyebrow-dot" /> Try it before you talk to us</div>
            <h2 className="pp-cta-title">See a builder's day in the app.</h2>
            <p className="pp-cta-sub">Projects, site visits, bookings and the availability chart, on a fictional builder's data. Then ask us anything on WhatsApp.</p>
            {/* Prices are linked, not restated: pricing.jsx owns our fee and
                /pricing owns Meta's rates, and a third copy here would drift.
                /pricing#features has a row for each builder message (the
                booking card, progress updates, the partner board, replies to
                a partner's card) before and after Meta's 1 Oct 2026 change —
                which is also why nothing on this page calls a reply free. */}
            <p className="bl-cta-alt">What it costs — our monthly fee, and what Meta charges for each builder message before and after 1 October 2026 — is on <a href="/pricing#features">the pricing page</a>.</p>
          </div>
          <div className="pp-cta-actions bl-cta-actions">
            <a href={BL_DEMO_HREF} className="btn primary">See the builder demo <Ic.arrow size={14} /></a>
            <a href={BL_WA_HREF} className="btn ghost" target="_blank" rel="noreferrer"><Ic.waLogo size={16} /> WhatsApp us</a>
          </div>
        </div>
      </div>
      <style>{`
        /* Mixed against --accent-ink because the card sits on --accent, the
           same reasoning as .ds-cta-alt. */
        .bl-cta-alt { margin-top: 10px; font-size: 13.5px; color: color-mix(in oklab, var(--accent-ink) 62%, transparent); }
        .bl-cta-alt a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
        /* The card is a flex row whose copy column takes the room; without
           this "See the builder demo" folds onto two lines at desktop width. */
        .bl-cta-actions { flex: none; }
        .bl-cta-actions .btn { white-space: nowrap; }
      `}</style>
    </section>
  );
}

function Builders() {
  return (
    <>
      <BLHero />
      <BLMoments />
      <BLOwner />
      <BLLimits />
      <BLHowItWorks />
      <BLCTA />
    </>
  );
}
window.Builders = Builders;
