/* global React, ReactDOM, NOBBYO_ICONS, PageHeader, PageTopBar, PageFooter, usePageLang */
const { useState } = React;
const I = window.NOBBYO_ICONS;

// =================== PRICING DATA ===================
const PLANS = [
  {
    id:'starter',
    name:{bn:'স্টার্টার', en:'Starter'},
    tagline:{bn:'ছোট টিম ও স্টার্টআপের জন্য', en:'For small teams & startups'},
    price:{m:0, y:0},
    badge:null,
    cta:{bn:'বিনামূল্যে শুরু করুন', en:'Start free'},
    color:'#5C6987',
    features:[
      { bn:'৩টি অ্যাক্টিভ জব পোস্ট', en:'3 active job posts', on:true },
      { bn:'বেসিক ক্যান্ডিডেট ফিল্টার', en:'Basic candidate filters', on:true },
      { bn:'৫০ আবেদন/মাস', en:'50 applications/month', on:true },
      { bn:'ইমেইল সাপোর্ট', en:'Email support', on:true },
      { bn:'কোম্পানি প্রোফাইল পেজ', en:'Company profile page', on:true },
      { bn:'AI ম্যাচিং ও স্ক্রিনিং', en:'AI matching & screening', on:false },
      { bn:'যাচাইকৃত ব্যাজ', en:'Verified badge', on:false },
      { bn:'প্রাইওরিটি প্লেসমেন্ট', en:'Priority placement', on:false },
      { bn:'ATS ইন্টিগ্রেশন', en:'ATS integration', on:false },
    ]
  },
  {
    id:'growth',
    name:{bn:'গ্রোথ', en:'Growth'},
    tagline:{bn:'মাঝারি কোম্পানির জন্য', en:'For growing companies'},
    price:{m:9900, y:99000},
    badge:{bn:'সবচেয়ে জনপ্রিয়', en:'Most popular'},
    cta:{bn:'গ্রোথ প্ল্যান নিন', en:'Get Growth'},
    color:'#F58220',
    features:[
      { bn:'১৫টি অ্যাক্টিভ জব পোস্ট', en:'15 active job posts', on:true },
      { bn:'অ্যাডভান্সড ফিল্টার ও বুলিয়ান সার্চ', en:'Advanced filters + boolean search', on:true },
      { bn:'৫০০ আবেদন/মাস', en:'500 applications/month', on:true },
      { bn:'প্রাইওরিটি ইমেইল + চ্যাট সাপোর্ট', en:'Priority email + chat support', on:true },
      { bn:'প্রিমিয়াম কোম্পানি প্রোফাইল', en:'Premium company profile', on:true },
      { bn:'AI ম্যাচিং ও CV স্ক্রিনিং', en:'AI matching & CV screening', on:true },
      { bn:'যাচাইকৃত নীল ব্যাজ', en:'Verified blue badge', on:true },
      { bn:'হায়ারিং অ্যানালিটিক্স ড্যাশবোর্ড', en:'Hiring analytics dashboard', on:true },
      { bn:'ATS ইন্টিগ্রেশন (BambooHR, Workday)', en:'ATS integration (BambooHR, Workday)', on:false },
    ]
  },
  {
    id:'enterprise',
    name:{bn:'এন্টারপ্রাইজ', en:'Enterprise'},
    tagline:{bn:'বড় প্রতিষ্ঠান ও স্কেলিং টিম', en:'For large orgs & scaling teams'},
    price:{m:'কাস্টম', mEn:'Custom', y:'কাস্টম', yEn:'Custom'},
    badge:null,
    cta:{bn:'সেলসের সাথে কথা বলুন', en:'Talk to Sales'},
    color:'#2A3656',
    features:[
      { bn:'আনলিমিটেড জব পোস্ট', en:'Unlimited job posts', on:true },
      { bn:'এন্টারপ্রাইজ-গ্রেড ফিল্টার', en:'Enterprise-grade filters', on:true },
      { bn:'আনলিমিটেড আবেদন', en:'Unlimited applications', on:true },
      { bn:'২৪/৭ ফোন + ডেডিকেটেড CSM', en:'24/7 phone + dedicated CSM', on:true },
      { bn:'কাস্টম ব্র্যান্ডেড কেরিয়ার পেজ', en:'Custom branded careers page', on:true },
      { bn:'AI ম্যাচিং, স্ক্রিনিং, প্রেডিক্টিভ অ্যানালিটিক্স', en:'AI matching, screening, predictive analytics', on:true },
      { bn:'গোল্ড ভেরিফায়েড ব্যাজ', en:'Gold verified badge', on:true },
      { bn:'প্রাইওরিটি প্লেসমেন্ট + হাইলাইট জব', en:'Priority placement + featured jobs', on:true },
      { bn:'ATS, HRIS ও কাস্টম API ইন্টিগ্রেশন', en:'ATS, HRIS & custom API integrations', on:true },
    ]
  },
];

const COMPARE_ROWS = [
  { cat:{bn:'বেসিক', en:'Basics'}, items:[
    { f:{bn:'অ্যাক্টিভ জব পোস্ট', en:'Active job posts'}, vals:['৩', '১৫', 'আনলিমিটেড'] },
    { f:{bn:'মাসিক আবেদন সীমা', en:'Applications/month'}, vals:['৫০', '৫০০', 'আনলিমিটেড'] },
    { f:{bn:'টিম মেম্বার', en:'Team members'}, vals:['১', '১০', 'আনলিমিটেড'] },
    { f:{bn:'কোম্পানি প্রোফাইল পেজ', en:'Company profile'}, vals:[true, true, true] },
  ]},
  { cat:{bn:'AI ও অটোমেশন', en:'AI & Automation'}, items:[
    { f:{bn:'AI ম্যাচিং', en:'AI matching'}, vals:[false, true, true] },
    { f:{bn:'CV স্ক্রিনিং', en:'CV screening'}, vals:[false, true, true] },
    { f:{bn:'প্রেডিক্টিভ অ্যানালিটিক্স', en:'Predictive analytics'}, vals:[false, false, true] },
    { f:{bn:'বুলিয়ান সার্চ', en:'Boolean search'}, vals:[false, true, true] },
  ]},
  { cat:{bn:'ব্র্যান্ডিং ও ভিজিবিলিটি', en:'Branding & Visibility'}, items:[
    { f:{bn:'যাচাইকৃত ব্যাজ', en:'Verified badge'}, vals:[false, 'নীল', 'গোল্ড'] },
    { f:{bn:'প্রাইওরিটি প্লেসমেন্ট', en:'Priority placement'}, vals:[false, false, true] },
    { f:{bn:'ফিচার্ড জব', en:'Featured jobs'}, vals:[false, false, true] },
    { f:{bn:'কাস্টম ক্যারিয়ার পেজ', en:'Custom careers page'}, vals:[false, false, true] },
  ]},
  { cat:{bn:'সাপোর্ট ও ইন্টিগ্রেশন', en:'Support & Integration'}, items:[
    { f:{bn:'ইমেইল সাপোর্ট', en:'Email support'}, vals:[true, true, true] },
    { f:{bn:'চ্যাট সাপোর্ট', en:'Chat support'}, vals:[false, true, true] },
    { f:{bn:'ফোন সাপোর্ট ২৪/৭', en:'24/7 phone support'}, vals:[false, false, true] },
    { f:{bn:'ডেডিকেটেড CSM', en:'Dedicated CSM'}, vals:[false, false, true] },
    { f:{bn:'ATS ইন্টিগ্রেশন', en:'ATS integration'}, vals:[false, false, true] },
    { f:{bn:'কাস্টম API', en:'Custom API'}, vals:[false, false, true] },
  ]},
];

const FAQS = [
  {
    q:{bn:'মাসিক ও বার্ষিক বিলিংয়ে পার্থক্য কী?', en:'What\'s the difference between monthly and yearly billing?'},
    a:{bn:'বার্ষিক বিলিংয়ে আপনি ১৭% ছাড় পাচ্ছেন (২ মাস ফ্রি)। মাসিক বিলিং নিরাপদ — যেকোনো সময় ক্যান্সেল করা যাবে।', en:'Annual billing gives you a 17% discount (2 months free). Monthly billing is flexible — cancel anytime.'}
  },
  {
    q:{bn:'কোন পেমেন্ট মেথড সাপোর্ট করে?', en:'What payment methods do you support?'},
    a:{bn:'বিকাশ, নগদ, রকেট, সব মেজর ব্যাংক কার্ড (Visa/Master/Amex), ব্যাংক ট্রান্সফার এবং SSLCommerz।', en:'bKash, Nagad, Rocket, all major bank cards (Visa/Master/Amex), bank transfer, and SSLCommerz.'}
  },
  {
    q:{bn:'ফ্রি প্ল্যান কতদিন ফ্রি?', en:'How long is the free plan free?'},
    a:{bn:'স্টার্টার প্ল্যান সবসময় বিনামূল্যে — কোনো ক্রেডিট কার্ড লাগে না, কোনো হিডেন চার্জ নেই।', en:'The Starter plan is always free — no credit card required, no hidden charges.'}
  },
  {
    q:{bn:'প্ল্যান আপগ্রেড বা ডাউনগ্রেড করা যায়?', en:'Can I upgrade or downgrade my plan?'},
    a:{bn:'হ্যাঁ, যেকোনো সময়। আপগ্রেড সাথে সাথে এফেকটিভ হবে এবং ডাউনগ্রেড পরবর্তী বিলিং সাইকেল থেকে।', en:'Yes, anytime. Upgrades take effect immediately; downgrades apply from the next billing cycle.'}
  },
  {
    q:{bn:'এন্টারপ্রাইজ প্ল্যানে কী থাকে?', en:'What\'s in the Enterprise plan?'},
    a:{bn:'আনলিমিটেড পোস্ট, কাস্টম ATS/HRIS ইন্টিগ্রেশন, ডেডিকেটেড অ্যাকাউন্ট ম্যানেজার, SLA, এবং কাস্টম প্রাইসিং। আমাদের সেলস টিমকে ব্রিফ করুন।', en:'Unlimited posts, custom ATS/HRIS integration, dedicated account manager, SLA, and custom pricing. Brief our sales team.'}
  },
  {
    q:{bn:'রিফান্ড পলিসি কী?', en:'What\'s your refund policy?'},
    a:{bn:'প্রথম ১৪ দিনের মধ্যে সম্পূর্ণ মানি-ব্যাক গ্যারান্টি। কোনো প্রশ্ন ছাড়াই।', en:'14-day money-back guarantee, no questions asked.'}
  },
];

// =================== HERO ===================
function PricingHero({ lang }) {
  return (
    <section className="prc-hero">
      <div className="srch-hero-bg" aria-hidden="true">
        <div className="srch-blob srch-blob-1"></div>
        <div className="srch-blob srch-blob-2"></div>
        <div className="srch-grid"></div>
      </div>
      <div className="container prc-hero-inner">
        <div className="srch-eyebrow">
          <span className="srch-pulse"></span>
          <span className="t-bn">এমপ্লয়ার প্রাইসিং · ১,৮৪০+ কোম্পানি ট্রাস্ট করে</span>
          <span className="t-en">Employer pricing · 1,840+ companies trust us</span>
        </div>
        <h1 className="srch-title">
          <span className="t-bn">সঠিক প্রার্থী, <em className="srch-rotate">সাশ্রয়ী দামে</em></span>
          <span className="t-en">Right hires, <em className="srch-rotate">at the right price</em></span>
        </h1>
        <p className="prc-hero-sub">
          <span className="t-bn">বিনামূল্যে শুরু করুন। স্কেল হলে আপগ্রেড করুন। কোনো লুকানো ফি নেই — কখনোই না।</span>
          <span className="t-en">Start free. Upgrade when you scale. No hidden fees — ever.</span>
        </p>
      </div>
    </section>
  );
}

// =================== PLANS ===================
function PlansSection({ lang }) {
  const [billing, setBilling] = useState('monthly');
  const fmt = (n) => typeof n === 'number' ? `৳${n.toLocaleString()}` : n;
  const fmtEn = (n) => typeof n === 'number' ? `৳${n.toLocaleString()}` : n;

  return (
    <section className="prc-plans-section">
      <div className="container">
        {/* Billing toggle */}
        <div className="prc-billing">
          <button
            className={'prc-billing-btn' + (billing === 'monthly' ? ' is-on' : '')}
            onClick={()=>setBilling('monthly')}
          >
            <span className="t-bn">মাসিক</span>
            <span className="t-en">Monthly</span>
          </button>
          <button
            className={'prc-billing-btn' + (billing === 'yearly' ? ' is-on' : '')}
            onClick={()=>setBilling('yearly')}
          >
            <span className="t-bn">বার্ষিক</span>
            <span className="t-en">Yearly</span>
            <span className="prc-billing-save">
              <span className="t-bn">১৭% ছাড়</span>
              <span className="t-en">Save 17%</span>
            </span>
          </button>
        </div>

        <div className="prc-plans">
          {PLANS.map(p => {
            const priceM = billing === 'yearly' ? (typeof p.price.y === 'number' ? Math.round(p.price.y / 12) : p.price.y) : p.price.m;
            const priceEn = billing === 'yearly' && typeof p.price.y === 'number' ? Math.round(p.price.y / 12) : (p.price.mEn ?? p.price.m);
            const isCustom = typeof priceM === 'string';
            return (
              <div key={p.id} className={'prc-plan' + (p.badge ? ' is-popular' : '')}>
                {p.badge && (
                  <div className="prc-plan-badge">
                    <span className="t-bn">{p.badge.bn}</span>
                    <span className="t-en">{p.badge.en}</span>
                  </div>
                )}
                <div className="prc-plan-head">
                  <div className="prc-plan-name" style={{color: p.color}}>
                    <span className="t-bn">{p.name.bn}</span>
                    <span className="t-en">{p.name.en}</span>
                  </div>
                  <div className="prc-plan-tag">
                    <span className="t-bn">{p.tagline.bn}</span>
                    <span className="t-en">{p.tagline.en}</span>
                  </div>
                </div>

                <div className="prc-plan-price">
                  {isCustom ? (
                    <div className="prc-plan-price-custom">
                      <span className="t-bn">কাস্টম</span>
                      <span className="t-en">Custom</span>
                    </div>
                  ) : priceM === 0 ? (
                    <div className="prc-plan-price-free">
                      <span className="t-bn">৳০</span>
                      <span className="t-en">৳0</span>
                      <span className="prc-plan-price-per">
                        <span className="t-bn">/চিরতরে</span>
                        <span className="t-en">/forever</span>
                      </span>
                    </div>
                  ) : (
                    <div className="prc-plan-price-num">
                      <span className="prc-plan-price-cur">৳</span>
                      <span className="prc-plan-price-amt">{priceM.toLocaleString()}</span>
                      <span className="prc-plan-price-per">
                        <span className="t-bn">/মাস</span>
                        <span className="t-en">/month</span>
                      </span>
                    </div>
                  )}
                  {!isCustom && priceM > 0 && billing === 'yearly' && (
                    <div className="prc-plan-price-yearly">
                      <span className="t-bn">বছরে ৳{p.price.y.toLocaleString()} বিল করা হবে</span>
                      <span className="t-en">Billed ৳{p.price.y.toLocaleString()} yearly</span>
                    </div>
                  )}
                </div>

                <a href={p.id === 'enterprise' ? '#contact' : 'sign-in.html'} className={'prc-plan-cta' + (p.badge ? ' is-primary' : '')}>
                  <span className="t-bn">{p.cta.bn}</span>
                  <span className="t-en">{p.cta.en}</span>
                  {I.arrowRight}
                </a>

                <div className="prc-plan-features">
                  {p.features.map((f, i) => (
                    <div key={i} className={'prc-plan-feat' + (f.on ? '' : ' is-off')}>
                      <span className="prc-plan-feat-icon">
                        {f.on ? I.check : I.close}
                      </span>
                      <span>
                        <span className="t-bn">{f.bn}</span>
                        <span className="t-en">{f.en}</span>
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// =================== TRUSTED LOGOS ===================
function TrustStrip({ lang }) {
  const logos = [
    { l:'P', bg:'#E81E2C', n:'Pathao' },
    { l:'b', bg:'#E2126B', n:'bKash' },
    { l:'BB', bg:'#003E70', n:'Brac Bank' },
    { l:'g', bg:'#0066B2', n:'Grameenphone' },
    { l:'C', bg:'#10B981', n:'Chaldal' },
    { l:'D', bg:'#F85606', n:'Daraz' },
    { l:'10', bg:'#FB923C', n:'10MS' },
    { l:'S', bg:'#F59E0B', n:'ShopUp' },
  ];
  return (
    <section className="prc-trust">
      <div className="container">
        <div className="prc-trust-label">
          <span className="t-bn">১,৮৪০+ বাংলাদেশী কোম্পানি বিশ্বাস করে</span>
          <span className="t-en">Trusted by 1,840+ Bangladeshi companies</span>
        </div>
        <div className="prc-trust-logos">
          {logos.map((l,i) => (
            <div key={i} className="prc-trust-logo">
              <div className="prc-trust-logo-mark" style={{background: l.bg}}>{l.l}</div>
              <span>{l.n}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== COMPARE TABLE ===================
function CompareSection({ lang }) {
  return (
    <section className="prc-compare-section">
      <div className="container">
        <div className="prc-section-head">
          <div className="prc-section-eyebrow">
            <span className="t-bn">ফিচার তুলনা</span>
            <span className="t-en">Feature comparison</span>
          </div>
          <h2 className="prc-section-title">
            <span className="t-bn">বিস্তারিত তুলনা টেবিল</span>
            <span className="t-en">Detailed comparison</span>
          </h2>
        </div>

        <div className="prc-table-wrap">
          <table className="prc-table">
            <thead>
              <tr>
                <th></th>
                <th>
                  <span className="t-bn">স্টার্টার</span>
                  <span className="t-en">Starter</span>
                </th>
                <th className="prc-table-popular">
                  <span className="t-bn">গ্রোথ</span>
                  <span className="t-en">Growth</span>
                  <span className="prc-table-popular-badge">★</span>
                </th>
                <th>
                  <span className="t-bn">এন্টারপ্রাইজ</span>
                  <span className="t-en">Enterprise</span>
                </th>
              </tr>
            </thead>
            <tbody>
              {COMPARE_ROWS.map((cat, ci) => (
                <React.Fragment key={ci}>
                  <tr className="prc-table-cat">
                    <td colSpan="4">
                      <span className="t-bn">{cat.cat.bn}</span>
                      <span className="t-en">{cat.cat.en}</span>
                    </td>
                  </tr>
                  {cat.items.map((it, ii) => (
                    <tr key={ii}>
                      <td className="prc-table-feat">
                        <span className="t-bn">{it.f.bn}</span>
                        <span className="t-en">{it.f.en}</span>
                      </td>
                      {it.vals.map((v, vi) => (
                        <td key={vi} className={vi === 1 ? 'prc-table-popular-cell' : ''}>
                          <CellVal v={v} />
                        </td>
                      ))}
                    </tr>
                  ))}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

function CellVal({ v }) {
  if (v === true) return <span className="prc-table-yes">{I.check}</span>;
  if (v === false) return <span className="prc-table-no">{I.close}</span>;
  return <span className="prc-table-text">{v}</span>;
}

// =================== FAQ ===================
function FAQSection({ lang }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="prc-faq-section">
      <div className="container">
        <div className="prc-section-head">
          <div className="prc-section-eyebrow">
            <span className="t-bn">প্রশ্নোত্তর</span>
            <span className="t-en">FAQs</span>
          </div>
          <h2 className="prc-section-title">
            <span className="t-bn">সাধারণ প্রশ্ন</span>
            <span className="t-en">Common questions</span>
          </h2>
        </div>

        <div className="prc-faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={'prc-faq-item' + (open === i ? ' is-open' : '')}>
              <button className="prc-faq-q" onClick={()=>setOpen(o => o === i ? -1 : i)}>
                <span>
                  <span className="t-bn">{f.q.bn}</span>
                  <span className="t-en">{f.q.en}</span>
                </span>
                <span className="prc-faq-toggle">{open === i ? '−' : '+'}</span>
              </button>
              {open === i && (
                <div className="prc-faq-a">
                  <span className="t-bn">{f.a.bn}</span>
                  <span className="t-en">{f.a.en}</span>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== CTA ===================
function PricingCTA({ lang }) {
  return (
    <section className="prc-cta-section" id="contact">
      <div className="container">
        <div className="prc-cta">
          <h2 className="prc-cta-title">
            <span className="t-bn">সঠিক প্ল্যান বেছে নিতে সাহায্য চান?</span>
            <span className="t-en">Need help choosing the right plan?</span>
          </h2>
          <p className="prc-cta-sub">
            <span className="t-bn">আমাদের সেলস টিমের সাথে ১৫ মিনিটের ফ্রি কনসালট্যাশন বুক করুন। আপনার টিম সাইজ, বাজেট ও হায়ারিং গোলের ভিত্তিতে সঠিক প্ল্যান সাজেস্ট করব।</span>
            <span className="t-en">Book a 15-minute free consultation with our sales team. We'll suggest the right plan based on your team size, budget, and hiring goals.</span>
          </p>
          <div className="prc-cta-actions">
            <a href="contact.html" className="btn btn-ink btn-lg">
              <span className="t-bn">সেলস কল বুক করুন</span>
              <span className="t-en">Book a sales call</span>
              {I.arrowRight}
            </a>
            <a href="sign-in.html" className="btn btn-ghost btn-lg">
              <span className="t-bn">বিনামূল্যে শুরু করুন</span>
              <span className="t-en">Start free</span>
            </a>
          </div>
          <div className="prc-cta-meta">
            {I.check}
            <span className="t-bn">১৪ দিনের মানি-ব্যাক গ্যারান্টি · ক্রেডিট কার্ড লাগে না</span>
            <span className="t-en">14-day money-back guarantee · no credit card required</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== APP ===================
function App() {
  const [lang, setLang] = window.usePageLang('bn');
  return (
    <>
      <PageTopBar lang={lang} setLang={setLang} />
      <PageHeader />
      <PricingHero lang={lang} />
      <PlansSection lang={lang} />
      <TrustStrip lang={lang} />
      <CompareSection lang={lang} />
      <FAQSection lang={lang} />
      <PricingCTA lang={lang} />
      <PageFooter lang={lang} />
    </>
  );
}

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