// Main App — Hero + Nav + photo swap + booking modal mount + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF6B47",
  "lang": "en",
  "heroPhoto": 0
} /*EDITMODE-END*/;

const HERO_PHOTOS = [
{ src: window.__resources && window.__resources.jishad1 || "img/jishad-1.webp", bgClass: "" }, // mint
{ src: window.__resources && window.__resources.jishad3 || "img/jishad-3.webp", bgClass: "butter" } // butter
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [bookingOpen, setBookingOpen] = React.useState(false);
  const [bookingTopic, setBookingTopic] = React.useState('');
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const lang = t.lang || 'en';
  const copy = window.COPY[lang];

  React.useEffect(() => {
    document.body.classList.toggle('ml', lang === 'ml');
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [lang, t.accent]);

  const openBooking = (topic) => {setBookingTopic(typeof topic === 'string' ? topic : '');setBookingOpen(true);setMobileOpen(false);};

  return (
    <>
      <Nav copy={copy} lang={lang} setLang={(l) => setTweak('lang', l)} onBook={openBooking} mobileOpen={mobileOpen} setMobileOpen={setMobileOpen} />
      <Hero copy={copy} lang={lang} onBook={openBooking} />
      <Marquee items={lang === 'en' ?
      ['Result-based · not research-based', 'The skill no one can take from you', '20 years in the arena', '1 million lives moved', 'Network Energy Workshop · 250+', 'Founder · Renewed'] :
      ['റിസൾട്ട്-ബേസ്ഡ്, റിസർച്ച്-ബേസ്ഡല്ല', 'തിരിച്ചെടുക്കാത്ത ഒരേയൊരു കഴിവ്', '20 വർഷം പരിചയം', '10 ലക്ഷം പേർ', 'Network Energy · 250+', 'Founder · Renewed']
      } />
      <About t={copy} lang={lang} />
      <Stats t={copy} lang={lang} />
      <Areas t={copy} />
      <PopularVideos lang={lang} />
      <WhatsAppCommunity lang={lang} />
      <Testimonials t={copy} lang={lang} />
      <Speaking t={copy} lang={lang} onBook={openBooking} />
      <RenewedTeaser lang={lang} />
      <Socials t={copy} lang={lang} />
      <Newsletter t={copy} lang={lang} />
      <Footer t={copy} lang={lang} onBook={openBooking} />

      <a className="fab" href={window.SOCIAL.whatsapp} target="_blank" rel="noreferrer" aria-label="WhatsApp">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="white">
          <path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.2s-.8 1-.9 1.2c-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.3-1.3c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.5 0-2.9-.4-4.2-1.1l-.3-.2-3.1.8.8-3-.2-.3c-.8-1.3-1.2-2.8-1.2-4.3 0-4.5 3.7-8.2 8.2-8.2s8.2 3.7 8.2 8.2-3.7 8.1-8.2 8.1z" />
        </svg>
      </a>

      {bookingOpen && <BookingModal lang={lang} prefillTopic={bookingTopic} onClose={() => setBookingOpen(false)} />}

      <TweaksPanel>
        <TweakSection label="Accent color" />
        <TweakColor label="Accent" value={t.accent}
        options={['#FF6B47', '#4FB48A', '#5E3A8A', '#E63946']}
        onChange={(v) => setTweak('accent', v)} />
      </TweaksPanel>
    </>);

}

function Nav({ copy, lang, setLang, onBook, mobileOpen, setMobileOpen }) {
  const close = () => setMobileOpen(false);
  return (
    <>
      <nav className="nav">
        <div className="nav-inner">
          <a className="nav-brand" href="#" onClick={close}><span className="dot" />Jishad Bakar</a>
          <div className="nav-links">
            <a href="#about">{copy.nav.about}</a>
            <a href="#work">{copy.nav.work}</a>
            <a href="#videos">{lang === 'en' ? 'Videos' : 'വീഡിയോകൾ'}</a>
            <a href="renewed.html">Renewed</a>
            <a href="#speaking">{copy.nav.speaking}</a>
          </div>
          <button className="nav-book" onClick={onBook}>
            {copy.nav.book} <Arrow size={12} />
          </button>
          <button className="nav-mobile-btn" onClick={() => setMobileOpen(!mobileOpen)} aria-label="Menu">
            <span />
          </button>
        </div>
      </nav>
      {mobileOpen &&
      <div className="nav-mobile-menu" onClick={close}>
          <a href="#about">{copy.nav.about}</a>
          <a href="#work">{copy.nav.work}</a>
          <a href="#videos">{lang === 'en' ? 'Videos' : 'വീഡിയോകൾ'}</a>
          <a href="renewed.html">Renewed</a>
          <a href="#speaking">{copy.nav.speaking}</a>
          <a href="#testimonials">{copy.nav.testimonials}</a>
          <button className="btn btn-accent" style={{ marginTop: 18, justifyContent: 'center' }} onClick={(e) => {e.stopPropagation();onBook();}}>
            {copy.nav.book} <Arrow />
          </button>
        </div>
      }
    </>);

}

function Hero({ copy, lang, onBook }) {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-stack">
          <div className="hero-wave">
            <span className="hand">👋</span> {lang === 'en' ? "Hey, I'm Jishad —" : "ഹായ്, ഞാൻ ജിഷാദ് —"}
          </div>
          <h1 className="display hero-name">
            {lang === 'en' ?
            <>I help you build the <span className="underline-wave">skills</span> no one can take.</> :
            <>ആരും തിരിച്ചെടുക്കാത്ത <span className="underline-wave">കഴിവുകൾ</span> ഞാൻ പഠിപ്പിക്കാം.</>
            }
          </h1>
          <div className="hero-figure">
            <img src={(window.__resources && window.__resources.jishad3) || "img/jishad-3.webp"} alt="Jishad Bakar speaking on stage" />
          </div>
          <p className="hero-tagline">
            {lang === 'en' ?
            <>Trainer, coach and entrepreneur. <em>20 years in the arena.</em> Over a million lives moved. One mission — help you do the same.</> :
            <>ട്രെയിനർ, കോച്ച്, സംരംഭകൻ. <em>20 വർഷം പ്രവൃത്തിപരിചയം.</em> പത്ത് ലക്ഷം ജീവിതങ്ങൾ. ഒരേയൊരു ലക്ഷ്യം — നിങ്ങളെയും അവിടെത്തിക്കുക.</>
            }
          </p>
          <div className="hero-ctas">
            <button className="btn btn-pop" onClick={onBook}>{copy.primaryCTA} <Arrow /></button>
            <a className="btn btn-ghost" href={window.SOCIAL.youtube} target="_blank" rel="noreferrer">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20" /></svg>
              {copy.secondaryCTA}
            </a>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item"><b>20<em>+</em></b><span>{lang === 'en' ? 'Years of experience' : 'വർഷം പരിചയം'}</span></div>
            <div className="hero-meta-item"><b>1M<em>+</em></b><span>{lang === 'en' ? 'Lives impacted' : 'ജീവിതങ്ങൾ'}</span></div>
            <div className="hero-meta-item"><b>10,000<em>+</em></b><span>{lang === 'en' ? 'Workshops led' : 'വർക്ക്ഷോപ്പുകൾ'}</span></div>
            <div className="hero-meta-item"><b>20<em>+</em></b><span>{lang === 'en' ? 'Countries' : 'രാജ്യങ്ങൾ'}</span></div>
          </div>
        </div>
      </div>
    </section>);

}

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