// Standalone "Launch in the US" ad landing page — bilingual EN/AR (RTL), no app rail.
// Reuses the design system, plan builder (window.BizServicePicker) and lead form
// (window.BusinessLeadForm -> Google Sheet). Arabic type follows the brand guideline
// (Aref Ruqaa editorial, IBM Plex Sans Arabic UI, Baloo Bhaijaan 2 logo).

const { useState: lpS, useEffect: lpE } = React;

const T = {
  en: {
    nav_cta: 'Get started', lang: 'العربية', tagline: 'a quieter way to shop',
    eyebrow: 'blyzr for business · sell in the US',
    h1: 'Launch your brand in <em>the US.</em>',
    lede: 'We take your product from a factory abroad to a US doorstep — the freight, the customs, the warehousing, the shelf. You keep making it; we land it.',
    cta_plan: 'Build my plan', cta_talk: 'Talk to us',
    hero_note: 'Indicative pricing in 60 seconds · a real person replies in ~2 days',
    value: [
      { icon: 'truck',     k: 'Freight & customs',    d: 'Ocean freight, US clearance, duties and FDA paperwork — door to dock.' },
      { icon: 'pantry',    k: 'Storage & fulfilment', d: 'Climate-controlled US warehousing; we pick, pack, ship and handle returns.' },
      { icon: 'megaphone', k: 'Marketing & sales',    d: 'Storefronts, content, campaigns and paid media — built and run for you.' },
      { icon: 'globe',     k: 'Brand & compliance',   d: 'FDA registration, trademark and label review so you’re legal from day one.' },
    ],
    how: 'How it works', how_meta: 'apply · plan · operate · grow',
    steps: [
      { n: '01', t: 'Tell us what you make',   d: 'Share your product and where you want it to go. A real person reads every enquiry.' },
      { n: '02', t: 'Build your plan',         d: 'Pick the services you need and see an honest, itemised estimate — setup and monthly.' },
      { n: '03', t: 'We do the heavy lifting', d: 'Freight, customs, storage, fulfilment, launch — one team, one point of contact.' },
      { n: '04', t: 'You grow',                d: 'Onto US shelves and marketplaces. You keep making it; we keep it moving.' },
    ],
    plan: 'Build your plan', plan_meta: 'select what you need · live estimate',
    why: 'Why blyzr', why_meta: 'one partner, end to end',
    whys: [
      { t: 'One partner, end to end',      d: 'Logistics, compliance and marketing under one roof — not five vendors to stitch together.' },
      { t: 'Operators, not a marketplace', d: 'We run the operation behind your brand, day to day — not just a listing.' },
      { t: 'Honest from day one',          d: 'Real costs, real timelines, a real person. If it won’t work, we’ll tell you.' },
    ],
    final_h: 'Ready to land in the US?', final_d: 'Tell us what you make. We’ll come back with a real plan — usually within two days.',
    final_cta: 'Get started', foot_home: 'Home', foot_brand: 'Brand',
    lead_title: 'Launch your brand in the US', lead_interest: 'Sell in the US',
  },
  ar: {
    nav_cta: 'ابدأ الآن', lang: 'English', tagline: 'طريقة أهدأ للتسوّق',
    eyebrow: 'بليزر للأعمال · البيع في أمريكا',
    h1: 'أطلِق علامتك التجارية في <em>أمريكا.</em>',
    lede: 'نأخذ منتجك من مصنعٍ في الخارج إلى عتبة بابٍ أمريكية — الشحن، والجمارك، والتخزين، والرفّ. أنت تصنعه، ونحن نوصله.',
    cta_plan: 'ابنِ خطتك', cta_talk: 'تحدّث إلينا',
    hero_note: 'سعرٌ تقديري خلال 60 ثانية · يردّك شخصٌ حقيقي خلال يومين تقريبًا',
    value: [
      { icon: 'truck',     k: 'الشحن والجمارك',   d: 'شحنٌ بحري من مصنعك، وتخليصٌ جمركي أمريكي، ورسومٌ وأوراق FDA — من الباب إلى الرصيف.' },
      { icon: 'pantry',    k: 'التخزين والتنفيذ', d: 'تخزينٌ أمريكي مُكيّف؛ نلتقط ونغلّف ونشحن، ونتولّى المرتجعات.' },
      { icon: 'megaphone', k: 'التسويق والمبيعات', d: 'متاجرٌ ومحتوى وحملاتٌ وإعلاناتٌ مدفوعة — نبنيها وندير​ها لك.' },
      { icon: 'globe',     k: 'العلامة والامتثال', d: 'تسجيل FDA، وعلامةٌ تجارية، ومراجعة ملصقات — قانونيٌّ من اليوم الأول.' },
    ],
    how: 'كيف نعمل', how_meta: 'تقديم · خطة · تشغيل · نمو',
    steps: [
      { n: '01', t: 'أخبِرنا بما تصنع',  d: 'شارِك منتجك وإلى أين تريد أن يصل. يقرأ كلَّ طلبٍ شخصٌ حقيقي.' },
      { n: '02', t: 'ابنِ خطتك',         d: 'اختَر الخدمات التي تحتاجها وشاهِد تقديرًا صادقًا ومفصّلًا — تأسيسٌ وشهري.' },
      { n: '03', t: 'نحمل العبء الثقيل', d: 'الشحن والجمارك والتخزين والتنفيذ والإطلاق — فريقٌ واحد ونقطة تواصلٍ واحدة.' },
      { n: '04', t: 'أنت تنمو',          d: 'إلى الرفوف والأسواق الأمريكية. أنت تصنع، ونحن نُبقيه يتحرّك.' },
    ],
    plan: 'ابنِ خطتك', plan_meta: 'اختَر ما تحتاجه · تقديرٌ مباشر',
    why: 'لماذا بليزر', why_meta: 'شريكٌ واحد، من البداية إلى النهاية',
    whys: [
      { t: 'شريكٌ واحد، من البداية للنهاية', d: 'اللوجستيات والامتثال والتسويق تحت سقفٍ واحد — لا خمسةُ موردين تجمعهم بنفسك.' },
      { t: 'مُشغّلون، لا سوق',               d: 'نُدير العملية خلف علامتك يومًا بيوم — لسنا مجرّد قائمة.' },
      { t: 'صادقون من اليوم الأول',          d: 'تكاليفُ حقيقية، ومواعيدُ حقيقية، وشخصٌ حقيقي. وإن كان لن ينجح، سنُخبرك.' },
    ],
    final_h: 'جاهزٌ للوصول إلى أمريكا؟', final_d: 'أخبِرنا بما تصنع. سنعود إليك بخطةٍ حقيقية — خلال يومين عادةً.',
    final_cta: 'ابدأ الآن', foot_home: 'الرئيسية', foot_brand: 'الهوية',
    lead_title: 'أطلِق علامتك في أمريكا', lead_interest: 'البيع في أمريكا',
  },
};

const LaunchPage = () => {
  const [lang, setLang] = lpS('en');
  const [lead, setLead] = lpS(null);
  const t = T[lang];
  const dir = lang === 'ar' ? 'rtl' : 'ltr';
  lpE(() => { document.documentElement.lang = lang; document.documentElement.dir = dir; }, [lang, dir]);

  const apply = () => setLead({ title: t.lead_title, interest: t.lead_interest, kind: 'apply', lang });
  const onPlanLead = (ctx) => setLead({ ...ctx, lang });
  const scrollToPlan = () => document.getElementById('plan')?.scrollIntoView({ behavior: 'smooth' });
  const arrow = (s) => <Icon.arrow style={{ width: s, height: s, transform: dir === 'rtl' ? 'scaleX(-1)' : 'none' }}/>;

  return (
    <div className="lp" dir={dir} lang={lang}>
      <header className="lp-nav">
        <a className="lp-brand" href="/" title="blyzr">
          <span className="lp-brand-orb"><OrbMini/></span>
          <span className="lp-brand-word">blyzr</span>
          {lang === 'ar' && <span className="lp-brand-ar">بليزر</span>}
        </a>
        <div className="lp-nav-actions">
          <button className="lp-lang" onClick={() => setLang(lang === 'ar' ? 'en' : 'ar')} aria-label="Switch language">
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', display: 'inline-block' }}/>{t.lang}
          </button>
          <button className="btn btn-accent" onClick={apply}>{t.nav_cta} {arrow(13)}</button>
        </div>
      </header>

      <section className="lp-hero lp-wrap">
        <div className="lp-hero-text">
          <div className="eyebrow">{t.eyebrow}</div>
          <h1 className="lp-h1" dangerouslySetInnerHTML={{ __html: t.h1 }}/>
          <p className="lp-lede">{t.lede}</p>
          <div className="lp-hero-cta">
            <button className="btn btn-accent btn-lg" onClick={scrollToPlan}>{t.cta_plan} {arrow(15)}</button>
            <button className="btn btn-outline btn-lg" onClick={apply}>{t.cta_talk}</button>
          </div>
          <div className="lp-hero-note mono">{t.hero_note}</div>
        </div>
        <div className="lp-hero-orb"><Orb size={260}/></div>
      </section>

      <section className="lp-value lp-wrap">
        {t.value.map((v) => (
          <div key={v.k} className="lp-value-card">
            <div className="lp-value-ic">{Icon[v.icon]({})}</div>
            <div className="lp-value-k">{v.k}</div>
            <div className="lp-value-d">{v.d}</div>
          </div>
        ))}
      </section>

      <section className="lp-sec lp-wrap">
        <div className="lp-sec-head"><h2>{t.how}</h2><span className="meta">{t.how_meta}</span></div>
        <div className="lp-steps">
          {t.steps.map((s) => (
            <div key={s.n} className="lp-step">
              <div className="lp-step-n mono">{s.n}</div>
              <div className="lp-step-body"><div className="lp-step-t">{s.t}</div><div className="lp-step-d">{s.d}</div></div>
            </div>
          ))}
        </div>
      </section>

      <section id="plan" className="lp-sec lp-wrap">
        <div className="lp-sec-head"><h2>{t.plan}</h2><span className="meta">{t.plan_meta}</span></div>
        <div className={lang === 'ar' ? 'lp-plan' : 'lp-ltr'} dir={dir}><BizServicePicker onLead={onPlanLead} lang={lang}/></div>
      </section>

      <section className="lp-sec lp-wrap">
        <div className="lp-sec-head"><h2>{t.why}</h2><span className="meta">{t.why_meta}</span></div>
        <div className="lp-why">
          {t.whys.map((w) => (<div key={w.t} className="lp-why-card"><div className="lp-why-t">{w.t}</div><div className="lp-why-d">{w.d}</div></div>))}
        </div>
      </section>

      <section className="lp-wrap" style={{ paddingBottom: 64 }}>
        <div className="lp-final glass">
          <div className="lp-final-orb"><Orb size={120}/></div>
          <h2 className="lp-final-h">{t.final_h}</h2>
          <p className="lp-final-d">{t.final_d}</p>
          <button className="btn btn-accent btn-lg" onClick={apply}>{t.final_cta} {arrow(15)}</button>
        </div>
      </section>

      <footer className="lp-foot lp-wrap">
        <div className="lp-foot-left">
          <span className="lp-foot-orb"><OrbMini/></span>
          <span>© blyzr 2026</span>
          <span className="lp-foot-tag">{t.tagline}</span>
        </div>
        <div className="lp-foot-links">
          <a className="lp-foot-link" href="/">{t.foot_home}</a>
          <a className="lp-foot-link" href="/Blyzr%20Brand%20Guidelines.html" target="_blank" rel="noopener">{t.foot_brand}</a>
        </div>
      </footer>

      {lead && <BusinessLeadForm ctx={lead} onClose={() => setLead(null)}/>}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<LaunchPage/>);