const { useState, useEffect, useRef } = React;

const { Nav, MobileMenu, FloatingBar, Footer, useReveal, ContactModal, FinalCTA, FOOTER_COLS, SOLUTIONS_NAV, PLATFORMS_NAV, t, useLocale } = window.ATC;

function AboutApp() {
  const [contactOpen, setContactOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useReveal();
  useLocale();  // re-render on locale change so t() lookups refresh

  const openContact = () => setContactOpen(true);
  const openMenu = () => setMobileOpen(true);
  const closeMenu = () => setMobileOpen(false);

  // Values and steps are i18n-key driven. The num stays English ("01"/"02"/"03").
  // title and desc are i18n keys, resolved at render via t().
  const values = [
    { num: '01', title: 'about.values.0.title', desc: 'about.values.0.desc' },
    { num: '02', title: 'about.values.1.title', desc: 'about.values.1.desc' },
    { num: '03', title: 'about.values.2.title', desc: 'about.values.2.desc' },
  ];

  const steps = [
    { num: '01', title: 'about.steps.0.title', desc: 'about.steps.0.desc' },
    { num: '02', title: 'about.steps.1.title', desc: 'about.steps.1.desc' },
    { num: '03', title: 'about.steps.2.title', desc: 'about.steps.2.desc' },
  ];

  return (
    <div className="app">
      <Nav
        onDemoClick={openContact}
        homeUrl="/"
        showProductsNav={true}
        showPlatformNav={true}
        platformUrl="/platforms/apex-bridge"
        activeSection="about"
      />

      <MobileMenu
        open={mobileOpen}
        onClose={closeMenu}
        onDemoClick={openContact}
        products={SOLUTIONS_NAV}
        platforms={PLATFORMS_NAV}
        showAbout
      />
      <FloatingBar onMenuClick={openMenu} onDemoClick={openContact} />

      {/* Hero */}
      <section className="about-hero">
        <div className="about-hero-grid" />
        <div className="container" style={{ position: 'relative', zIndex: 1 }}>
          <div className="eyebrow reveal">
            <span className="eyebrow-accent">Malaysia</span>
            <span className="eyebrow" style={{ color: 'var(--text-3)' }}>·</span>
            <span className="eyebrow" style={{ color: 'var(--text-3)' }}>{t('about.eyebrow.tag')}</span>
          </div>
          <h1 className="reveal" style={{ transitionDelay: '100ms' }}>
            {t('about.h1_1')}<br />
            {t('about.h1_2')}<br />
            <span className="accent">{t('about.h1_3_accent')}</span>
          </h1>
          <p className="sub reveal" style={{ transitionDelay: '200ms' }}>
            {t('about.sub')}
          </p>
          <div className="reveal" style={{ transitionDelay: '300ms', display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={openContact}>{t('common.talkToUs')}</button>
          </div>
        </div>
      </section>

      {/* Team Values */}
      <section style={{ padding: 'var(--section-y) 0', background: 'var(--bg)' }}>
        <div className="container">
          <div className="section-header reveal" style={{ marginBottom: '64px' }}>
            <h2 className="display">{t('about.valuesHeading')}</h2>
            <p className="right" style={{ color: 'var(--text-2)', maxWidth: '380px' }}>
              {t('about.valuesSub')}
            </p>
          </div>
          <div className="values-grid">
            {values.map(v => (
              <div key={v.num} className="value-card reveal">
                <div className="num">{v.num}</div>
                <div className="accent-bar" />
                <h4>{t(v.title)}</h4>
                <p>{t(v.desc)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Who We Are */}
      <section style={{ padding: 'var(--section-y) 0', background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="who-section">
            <div className="who-text reveal">
              <h2>{t('about.whoHeading.l1')}<br />{t('about.whoHeading.l2')}<br />{t('about.whoHeading.l3')}</h2>
              <p>{t('about.whoBody.0')}</p>
              <p>{t('about.whoBody.1')}</p>
              <p>{t('about.whoBody.2')}</p>
            </div>
            <div className="who-visual-wrap reveal">
              <div className="who-visual">
                <div className="ring" />
                <div className="ring" />
                <div className="ring" />
                <div className="dot" />
                <svg className="center-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ color: 'var(--accent)' }}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 15.3m0 0L4.451 16.574a2.25 2.25 0 01-1.591.659H3v-4.748a2.25 2.25 0 00-.486-1.284L2.571 9.04" />
                </svg>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* How We Work — Steps */}
      <section style={{ padding: 'var(--section-y) 0', background: 'var(--bg)' }}>
        <div className="container">
          <div className="section-header reveal" style={{ marginBottom: '64px' }}>
            <h2 className="display">{t('about.processHeading')}</h2>
            <p className="right" style={{ color: 'var(--text-2)', maxWidth: '380px' }}>
              {t('about.processSub')}
            </p>
          </div>
          <div className="steps-wrap">
            {steps.map(s => (
              <div key={s.num} className="step-item reveal">
                <div className="step-num">{s.num}</div>
                <div className="step-body">
                  <h4>{t(s.title)}</h4>
                  <p>{t(s.desc)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <FinalCTA
        heading={t('about.finalCta.heading')}
        accent={t('about.finalCta.accent')}
        sub={t('about.finalCta.sub')}
        actions={[
          { label: t('common.talkToUs'), onClick: openContact, primary: true },
        ]}
      />

      <Footer cols={FOOTER_COLS} footerId="about-footer" />

      <ContactModal open={contactOpen} onClose={() => setContactOpen(false)} />

    </div>
  );
}

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