/* Featured case study — onlyWA's flagship build.
 *
 * Real, named client (Firayalal...Nxt, Ranchi). Copy is deliberately
 * scope/scale-led, not results-led: the platform is live, but campaign
 * outcome metrics aren't published here, so we showcase what was shipped
 * and the real numbers we do have (29,100 customers, direct Cloud API).
 * The dark right-hand "console" is an illustrative WhatsApp mock.
 */
function FeaturedCase() {
  const shipped = [
    <>Business website + <b>Meta Business verification</b></>,
    <>Broadcast engine — tier-aware pacing, retries, <b>opt-outs auto-honored</b></>,
    <>Admin dashboard — campaigns, shared inbox, live health, CSV in/out</>,
    <>WhatsApp <b>chatbot</b> — QR onboarding, greeting, human handoff</>,
    <>DPDP-ready consent — STOP keywords (EN + HI), full audit trail</>,
    <>Daily new-leads report, auto-emailed every evening</>,
  ];

  return (
    <section id="work" className="tight">
      <div className="wrap">
        <div className="sec-head">
          <h2>Our first build is <span className="serif">live in Ranchi</span>.</h2>
          <p>We took one local retailer end-to-end on WhatsApp — site, broadcasts, chatbot, the works. Here's exactly what shipped.</p>
        </div>

        <div className="fcase fade-in-up">
          {/* Left — the story */}
          <div className="fcase-main">
            <div className="fcase-eyebrow"><span className="fcase-live-dot" /> Flagship engagement · Live now</div>
            <div className="fcase-client">Firayalal<span className="fdots">...</span>Nxt</div>
            <div className="fcase-segment">Heritage saree &amp; ladies-wear retailer · Argora Chowk, Ranchi</div>

            <p className="fcase-lede">
              We turned a <b>29,100-name billing export</b> into a live, consent-clean WhatsApp channel — built directly on the <b>Meta Cloud API</b>. No third-party BSP, no per-seat SaaS, no monthly lock-in. Their list, their numbers, their infrastructure.
            </p>

            <div className="fcase-stats">
              <div className="fcase-stat"><b>29,100</b><span>customers onboarded</span></div>
              <div className="fcase-stat"><b>0</b><span>third-party BSPs</span></div>
              <div className="fcase-stat"><b>~3 wks</b><span>kickoff to live</span></div>
            </div>

            <ul className="fcase-ship">
              {shipped.map((item, i) => (
                <li key={i}><span className="fcase-tick"><Ic.check size={14} /></span><span>{item}</span></li>
              ))}
            </ul>

            <div className="fcase-cta">
              <a href="https://www.firayalalnxt.com" target="_blank" rel="noopener noreferrer" className="btn primary">
                View the live site <Ic.arrow size={14} />
              </a>
              <a href="/#contact" className="btn ghost">Get this for your business</a>
            </div>
          </div>

          {/* Right — illustrative WhatsApp console */}
          <aside className="fcase-console" aria-hidden="true">
            <div className="fcase-console-head">
              <div className="fcase-console-av"><Ic.waLogo size={20} /></div>
              <div className="fcase-console-id">
                <b>Firayalal...Nxt</b>
                <span>WhatsApp Business · official</span>
              </div>
              <div className="fcase-console-live"><span className="fcase-live-dot" /> Live</div>
            </div>

            <div className="fcase-thread">
              <div className="fbub out">
                🪔 <b>Firayalal…Nxt</b> — fresh Banarasi &amp; Kanjivaram silks just in for the wedding season. Reply <b>CATALOG</b> for this week's arrivals, or visit us at Argora Chowk.
                <span className="fmeta">9:02 PM <span className="ftick">✓✓</span></span>
              </div>
              <div className="fbub in">
                CATALOG
                <span className="fmeta">9:04 PM</span>
              </div>
              <div className="fbub out">
                Namaste 🙏 Sending our latest collection now — a stylist will follow up on WhatsApp shortly.
                <span className="fmeta">9:04 PM <span className="ftick">✓✓</span></span>
              </div>
            </div>

            <div className="fcase-props">
              <span className="fcase-prop">Consent-filtered</span>
              <span className="fcase-prop">Tier-aware</span>
              <span className="fcase-prop">Opt-out honored</span>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}
window.FeaturedCase = FeaturedCase;