/* Main App */
const App = () => {
  const lang = window.CIM_GET_LANG();
  const baseServices = window.CIM_SERVICES;
  const services = baseServices.map(s => window.CIM_LOCALIZE_SERVICE(s, lang));
  const [selected, setSelected] = React.useState(null);
  const [supportFilter, setSupportFilter] = React.useState('ALL');

  React.useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  const onPick = (s) => {
    if (typeof s === 'string') s = services.find((x) => x.id === s);
    setSelected(s);
  };

  const onBook = () => {
    window.open('https://cleaninginmotion.com/book', '_blank');
  };

  const toggleLang = () => {
    window.CIM_SET_LANG(lang === 'en' ? 'es' : 'en');
  };

  return (
    <div className="app density-comfortable hier-funnel">
      <header className="topbar">
        <div className="topbar-inner">
          <a className="brand" href="/">
            <div className="brand-mark">
              <svg viewBox="0 0 100 100" fill="none"><path d="M50 18 30 62h12v22h16V62h12L50 18Z" fill="white" /></svg>
            </div>
            <div className="brand-text">
              <span className="brand-eyebrow">{t('topbar.eyebrow')}</span>
              <span className="brand-name">Cleaning in Motion</span>
            </div>
          </a>
          <div className="top-spacer"></div>
          <button className="btn btn-lang" onClick={toggleLang} aria-label="Toggle language">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{marginRight:6}}><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" stroke="currentColor" strokeWidth="1.8"/></svg>
            {t('topbar.lang')}
          </button>
          <button className="btn btn-ghost" onClick={() => document.getElementById('catalog').scrollIntoView({ behavior: 'smooth', block: 'start' })}>{t('topbar.menu')}</button>
          <button className="btn btn-yellow" onClick={onBook}>{t('topbar.book')}</button>
        </div>
      </header>

      <section className="hero">
        <div className="hero-left">
          <span className="hero-eyebrow">{t('hero.eyebrow')}</span>
          <h1 className="hero-headline">
            {t('hero.headline.1')}<br />
            <span className="hl-blue">{t('hero.headline.2')}</span><br />
            {t('hero.headline.3')} <span className="hl-highlight">{t('hero.headline.4')}</span><br />
            {t('hero.headline.5')}
          </h1>
          <p className="hero-sub">
            {t('hero.sub')} <strong>{t('hero.sub.bold')}</strong>
          </p>

          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <button className="btn btn-quiz-pop" onClick={() => window.location.href = 'quiz.html'}>
              <span className="quiz-pop-pulse"></span>
              <span style={{ position: 'relative', zIndex: 1 }}>{t('hero.cta.quiz')}</span>
            </button>
            <button className="btn btn-ghost" onClick={() => document.getElementById('catalog').scrollIntoView({ behavior: 'smooth', block: 'start' })}>{t('hero.cta.menu')}</button>
          </div>

          <div className="hero-stats">
            <div>
              <div className="stat-num">{t('hero.stat1.num')}</div>
              <div className="stat-lbl">{t('hero.stat1.lbl')}</div>
            </div>
            <div>
              <div className="stat-num">{t('hero.stat2.num')}</div>
              <div className="stat-lbl">{t('hero.stat2.lbl')}</div>
            </div>
            <div>
              <div className="stat-num">{t('hero.stat3.num')}</div>
              <div className="stat-lbl">{t('hero.stat3.lbl')}</div>
            </div>
          </div>
        </div>

        <Quiz services={services} onPick={onPick} lang={lang} />
      </section>

      <section className="spine" id="catalog">
        <div className="spine-inner">
          <div className="spine-head">
            <div>
              <h2 className="spine-title">
                {(() => {
                  const parts = t('spine.title.funnel');
                  return <>{parts[0]}<span className="accent">{parts[1]}</span>{parts[2]}</>;
                })()}
              </h2>
              <p className="spine-sub">{t('spine.sub.funnel')}</p>
            </div>
            <div className="support-toggle">
              <button className={supportFilter === 'ALL' ? 'is-active' : ''} onClick={() => setSupportFilter('ALL')}>{lang === 'es' ? 'Todos' : 'All'}</button>
              <button className={supportFilter === 'DIY' ? 'is-active' : ''} onClick={() => setSupportFilter('DIY')}>DIY</button>
              <button className={supportFilter === 'DWY' ? 'is-active' : ''} onClick={() => setSupportFilter('DWY')}>DWY</button>
              <button className={supportFilter === 'DFY' ? 'is-active' : ''} onClick={() => setSupportFilter('DFY')}>DFY</button>
            </div>
          </div>

          <FunnelRow stage="TOFU" services={services} supportFilter={supportFilter} onPick={onPick} lang={lang} />
          <FunnelRow stage="MOFU" services={services} supportFilter={supportFilter} onPick={onPick} lang={lang} />
          <FunnelRow stage="BOFU" services={services} supportFilter={supportFilter} onPick={onPick} lang={lang} />
        </div>
      </section>

      <section className="trust">
        <div className="trust-inner">
          <div>
            <div style={{ fontSize: 10.5, letterSpacing: '0.18em', color: 'var(--cim-yellow)', fontWeight: 700, textTransform: 'uppercase', marginBottom: 14 }}>{t('trust.eyebrow')}</div>
            <p className="trust-quote">
              <span className="accent">"</span>The only company that has been with us and delivered consistently is <span className="accent">CIM.</span><span className="accent">"</span>
            </p>
            <div className="trust-attr">{t('trust.attr')}</div>
          </div>
          <div className="trust-points">
            <div className="trust-point">
              <div className="icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg></div>
              <div><h5>{t('trust.point1.title')}</h5><p>{t('trust.point1.body')}</p></div>
            </div>
            <div className="trust-point">
              <div className="icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" /></svg></div>
              <div><h5>{t('trust.point2.title')}</h5><p>{t('trust.point2.body')}</p></div>
            </div>
            <div className="trust-point">
              <div className="icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" /><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg></div>
              <div><h5>{t('trust.point3.title')}</h5><p>{t('trust.point3.body')}</p></div>
            </div>
          </div>
        </div>
      </section>

      <section className="bottom-cta">
        <div className="bottom-cta-inner">
          <div>
            <h2>{t('cta.title')[0]}<br />{t('cta.title')[1]}</h2>
            <p>{t('cta.body')}</p>
          </div>
          <div className="bottom-cta-actions">
            <button className="btn btn-quiz-pop" onClick={() => window.location.href = 'quiz.html'}>
              <span className="quiz-pop-pulse"></span>
              <span style={{ position: 'relative', zIndex: 1 }}>{t('cta.quiz')}</span>
            </button>
            <button className="btn btn-dark" onClick={onBook}>{t('cta.book')}</button>
          </div>
        </div>
      </section>

      <footer className="footer">
        <div>{t('footer.copy')}</div>
        <div>{t('footer.note')}</div>
      </footer>

      <Drawer service={selected} onClose={() => setSelected(null)} onBook={onBook} lang={lang} />
    </div>
  );
};

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