// ============================================================
// COMPANY PAGES — About / Operations / Sustainability /
// Newsroom / Article detail / Careers / Contact
// ============================================================

// ─── About ───
function AboutPage({ onNavigate }) {
  const leaders = [
    { name: 'Bryan Shinn', role: 'CEO', img: 'assets/people-desk.jpg' },
    { name: 'M. Reyes', role: 'CFO', img: 'assets/people-desk.jpg' },
    { name: 'L. Patel', role: 'VP Operations', img: 'assets/people-desk.jpg' },
    { name: 'R. Cho', role: 'VP Material Science', img: 'assets/people-desk.jpg' },
    { name: 'D. Walker', role: 'VP Commercial', img: 'assets/people-desk.jpg' },
    { name: 'S. Okafor', role: 'VP Sustainability', img: 'assets/people-desk.jpg' },
  ];
  const timeline = [
    ['1907', 'Founded as Pennsylvania Glass Sand in Berkeley Springs, WV'],
    ['1925', 'Expansion into the Mid-Continent St. Peter sandstone'],
    ['1968', 'First micronized silica production line at Pacific, MO'],
    ['1985', 'API frac-sand qualification at Kosse, TX'],
    ['2008', 'NYSE listing as SLCA'],
    ['2014', 'Acquisition of Texas in-basin operations'],
    ['2019', 'ISO 9001 certification across all operating plants'],
    ['2024', 'Closed-loop water reclamation at Pacific, MO mill'],
    ['2026', 'Phase-1 digital re-platforming begins'],
  ];

  return (
    <div className="dir-b ab-page">
      <BrowserChrome url="ussilica.com/about" />
      <NavB onNavigate={onNavigate}/>
      <PageHeader
        title="A century of industrial silica."
        subtitle="U.S. Silica is one of the largest domestic producers of commercial silica, serving industrial, energy, and specialty markets across the United States."
        eyebrow="ABOUT" breadcrumbs={['Home', 'Company', 'About']}
        dark cover="assets/refinery.jpg" onNavigate={onNavigate}
      />

      {/* Stat bar */}
      <section style={{ padding: '48px 32px', background: 'var(--paper)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32 }}>
          {[
            ['1907', 'Founded'],
            ['27', 'Facilities'],
            ['13', 'States'],
            ['1,400+', 'Employees'],
            ['NYSE: SLCA', 'Public since 2008'],
          ].map(([v, l]) => (
            <div key={l} style={{ borderRight: '1px solid var(--line)', paddingRight: 24 }}>
              <div className="display" style={{ fontSize: 40, fontWeight: 500 }}>{v}</div>
              <div className="label-mono" style={{ marginTop: 6 }}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Long copy */}
      <section style={{ padding: '96px 32px', background: 'var(--bg)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }}>
          <div>
            <div className="label-mono">OUR STORY</div>
            <h2 className="display" style={{ fontSize: 56, margin: '14px 0 0', fontWeight: 500 }}>
              We mine, mill, and measure.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 18, lineHeight: 1.55, margin: 0 }}>
              Industrial silica is the literal foundation of modern manufacturing. Every container of olive oil, every flat-screen display,
              every engine block — all rely on a specific chemistry of silica that has to be mined, processed, and shipped at industrial scale.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, marginTop: 16, color: 'var(--ink-soft)' }}>
              We've been doing that for 119 years. From a single quarry in Berkeley Springs to a network of 27 facilities, our company
              has grown alongside the industries we supply. We're the silica supplier engineers actually want to buy from — because we
              publish our data, because our lots are stable, and because we built a material-science team to be sized for the questions
              procurement teams actually ask.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, marginTop: 16, color: 'var(--ink-soft)' }}>
              Today, U.S. Silica ships approximately 14 million tons annually into glass, foundry, building products, oil &amp; gas,
              coatings, filtration, and specialty applications. We are publicly traded on the NYSE as SLCA. We are headquartered in
              Frederick, Maryland.
            </p>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section style={{ padding: '96px 32px', background: 'var(--bg-deep)', color: 'var(--paper)' }}>
        <div className="label-mono" style={{ color: 'oklch(0.78 0.13 70)' }}>HISTORY</div>
        <h2 className="display" style={{ fontSize: 56, margin: '14px 0 56px', color: 'var(--paper)', fontWeight: 500 }}>
          A century in nine moments.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 30, position: 'relative' }}>
          {timeline.map(([y, t], i) => (
            <div key={i} style={{ paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.18)' }}>
              <div className="display" style={{ fontSize: 44, color: 'oklch(0.78 0.13 70)', fontWeight: 500 }}>{y}</div>
              <div style={{ fontSize: 14, lineHeight: 1.55, marginTop: 10, color: 'rgba(255,255,255,0.85)', maxWidth: 280 }}>{t}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Leadership */}
      <section style={{ padding: '96px 32px', background: 'var(--paper)' }}>
        <div className="label-mono">LEADERSHIP</div>
        <h2 className="display" style={{ fontSize: 56, margin: '14px 0 56px', fontWeight: 500 }}>The team behind the material.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14 }}>
          {leaders.map((l, i) => (
            <div key={i}>
              <div style={{ aspectRatio: '3 / 4', borderRadius: 8, overflow: 'hidden', background: '#222' }}>
                <Photo src={l.img} height="100%"/>
              </div>
              <div style={{ fontSize: 15, fontWeight: 500, marginTop: 12 }}>{l.name}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 4 }}>{l.role.toUpperCase()}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Operations CTA */}
      <section style={{ padding: '80px 32px', background: 'var(--bg)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="label-mono">OPERATIONS</div>
            <h2 className="display" style={{ fontSize: 48, margin: '14px 0 16px', fontWeight: 500 }}>
              See the network in detail.
            </h2>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 540 }}>
              27 facilities across 13 states. Real-time inventory visibility. Rail-served sites in the Mid-Atlantic, Mid-Continent, and Texas basins.
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 12 }}>
              <MagButton variant="primary" size="lg" dir="b" onClick={() => onNavigate('facilities')}>Open the network map <Icon.arrow size={14}/></MagButton>
              <MagButton variant="ghost" size="lg" dir="b" onClick={() => onNavigate('sustainability')}>Sustainability report</MagButton>
            </div>
          </div>
          <div style={{ aspectRatio: '5 / 4', borderRadius: 12, overflow: 'hidden' }}>
            <Photo src="assets/facility-aerial.jpg" height="100%"/>
          </div>
        </div>
      </section>

      <FooterB onNavigate={onNavigate}/>
    </div>
  );
}

// ─── Sustainability ───
function SustainabilityPage({ onNavigate }) {
  const pillars = [
    { id: 'water', name: 'Water', target: '-32%', sub: 'water intensity reduction by 2030 (vs 2018)', desc: 'Closed-loop water reclamation at primary mills; aggregate-state water-use reporting per facility.', icon: Icon.beaker },
    { id: 'energy', name: 'Energy', target: '100%', sub: 'renewable electricity at HQ + 6 plants by 2028', desc: 'Power purchase agreements covering Frederick HQ and Mid-Atlantic plants. On-site solar at Berkeley Springs.', icon: Icon.factory },
    { id: 'reclamation', name: 'Reclamation', target: '14', sub: 'mine sites with active reclamation plans', desc: 'Multi-decade habitat restoration plans at all active mining operations, audited by third-party ecologists.', icon: Icon.pin },
    { id: 'community', name: 'Community', target: '$4.2M', sub: 'invested in plant-community programs (2025)', desc: 'STEM scholarships, trade-school partnerships, and infrastructure co-investment in plant towns.', icon: Icon.factory },
  ];

  return (
    <div className="dir-b ab-page">
      <BrowserChrome url="ussilica.com/sustainability" />
      <NavB onNavigate={onNavigate}/>
      <PageHeader
        title="Sustainability, by the ton."
        subtitle="An industrial materials company can be measured. Here is how we measure ourselves."
        eyebrow="SUSTAINABILITY · 2025 REPORT"
        breadcrumbs={['Home', 'Company', 'Sustainability']}
        dark cover="assets/mine-quarry.webp" onNavigate={onNavigate}
      />

      <section style={{ padding: '64px 32px', background: 'var(--paper)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 56, alignItems: 'start' }}>
          <div>
            <div className="label-mono">2030 TARGETS</div>
            <h2 className="display" style={{ fontSize: 48, margin: '14px 0 12px', fontWeight: 500 }}>
              Four pillars. Audited annually.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 380 }}>
              We publish our targets, our methodology, and our deltas — including the years where we miss.
              Latest report (2025) is downloadable below.
            </p>
            <MagButton variant="ghost" size="md" dir="b" style={{ marginTop: 22 }}>
              <Icon.download size={14}/> 2025 Sustainability Report (PDF)
            </MagButton>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {pillars.map(p => (
              <article key={p.id} style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 12, padding: 22 }}>
                <div style={{ color: 'var(--accent)' }}>{p.icon({ size: 20 })}</div>
                <div className="display" style={{ fontSize: 48, margin: '16px 0 4px', fontWeight: 500 }}>{p.target}</div>
                <div className="label-mono" style={{ color: 'var(--accent)', marginBottom: 8 }}>{p.name.toUpperCase()}</div>
                <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.5, fontWeight: 500 }}>{p.sub}</div>
                <p style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 8, lineHeight: 1.5 }}>{p.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Progress strip */}
      <section style={{ padding: '64px 32px', background: 'var(--bg)' }}>
        <div className="label-mono" style={{ marginBottom: 22 }}>YEAR-OVER-YEAR · 2018 → 2025</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {[
            ['Water intensity', [100, 96, 89, 83, 77, 74, 71, 68], '-32%', '#0a0a0a'],
            ['Energy intensity', [100, 97, 95, 91, 85, 80, 76, 73], '-27%', 'oklch(0.48 0.18 252)'],
            ['Scope-1 emissions', [100, 99, 96, 92, 88, 84, 80, 77], '-23%', 'oklch(0.6 0.15 25)'],
            ['Waste to landfill', [100, 92, 85, 76, 64, 50, 36, 28], '-72%', 'oklch(0.55 0.15 145)'],
          ].map(([label, series, delta, color], i) => (
            <div key={i} style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, padding: 18 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{label}</div>
              <div className="display" style={{ fontSize: 36, margin: '8px 0 12px', color }}>{delta}</div>
              <svg viewBox="0 0 200 60" style={{ width: '100%', height: 60 }}>
                {series.map((v, i) => (
                  <rect key={i} x={i * (200/8) + 2} y={60 - (v * 0.55)} width={(200/8) - 4} height={v * 0.55} fill={color} opacity={0.15 + (i / 8) * 0.85}/>
                ))}
              </svg>
              <div className="mono" style={{ fontSize: 10, color: 'var(--ink-soft)', display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
                <span>2018</span><span>2025</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Case study photo */}
      <section style={{ padding: '96px 32px', background: 'var(--paper)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div style={{ aspectRatio: '4 / 5', borderRadius: 12, overflow: 'hidden' }}>
            <Photo src="assets/facility-aerial.jpg" height="100%"/>
          </div>
          <div>
            <div className="label-mono" style={{ color: 'var(--accent)' }}>FIELD REPORT · PACIFIC, MO</div>
            <h2 className="display" style={{ fontSize: 44, margin: '14px 0 0', fontWeight: 500 }}>
              Closed-loop water reclamation at the Pacific Mill.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.6, marginTop: 18 }}>
              Pacific, MO is our largest ground-silica facility and our heaviest water user. In 2024 we commissioned a closed-loop reclamation system
              that recovers 94% of process water for reuse, drawing fresh make-up only from rain capture and well replenishment that exceeds local
              draw-rate limits by 4×.
            </p>
            <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
              <div><div className="display" style={{ fontSize: 32, fontWeight: 500 }}>94%</div><div className="label-mono" style={{ marginTop: 4 }}>Water recovery</div></div>
              <div><div className="display" style={{ fontSize: 32, fontWeight: 500 }}>4×</div><div className="label-mono" style={{ marginTop: 4 }}>Below draw cap</div></div>
              <div><div className="display" style={{ fontSize: 32, fontWeight: 500 }}>$2.1M</div><div className="label-mono" style={{ marginTop: 4 }}>Capex 2024</div></div>
            </div>
          </div>
        </div>
      </section>

      <FooterB onNavigate={onNavigate}/>
    </div>
  );
}

// ─── Newsroom ───
const ARTICLES = [
  { slug: 'tank-life-variance', tag: 'CASE STUDY', date: 'May 8, 2026', readtime: '6 min', title: 'How a top-3 container manufacturer cut tank-life variance by 38%', excerpt: 'A west-coast container plant moved from a Mid-Continent grade to MX-30/50 with a 6-week parallel run. Here is what the QA team measured.', img: 'assets/product-vials.jpg', featured: true },
  { slug: 'iron-contamination', tag: 'TECHNICAL', date: 'Apr 24, 2026', readtime: '9 min', title: 'Iron contamination in soda-lime batches: where it actually comes from', excerpt: 'An on-the-record look at the supply-chain origins of iron contamination in glass batches, and what container engineers can actually control.', img: 'assets/lab-samples.jpg' },
  { slug: 'filler-variance', tag: 'CASE STUDY', date: 'Apr 12, 2026', readtime: '5 min', title: 'A Tier-1 engineered stone fabricator cut filler variance by 41%', excerpt: 'Switching to a single-source filler standard reduced batch reject rates and tightened color tolerance on white panels.', img: 'assets/app-countertop.jpg' },
  { slug: 'closed-loop-water', tag: 'SUSTAINABILITY', date: 'Mar 28, 2026', readtime: '4 min', title: 'Closed-loop water reclamation at the Pacific, MO mill', excerpt: 'How a 2024 capex investment turned our largest mill into a 94%-water-recovery facility.', img: 'assets/facility-aerial.jpg' },
  { slug: 'in-basin-permian', tag: 'CASE STUDY', date: 'Mar 14, 2026', readtime: '7 min', title: 'In-basin Permian: how an operator cut proppant logistics cost by 19%', excerpt: 'Moving from North-American to in-basin frac sand eliminated 1,800 miles of trucking per well.', img: 'assets/frac-sand.jpg' },
  { slug: 'iso9001-renewal', tag: 'NEWS', date: 'Feb 28, 2026', readtime: '2 min', title: 'ISO 9001 renewal across all 27 operating facilities', excerpt: 'Annual audit cycle completes; every operating facility maintains its ISO 9001:2015 certification.', img: 'assets/plant-historical.jpg' },
  { slug: 'tyler-tx-opens', tag: 'NEWS', date: 'Feb 12, 2026', readtime: '3 min', title: 'New terminal operational in Tyler, TX', excerpt: 'A new bulk-and-truck terminal goes live in Tyler, expanding our east-Texas dispatch footprint.', img: 'assets/refinery.jpg' },
  { slug: 'q1-earnings', tag: 'INVESTORS', date: 'May 8, 2026', readtime: '1 min', title: 'U.S. Silica reports Q1 2026 earnings', excerpt: 'Press release. Conference call replay available.', img: 'assets/plant-historical.jpg' },
];

function NewsroomPage({ onNavigate }) {
  const [filter, setFilter] = React.useState('all');
  const tags = ['all', 'CASE STUDY', 'TECHNICAL', 'SUSTAINABILITY', 'NEWS', 'INVESTORS'];
  const filtered = filter === 'all' ? ARTICLES : ARTICLES.filter(a => a.tag === filter);
  const feat = ARTICLES.find(a => a.featured);

  return (
    <div className="dir-b ab-page">
      <BrowserChrome url="ussilica.com/newsroom" />
      <NavB onNavigate={onNavigate}/>
      <PageHeader title="Newsroom" subtitle="Case studies, technical articles, press releases, and field reports from the U.S. Silica team."
        breadcrumbs={['Home', 'Company', 'Newsroom']} onNavigate={onNavigate}/>

      {/* Featured */}
      <section style={{ padding: '32px 32px 0', background: 'var(--bg)' }}>
        <article onClick={() => onNavigate('article', { slug: feat.slug })}
          style={{ background: 'var(--paper)', borderRadius: 14, overflow: 'hidden', cursor: 'pointer', border: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1.4fr 1fr' }}>
          <div style={{ position: 'relative', height: 440 }}>
            <Photo src={feat.img} height="100%"/>
            <span style={{ position: 'absolute', top: 18, left: 18, padding: '6px 12px', background: 'var(--accent)', color: '#fff', borderRadius: 4, fontFamily: 'IBM Plex Mono', fontSize: 11 }}>FEATURED</span>
          </div>
          <div style={{ padding: 36, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div className="label-mono" style={{ color: 'var(--accent)' }}>{feat.tag} · <span style={{ color: 'var(--ink-soft)' }}>{feat.date} · {feat.readtime}</span></div>
            <h2 className="display" style={{ fontSize: 38, margin: '14px 0 16px', fontWeight: 500, lineHeight: 1.15 }}>{feat.title}</h2>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.55, margin: 0 }}>{feat.excerpt}</p>
            <a style={{ marginTop: 22, color: 'var(--accent)', fontSize: 14, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6 }}>
              Read the study <Icon.arrow size={13}/>
            </a>
          </div>
        </article>
      </section>

      {/* Filter tabs */}
      <section style={{ padding: '32px 32px 0', background: 'var(--bg)' }}>
        <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--line)', marginBottom: 24 }}>
          {tags.map(t => (
            <button key={t} onClick={() => setFilter(t)} style={{
              background: 'transparent', border: 0, padding: '12px 16px',
              fontSize: 13, fontWeight: 500, cursor: 'pointer',
              color: filter === t ? 'var(--accent)' : 'var(--ink-soft)',
              borderBottom: filter === t ? '2px solid var(--accent)' : '2px solid transparent',
              marginBottom: '-1px', transition: 'all .12s',
            }}>{t === 'all' ? 'All' : t.charAt(0) + t.slice(1).toLowerCase()}</button>
          ))}
          <span style={{ marginLeft: 'auto', alignSelf: 'center', fontFamily: 'IBM Plex Mono', fontSize: 11, color: 'var(--ink-soft)' }}>{filtered.length} ARTICLES</span>
        </div>
      </section>

      {/* Grid */}
      <section style={{ padding: '0 32px 96px', background: 'var(--bg)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {filtered.map(a => (
            <article key={a.slug} onClick={() => onNavigate('article', { slug: a.slug })}
              style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}>
              <Photo src={a.img} height={200}/>
              <div style={{ padding: 18, display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div className="label-mono" style={{ color: 'var(--accent)' }}>{a.tag} · <span style={{ color: 'var(--ink-soft)' }}>{a.date}</span></div>
                <h3 className="display" style={{ fontSize: 20, margin: '10px 0 8px', fontWeight: 500, lineHeight: 1.25, flex: 1 }}>{a.title}</h3>
                <p style={{ fontSize: 13, color: 'var(--ink-soft)', margin: '0 0 12px', lineHeight: 1.5 }}>{a.excerpt}</p>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)', display: 'flex', justifyContent: 'space-between' }}>
                  <span>{a.readtime} read</span>
                  <Icon.arrow size={13}/>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <FooterB onNavigate={onNavigate}/>
    </div>
  );
}

// ─── Article detail ───
function ArticlePage({ onNavigate, params }) {
  const slug = params?.slug || 'tank-life-variance';
  const article = ARTICLES.find(a => a.slug === slug) || ARTICLES[0];
  return (
    <div className="dir-b ab-page">
      <BrowserChrome url={`ussilica.com/newsroom/${slug}`} />
      <NavB onNavigate={onNavigate}/>
      <section style={{ padding: '48px 32px 0', background: 'var(--paper)' }}>
        <nav className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)' }}>
          <span onClick={() => onNavigate('home')} style={{ cursor: 'pointer' }}>Home</span>
          <span style={{ margin: '0 8px' }}>›</span>
          <span onClick={() => onNavigate('newsroom')} style={{ cursor: 'pointer' }}>Newsroom</span>
          <span style={{ margin: '0 8px' }}>›</span>
          <span style={{ color: 'var(--ink)' }}>{article.tag}</span>
        </nav>
        <div style={{ maxWidth: 820, margin: '32px auto 0', textAlign: 'center' }}>
          <div className="label-mono" style={{ color: 'var(--accent)' }}>{article.tag} · {article.date} · {article.readtime} read</div>
          <h1 className="display" style={{ fontSize: 56, margin: '20px 0 18px', fontWeight: 500, lineHeight: 1.1 }}>{article.title}</h1>
          <p style={{ fontSize: 20, color: 'var(--ink-soft)', lineHeight: 1.55, margin: 0 }}>{article.excerpt}</p>
        </div>
      </section>

      <section style={{ padding: '40px 32px 0', background: 'var(--paper)' }}>
        <div style={{ aspectRatio: '21 / 9', borderRadius: 12, overflow: 'hidden', maxWidth: 1100, margin: '0 auto' }}>
          <Photo src={article.img} height="100%"/>
        </div>
      </section>

      <section style={{ padding: '56px 32px 96px', background: 'var(--paper)' }}>
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          <h2 style={{ fontSize: 26, margin: '0 0 14px', fontWeight: 500 }}>The problem</h2>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--ink)', margin: 0 }}>
            Tank-life variance is a particularly expensive form of unpredictability in container glass production. When the
            chemistry coming into the melt tank drifts week-over-week, refractory life can vary by months, and the cost
            difference between a 5-year and 7-year tank life is measured in millions of dollars at scale.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--ink)', marginTop: 16 }}>
            For the customer at the center of this case study — a top-3 North American container manufacturer — that variance
            had been climbing for three quarters straight. The QA team had narrowed the root cause to inconsistent iron
            content in their incoming silica batch, but their existing Mid-Continent supplier could not flatten the spec
            without significant cost.
          </p>
          <h2 style={{ fontSize: 26, margin: '36px 0 14px', fontWeight: 500 }}>The parallel run</h2>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--ink)' }}>
            We ran a six-week parallel program with U.S. Silica MX-30/50 against the incumbent grade. Both sets of trucks were
            sampled at the inbound dock, at the silo, and at the batch house. The lab data showed an immediate flattening of
            the iron spec, with MX-30/50's lot-to-lot iron variance running ±18 ppm against the incumbent's ±54 ppm.
          </p>
          <div style={{ marginTop: 36, padding: 28, background: 'var(--bg)', borderLeft: '3px solid var(--accent)', borderRadius: 6 }}>
            <div className="label-mono" style={{ color: 'var(--accent)' }}>RESULT</div>
            <div className="display" style={{ fontSize: 56, fontWeight: 500, marginTop: 8 }}>38%</div>
            <p style={{ fontSize: 15, lineHeight: 1.55, margin: '8px 0 0' }}>
              Reduction in tank-life variance over the first 8 months post-switch. Colorant usage on amber lines fell 14%.
            </p>
          </div>
          <h2 style={{ fontSize: 26, margin: '36px 0 14px', fontWeight: 500 }}>What this means for procurement</h2>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--ink)' }}>
            Stability is a measurable, monetizable feature of an industrial silica grade. If you're tracking tank-life
            variance, refractory cost, or colorant ratio drift, your incoming silica chemistry is one of the highest-leverage
            inputs you can stabilize.
          </p>
        </div>
      </section>

      <section style={{ padding: '64px 32px', background: 'var(--bg)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div className="label-mono" style={{ marginBottom: 22 }}>KEEP READING</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {ARTICLES.filter(a => a.slug !== slug).slice(0, 3).map(a => (
              <article key={a.slug} onClick={() => onNavigate('article', { slug: a.slug })}
                style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden', cursor: 'pointer' }}>
                <Photo src={a.img} height={160}/>
                <div style={{ padding: 16 }}>
                  <div className="label-mono" style={{ color: 'var(--accent)' }}>{a.tag}</div>
                  <h3 style={{ fontSize: 16, margin: '8px 0', fontWeight: 500, lineHeight: 1.3 }}>{a.title}</h3>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <FooterB onNavigate={onNavigate}/>
    </div>
  );
}

Object.assign(window, { AboutPage, SustainabilityPage, NewsroomPage, ArticlePage, ARTICLES });