// ============================================================
// RESOURCES — Hub + SDS Library + Careers + Contact
// ============================================================

// ─── Resources hub ───
function ResourcesHub({ onNavigate }) {
  const groups = [
    {
      title: 'Documentation',
      sub: 'Per-grade, per-lot, per-shipment',
      items: [
        { icon: Icon.doc, name: 'SDS Library', desc: 'Safety Data Sheets for every grade. OSHA HCS 2012 compliant.', count: '38 sheets', route: 'sds' },
        { icon: Icon.doc, name: 'Spec Sheets', desc: 'Full chemistry, particle distribution, lot-stability bands.', count: '38 sheets', route: 'resources' },
        { icon: Icon.doc, name: 'Certificates of Analysis', desc: 'Per-lot COAs delivered with every shipment, archived online.', count: 'Per lot', route: 'resources' },
        { icon: Icon.doc, name: 'Compliance documents', desc: 'ISO 9001, NSF/ANSI 61, FDA, REACH, Prop 65.', count: '14 docs', route: 'resources' },
      ],
    },
    {
      title: 'Technical library',
      sub: 'Application notes and white papers',
      items: [
        { icon: Icon.beaker, name: 'Application notes', desc: 'How specific grades behave in glass, foundry, coatings, fillers.', count: '24 published', route: 'resources' },
        { icon: Icon.doc, name: 'White papers', desc: 'Deep technical writing on chemistry, milling, and reclamation.', count: '11 published', route: 'resources' },
        { icon: Icon.beaker, name: 'Substitution guides', desc: 'Switch from a competitor’s spec without missing the spec.', count: '12 guides', route: 'resources' },
        { icon: Icon.doc, name: 'Glossary', desc: 'Industrial silica terminology — purity, mesh, AFS, BET, ICP, XRF.', count: '180 terms', route: 'resources' },
      ],
    },
    {
      title: 'Tools',
      sub: 'Calculators and finders',
      items: [
        { icon: Icon.search, name: 'Grade finder', desc: 'Match application + purity → candidate grades from our catalog.', count: 'Live', route: 'home' },
        { icon: Icon.truck, name: 'Logistics calculator', desc: 'Closest plant + estimated landed cost from your delivery ZIP.', count: 'Live', route: 'resources' },
        { icon: Icon.beaker, name: 'Mesh converter', desc: 'US mesh ↔ ISO ↔ µm conversion table.', count: 'Reference', route: 'resources' },
        { icon: Icon.factory, name: 'Capacity dashboard', desc: 'Plant-by-plant capacity, lead times, and rail access.', count: 'Updated daily', route: 'facilities' },
      ],
    },
  ];

  return (
    <div className="dir-b ab-page">
      <BrowserChrome url="ussilica.com/resources" />
      <NavB onNavigate={onNavigate}/>
      <PageHeader title="Resources for technical buyers"
        subtitle="Spec sheets. SDS. Application notes. Compliance documents. Tools. Everything an engineer or buyer needs, in one place."
        breadcrumbs={['Home', 'Resources']} onNavigate={onNavigate} />

      {/* Search */}
      <section style={{ padding: '32px 32px 0', background: 'var(--bg)' }}>
        <div style={{ maxWidth: 720, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 8, padding: '14px 18px', background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, boxShadow: '0 4px 16px rgba(10,10,10,0.04)' }}>
          <Icon.search size={18}/>
          <input placeholder="Search 80+ resources — SDS, spec sheets, application notes…"
            style={{ flex: 1, border: 0, outline: 'none', background: 'transparent', fontSize: 15, fontFamily: 'IBM Plex Sans' }}/>
          <span style={{ padding: '4px 8px', background: 'var(--bg)', borderRadius: 4, fontSize: 11, fontFamily: 'IBM Plex Mono' }}>⌘K</span>
        </div>
      </section>

      <section style={{ padding: '56px 32px 96px', background: 'var(--bg)' }}>
        {groups.map((g, i) => (
          <div key={i} style={{ marginBottom: 56 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 22 }}>
              <div>
                <h2 className="display" style={{ fontSize: 34, margin: 0, fontWeight: 500 }}>{g.title}</h2>
                <div style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 4 }}>{g.sub}</div>
              </div>
              <a style={{ fontSize: 13, color: 'var(--accent)', display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>View all <Icon.arrow size={13}/></a>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
              {g.items.map(it => (
                <a key={it.name} onClick={() => onNavigate(it.route)}
                  style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, padding: 22, cursor: 'pointer', transition: 'border-color .15s' }}
                  onMouseEnter={(e) => e.currentTarget.style.borderColor = 'var(--accent)'}
                  onMouseLeave={(e) => e.currentTarget.style.borderColor = 'var(--line)'}>
                  <div style={{ color: 'var(--accent)' }}>{it.icon({ size: 22 })}</div>
                  <div className="label-mono" style={{ marginTop: 16, color: 'var(--ink-soft)' }}>{it.count}</div>
                  <h3 style={{ fontSize: 17, margin: '6px 0 8px', fontWeight: 500 }}>{it.name}</h3>
                  <p style={{ fontSize: 13, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.5 }}>{it.desc}</p>
                  <div style={{ marginTop: 16, color: 'var(--accent)', fontSize: 12, display: 'flex', alignItems: 'center', gap: 4 }}>
                    Open <Icon.arrow size={12}/>
                  </div>
                </a>
              ))}
            </div>
          </div>
        ))}
      </section>

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

// ─── SDS Library ───
function SDSLibrary({ onNavigate }) {
  const [search, setSearch] = React.useState('');
  // Expand PRODUCTS into a "SDS sheet per grade" list
  const sheets = PRODUCTS.flatMap(p => [
    { sku: p.sku, name: p.name, version: '5.2', date: 'Q1 2026', size: '244 KB', hcs: 'OSHA HCS 2012' },
    { sku: p.sku + '-LO', name: p.name + ' (Low-Iron)', version: '5.2', date: 'Q1 2026', size: '232 KB', hcs: 'OSHA HCS 2012' },
  ]);
  const filtered = search ? sheets.filter(s => `${s.sku} ${s.name}`.toLowerCase().includes(search.toLowerCase())) : sheets;
  return (
    <div className="dir-b ab-page">
      <BrowserChrome url="ussilica.com/resources/sds" />
      <NavB onNavigate={onNavigate}/>
      <PageHeader title="SDS Library" subtitle="Safety Data Sheets for every published grade. OSHA HCS 2012 / GHS-compliant. PDFs are downloadable individually or in bulk."
        breadcrumbs={['Home', 'Resources', 'SDS Library']} onNavigate={onNavigate}/>

      <section style={{ padding: '32px 32px 0', background: 'var(--bg)' }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px', background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 8 }}>
            <Icon.search size={16}/>
            <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search SDS by SKU or product name"
              style={{ flex: 1, border: 0, outline: 'none', background: 'transparent', fontSize: 14 }}/>
          </div>
          <MagButton variant="ghost" size="md" dir="b"><Icon.download size={14}/> Download all (ZIP, 12 MB)</MagButton>
        </div>
        <div style={{ marginTop: 12, fontSize: 12, color: 'var(--ink-soft)', fontFamily: 'IBM Plex Mono' }}>
          {filtered.length} OF {sheets.length} SDS SHEETS
        </div>
      </section>

      <section style={{ padding: '24px 32px 96px', background: 'var(--bg)' }}>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden' }}>
          <div className="mono" style={{ display: 'grid', gridTemplateColumns: '110px 2fr 90px 90px 110px 100px 40px', padding: '14px 20px', borderBottom: '1px solid var(--line)', fontSize: 11, color: 'var(--ink-soft)', textTransform: 'uppercase' }}>
            <span>SKU</span><span>Product</span><span>Version</span><span>Date</span><span>Standard</span><span>Size</span><span></span>
          </div>
          {filtered.map((s, i) => (
            <div key={s.sku + i} style={{ display: 'grid', gridTemplateColumns: '110px 2fr 90px 90px 110px 100px 40px', padding: '14px 20px', borderBottom: i < filtered.length - 1 ? '1px solid var(--line)' : 'none', alignItems: 'center', fontSize: 13, cursor: 'pointer' }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'oklch(0.97 0 0)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <span className="mono" style={{ fontSize: 12, color: 'var(--accent)' }}>{s.sku}</span>
              <span style={{ fontWeight: 500 }}>{s.name}</span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--ink-soft)' }}>v{s.version}</span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--ink-soft)' }}>{s.date}</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)' }}>{s.hcs}</span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--ink-soft)' }}>{s.size}</span>
              <Icon.download size={14}/>
            </div>
          ))}
        </div>
      </section>

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

// ─── Careers ───
function CareersPage({ onNavigate }) {
  const roles = [
    { team: 'OPERATIONS', title: 'Plant Manager', loc: 'Berkeley Springs, WV', type: 'Full-time' },
    { team: 'OPERATIONS', title: 'Process Engineer II', loc: 'Pacific, MO', type: 'Full-time' },
    { team: 'COMMERCIAL', title: 'Sr. Material Specialist · Glass', loc: 'Frederick, MD', type: 'Full-time, remote' },
    { team: 'COMMERCIAL', title: 'Account Executive · Foundry', loc: 'Detroit, MI', type: 'Full-time, remote' },
    { team: 'R&D', title: 'Senior Materials Scientist', loc: 'Frederick, MD', type: 'Full-time' },
    { team: 'TECHNOLOGY', title: 'Sr. Frontend Engineer', loc: 'Frederick, MD', type: 'Full-time, hybrid' },
    { team: 'TECHNOLOGY', title: 'Data Engineer · Logistics', loc: 'Remote (US)', type: 'Full-time' },
    { team: 'CORPORATE', title: 'Sustainability Program Lead', loc: 'Frederick, MD', type: 'Full-time' },
    { team: 'CORPORATE', title: 'Investor Relations Associate', loc: 'Frederick, MD', type: 'Full-time' },
    { team: 'PRODUCTION', title: 'Senior Truck Dispatcher', loc: 'Tyler, TX', type: 'Full-time' },
    { team: 'PRODUCTION', title: 'QA Lab Technician', loc: 'Ottawa, IL', type: 'Full-time' },
    { team: 'PRODUCTION', title: 'Heavy Equipment Operator', loc: 'Kosse, TX', type: 'Full-time' },
  ];
  const teams = ['ALL', ...Array.from(new Set(roles.map(r => r.team)))];
  const [team, setTeam] = React.useState('ALL');
  const filtered = team === 'ALL' ? roles : roles.filter(r => r.team === team);

  return (
    <div className="dir-b ab-page">
      <BrowserChrome url="ussilica.com/careers" />
      <NavB onNavigate={onNavigate}/>
      <PageHeader title="Build the foundation."
        subtitle="1,400+ people across 27 facilities. From the QA bench at Pacific Mill to the trading desk at Frederick — we hire engineers, operators, scientists, and the few people who can do all three."
        eyebrow="CAREERS" breadcrumbs={['Home', 'Company', 'Careers']}
        dark cover="assets/plant-historical.jpg" onNavigate={onNavigate}
      />

      {/* Benefits strip */}
      <section style={{ padding: '64px 32px', background: 'var(--paper)' }}>
        <div className="label-mono" style={{ marginBottom: 22 }}>WHY U.S. SILICA</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {[
            ['Industrial-scale work', 'Real production tonnage, real chemistry, real machinery. Not slideware.'],
            ['Long horizons', 'A century-old business hires people who plan in decades, not quarters.'],
            ['Earned autonomy', 'Plants run themselves. Headquarters supports — does not micromanage.'],
            ['Real benefits', 'Healthcare. 401(k) match. ESPP. PTO. Tuition. Boring, comprehensive, real.'],
          ].map(([t, d]) => (
            <div key={t}>
              <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 10 }}>{t}</div>
              <p style={{ fontSize: 13, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.55 }}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Roles */}
      <section style={{ padding: '32px 32px 96px', background: 'var(--bg)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 24 }}>
          <div>
            <div className="label-mono">OPEN ROLES</div>
            <h2 className="display" style={{ fontSize: 44, margin: '12px 0 0', fontWeight: 500 }}>{filtered.length} open positions</h2>
          </div>
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
            {teams.map(t => (
              <button key={t} onClick={() => setTeam(t)} style={{
                padding: '8px 14px', borderRadius: 99, fontSize: 12, fontWeight: 500,
                border: '1px solid', borderColor: team === t ? 'var(--accent)' : 'var(--line)',
                background: team === t ? 'var(--accent)' : 'transparent',
                color: team === t ? '#fff' : 'var(--ink)',
                fontFamily: 'IBM Plex Mono', cursor: 'pointer', letterSpacing: '0.04em',
              }}>{t}</button>
            ))}
          </div>
        </div>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden' }}>
          {filtered.map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '140px 2fr 1.2fr 1fr 40px', gap: 24,
              padding: '20px 24px', borderBottom: i < filtered.length - 1 ? '1px solid var(--line)' : 'none',
              alignItems: 'center', cursor: 'pointer', transition: 'background .12s',
            }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'oklch(0.97 0 0)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.06em' }}>{r.team}</span>
              <span style={{ fontSize: 15, fontWeight: 500 }}>{r.title}</span>
              <span style={{ fontSize: 13, color: 'var(--ink-soft)', display: 'flex', alignItems: 'center', gap: 6 }}><Icon.pin size={12}/> {r.loc}</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)' }}>{r.type}</span>
              <Icon.arrow size={14}/>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, padding: 24, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 15, fontWeight: 500 }}>Don't see your role?</div>
            <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4 }}>Send us a note and your résumé. We hire opportunistically for exceptional fits.</div>
          </div>
          <MagButton variant="primary" size="md" dir="b" onClick={() => onNavigate('contact')}>Get in touch <Icon.arrow size={13}/></MagButton>
        </div>
      </section>

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

// ─── Contact ───
function ContactPage({ onNavigate }) {
  return (
    <div className="dir-b ab-page">
      <BrowserChrome url="ussilica.com/contact" />
      <NavB onNavigate={onNavigate}/>
      <PageHeader title="Talk to U.S. Silica."
        subtitle="Sales, technical support, media, corporate. We route every message to a real person within one business day."
        eyebrow="CONTACT" breadcrumbs={['Home', 'Company', 'Contact']} onNavigate={onNavigate}/>

      <section style={{ padding: '64px 32px 96px', background: 'var(--bg)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64 }}>
          {/* Channels */}
          <div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
              {[
                { tag: 'PRIMARY', title: 'Sales & quoting', body: 'Material specialists by application and geography.', cta: 'Request a quote', route: 'rfq' },
                { tag: 'TECHNICAL', title: 'Technical support', body: 'For active customers with spec, COA, or lot questions.', email: 'tech@ussilica.com' },
                { tag: 'MEDIA', title: 'Press & media', body: 'For journalists, analysts, and broadcast media.', email: 'press@ussilica.com' },
                { tag: 'CORPORATE', title: 'Corporate office', body: '8490 Progress Dr · Frederick, MD 21701', phone: '+1 (240) 343-2300' },
                { tag: 'INVESTORS', title: 'Investor relations', body: 'NYSE: SLCA · Reports, filings, and analyst inquiries.', email: 'ir@ussilica.com' },
                { tag: 'HR', title: 'Careers & people', body: 'For active applicants and HR questions.', cta: 'See open roles', route: 'careers' },
              ].map((c, i) => (
                <article key={i} style={{ padding: 24, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 12 }}>
                  <div className="label-mono" style={{ color: 'var(--accent)' }}>{c.tag}</div>
                  <h3 style={{ fontSize: 18, margin: '8px 0 6px', fontWeight: 500 }}>{c.title}</h3>
                  <p style={{ fontSize: 13, color: 'var(--ink-soft)', margin: '0 0 14px', lineHeight: 1.5 }}>{c.body}</p>
                  {c.cta && <button onClick={() => onNavigate(c.route)} style={{ background: 'var(--ink)', color: 'var(--paper)', border: 0, padding: '8px 12px', borderRadius: 5, fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'IBM Plex Sans' }}>{c.cta}</button>}
                  {c.email && <a className="mono" style={{ fontSize: 12, color: 'var(--accent)' }}>{c.email}</a>}
                  {c.phone && <div className="mono" style={{ fontSize: 12, color: 'var(--ink)' }}>{c.phone}</div>}
                </article>
              ))}
            </div>
          </div>
          {/* HQ panel */}
          <div>
            <div style={{ background: 'var(--bg-deep)', color: 'var(--paper)', borderRadius: 14, padding: 28 }}>
              <div className="label-mono" style={{ color: 'oklch(0.78 0.13 70)' }}>HEADQUARTERS</div>
              <div className="display" style={{ fontSize: 32, marginTop: 12, fontWeight: 500 }}>Frederick, MD</div>
              <div style={{ marginTop: 18, fontSize: 14, color: 'rgba(255,255,255,0.8)', lineHeight: 1.6 }}>
                8490 Progress Dr<br/>Frederick, MD 21701<br/>United States
              </div>
              <div className="mono" style={{ marginTop: 20, fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>+1 (240) 343-2300</div>
              <div className="mono" style={{ marginTop: 4, fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>Mon–Fri · 7a–6p ET</div>
              <div style={{ marginTop: 24, height: 200, background: 'var(--bg-deep)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 8, position: 'relative', overflow: 'hidden' }}>
                <svg viewBox="0 0 400 200" style={{ width: '100%', height: '100%' }}>
                  <defs>
                    <pattern id="gridc" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                      <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
                    </pattern>
                  </defs>
                  <rect width="400" height="200" fill="url(#gridc)"/>
                  {/* Roads */}
                  <path d="M -20 80 Q 100 80 140 100 T 280 130 T 420 110" stroke="rgba(255,255,255,0.25)" strokeWidth="14" fill="none"/>
                  <path d="M 220 0 L 240 220" stroke="rgba(255,255,255,0.18)" strokeWidth="10" fill="none"/>
                  {/* Pin */}
                  <g transform="translate(200 100)">
                    <circle r="32" fill="var(--accent)" opacity="0.15" style={{ animation: 'pulse-dot 2s infinite' }}/>
                    <circle r="14" fill="var(--accent)"/>
                    <circle r="4" fill="white"/>
                    <text x="22" y="6" fontSize="11" fontFamily="IBM Plex Mono" fill="white">U.S. SILICA HQ</text>
                  </g>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </section>

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

Object.assign(window, { ResourcesHub, SDSLibrary, CareersPage, ContactPage });