// Insights hub: Case Studies + Whitepapers + Resources

function InsightsPage({ t, setPage, lang }) {
  const [subscribed, setSubscribed] = React.useState(false);
  const [email, setEmail] = React.useState("");

  const subscribe = (e) => {
    e.preventDefault();
    if (!email) return;
    setSubscribed(true);
    setEmail("");
    setTimeout(() => setSubscribed(false), 4000);
  };

  return (
    <div className="page-shell">
      {/* Hero / intro */}
      <section className="block" style={{paddingBottom: 60}}>
        <div className="wrap">
          <div className="eyebrow">{t.insights.kicker}</div>
          <h2 className="section-title" style={{maxWidth:880, marginTop:18}}>
            {t.insights.title_a}<em>{t.insights.title_em}</em>{t.insights.title_b}
          </h2>
          <p className="section-kicker" style={{marginTop:24, maxWidth:760}}>{t.insights.lede}</p>

          {/* anchor nav */}
          <div style={{display:"flex", gap:10, marginTop:40, flexWrap:"wrap"}}>
            <a href="#insights-cases" className="cert-chip">{t.insights.cases_kicker}</a>
            <a href="#insights-whitepapers" className="cert-chip">{t.insights.whitepapers_kicker}</a>
            <a href="#insights-resources" className="cert-chip">{t.insights.resources_kicker}</a>
          </div>
        </div>
      </section>

      {/* Case Studies */}
      <section className="block tight" id="insights-cases">
        <div className="wrap">
          <div className="section-head">
            <div className="heading-stack">
              <div className="eyebrow">{t.insights.cases_kicker}</div>
              <h2 className="section-title">{t.insights.cases_title_a}<em>{t.insights.cases_title_em}</em>{t.insights.cases_title_b}</h2>
              <p className="section-kicker">{t.insights.cases_lede}</p>
            </div>
          </div>
          <div className="case-grid">
            {t.insights.cases.map((c, i) => (
              <article className="case-card" key={i}>
                <div>
                  <div className="case-tag">{c.tag}</div>
                  <h3 className="case-title">{c.title}</h3>
                </div>
                <div>
                  <div className="case-h">{lang === "en" ? "Challenge" : "挑战"}</div>
                  <p className="case-text">{c.challenge}</p>
                  <div className="case-h">{lang === "en" ? "Approach" : "解决方案"}</div>
                  <p className="case-text">{c.solution}</p>
                  <div className="case-metrics">
                    {c.metrics.map(([num, lbl], j) => (
                      <div className="case-metric" key={j}>
                        <div className="case-metric-num">{num}</div>
                        <div className="case-metric-lbl">{lbl}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Whitepapers */}
      <section className="block" style={{background:"var(--bg-1)"}} id="insights-whitepapers">
        <div className="wrap">
          <div className="section-head">
            <div className="heading-stack">
              <div className="eyebrow">{t.insights.whitepapers_kicker}</div>
              <h2 className="section-title">{t.insights.whitepapers_title_a}<em>{t.insights.whitepapers_title_em}</em>{t.insights.whitepapers_title_b}</h2>
            </div>
          </div>
          <div className="wp-grid">
            {t.insights.whitepapers.map((w, i) => (
              <article className="wp-card" key={i}>
                <div className="wp-meta">
                  <span>{w.num}</span>
                  <span>{w.date}</span>
                </div>
                <h3 className="wp-title">{w.title}</h3>
                <p className="wp-desc">{w.desc}</p>
                <div className="wp-topics">
                  {w.topics.map((tp, j) => <span key={j}>{tp}</span>)}
                </div>
                <a className="wp-cta" onClick={(e)=>{e.preventDefault(); setPage("contact"); window.scrollTo({top:0});}} href="#contact">
                  {t.insights.cta_label} →
                </a>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Resources */}
      <section className="block" id="insights-resources">
        <div className="wrap">
          <div className="section-head">
            <div className="heading-stack">
              <div className="eyebrow">{t.insights.resources_kicker}</div>
              <h2 className="section-title">{t.insights.resources_title_a}<em>{t.insights.resources_title_em}</em>{t.insights.resources_title_b}</h2>
              <p className="section-kicker">{t.insights.resources_note}</p>
            </div>
          </div>
          <div className="res-grid">
            {t.insights.resources.map((r, i) => (
              <div className="res-row" key={i}>
                <div className="res-tag">{r.tag}</div>
                <div>
                  <div className="res-title">{r.title}</div>
                  <div className="res-desc">{r.desc}</div>
                </div>
                <a className="res-cta" onClick={(e)=>{e.preventDefault(); setPage("contact"); window.scrollTo({top:0});}} href="#contact">{t.insights.cta_label}</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Newsletter */}
      <section className="block tight" style={{paddingBottom: 100}}>
        <div className="wrap">
          <div className="news-block">
            <div style={{position:"relative", zIndex:1}}>
              <div className="eyebrow">{t.newsletter.kicker}</div>
              <h2 className="section-title" style={{marginTop:14, fontSize:36}}>{t.newsletter.title}</h2>
              <p className="section-kicker" style={{marginTop:16, fontSize:14.5}}>{t.newsletter.lede}</p>
            </div>
            <div style={{position:"relative", zIndex:1}}>
              <form className="news-form" onSubmit={subscribe}>
                <input type="email" placeholder={t.newsletter.placeholder} value={email} onChange={e=>setEmail(e.target.value)} required />
                <button type="submit">{t.newsletter.cta}</button>
              </form>
              <p style={{marginTop:14, fontFamily:"var(--mono)", fontSize:11, color:"var(--ink-3)", letterSpacing:"0.04em"}}>{t.newsletter.note}</p>
              {subscribed && <p style={{marginTop:14, color:"var(--gold-2)", fontSize:13}}>✓ {t.newsletter.success}</p>}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { InsightsPage });