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

const REASONS = [
  { id:'general', bn:'সাধারণ জিজ্ঞাসা', en:'General inquiry' },
  { id:'support', bn:'টেকনিক্যাল সাপোর্ট', en:'Technical support' },
  { id:'sales', bn:'এমপ্লয়ার সেলস', en:'Employer sales' },
  { id:'press', bn:'প্রেস ও মিডিয়া', en:'Press & media' },
  { id:'partner', bn:'পার্টনারশিপ', en:'Partnership' },
  { id:'careers', bn:'NOBBYO-তে চাকরি', en:'Careers at NOBBYO' },
];

const OFFICES = [
  { city:{bn:'ঢাকা · হেডকোয়ার্টার', en:'Dhaka · Headquarters'}, addr:{bn:'বাড়ি ২৪, রোড ১১, বনানী, ঢাকা ১২১৩', en:'House 24, Road 11, Banani, Dhaka 1213'} },
  { city:{bn:'চট্টগ্রাম', en:'Chattogram'}, addr:{bn:'৩য় তলা, আগ্রাবাদ সেন্টার, চট্টগ্রাম ৪১০০', en:'3rd floor, Agrabad Centre, Chattogram 4100'} },
  { city:{bn:'সিলেট', en:'Sylhet'}, addr:{bn:'মির্জা টাওয়ার, জিন্দাবাজার, সিলেট ৩১০০', en:'Mirza Tower, Zindabazar, Sylhet 3100'} },
  { city:{bn:'রিমোট পার্টনার', en:'Remote partners'}, addr:{bn:'৬৪ জেলায় রিমোট রিক্রুটার ও সাপোর্ট টিম', en:'Remote recruiters & support across 64 districts'} },
];

function ContactForm({ lang }) {
  const [form, setForm] = useState({ name:'', email:'', phone:'', reason:'general', message:'' });
  const [sent, setSent] = useState(false);
  const update = (k,v) => setForm(f => ({...f, [k]: v}));
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  return (
    <form className="cnt-form" onSubmit={submit}>
      <div className="cnt-form-row">
        <div className="cnt-field">
          <label>
            <span className="t-bn">পূর্ণ নাম</span>
            <span className="t-en">Full name</span>
          </label>
          <input type="text" value={form.name} onChange={e=>update('name', e.target.value)} required placeholder={lang==='bn'?'রহিম আহমেদ':'Rahim Ahmed'} />
        </div>
        <div className="cnt-field">
          <label>
            <span className="t-bn">ইমেইল</span>
            <span className="t-en">Email</span>
          </label>
          <input type="email" value={form.email} onChange={e=>update('email', e.target.value)} required placeholder="you@example.com" />
        </div>
      </div>

      <div className="cnt-form-row">
        <div className="cnt-field">
          <label>
            <span className="t-bn">ফোন (ঐচ্ছিক)</span>
            <span className="t-en">Phone (optional)</span>
          </label>
          <input type="tel" value={form.phone} onChange={e=>update('phone', e.target.value)} placeholder="+880 1XXX XXXXXX" />
        </div>
        <div className="cnt-field">
          <label>
            <span className="t-bn">বিষয়</span>
            <span className="t-en">Reason</span>
          </label>
          <select value={form.reason} onChange={e=>update('reason', e.target.value)}>
            {REASONS.map(r => (
              <option key={r.id} value={r.id}>{lang==='bn' ? r.bn : r.en}</option>
            ))}
          </select>
        </div>
      </div>

      <div className="cnt-field">
        <label>
          <span className="t-bn">বার্তা</span>
          <span className="t-en">Message</span>
        </label>
        <textarea
          rows="6"
          value={form.message}
          onChange={e=>update('message', e.target.value)}
          required
          placeholder={lang==='bn'?'আমরা কীভাবে সাহায্য করতে পারি?':'How can we help?'}
        />
      </div>

      <button type="submit" className="cnt-form-submit">
        {sent ? (
          <>
            {I.check}
            <span className="t-bn">পাঠানো হয়েছে · ২৪ ঘন্টায় উত্তর পাবেন</span>
            <span className="t-en">Sent · we'll reply in 24h</span>
          </>
        ) : (
          <>
            {I.send}
            <span className="t-bn">বার্তা পাঠান</span>
            <span className="t-en">Send message</span>
          </>
        )}
      </button>
    </form>
  );
}

function App() {
  const [lang, setLang] = window.usePageLang('bn');
  return (
    <>
      <PageTopBar lang={lang} setLang={setLang} />
      <PageHeader />

      {/* Hero */}
      <section className="cnt-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 cnt-hero-inner">
          <div className="srch-eyebrow">
            <span className="srch-pulse"></span>
            <span className="t-bn">যোগাযোগ · ২৪ ঘন্টায় উত্তর</span>
            <span className="t-en">Get in touch · we reply in 24h</span>
          </div>
          <h1 className="srch-title">
            <span className="t-bn">কথা বলি, <em className="srch-rotate">সমাধান বের করি</em></span>
            <span className="t-en">Let's talk, <em className="srch-rotate">find solutions</em></span>
          </h1>
          <p className="cnt-hero-sub">
            <span className="t-bn">প্রার্থী বা এমপ্লয়ার — যেকোনো প্রশ্ন বা সমস্যা থাকলে আমাদের জানান। আমাদের টিম বাংলায় এবং ইংরেজিতে সাহায্য করতে প্রস্তুত।</span>
            <span className="t-en">Candidate or employer — drop us a line with any questions. Our team helps in both Bangla and English.</span>
          </p>
        </div>
      </section>

      {/* Form + Contact info grid */}
      <section className="cnt-section">
        <div className="container">
          <div className="cnt-contact-grid">
            <ContactForm lang={lang} />
            <div className="cnt-aside">
              <div className="cnt-aside-card">
                <div className="cnt-aside-icon">{I.send}</div>
                <h3 className="cnt-aside-title">
                  <span className="t-bn">ইমেইল</span>
                  <span className="t-en">Email</span>
                </h3>
                <p className="cnt-aside-sub">
                  <span className="t-bn">২৪ ঘন্টায় উত্তর পাবেন</span>
                  <span className="t-en">Replies within 24 hours</span>
                </p>
                <a href="mailto:hello@nobbyojobs.com.bd" className="cnt-aside-val">hello@nobbyojobs.com.bd</a>
              </div>

              <div className="cnt-aside-card">
                <div className="cnt-aside-icon">{I.bell}</div>
                <h3 className="cnt-aside-title">
                  <span className="t-bn">হটলাইন</span>
                  <span className="t-en">Hotline</span>
                </h3>
                <p className="cnt-aside-sub">
                  <span className="t-bn">শনি–বৃহঃ · সকাল ৯টা–রাত ৯টা</span>
                  <span className="t-en">Sat–Thu · 9 AM – 9 PM</span>
                </p>
                <a href="tel:+8801712000000" className="cnt-aside-val">+880 1712 000 000</a>
              </div>

              <div className="cnt-aside-card">
                <div className="cnt-aside-icon">{I.users}</div>
                <h3 className="cnt-aside-title">
                  <span className="t-bn">এমপ্লয়ার সেলস</span>
                  <span className="t-en">Employer sales</span>
                </h3>
                <p className="cnt-aside-sub">
                  <span className="t-bn">প্রাইসিং ও কাস্টম প্ল্যান নিয়ে কথা বলতে</span>
                  <span className="t-en">For pricing & custom plans</span>
                </p>
                <a href="mailto:sales@nobbyojobs.com.bd" className="cnt-aside-val">sales@nobbyojobs.com.bd</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Offices */}
      <section className="cnt-section cnt-bg-paper">
        <div className="container">
          <div className="cnt-section-head">
            <div className="cnt-section-eyebrow">
              <span className="t-bn">আমাদের অফিস</span>
              <span className="t-en">Our offices</span>
            </div>
            <h2 className="cnt-section-title">
              <span className="t-bn">৬৪ জেলায় উপস্থিতি</span>
              <span className="t-en">Across 64 districts</span>
            </h2>
          </div>
          <div className="cnt-offices">
            {OFFICES.map((o,i) => (
              <div key={i} className="cnt-office">
                <div className="cnt-office-city">
                  <span className="t-bn">{o.city.bn}</span>
                  <span className="t-en">{o.city.en}</span>
                </div>
                <div className="cnt-office-addr">
                  <span className="t-bn">{o.addr.bn}</span>
                  <span className="t-en">{o.addr.en}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cnt-cta-section">
        <div className="container">
          <div className="cnt-cta">
            <h2 className="cnt-cta-title">
              <span className="t-bn">এমপ্লয়ারদের জন্য ১৫ মিনিটের ফ্রি ডেমো</span>
              <span className="t-en">Free 15-minute demo for employers</span>
            </h2>
            <p className="cnt-cta-sub">
              <span className="t-bn">আপনার হায়ারিং প্রয়োজনের ভিত্তিতে কাস্টমাইজড দেখান। কোনো প্রতিশ্রুতি লাগে না।</span>
              <span className="t-en">A walkthrough tailored to your hiring needs. No commitment required.</span>
            </p>
            <div className="cnt-cta-actions">
              <a href="pricing.html" className="btn btn-ink btn-lg">
                <span className="t-bn">ডেমো বুক করুন</span>
                <span className="t-en">Book a demo</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>
        </div>
      </section>

      <PageFooter lang={lang} />
    </>
  );
}

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