// New sections: TrustBig, FeaturedSeries, Insights teaser, Newsletter, Contact details, FAQ
// Plus the Insights page

// ============================================================
// Big Trust Bar — replaces the small TrustBar with confident numerals
// ============================================================
const TrustBig = ({ lang }) => {
  const stats = [1, 2, 3, 4].map(i => ({
    n: t(`hero.stat${i}.n`, lang),
    l: t(`hero.stat${i}.l`, lang),
  }));
  return (
    <section className="trust-big">
      <div className="container">
        <div className="trust-big-head">
          <div className="eyebrow">{t('trust.eyebrow', lang)}</div>
          <h2 className="h-2 trust-big-title">{t('trust.title', lang)}</h2>
        </div>
        <div className="trust-big-grid">
          {stats.map((s, i) => (
            <div key={i} className="trust-big-cell">
              <div className="trust-big-index">{String(i + 1).padStart(2, '0')}</div>
              <div className="trust-big-num">{s.n}</div>
              <div className="trust-big-label">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Featured Series carousel — pick a series, see headline specs
// (Replaces the old original "精选产品系列" carousel idea)
// ============================================================
const FEATURED_IDS = ['p01', 'p02', 'p04', 'p07'];
const FEATURED_APPS = {
  p01: ['Hydraulic systems', 'Compressed air', 'Pump discharge'],
  p02: ['Chemical reactors', 'Sanitary CIP', 'Marine systems'],
  p04: ['Mobile hydraulics', 'Compressors', 'Vibration-prone lines'],
  p07: ['HVAC return', 'Steam lines', 'Process tanks'],
};
const FEATURED_APPS_ZH = {
  p01: ['液压系统', '压缩空气', '泵出口'],
  p02: ['化工反应器', '卫生级 CIP', '船舶系统'],
  p04: ['移动液压', '压缩机', '振动管路'],
  p07: ['暖通回路', '蒸汽管线', '工艺储罐'],
};

const FeaturedSeries = ({ setPage, lang }) => {
  const [idx, setIdx] = React.useState(0);
  const id = FEATURED_IDS[idx];
  const p = PRODUCTS.find(x => x.id === id);
  const apps = (lang === 'zh' ? FEATURED_APPS_ZH : FEATURED_APPS)[id] || [];

  const prev = () => setIdx(i => (i - 1 + FEATURED_IDS.length) % FEATURED_IDS.length);
  const next = () => setIdx(i => (i + 1) % FEATURED_IDS.length);

  return (
    <section className="featured">
      <div className="container">
        <div className="section-head">
          <div className="l">
            <div className="eyebrow">{t('feat.eyebrow', lang)}</div>
            <h2 className="h-1" style={{ marginTop: 12 }}>{t('feat.title', lang)}</h2>
            <p className="lede" style={{ marginTop: 16, maxWidth: '60ch' }}>{t('feat.lede', lang)}</p>
          </div>
          <button className="btn btn-ghost" onClick={() => setPage('products')}>
            {t('feat.allSeries', lang)} <Arrow />
          </button>
        </div>

        <div className="featured-card">
          <div className="featured-pic">
            <ProductPhoto name={p.img} alt={pname(p.id, lang)} />
            <div className="featured-pic-tag">{p.sku}</div>
            <button className="featured-arrow l" onClick={prev} aria-label="Previous">
              <Arrow dir="left" size={16} />
            </button>
            <button className="featured-arrow r" onClick={next} aria-label="Next">
              <Arrow size={16} />
            </button>
          </div>
          <div className="featured-info">
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>
              {String(idx + 1).padStart(2, '0')} / {String(FEATURED_IDS.length).padStart(2, '0')}
            </div>
            <h3 className="h-2" style={{ marginTop: 12 }}>{pname(p.id, lang)}</h3>

            <div className="featured-specs">
              <div className="featured-spec">
                <div className="k">{t('feat.specs.range', lang)}</div>
                <div className="v">{p.range}</div>
              </div>
              <div className="featured-spec">
                <div className="k">{t('feat.specs.acc', lang)}</div>
                <div className="v">{p.accuracy}</div>
              </div>
              <div className="featured-spec">
                <div className="k">{t('feat.specs.size', lang)}</div>
                <div className="v">{p.size}</div>
              </div>
              <div className="featured-spec">
                <div className="k">{t('feat.specs.material', lang)}</div>
                <div className="v">{p.material}</div>
              </div>
            </div>

            <div className="featured-apps">
              <div className="featured-apps-label">{t('feat.specs.applications', lang)}</div>
              <ul className="featured-apps-list">
                {apps.map((a, i) => <li key={i}>{a}</li>)}
              </ul>
            </div>

            <div className="featured-actions">
              <button className="btn btn-primary" onClick={() => setPage(`product:${p.id}`)}>
                {t('feat.viewSeries', lang)} <Arrow />
              </button>
              <button className="btn btn-ghost" onClick={() => setPage('rfq')}>
                {t('nav.getQuote', lang)}
              </button>
              <div className="featured-models">
                <span className="mono" style={{ color: 'var(--ink-3)', fontSize: 11 }}>{t('feat.specs.models', lang)}</span>
                <span style={{ fontFamily: 'JetBrains Mono', fontSize: 16, color: 'var(--ink)', marginLeft: 8 }}>{p.models}</span>
              </div>
            </div>
          </div>
        </div>

        <div className="featured-dots">
          {FEATURED_IDS.map((_, i) => (
            <button key={i} className={`featured-dot ${i === idx ? 'active' : ''}`} onClick={() => setIdx(i)} aria-label={`Slide ${i + 1}`} />
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Insights data — 5 articles + 1 featured
// ============================================================
const ARTICLES = [
  { id: 'a1', cat: 'standards', date: '2026-04-12', minutes: 8, palette: 'blueprint' },
  { id: 'a2', cat: 'application', date: '2026-03-28', minutes: 6, palette: 'amber' },
  { id: 'a3', cat: 'guide', date: '2026-03-14', minutes: 10, palette: 'teal' },
  { id: 'a4', cat: 'company', date: '2026-02-22', minutes: 3, palette: 'plum' },
  { id: 'a5', cat: 'industry', date: '2026-02-08', minutes: 7, palette: 'olive' },
];

// Article tile glyph — geometric icon, stays minimal so it doesn't read as "AI emoji"
const ArticleGlyph = ({ palette }) => {
  const sets = {
    blueprint: { bg1: 'oklch(0.42 0.08 235)', bg2: 'oklch(0.32 0.06 240)', ink: 'oklch(0.96 0.005 80 / 0.85)' },
    amber:    { bg1: 'oklch(0.78 0.12 75)',   bg2: 'oklch(0.62 0.16 45)',  ink: 'oklch(0.18 0.02 240 / 0.85)' },
    teal:     { bg1: 'oklch(0.62 0.09 195)',  bg2: 'oklch(0.45 0.08 210)', ink: 'oklch(0.96 0.005 80 / 0.85)' },
    plum:     { bg1: 'oklch(0.45 0.12 320)',  bg2: 'oklch(0.32 0.10 320)', ink: 'oklch(0.96 0.005 80 / 0.85)' },
    olive:    { bg1: 'oklch(0.60 0.10 130)',  bg2: 'oklch(0.42 0.09 145)', ink: 'oklch(0.96 0.005 80 / 0.85)' },
  };
  const s = sets[palette] || sets.blueprint;
  return (
    <svg viewBox="0 0 200 140" preserveAspectRatio="none" style={{ width: '100%', height: '100%', display: 'block' }}>
      <defs>
        <linearGradient id={`g-${palette}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={s.bg1} />
          <stop offset="100%" stopColor={s.bg2} />
        </linearGradient>
      </defs>
      <rect width="200" height="140" fill={`url(#g-${palette})`} />
      {/* gauge dial echo */}
      <g transform="translate(100,72)" stroke={s.ink} fill="none" strokeWidth="1.5">
        <circle r="36" />
        <circle r="30" strokeWidth="0.8" opacity="0.5" />
        <circle r="2.5" fill={s.ink} stroke="none" />
        <line x1="0" y1="0" x2="22" y2="-14" strokeWidth="2" strokeLinecap="round" />
        {[0, 60, 120, 180, 240, 300].map(a => (
          <line key={a}
            x1={26 * Math.cos((a - 90) * Math.PI / 180)}
            y1={26 * Math.sin((a - 90) * Math.PI / 180)}
            x2={32 * Math.cos((a - 90) * Math.PI / 180)}
            y2={32 * Math.sin((a - 90) * Math.PI / 180)} />
        ))}
      </g>
      <g stroke={s.ink} strokeWidth="0.8" opacity="0.35" fill="none">
        <line x1="20" y1="20" x2="40" y2="20" />
        <line x1="20" y1="120" x2="40" y2="120" />
        <line x1="160" y1="20" x2="180" y2="20" />
        <line x1="160" y1="120" x2="180" y2="120" />
      </g>
    </svg>
  );
};

const ArticleCard = ({ a, lang, layout = 'list' }) => {
  return (
    <article className={`article-card article-${layout}`}>
      <div className="article-pic">
        <ArticleGlyph palette={a.palette} />
        <div className="article-cat">{t(`ins.cat.${a.cat}`, lang)}</div>
      </div>
      <div className="article-body">
        <div className="article-meta">
          <span>{a.date}</span>
          <span>·</span>
          <span>{a.minutes} {t('ins.minutes', lang)}</span>
        </div>
        <h3 className="article-title">{t(`ins.${a.id}.title`, lang)}</h3>
        <p className="article-desc">{t(`ins.${a.id}.desc`, lang)}</p>
      </div>
    </article>
  );
};

// ============================================================
// Insights teaser on Home
// ============================================================
const InsightsTeaser = ({ setPage, lang }) => {
  return (
    <section className="insights-teaser">
      <div className="container">
        <div className="section-head">
          <div className="l">
            <div className="eyebrow">{t('ins.eyebrow', lang)}</div>
            <h2 className="h-1" style={{ marginTop: 12 }}>{t('ins.title', lang)}</h2>
            <p className="lede" style={{ marginTop: 16, maxWidth: '52ch' }}>{t('ins.lede', lang)}</p>
          </div>
          <button className="btn btn-ghost" onClick={() => setPage('insights')}>
            {t('ins.allArticles', lang)} <Arrow />
          </button>
        </div>
        <div className="insights-teaser-grid">
          {ARTICLES.slice(0, 3).map(a => (
            <ArticleCard key={a.id} a={a} lang={lang} layout="grid" />
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Newsletter band — sits between Insights and Footer
// ============================================================
const NewsletterBand = ({ lang }) => {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (/^\S+@\S+\.\S+$/.test(email)) setDone(true);
  };
  return (
    <section className="newsletter">
      <div className="container">
        <div className="newsletter-grid">
          <div>
            <div className="eyebrow accent" style={{ marginBottom: 12 }}>{t('sub.eyebrow', lang)}</div>
            <h2 className="h-2" style={{ color: 'var(--bg)', maxWidth: '20ch' }}>{t('sub.title', lang)}</h2>
            <p style={{ color: 'oklch(1 0 0 / 0.7)', marginTop: 12, maxWidth: '52ch', fontSize: 15, lineHeight: 1.6 }}>{t('sub.body', lang)}</p>
          </div>
          {done ? (
            <div className="newsletter-done">
              <div className="newsletter-check">✓</div>
              <span>{t('sub.thanks', lang)}</span>
            </div>
          ) : (
            <form className="newsletter-form" onSubmit={submit}>
              <input
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder={t('sub.placeholder', lang)}
                required
              />
              <button type="submit" className="btn btn-accent">{t('sub.cta', lang)} <Arrow /></button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Insights page
// ============================================================
const InsightsPage = ({ setPage, lang }) => {
  const featured = { id: 'featured', cat: 'standards', date: '2026-04-18', minutes: 9, palette: 'blueprint' };
  return (
    <>
      <section style={{ padding: '64px 0 32px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="crumb" style={{ marginBottom: 16 }}>{t('ins.crumb', lang)}</div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>{t('nav.insights', lang)}</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(36px, 4.4vw, 56px)' }}>{t('ins.pageTitle', lang)}</h1>
          <p className="lede" style={{ marginTop: 20, maxWidth: '52ch' }}>{t('ins.lede', lang)}</p>
        </div>
      </section>

      <section style={{ background: 'var(--bg-sunken)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 24 }}>{t('ins.featured', lang)}</div>
          <article className="featured-article">
            <div className="featured-article-pic">
              <ArticleGlyph palette={featured.palette} />
              <div className="article-cat">{t(`ins.cat.${featured.cat}`, lang)}</div>
            </div>
            <div className="featured-article-body">
              <div className="article-meta">
                <span>{t('ins.featured.author', lang)}</span>
                <span>·</span>
                <span>{t('ins.featured.date', lang)}</span>
                <span>·</span>
                <span>{featured.minutes} {t('ins.minutes', lang)}</span>
              </div>
              <h2 className="h-1" style={{ marginTop: 16, letterSpacing: '-0.02em' }}>{t('ins.featured.title', lang)}</h2>
              <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.6 }}>{t('ins.featured.desc', lang)}</p>
              <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
                <button className="btn btn-primary" onClick={() => setPage('rfq')}>{t('nav.getQuote', lang)} <Arrow /></button>
              </div>
            </div>
          </article>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 24 }}>{t('ins.allArticles', lang)}</div>
          <div className="article-list">
            {ARTICLES.map(a => <ArticleCard key={a.id} a={a} lang={lang} layout="list" />)}
          </div>
        </div>
      </section>

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

// ============================================================
// Contact details block (used on RFQ page)
// ============================================================
const ContactDetails = ({ lang }) => {
  return (
    <div className="contact-details">
      <div className="contact-block">
        <div className="contact-block-head">
          <span className="contact-icon">⌂</span>
          <span className="contact-label">{t('contact.hq', lang)}</span>
        </div>
        <div className="contact-block-body">
          <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.6 }}>{t('foot.address', lang)}</div>
          <div className="mono" style={{ marginTop: 8, fontSize: 11, color: 'var(--ink-3)' }}>28.85°N 120.74°E</div>
        </div>
      </div>

      <div className="contact-block">
        <div className="contact-block-head">
          <span className="contact-icon">☏</span>
          <span className="contact-label">{t('contact.phone', lang)}</span>
        </div>
        <div className="contact-block-body">
          <div className="contact-row"><span className="contact-row-k">{t('contact.salesPhone', lang)}</span><a className="contact-row-v" href="tel:+8613958590444" style={{ color: 'inherit', textDecoration: 'none' }}>+86 139-5859-0444</a></div>
          <div className="contact-row"><span className="contact-row-k">{t('contact.intlPhone', lang)}</span><a className="contact-row-v" href="tel:+8613995769655" style={{ color: 'inherit', textDecoration: 'none' }}>+86 139-9576-9655</a></div>
        </div>
      </div>

      <div className="contact-block">
        <div className="contact-block-head">
          <span className="contact-icon">@</span>
          <span className="contact-label">{t('contact.email', lang)}</span>
        </div>
        <div className="contact-block-body">
          <div className="mono" style={{ fontSize: 12, color: 'var(--ink-2)', display: 'flex', flexDirection: 'column', gap: 4 }}>
            <a href="mailto:sales@manogauge.com" style={{ color: 'inherit', textDecoration: 'none' }}>sales@manogauge.com</a>
          </div>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// Business hours
// ============================================================
const BusinessHours = ({ lang }) => {
  return (
    <section className="hours">
      <div className="container">
        <div className="hours-grid">
          <div className="hours-head">
            <div className="eyebrow">{t('contact.hours', lang)}</div>
          </div>
          <div className="hours-cols">
            <div className="hours-col">
              <h4>{t('contact.hours.cn', lang)}</h4>
              <div className="hours-row"><span className="mono">{t('contact.hours.cn.weekday', lang)}</span></div>
              <div className="hours-row"><span className="mono">{t('contact.hours.cn.sat', lang)}</span></div>
              <div className="hours-row"><span className="mono" style={{ color: 'var(--accent)' }}>● {t('contact.hours.cn.247', lang)}</span></div>
            </div>
            <div className="hours-col">
              <h4>{t('contact.hours.intl', lang)}</h4>
              <div className="hours-row"><span className="mono">{t('contact.hours.intl.weekday', lang)}</span></div>
              <div className="hours-row"><span className="mono">{t('contact.hours.intl.sat', lang)}</span></div>
              <div className="hours-row"><span className="mono">{t('contact.hours.intl.247', lang)}</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// FAQ accordion
// ============================================================
const FaqBlock = ({ lang }) => {
  const [open, setOpen] = React.useState(0);
  const items = [1, 2, 3, 4, 5];
  return (
    <section className="faq">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 32 }}>
          <div className="l">
            <div className="eyebrow">FAQ</div>
            <h2 className="h-2" style={{ marginTop: 12 }}>{t('faq.title', lang)}</h2>
          </div>
        </div>
        <div className="faq-list">
          {items.map(i => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="faq-num">Q{i}.</span>
                <span className="faq-q-text">{t(`faq.q${i}`, lang)}</span>
                <span className="faq-toggle">{open === i ? '−' : '+'}</span>
              </button>
              {open === i && (
                <div className="faq-a">
                  <p>{t(`faq.a${i}`, lang)}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TrustBig, FeaturedSeries, InsightsTeaser, NewsletterBand, InsightsPage, ContactDetails, BusinessHours, FaqBlock });