// blyzr for business — the root screen. B2B-first structure: hero thesis,
// the three offers, the manifest (every service, priced), the café as the
// launch venue, and the consumer app kept warm as a preview at the end.
// Localized via window.B2B_T (i18n-b2b.js): en/ar/tr/hi/fr/it; `dir` from the
// table drives RTL. Sheet-facing values (interest/kind) stay English.
// Reuses OFFERS_2A / OfferCard / BizServicePicker / US_PLAN from screens-6
// and BusinessLeadForm from business-form.jsx (all shared top-level consts).

const { useState: b2hS, useEffect: b2hE } = React;

// Brands taken to the US — files in site/brands/ (originals + sources: assets/brand-logos/).
const BRAND_LOGOS = [
  { slug: 'milaf',       name: 'Milaf' },
  { slug: 'leen',        name: 'Leen Dates', boost: true },
  { slug: 'crush',       name: 'Crush' },
  { slug: 'bab-sharqi',  name: 'Bab Sharqi' },
  { slug: 'moonglaze',   name: 'Moonglaze', file: 'moonglaze.svg' },
  { slug: 'zaitoune',    name: 'Zaitoune Sweets' },
  { slug: 'reeq-alnahl', name: 'Reeq Alnahl' },
  { slug: 'aldka',       name: 'Aldka Organic' },
  { slug: 'yala-dates',  name: 'Yala Dates' },
];

// "$2,000 once", "$1,000/mo + $2/order" — localized suffixes; prices stay
// Latin and are LTR-isolated in RTL so they never reorder inside Arabic text.
const maniPrice = (it, T) => {
  const wrap = T.dir === 'rtl' ? (s) => `⁦${s}⁩` : (s) => s;
  const base = it.monthly ? `${wrap(usd(it.monthly))}${T.mo}` : `${wrap(usd(it.setup))} ${T.once}`;
  if (!it.unit) return base;
  if (it.unit.money) return `${base} + ${T.ofSpend}`;
  const per = it.unit.key === 'orders' ? T.perOrder : T.perContainer;
  return `${base} + ${wrap(usd(it.unit.per))}${per}`;
};

const B2BHome = ({ goto, dockLead, onClearDockLead, lang = 'en' }) => {
  const T = B2B_T[lang] || B2B_T.en;
  const [mode, setMode] = b2hS('home');
  const [lead, setLead] = b2hS(null);
  const openLead = (ctx) => setLead({ ...ctx, lang });

  // the command dock routes here: typed text arrives as a prefilled enquiry
  b2hE(() => {
    if (dockLead) {
      openLead(dockLead.summary
        ? { title: T.formDockTitle, interest: 'blyzr for business', kind: 'dock', summary: dockLead.summary }
        : { title: T.formTalkTitle, interest: 'blyzr for business', kind: 'apply' });
    }
  }, [dockLead]);
  const closeLead = () => { setLead(null); if (onClearDockLead) onClearDockLead(); };

  if (mode === 'plan') {
    // the plan builder is English for now — its lead form stays English too
    return (
      <div className="biz2" style={{ paddingTop: 20 }}>
        <div className="biz-plan-head">
          <button className="biz-plan-back" onClick={() => setMode('home')}><Icon.back style={{ width: 14, height: 14 }} /> for business</button>
          <span className="biz-plan-eyebrow">Sell in the US · build your plan</span>
        </div>
        <BizServicePicker onLead={setLead} />
        {lead && <BusinessLeadForm ctx={lead} onClose={closeLead} />}
      </div>
    );
  }

  const offers = OFFERS_2A.map((o) => ({ ...o, ...(T.offers[o.id] || {}) }));

  return (
    <div className="b2h" dir={T.dir} data-lang={lang}>
      {/* hero — the business thesis */}
      <section className="b2h-hero">
        <div className="eyebrow">{T.heroEyebrow}</div>
        <h1 className="b2h-title">{T.heroL1}<span className="l2">{T.heroPre}<span className="mark"><span>{T.heroMark}</span></span></span></h1>
        <p className="b2h-sub">{T.heroSub}</p>
        <div className="b2h-ctas">
          <button className="pill pill-ink" onClick={() => setMode('plan')}>{T.ctaPlan}</button>
          <button className="pill pill-outline" onClick={() => openLead({ title: T.formTalkTitle, interest: 'blyzr for business', kind: 'apply' })}>{T.ctaTalk}</button>
        </div>
        <div className="eyebrow b2h-proof">{T.proof}</div>
      </section>

      {/* proof — brands already taken to the US */}
      <section className="b2h-brands" aria-label={T.brandsTitle}>
        <div className="eyebrow b2h-brands-t">{T.brandsTitle}</div>
        <ul className="b2h-brands-row">
          {BRAND_LOGOS.map((b) => (
            <li key={b.slug}><img className={b.boost ? 'boost' : undefined} src={`brands/${b.file || b.slug + '.png'}`} alt={b.name} loading="lazy"/></li>
          ))}
        </ul>
      </section>

      {/* the offer counter — three paths */}
      <section className="biz2-cards b2h-offers">
        {offers.map((o) => <OfferCard key={o.id} o={o} onBuild={() => setMode('plan')} onLead={openLead} />)}
      </section>

      {/* the manifest — every service, priced, like a packing slip on the counter */}
      <section className="mani-card">
        <div className="mani-top">
          <span className="mani-no">{T.maniLeft}</span>
          <span className="mani-no">{T.maniRight}</span>
        </div>
        <div className="mani-cols">
          {US_PLAN.map((g) => (
            <div key={g.id} className="mani-group" style={{ '--h': g.hue }}>
              <div className="mani-ghead"><span className="mani-gdot"/><span className="mani-glabel">{T.groups[g.id]}</span></div>
              {g.items.map((it) => (
                <div key={it.id} className="mani-row">
                  <span className="mani-k">{T.svc[it.id]}</span>
                  <span className="mani-v mono">{maniPrice(it, T)}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
        <div className="mani-foot">
          <span className="mani-fine">{T.maniFine}</span>
          <button className="pill pill-ink" onClick={() => setMode('plan')}>{T.ctaPlan}</button>
        </div>
      </section>

      {/* the café — where launches get tasted */}
      <section className="b2h-cafe">
        <div className="b2h-cafe-photo">
          <img src="cafe-images/blyzr5.jpg" loading="lazy" alt="The blyzr café — pantry wall of jars, long oak recipe table, the orb glowing on the counter"/>
        </div>
        <div className="b2h-cafe-copy">
          <span className="eyebrow">{T.cafeEyebrow}</span>
          <h2 className="b2h-sec-title">{T.cafePre}<em>{T.cafeEm}</em></h2>
          <p className="b2h-body">{T.cafeBody}</p>
          <div className="tbar-chips">
            {CAFE_CHIPS.map((c) => <span key={c.t} className="tchip" style={{ '--h': c.h }}>{c.t}</span>)}
          </div>
          <button className="pill pill-outline" onClick={() => goto('cafe')}>{T.cafeCta}</button>
        </div>
      </section>

      {/* the consumer app, kept for the future (the mini is a product preview — stays English) */}
      <section className="b2h-future">
        <div className="b2h-future-copy">
          <span className="eyebrow">{T.futEyebrow}</span>
          <h2 className="b2h-sec-title">{T.futPre}<em>{T.futEm}</em></h2>
          <p className="b2h-body">{T.futBody}</p>
          <button className="pill pill-outline" onClick={() => goto('welcome')}>{T.futCta}</button>
        </div>
        <button className="b2m" dir="ltr" onClick={() => goto('welcome')} aria-label="Preview the blyzr consumer app">
          <span className="b2m-eyebrow">
            <span className="b2m-orbline"><OrbMini/><span className="eyebrow">the counter is yours</span></span>
            <span className="b2m-badge">preview</span>
          </span>
          <span className="b2m-greet">Evening, Maya.<span className="l2">what's for <span className="mark"><span>dinner?</span></span></span></span>
          <span className="b2m-cards">
            <span className="b2m-cc a"><span className="k">tonight · 25 min</span><span className="t">Caprese orzo — mozzarella &amp; basil are in your basket.</span></span>
            <span className="b2m-cc b"><span className="k">running low</span><span className="t">Milk, eggs, coffee — add all three?</span></span>
          </span>
          <span className="b2m-dock"><OrbMini/><span className="b2m-ph">Ask for anything…</span></span>
        </button>
      </section>

      <footer className="b2h-foot">
        <span className="b2h-foot-orb"><OrbMini/></span>
        <span>© blyzr 2026</span>
        <button className="foot-link" onClick={() => goto({ name: 'legal', tab: 'privacy' })}>{T.privacy}</button>
        <button className="foot-link" onClick={() => goto({ name: 'legal', tab: 'terms' })}>{T.terms}</button>
        <button className="foot-link" onClick={() => goto({ name: 'legal', tab: 'cookies' })}>{T.cookies}</button>
        <a className="foot-link" href="/launch-in-us/">العربية · launch in the US</a>
      </footer>

      {lead && <BusinessLeadForm ctx={lead} onClose={closeLead} />}
    </div>
  );
};

window.B2BHome = B2BHome;