// Home page — uses real photos + 13 products + manufacturing process

const HomePage = ({ setPage, density, heroLayout, lang }) => {
  return (
    <>
      <HeroSection setPage={setPage} heroLayout={heroLayout} lang={lang} />
      <TrustBig lang={lang} />
      <ProductsSection setPage={setPage} lang={lang} />
      <FeaturedSeries setPage={setPage} lang={lang} />
      <CapabilitiesSection lang={lang} />
      <ProcessSection lang={lang} />
      <FactorySection lang={lang} />
      <IndustriesSection setPage={setPage} lang={lang} />
      <CertsSection lang={lang} />
      <InsightsTeaser setPage={setPage} lang={lang} />
      <NewsletterBand lang={lang} />
    </>
  );
};

const HeroSection = ({ setPage, heroLayout, lang }) => {
  const Title = () => (
    <>{t('hero.title.a', lang)}<span className="accent-word">{t('hero.title.accent', lang)}</span>{t('hero.title.b', lang)}</>
  );

  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-meta">
              <span>{t('hero.eyebrow1', lang)}</span>
              <span>{t('hero.eyebrow2', lang)}</span>
              <span>{t('hero.eyebrow3', lang)}</span>
            </div>
            <h1 className="h-display"><Title /></h1>
            <p className="lede hero-lede">{t('hero.lede', lang)}</p>
            <div className="hero-cta">
              <button className="btn btn-primary btn-lg" onClick={() => setPage('products')}>
                {t('hero.cta1', lang)} <Arrow />
              </button>
              <button className="btn btn-ghost btn-lg" onClick={() => setPage('rfq')}>
                {t('hero.cta2', lang)}
              </button>
            </div>
          </div>
          <div className="hero-visual">
            <HeroComposition lang={lang} />
          </div>
        </div>
      </div>
    </section>
  );
};

const TrustBar = ({ lang }) => (
  <section style={{ padding: '28px 0', background: 'var(--bg-sunken)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
    <div className="container">
      <div className="home-trust-row">
        {[1,2,3,4].map(i => (
          <div key={i} className="home-trust-cell">
            <span className="n">{t(`hero.stat${i}.n`, lang)}</span>
            <span className="l">{t(`hero.stat${i}.l`, lang)}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ProductsSection = ({ setPage, lang }) => {
  const [tab, setTab] = React.useState('all');
  const tabFilter = (p) => {
    if (tab === 'all') return true;
    if (tab === 'pressure') return ['general','stainless','vacuum','oil-filled','vibration','diaphragm','mini','refrigerant'].includes(p.category);
    if (tab === 'temperature') return p.category === 'temperature';
    if (tab === 'special') return p.category === 'special';
    return true;
  };
  const filtered = PRODUCTS.filter(tabFilter);

  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="l">
            <div className="eyebrow">{t('products.eyebrow', lang)}</div>
            <h2 className="h-1">{t('products.titleA', lang)}<span style={{ color: 'var(--ink-3)' }}>{t('products.titleB', lang)}</span></h2>
            <p className="lede" style={{ marginTop: 16 }}>{t('products.lede', lang)}</p>
          </div>
          <button className="btn btn-ghost" onClick={() => setPage('products')}>
            {t('products.fullCatalog', lang)} <Arrow />
          </button>
        </div>

        <div style={{ display: 'flex', gap: 4, marginBottom: 32, borderBottom: '1px solid var(--line)' }}>
          {['all', 'pressure', 'temperature', 'special'].map(k => (
            <button key={k} onClick={() => setTab(k)}
              style={{
                padding: '12px 18px',
                background: 'transparent',
                border: 'none',
                borderBottom: `2px solid ${tab === k ? 'var(--accent)' : 'transparent'}`,
                color: tab === k ? 'var(--ink)' : 'var(--ink-2)',
                fontWeight: tab === k ? 600 : 400,
                fontSize: 14,
                cursor: 'pointer',
                marginBottom: -1,
              }}>
              {t(`products.tabs.${k}`, lang)} <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--ink-3)', marginLeft: 4 }}>({PRODUCTS.filter(p => k === 'all' || (k === 'pressure' && ['general','stainless','vacuum','oil-filled','vibration','diaphragm','mini','refrigerant'].includes(p.category)) || (k === 'temperature' && p.category === 'temperature') || (k === 'special' && p.category === 'special')).length})</span>
            </button>
          ))}
        </div>

        <div className="product-grid">
          {filtered.map((p, i) => (
            <div key={p.id} className="product-card" onClick={() => setPage(`product:${p.id}`)}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                <div className="index">{p.sku}</div>
                {p.hot && <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--accent)', letterSpacing: '0.08em' }}>{t('products.popular', lang)}</div>}
              </div>
              <div className="pic" style={{ background: '#fff' }}>
                <ProductPhoto name={p.img} alt={pname(p.id, lang)} />
              </div>
              <div>
                <h3>{pname(p.id, lang)}</h3>
                <div className="specs" style={{ marginTop: 8 }}>
                  <span>{p.range}</span>
                  <span>{p.size} · {p.material}</span>
                  <span>{p.accuracy} {lang === 'zh' ? '精度' : 'accuracy'}</span>
                </div>
              </div>
              <div className="cta">
                <span>{t('products.viewSpecs', lang)}</span>
                <Arrow />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CapabilitiesSection = ({ lang }) => {
  return (
    <section style={{ background: 'var(--bg-sunken)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="section-head">
          <div className="l">
            <div className="eyebrow">{t('caps.eyebrow', lang)}</div>
            <h2 className="h-1" style={{ marginTop: 12 }}>{t('caps.title', lang)}</h2>
            <p className="lede" style={{ marginTop: 16, maxWidth: '60ch' }}>{t('caps.lede', lang)}</p>
          </div>
        </div>
        <div className="home-caps-grid">
          {[1,2,3,4,5,6].map(n => (
            <div key={n} className="home-caps-cell">
              <div className="ix">0{n}</div>
              <h4>{t(`caps.${n}.t`, lang)}</h4>
              <p>{t(`caps.${n}.d`, lang)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ProcessSection = ({ lang }) => {
  return (
    <section id="process">
      <div className="container">
        <div className="section-head">
          <div className="l">
            <div className="eyebrow">{t('process.eyebrow', lang)}</div>
            <h2 className="h-1" style={{ marginTop: 12 }}>{t('process.title', lang)}</h2>
            <p className="lede" style={{ marginTop: 16, maxWidth: '60ch' }}>{t('process.lede', lang)}</p>
          </div>
        </div>
        <div className="home-process-grid">
          {PROCESS_STEPS.map((step, i) => (
            <div key={i} className="home-process-cell">
              <div className="pic">
                <ProcessPhoto name={step.img} />
                <div className="tag">STEP 0{step.id}</div>
              </div>
              <h4>{t(`process.${step.id}`, lang)}</h4>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FactorySection = ({ lang }) => {
  return (
    <section style={{ background: 'var(--bg-sunken)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="home-factory-grid">
          <div>
            <div className="eyebrow">{t('factory.eyebrow', lang)}</div>
            <h2 className="h-1" style={{ marginTop: 12 }}>{t('factory.title', lang)}</h2>
            <p className="lede" style={{ marginTop: 16 }}>{t('factory.lede', lang)}</p>
            <div className="home-factory-stats">
              {[1,2,3,4].map(i => (
                <div key={i} className="home-factory-stat">
                  <span className="ix">0{i}</span>
                  <span className="lbl">{t(`factory.f${i}`, lang)}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="home-factory-visuals">
            <div className="cell main">
              <FactoryPhoto which="entrance" />
            </div>
            <div className="cell">
              <FactoryPhoto which="production-floor" />
            </div>
            <div className="cell white">
              <CertImage name="manogauge-national-high-tech-enterprise-certification" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const IndustriesSection = ({ setPage, lang }) => {
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="l">
            <div className="eyebrow">{t('ind.eyebrow', lang)}</div>
            <h2 className="h-1">{t('ind.title', lang)}</h2>
          </div>
        </div>
      </div>
      <div className="container">
        <div className="ind-grid">
          {INDUSTRIES.map((ind, i) => (
            <div key={ind.id} className="ind-cell">
              <div className="num">{String(i + 1).padStart(2, '0')}</div>
              <h4>{t(`ind.${ind.id}.l`, lang)}</h4>
              <p style={{ fontSize: 12, color: 'var(--ink-3)' }}>{t(`ind.${ind.id}.d`, lang)}</p>
              <div className="icon"><IndIcon name={ind.id} /></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CertsSection = ({ lang }) => {
  return (
    <section id="certs" className="certs">
      <div className="container">
        <div>
          <div className="eyebrow accent" style={{ marginBottom: 12 }}>{t('certs.eyebrow', lang)}</div>
          <h2 className="h-1">{t('certs.title', lang)}</h2>
          <p style={{ marginTop: 12, color: 'oklch(1 0 0 / 0.7)', maxWidth: '50ch' }}>{t('certs.lede', lang)}</p>
        </div>
        <div className="home-certs-gallery">
          <div className="cell">
            <CertImage name="manogauge-national-high-tech-enterprise-certification" />
          </div>
          <div className="cell">
            <CertImage name="manogauge-invention-patent-certificate" />
          </div>
        </div>
        <div className="cert-list" style={{ gridColumn: '1 / -1', marginTop: 32 }}>
          {CERTS.map(c => (
            <div key={c.code} className="cert-item">
              <div className="code">{c.code}</div>
              <div className="desc">{c.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HomePage });