// ============================================================
// Direction B — MODERN TECHNICAL
// IBM Plex Sans + Mono. Near-monochrome with cobalt accent.
// Data-forward, lots of whitespace, "Stripe-for-industry".
// ============================================================

function HomeB({ onNavigate }) {
  return (
    <div className="dir-b ab-page">
      <BrowserChrome url="ussilica.com" />
      <UtilityBarB />
      <NavB onNavigate={onNavigate} />
      <HeroB onNavigate={onNavigate} />
      <TickerB />
      <SpecFinderB onNavigate={onNavigate} />
      <ProductTableB onNavigate={onNavigate} />
      <CustomersB />
      <NetworkB onNavigate={onNavigate} />
      <TechResourcesB />
      <CtaB onNavigate={onNavigate} />
      <FooterB onNavigate={onNavigate} />
    </div>
  );
}

function UtilityBarB() {
  return (
    <div className="mono" style={{ background: 'var(--bg-deep)', color: 'rgba(255,255,255,0.7)', padding: '8px 32px', display: 'flex', justifyContent: 'space-between', fontSize: 11 }}>
      <div style={{ display: 'flex', gap: 22 }}>
        <span>NYSE: SLCA</span>
        <span style={{ color: 'oklch(0.85 0.18 145)' }}>↑ 41.20 USD <span style={{ opacity: 0.55, marginLeft: 4 }}>+1.2%</span></span>
        <span>· Q1 2026 earnings: May 8</span>
      </div>
      <div style={{ display: 'flex', gap: 18 }}>
        <a>Investors</a><a>News</a><a>Careers</a><a>Contact</a>
      </div>
    </div>
  );
}

function NavB({ onNavigate, currentRoute }) {
  const [open, setOpen] = React.useState(null);
  const [searchOpen, setSearchOpen] = React.useState(false);
  const closeT = React.useRef();

  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setSearchOpen(true); }
      if (e.key === 'Escape') setSearchOpen(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const enter = (id) => { clearTimeout(closeT.current); setOpen(id); };
  const leave = () => { closeT.current = setTimeout(() => setOpen(null), 120); };

  const menus = {
    products: <MegaProducts onNavigate={(r, p) => { setOpen(null); onNavigate?.(r, p); }} />,
    applications: <MegaApplications onNavigate={(r, p) => { setOpen(null); onNavigate?.(r, p); }} />,
    resources: <MegaResources onNavigate={(r, p) => { setOpen(null); onNavigate?.(r, p); }} />,
    about: <MegaAbout onNavigate={(r, p) => { setOpen(null); onNavigate?.(r, p); }} />,
  };

  const navItems = [
    { id: 'products', label: 'Products' },
    { id: 'applications', label: 'Applications' },
    { id: 'resources', label: 'Resources' },
    { id: 'about', label: 'Company' },
  ];

  return (
    <>
      <header style={{ position: 'sticky', top: 0, zIndex: 30, background: 'rgba(250,250,248,0.92)', backdropFilter: 'blur(8px)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ padding: '14px 32px', display: 'flex', alignItems: 'center', gap: 36 }}>
          <a onClick={() => onNavigate?.('home')} style={{ cursor: 'pointer', display: 'flex' }}><Logo size={30} /></a>
          <nav style={{ display: 'flex', gap: 4, marginLeft: 14 }}>
            {navItems.map(n => (
              <div key={n.id}
                onMouseEnter={() => enter(n.id)}
                onMouseLeave={leave}
                style={{ position: 'relative' }}>
                <button style={{
                  background: 'transparent', border: 0, padding: '10px 14px',
                  fontSize: 14, fontWeight: 400, color: 'var(--ink)',
                  display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer',
                  borderRadius: 6,
                  backgroundColor: open === n.id ? 'oklch(0.97 0 0)' : 'transparent',
                  transition: 'background .12s',
                }}>{n.label}<Icon.chev size={11}/></button>
              </div>
            ))}
          </nav>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 14, alignItems: 'center' }}>
            <button onClick={() => setSearchOpen(true)} style={{
              display: 'flex', alignItems: 'center', gap: 8, padding: '8px 14px',
              background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 8,
              fontSize: 13, color: 'var(--ink-soft)', width: 280, cursor: 'pointer',
            }}>
              <Icon.search size={14}/>
              <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 12 }}>Search products, applications, SDS</span>
              <span style={{ marginLeft: 'auto', padding: '2px 6px', border: '1px solid var(--line)', borderRadius: 3, fontFamily: 'IBM Plex Mono', fontSize: 10 }}>⌘K</span>
            </button>
            <button style={{ background: 'transparent', border: 0, color: 'var(--ink)', fontSize: 14, cursor: 'pointer' }}>Sign in</button>
            <MagButton variant="primary" size="sm" dir="b" onClick={() => onNavigate?.('rfq')}>Request a quote <Icon.arrow size={13}/></MagButton>
          </div>
        </div>
        {/* Mega-menu drop */}
        {open && menus[open] && (
          <div onMouseEnter={() => enter(open)} onMouseLeave={leave}
            className="fade-in"
            style={{
              position: 'absolute', top: '100%', left: 0, right: 0,
              background: 'var(--paper)', borderBottom: '1px solid var(--line)',
              boxShadow: '0 24px 40px rgba(10,10,10,0.06)',
              animation: 'fadeUp .15s ease',
            }}>
            <div style={{ padding: '28px 48px 32px', maxWidth: 1400, margin: '0 auto' }}>
              {menus[open]}
            </div>
          </div>
        )}
      </header>
      {searchOpen && <SearchModal onClose={() => setSearchOpen(false)} onNavigate={(r, p) => { setSearchOpen(false); onNavigate?.(r, p); }}/>}
    </>
  );
}

// ─── Mega menus ───
function MegaProducts({ onNavigate }) {
  const cats = [
    ['Whole Grain Silica', 'whole-grain', '12 grades · glass, foundry, construction'],
    ['Ground Silica', 'ground', '9 grades · fillers, coatings, polymers'],
    ['Micronized Silica', 'micronized', '6 grades · ultra-fine specialties'],
    ['Proppants', 'proppants', '5 grades · API-tested frac sand'],
    ['Specialty & Reference', 'specialty', '6 grades · ASTM, laboratory'],
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1.2fr', gap: 48 }}>
      <div>
        <div className="label-mono" style={{ marginBottom: 14 }}>BY CATEGORY</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {cats.map(([n, slug, sub]) => (
            <a key={slug} onClick={() => onNavigate('products', { cat: slug })}
              style={{ padding: '10px 12px', borderRadius: 6, cursor: 'pointer', transition: 'background .1s' }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{n}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{sub}</div>
            </a>
          ))}
        </div>
      </div>
      <div>
        <div className="label-mono" style={{ marginBottom: 14 }}>FEATURED</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {PRODUCTS.slice(0, 4).map(p => (
            <a key={p.sku} onClick={() => onNavigate('product', { sku: p.sku })}
              style={{ display: 'flex', gap: 12, padding: 8, borderRadius: 6, cursor: 'pointer', alignItems: 'center' }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <div style={{ width: 44, height: 44, borderRadius: 6, overflow: 'hidden', flex: '0 0 auto' }}>
                <Photo src={p.image} height={44}/>
              </div>
              <div style={{ minWidth: 0 }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--accent)' }}>{p.sku}</div>
                <div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>{p.name}</div>
              </div>
            </a>
          ))}
        </div>
        <a onClick={() => onNavigate('products')} style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 14, fontSize: 13, color: 'var(--accent)', cursor: 'pointer' }}>
          View all 38 grades <Icon.arrow size={13}/>
        </a>
      </div>
      <div style={{ background: 'var(--bg-deep)', color: 'var(--paper)', borderRadius: 10, padding: 22, position: 'relative', overflow: 'hidden' }}>
        <Photo src="assets/sem-microscope.jpg" height="100%" width="100%" style={{ position: 'absolute', inset: 0, opacity: 0.22, objectFit: 'cover' }} />
        <div style={{ position: 'relative' }}>
          <div className="label-mono" style={{ color: 'oklch(0.78 0.13 70)' }}>↳ TOOL</div>
          <h3 className="display" style={{ fontSize: 22, margin: '8px 0 8px', fontWeight: 500, color: 'var(--paper)' }}>Find your grade in 30 seconds</h3>
          <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', margin: 0, lineHeight: 1.5 }}>
            Tell us the application and the spec floor. We narrow 38 grades to your shortlist.
          </p>
          <button onClick={() => onNavigate('home')} style={{ marginTop: 14, padding: '8px 12px', background: 'var(--accent)', color: '#fff', border: 0, borderRadius: 5, fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'IBM Plex Sans' }}>
            Open the finder
          </button>
        </div>
      </div>
    </div>
  );
}

function MegaApplications({ onNavigate }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr) 1.3fr', gap: 24 }}>
      {APPLICATIONS.map(a => (
        <a key={a.id} onClick={() => onNavigate('application', { id: a.id })}
          style={{ padding: 14, borderRadius: 8, cursor: 'pointer', transition: 'background .12s', display: 'flex', gap: 14, alignItems: 'center' }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
          <div style={{ width: 60, height: 60, borderRadius: 8, overflow: 'hidden', flex: '0 0 auto' }}>
            <Photo src={a.image} height={60}/>
          </div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{a.name}</div>
            <div style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 2 }}>{a.count} grades · {a.tagline}</div>
          </div>
        </a>
      ))}
      <div style={{ background: 'var(--accent-soft)', borderRadius: 10, padding: 18 }}>
        <div className="label-mono" style={{ color: 'var(--accent)' }}>↳ CASE STUDY</div>
        <h3 style={{ fontSize: 17, margin: '8px 0', fontWeight: 500 }}>How a Tier-1 stone fabricator cut filler variance by 41%</h3>
        <a style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 500 }}>Read the study →</a>
      </div>
    </div>
  );
}

function MegaResources({ onNavigate }) {
  const groups = [
    ['DOCUMENTATION', [
      ['SDS Library', 'sds', 'Safety Data Sheets for every grade'],
      ['Spec Sheets', 'resources', 'Full chemistry & particle data'],
      ['Certificates of Analysis', 'resources', 'Per-lot certificates online'],
      ['Compliance documents', 'resources', 'ISO, NSF, FDA, REACH, Prop 65'],
    ]],
    ['LEARN', [
      ['Technical Library', 'resources', '24 published application notes'],
      ['Case Studies', 'newsroom', 'Customer stories, with data'],
      ['Glossary', 'resources', 'Industrial silica terminology'],
      ['White papers', 'resources', 'Deep-dive technical PDFs'],
    ]],
    ['TOOLS', [
      ['Grade finder', 'home', 'Match a spec to a grade'],
      ['Logistics calculator', 'resources', 'Landed-cost estimator'],
      ['Substitution finder', 'resources', 'Swap from a competitor’s spec'],
      ['Mesh converter', 'resources', 'US ↔ ISO ↔ µm'],
    ]],
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 36 }}>
      {groups.map(([h, items]) => (
        <div key={h}>
          <div className="label-mono" style={{ marginBottom: 14 }}>{h}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {items.map(([n, r, sub]) => (
              <a key={n} onClick={() => onNavigate(r)}
                style={{ padding: '8px 12px', borderRadius: 6, cursor: 'pointer' }}
                onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg)'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{n}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 2 }}>{sub}</div>
              </a>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function MegaAbout({ onNavigate }) {
  const items = [
    ['About U.S. Silica', 'about', 'A century of industrial materials'],
    ['Operations & Facilities', 'facilities', '27 plants across 13 states'],
    ['Sustainability', 'sustainability', 'Water, energy, and reclamation'],
    ['Newsroom', 'newsroom', 'Press releases and announcements'],
    ['Investor Relations', 'about', 'NYSE: SLCA · Reports & filings'],
    ['Careers', 'careers', '1,400+ employees · open roles'],
    ['Contact', 'contact', 'Sales, support, media, corporate'],
    ['Leadership', 'about', 'Executives and board'],
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1.3fr', gap: 36 }}>
      <div style={{ gridColumn: 'span 2', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
        {items.map(([n, r, sub]) => (
          <a key={n} onClick={() => onNavigate(r)}
            style={{ padding: '10px 12px', borderRadius: 6, cursor: 'pointer' }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{n}</div>
            <div style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 2 }}>{sub}</div>
          </a>
        ))}
      </div>
      <div style={{ borderRadius: 10, overflow: 'hidden', position: 'relative', height: 220 }}>
        <Photo src="assets/facility-aerial.jpg" height="100%" />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7))' }} />
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16, color: '#fff' }}>
          <div className="label-mono" style={{ color: 'var(--accent)', marginBottom: 4 }}>↳ FROM OPERATIONS</div>
          <div style={{ fontSize: 14, fontWeight: 500 }}>Jackson, TN · 24/7 dispatch</div>
        </div>
      </div>
    </div>
  );
}

function SearchModal({ onClose, onNavigate }) {
  const [q, setQ] = React.useState('');
  const [selectedIdx, setSelectedIdx] = React.useState(0);
  const inputRef = React.useRef();
  const listRef = React.useRef();
  React.useEffect(() => { inputRef.current?.focus(); }, []);

  const ql = q.trim().toLowerCase();
  const matches = ql ? PRODUCTS.filter(p =>
    p.name.toLowerCase().includes(ql) || p.sku.toLowerCase().includes(ql) || p.market.toLowerCase().includes(ql) || p.category.toLowerCase().includes(ql)
  ).slice(0, 5) : [];
  const appMatches = ql ? APPLICATIONS.filter(a => a.name.toLowerCase().includes(ql) || a.tagline.toLowerCase().includes(ql)).slice(0, 4) : [];
  const facMatches = ql ? FACILITIES.filter(f => f.name.toLowerCase().includes(ql) || f.state.toLowerCase().includes(ql) || f.type.toLowerCase().includes(ql)).slice(0, 4) : [];

  const sdsMatches = ql ? PRODUCTS.filter(p => `sds ${p.sku} ${p.name}`.toLowerCase().includes(ql)).slice(0, 3) : [];
  const pageMatches = ql ? [
    { id: 'rfq', label: 'Request a Quote', sub: 'Start a 4-step RFQ' },
    { id: 'sds', label: 'SDS Library', sub: '38 Safety Data Sheets' },
    { id: 'facilities', label: 'Facilities map', sub: '27 sites · 13 states' },
    { id: 'resources', label: 'Resources hub', sub: 'Specs · SDS · tools' },
    { id: 'careers', label: 'Careers', sub: '12 open roles' },
    { id: 'about', label: 'About U.S. Silica', sub: 'Operations & history' },
    { id: 'sustainability', label: 'Sustainability', sub: '2025 report' },
    { id: 'newsroom', label: 'Newsroom', sub: 'Case studies + press' },
  ].filter(p => p.label.toLowerCase().includes(ql) || p.sub.toLowerCase().includes(ql)).slice(0, 4) : [];

  // Build flat selectable list for arrow nav
  const flat = [];
  matches.forEach(p => flat.push({ kind: 'product', data: p, action: () => onNavigate('product', { sku: p.sku }) }));
  appMatches.forEach(a => flat.push({ kind: 'app', data: a, action: () => onNavigate('application', { id: a.id }) }));
  facMatches.forEach(f => flat.push({ kind: 'fac', data: f, action: () => onNavigate('facilities', { id: f.id }) }));
  pageMatches.forEach(p => flat.push({ kind: 'page', data: p, action: () => onNavigate(p.id) }));
  sdsMatches.forEach(p => flat.push({ kind: 'sds', data: p, action: () => onNavigate('sds') }));

  React.useEffect(() => { setSelectedIdx(0); }, [q]);

  const onKey = (e) => {
    if (flat.length === 0) return;
    if (e.key === 'ArrowDown') { e.preventDefault(); setSelectedIdx(i => (i + 1) % flat.length); }
    if (e.key === 'ArrowUp')   { e.preventDefault(); setSelectedIdx(i => (i - 1 + flat.length) % flat.length); }
    if (e.key === 'Enter')     { e.preventDefault(); flat[selectedIdx]?.action(); }
  };

  const totalCount = flat.length;
  const isEmpty = !ql;
  const noResults = ql && totalCount === 0;

  return ReactDOM.createPortal(
    <div onClick={onClose} className="search-overlay" style={{
      position: 'fixed', inset: 0, background: 'rgba(10,10,10,0.55)',
      zIndex: 1000, display: 'flex', justifyContent: 'center', alignItems: 'flex-start',
      paddingTop: '7vh', backdropFilter: 'blur(4px)', animation: 'fadeOverlay .15s ease',
    }}>
      <div onClick={(e) => e.stopPropagation()} onKeyDown={onKey} style={{
        width: 'min(860px, calc(100vw - 48px))', background: 'var(--paper)', borderRadius: 14,
        boxShadow: '0 50px 100px rgba(0,0,0,0.35), 0 0 0 1px rgba(10,10,10,0.06)',
        overflow: 'hidden', maxHeight: '78vh', display: 'flex', flexDirection: 'column',
        animation: 'searchIn .18s cubic-bezier(.2,.7,.3,1)',
      }}>
        <style>{`
          @keyframes fadeOverlay { from { opacity: 0; } to { opacity: 1; } }
          @keyframes searchIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
          .srow { display:flex; align-items:center; gap:14px; padding:11px 18px; cursor:pointer; border-radius:8px; transition: background .08s; }
          .srow.is-sel { background: var(--accent-soft); }
          .srow.is-sel .srow-arrow { color: var(--accent); opacity: 1; transform: translateX(0); }
          .srow-arrow { color: var(--ink-soft); opacity: 0; transform: translateX(-4px); transition: all .12s; }
          .srow:hover { background: var(--accent-soft); }
          .srow:hover .srow-arrow { color: var(--accent); opacity: 1; transform: translateX(0); }
          .skbd { padding:2px 6px; border:1px solid var(--line); border-radius:4px; font-family:'IBM Plex Mono'; font-size:10px; color:var(--ink-soft); background: var(--paper); line-height: 1; }
        `}</style>

        {/* INPUT BAR */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '18px 22px', borderBottom: '1px solid var(--line)' }}>
          <span style={{ color: 'var(--ink-soft)' }}><Icon.search size={20}/></span>
          <input ref={inputRef} value={q} onChange={e => setQ(e.target.value)}
            placeholder="Search products, applications, facilities, SDS, pages…"
            style={{
              border: 0, outline: 'none', flex: 1, background: 'transparent',
              fontSize: 18, fontFamily: 'IBM Plex Sans', color: 'var(--ink)', padding: 0,
            }}/>
          {q && (
            <button onClick={() => setQ('')} style={{ background: 'transparent', border: 0, color: 'var(--ink-soft)', cursor: 'pointer', padding: 4, display: 'flex', alignItems: 'center' }}>
              <Icon.close size={16}/>
            </button>
          )}
          <button onClick={onClose} className="skbd" style={{ padding: '4px 10px', cursor: 'pointer' }}>ESC</button>
        </div>

        {/* BODY */}
        <div ref={listRef} style={{ overflowY: 'auto', flex: 1 }}>
          {isEmpty && <SearchEmptyState onNavigate={onNavigate}/>}

          {noResults && (
            <div style={{ padding: '64px 24px', textAlign: 'center' }}>
              <div style={{ width: 56, height: 56, borderRadius: 99, background: 'var(--bg)', margin: '0 auto 18px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-soft)' }}>
                <Icon.search size={22}/>
              </div>
              <div style={{ fontSize: 17, fontWeight: 500, marginBottom: 6 }}>No matches for "{q}"</div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', maxWidth: 360, margin: '0 auto', lineHeight: 1.55 }}>
                Try a product SKU (e.g. <span className="mono" style={{ background: 'var(--bg)', padding: '1px 6px', borderRadius: 3 }}>MX-30/50</span>), an application like <em>glass</em>, or a city like <em>Ottawa</em>.
              </div>
              <button onClick={() => onNavigate('rfq')} style={{ marginTop: 22, padding: '10px 18px', background: 'var(--accent)', color: '#fff', border: 0, borderRadius: 6, fontSize: 13, fontWeight: 500, fontFamily: 'IBM Plex Sans', cursor: 'pointer' }}>
                Ask a specialist instead →
              </button>
            </div>
          )}

          {ql && totalCount > 0 && (
            <div style={{ padding: '10px 12px 12px' }}>
              {matches.length > 0 && (
                <Section label={`PRODUCTS · ${matches.length}`} action={['View all 38', () => onNavigate('products')]}>
                  {matches.map((p, i) => (
                    <ProductRow key={p.sku} p={p} selected={flat[selectedIdx]?.data?.sku === p.sku && flat[selectedIdx]?.kind === 'product'}
                      onClick={() => onNavigate('product', { sku: p.sku })}/>
                  ))}
                </Section>
              )}
              {appMatches.length > 0 && (
                <Section label={`APPLICATIONS · ${appMatches.length}`} action={['View all 6', () => onNavigate('applications')]}>
                  {appMatches.map(a => (
                    <AppRow key={a.id} a={a} selected={flat[selectedIdx]?.data?.id === a.id && flat[selectedIdx]?.kind === 'app'}
                      onClick={() => onNavigate('application', { id: a.id })}/>
                  ))}
                </Section>
              )}
              {facMatches.length > 0 && (
                <Section label={`FACILITIES · ${facMatches.length}`} action={['View map', () => onNavigate('facilities')]}>
                  {facMatches.map(f => (
                    <FacRow key={f.id} f={f} selected={flat[selectedIdx]?.data?.id === f.id && flat[selectedIdx]?.kind === 'fac'}
                      onClick={() => onNavigate('facilities', { id: f.id })}/>
                  ))}
                </Section>
              )}
              {sdsMatches.length > 0 && (
                <Section label={`SDS SHEETS · ${sdsMatches.length}`} action={['Open library', () => onNavigate('sds')]}>
                  {sdsMatches.map(p => (
                    <SDSRow key={p.sku} p={p}
                      selected={flat[selectedIdx]?.data?.sku === p.sku && flat[selectedIdx]?.kind === 'sds'}
                      onClick={() => onNavigate('sds')}/>
                  ))}
                </Section>
              )}
              {pageMatches.length > 0 && (
                <Section label={`PAGES · ${pageMatches.length}`}>
                  {pageMatches.map(p => (
                    <div key={p.id} className={`srow ${flat[selectedIdx]?.data?.id === p.id && flat[selectedIdx]?.kind === 'page' ? 'is-sel' : ''}`}
                      onClick={() => onNavigate(p.id)}>
                      <div style={{ width: 36, height: 36, borderRadius: 7, background: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-soft)', flex: '0 0 auto' }}>
                        <Icon.doc size={16}/>
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 14, fontWeight: 500 }}>{p.label}</div>
                        <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 1 }}>{p.sub}</div>
                      </div>
                      <span className="mono" style={{ fontSize: 10, color: 'var(--ink-soft)' }}>↵</span>
                      <span className="srow-arrow"><Icon.arrow size={14}/></span>
                    </div>
                  ))}
                </Section>
              )}
            </div>
          )}
        </div>

        {/* FOOTER */}
        <div style={{ borderTop: '1px solid var(--line)', padding: '10px 22px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'IBM Plex Mono', fontSize: 11, color: 'var(--ink-soft)', background: 'var(--bg)' }}>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              <span className="skbd">↑</span><span className="skbd">↓</span> Navigate
            </span>
            <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              <span className="skbd">↵</span> Open
            </span>
            <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              <span className="skbd">ESC</span> Close
            </span>
          </div>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <span style={{ width: 6, height: 6, background: 'oklch(0.75 0.2 145)', borderRadius: 99 }}/>
            Powered by U.S. Silica search · v2.4
          </div>
        </div>
      </div>
    </div>,
    document.body
  );
}

function Section({ label, action, children }) {
  return (
    <div style={{ marginBottom: 6 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 18px 6px' }}>
        <span className="label-mono" style={{ color: 'var(--ink-soft)' }}>{label}</span>
        {action && <a onClick={action[1]} style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 500, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>{action[0]} <Icon.arrow size={11}/></a>}
      </div>
      {children}
    </div>
  );
}

function ProductRow({ p, selected, onClick }) {
  return (
    <div className={`srow ${selected ? 'is-sel' : ''}`} onClick={onClick}>
      <div style={{ width: 40, height: 40, borderRadius: 7, overflow: 'hidden', flex: '0 0 auto', background: '#000' }}>
        <Photo src={p.image} height={40}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
          <span style={{ fontSize: 14, fontWeight: 500 }}>{p.name}</span>
          <span className="mono" style={{ fontSize: 10, color: 'var(--accent)', padding: '1px 6px', background: 'var(--accent-soft)', borderRadius: 3 }}>{p.sku}</span>
        </div>
        <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{p.market} · {p.silica_pct}% SiO₂ · {p.mesh}</div>
      </div>
      <span className="srow-arrow"><Icon.arrow size={14}/></span>
    </div>
  );
}

function AppRow({ a, selected, onClick }) {
  return (
    <div className={`srow ${selected ? 'is-sel' : ''}`} onClick={onClick}>
      <div style={{ width: 40, height: 40, borderRadius: 7, overflow: 'hidden', flex: '0 0 auto' }}>
        <Photo src={a.image} height={40}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{a.name}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{a.tagline} · {a.count} grades</div>
      </div>
      <span className="srow-arrow"><Icon.arrow size={14}/></span>
    </div>
  );
}

function FacRow({ f, selected, onClick }) {
  return (
    <div className={`srow ${selected ? 'is-sel' : ''}`} onClick={onClick}>
      <div style={{ width: 40, height: 40, borderRadius: 7, background: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)', flex: '0 0 auto' }}>
        <Icon.pin size={18}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{f.name}, {f.state}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{f.type} · {f.products.length > 0 ? f.products.join(', ') : 'Headquarters'}</div>
      </div>
      <span className="srow-arrow"><Icon.arrow size={14}/></span>
    </div>
  );
}

function SDSRow({ p, selected, onClick }) {
  return (
    <div className={`srow ${selected ? 'is-sel' : ''}`} onClick={onClick}>
      <div style={{ width: 40, height: 40, borderRadius: 7, background: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-soft)', flex: '0 0 auto' }}>
        <Icon.doc size={18}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
          <span style={{ fontSize: 14, fontWeight: 500 }}>SDS · {p.name}</span>
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 2 }}>{p.sku} · v5.2 · OSHA HCS 2012 · 244 KB</div>
      </div>
      <Icon.download size={14}/>
    </div>
  );
}

function SearchEmptyState({ onNavigate }) {
  const recents = ['MX-30/50 spec sheet', 'low iron silica glass', 'Berkeley Springs facility'];
  const trending = [
    { kw: 'whole grain silica for container glass', vol: '+38%' },
    { kw: 'API frac sand in-basin', vol: '+22%' },
    { kw: 'NSF/ANSI 61 filter sand', vol: '+18%' },
    { kw: 'engineered stone silica filler', vol: '+12%' },
  ];
  const jump = [
    { label: 'Request a quote', sub: '4-step RFQ', icon: Icon.arrow, route: 'rfq', accent: true },
    { label: 'Browse products', sub: '38 published grades', icon: Icon.beaker, route: 'products' },
    { label: 'Find by application', sub: '6 industries', icon: Icon.factory, route: 'applications' },
    { label: 'Facilities map', sub: '27 sites · live', icon: Icon.pin, route: 'facilities' },
    { label: 'SDS library', sub: 'Per-grade safety data', icon: Icon.doc, route: 'sds' },
    { label: 'Talk to a specialist', sub: 'Sales + technical', icon: Icon.search, route: 'contact' },
  ];

  return (
    <div style={{ padding: '14px 12px 18px' }}>
      <Section label="JUMP TO">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, padding: '0 6px' }}>
          {jump.map((j) => (
            <a key={j.label} onClick={() => onNavigate(j.route)}
              style={{
                padding: 14, border: '1px solid var(--line)', borderRadius: 10, cursor: 'pointer',
                background: j.accent ? 'var(--accent)' : 'var(--paper)',
                color: j.accent ? '#fff' : 'var(--ink)',
                transition: 'all .12s', display: 'flex', flexDirection: 'column', gap: 8,
              }}
              onMouseEnter={(e) => { if (!j.accent) { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.background = 'var(--accent-soft)'; } }}
              onMouseLeave={(e) => { if (!j.accent) { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.background = 'var(--paper)'; } }}>
              <div style={{ color: j.accent ? 'rgba(255,255,255,0.7)' : 'var(--accent)' }}>{j.icon({ size: 16 })}</div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{j.label}</div>
                <div style={{ fontSize: 11, color: j.accent ? 'rgba(255,255,255,0.75)' : 'var(--ink-soft)', marginTop: 2 }}>{j.sub}</div>
              </div>
            </a>
          ))}
        </div>
      </Section>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
        <Section label="TRENDING SEARCHES">
          {trending.map((t) => (
            <div key={t.kw} className="srow" onClick={() => { document.querySelector('.search-overlay input')?.focus(); }}
              style={{ padding: '9px 18px' }}>
              <span style={{ color: 'var(--ink-soft)' }}><Icon.search size={13}/></span>
              <span style={{ flex: 1, fontSize: 13 }}>{t.kw}</span>
              <span className="mono" style={{ fontSize: 10, color: 'oklch(0.55 0.15 145)', padding: '2px 5px', background: 'oklch(0.93 0.08 145 / 0.4)', borderRadius: 3 }}>{t.vol}</span>
            </div>
          ))}
        </Section>
        <Section label="RECENT">
          {recents.map(r => (
            <div key={r} className="srow" style={{ padding: '9px 18px' }}>
              <span style={{ color: 'var(--ink-soft)' }} title="Recent search">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="13" height="13"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
              </span>
              <span style={{ flex: 1, fontSize: 13 }}>{r}</span>
              <span style={{ fontSize: 11, color: 'var(--ink-soft)' }}>↵</span>
            </div>
          ))}
        </Section>
      </div>
    </div>
  );
}

function HeroB({ onNavigate }) {
  return (
    <section style={{ padding: '88px 32px 72px', background: 'var(--bg)', position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, alignItems: 'start' }}>
        <div>
          <div className="label-mono" style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 28 }}>
            <span style={{ width: 28, height: 1, background: 'var(--ink-soft)' }}/>
            <span>v2026.05 — Updated spec library</span>
            <span style={{ background: 'var(--accent-soft)', color: 'var(--accent)', padding: '2px 8px', borderRadius: 99, fontSize: 10 }}>NEW</span>
          </div>
          <h1 className="display" style={{ fontSize: 96, margin: 0, fontWeight: 500 }}>
            Industrial silica,<br/>
            built around <span style={{ color: 'var(--accent)' }}>your spec</span>.
          </h1>
          <p style={{ marginTop: 28, maxWidth: 580, fontSize: 18, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
            38 published grades. 27 facilities. One material science team, sized to
            move from inquiry to qualified sample in under 72 hours. Browse the
            catalog, or talk to an engineer.
          </p>
          <div style={{ marginTop: 34, display: 'flex', gap: 12 }}>
            <MagButton variant="primary" size="lg" dir="b" onClick={() => onNavigate?.('rfq')}>Start a quote <Icon.arrow size={14}/></MagButton>
            <MagButton variant="ghost" size="lg" dir="b" onClick={() => onNavigate?.('product')}>Browse catalog</MagButton>
          </div>
          <div style={{ marginTop: 56, display: 'flex', gap: 48 }}>
            {[
              ['38', 'Published grades'],
              ['27', 'Facilities'],
              ['<72 h', 'To qualified sample'],
              ['99.8%', 'Max SiO₂ purity'],
            ].map(([v, l]) => (
              <div key={l}>
                <div className="display" style={{ fontSize: 36, fontWeight: 500 }}>{v}</div>
                <div className="label-mono" style={{ marginTop: 6 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        {/* Spec card — illustrative product preview */}
        <div style={{ position: 'sticky', top: 80 }}>
          <SpecCard />
        </div>
      </div>
    </section>
  );
}

function SpecCard() {
  // Mini interactive — switch between products
  const [sel, setSel] = React.useState(0);
  const p = PRODUCTS[sel];
  return (
    <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden', boxShadow: '0 24px 60px rgba(10,10,10,0.06)' }}>
      <div style={{ display: 'flex', borderBottom: '1px solid var(--line)' }}>
        <div className="label-mono" style={{ padding: '12px 16px', flex: 1, color: 'var(--ink)', fontWeight: 500 }}>
          PRODUCT SPEC · LIVE
        </div>
        <div className="mono" style={{ padding: '12px 16px', fontSize: 11, color: 'var(--ink-soft)', borderLeft: '1px solid var(--line)' }}>
          {p.sku}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
        <div style={{ background: '#000', position: 'relative', aspectRatio: '1 / 1' }}>
          <Photo src={p.image} height="100%" />
          <div className="mono" style={{ position: 'absolute', bottom: 8, left: 10, fontSize: 10, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.06em' }}>
            ↳ SEM @ 5kV · sample 0824B
          </div>
        </div>
        <div style={{ padding: 18 }}>
          <div style={{ fontSize: 17, fontWeight: 500, lineHeight: 1.25 }}>{p.name}</div>
          <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 6 }}>{p.category}</div>
          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              ['SiO₂', `${p.silica_pct}%`],
              ['Iron', `${p.iron_ppm} ppm`],
              ['Mesh', p.mesh],
              ['Lot stability', '±0.4%'],
              ['Markets', p.market.split(',').length],
            ].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, paddingBottom: 6, borderBottom: '1px dashed var(--line)' }}>
                <span className="mono" style={{ color: 'var(--ink-soft)' }}>{k}</span>
                <span className="mono" style={{ fontWeight: 500 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ padding: '14px 18px', borderTop: '1px solid var(--line)', display: 'flex', gap: 8 }}>
        {PRODUCTS.slice(0, 4).map((pp, i) => (
          <button key={pp.sku} onClick={() => setSel(i)}
            style={{
              flex: 1, padding: '8px 6px', border: '1px solid', borderColor: i === sel ? 'var(--accent)' : 'var(--line)',
              background: i === sel ? 'var(--accent-soft)' : 'transparent',
              color: i === sel ? 'var(--accent)' : 'var(--ink-soft)',
              borderRadius: 6, fontSize: 10, fontFamily: 'IBM Plex Mono', cursor: 'pointer',
            }}>{pp.sku}</button>
        ))}
      </div>
    </div>
  );
}

function TickerB() {
  const items = [
    'Now shipping · MX-30/50 lot 26-0512B · 24.5 t · Ottawa, IL → Toledo, OH',
    'Lab released · GS-49 lot 26-0512A · 99.51% SiO₂ · 108 ppm Fe',
    'New spec · Frac-grade FS-100 published · API RP-19C compliant',
    'Now shipping · QR-100 lot 26-0511E · 22.0 t · Berkeley Springs → Baltimore',
    'Lot certified · MU-5 lot 26-0511C · 5.1 µm D50 · ISO 9001',
    'New facility · Tyler, TX terminal operational',
  ];
  return (
    <section style={{ background: 'var(--bg-deep)', color: 'var(--paper)', padding: '16px 0', overflow: 'hidden', borderTop: '1px solid var(--ink)' }}>
      <div style={{ display: 'flex', gap: 60, animation: 'ticker 50s linear infinite', whiteSpace: 'nowrap' }}>
        {[...items, ...items, ...items].map((t, i) => (
          <span key={i} className="mono" style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)' }}>
            <span style={{ width: 6, height: 6, background: 'oklch(0.75 0.2 145)', borderRadius: 99, display: 'inline-block', marginRight: 10, verticalAlign: 'middle' }}/>
            {t}
          </span>
        ))}
      </div>
      <style>{`@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }`}</style>
    </section>
  );
}

function SpecFinderB({ onNavigate }) {
  const [app, setApp] = React.useState(APPLICATIONS[0].id);
  const [purity, setPurity] = React.useState(99);
  const matches = PRODUCTS.filter(p =>
    p.silica_pct >= purity && p.market.toLowerCase().includes(APPLICATIONS.find(a => a.id === app).name.toLowerCase().split(' ')[0])
  );
  return (
    <section style={{ padding: '96px 32px', background: 'var(--paper)', borderBottom: '1px solid var(--line)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
        <div>
          <div className="label-mono">[01] · TOOLS</div>
          <h2 className="display" style={{ fontSize: 56, margin: '12px 0 0', fontWeight: 500 }}>
            Find your grade in 30 seconds.
          </h2>
          <p style={{ marginTop: 16, color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.55, maxWidth: 460 }}>
            Tell us the application and your purity floor. We'll narrow our catalog
            of 38 grades to the candidates you should actually be testing.
          </p>
        </div>
        <div style={{ background: 'var(--bg)', borderRadius: 14, padding: 28, border: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <div>
              <label className="label-mono" style={{ display: 'block', marginBottom: 10 }}>APPLICATION</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {APPLICATIONS.map(a => (
                  <button key={a.id} onClick={() => setApp(a.id)} style={{
                    padding: '8px 14px', borderRadius: 99, border: '1px solid',
                    borderColor: app === a.id ? 'var(--accent)' : 'var(--line)',
                    background: app === a.id ? 'var(--accent)' : 'transparent',
                    color: app === a.id ? '#fff' : 'var(--ink)',
                    fontSize: 13, fontFamily: 'IBM Plex Sans', cursor: 'pointer',
                    transition: 'all .12s',
                  }}>{a.name}</button>
                ))}
              </div>
            </div>
            <div>
              <label className="label-mono" style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                <span>MIN. SiO₂ PURITY</span>
                <span className="mono" style={{ color: 'var(--accent)' }}>≥ {purity.toFixed(1)}%</span>
              </label>
              <input type="range" min="98" max="99.9" step="0.1" value={purity}
                onChange={e => setPurity(+e.target.value)}
                style={{ width: '100%', accentColor: 'oklch(0.48 0.18 252)' }} />
            </div>
            <div style={{ borderTop: '1px solid var(--line)', paddingTop: 18 }}>
              <div className="label-mono" style={{ marginBottom: 12 }}>RECOMMENDED · {matches.length || 0} {matches.length === 1 ? 'GRADE' : 'GRADES'}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {matches.length === 0 && <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>No exact match. Try lowering purity or contact a specialist.</div>}
                {matches.slice(0, 3).map(p => (
                  <div key={p.sku} onClick={() => onNavigate?.('product')} style={{
                    padding: 12, background: 'var(--paper)', borderRadius: 8,
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer',
                    border: '1px solid var(--line)',
                  }}>
                    <div>
                      <div className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{p.sku}</div>
                      <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>{p.name}</div>
                    </div>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)' }}>
                      {p.silica_pct}% · {p.mesh}
                    </div>
                    <Icon.arrow size={14}/>
                  </div>
                ))}
              </div>
            </div>
            <MagButton variant="primary" size="md" dir="b" onClick={() => onNavigate?.('rfq')}
              style={{ alignSelf: 'flex-start' }}>
              Continue to RFQ <Icon.arrow size={13}/>
            </MagButton>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductTableB({ onNavigate }) {
  return (
    <section style={{ padding: '96px 32px', background: 'var(--bg)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 32 }}>
        <div>
          <div className="label-mono">[02] · CATALOG</div>
          <h2 className="display" style={{ fontSize: 56, margin: '12px 0 0', fontWeight: 500 }}>The full product matrix.</h2>
        </div>
        <div style={{ display: 'flex', gap: 8, fontSize: 13, color: 'var(--ink-soft)', alignItems: 'center' }}>
          <Icon.filter size={14}/> 6 of 38 products shown
        </div>
      </div>
      <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden' }}>
        <div className="mono" style={{ display: 'grid', gridTemplateColumns: '70px 2fr 1fr 1fr 90px 110px 90px 40px', gap: 16, padding: '14px 22px', borderBottom: '1px solid var(--line)', fontSize: 11, color: 'var(--ink-soft)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
          <span>Sample</span><span>Product</span><span>Category</span><span>Markets</span><span>Mesh</span><span>SiO₂</span><span>Iron</span><span></span>
        </div>
        {PRODUCTS.map(p => (
          <div key={p.sku} onClick={() => onNavigate?.('product')}
            style={{
              display: 'grid', gridTemplateColumns: '70px 2fr 1fr 1fr 90px 110px 90px 40px',
              gap: 16, padding: '18px 22px', borderBottom: '1px solid var(--line)',
              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'}>
            <div style={{ width: 50, height: 50, borderRadius: 6, overflow: 'hidden', background: '#000' }}>
              <Photo src={p.image} height={50} />
            </div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 500 }}>{p.name}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', marginTop: 2 }}>{p.sku}</div>
            </div>
            <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{p.category}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{p.market}</div>
            <div className="mono" style={{ fontSize: 12 }}>{p.mesh}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 50, height: 4, background: 'var(--line)', borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ width: `${(p.silica_pct - 99) * 200}%`, height: '100%', background: 'var(--accent)' }} />
              </div>
              <span className="mono" style={{ fontSize: 12 }}>{p.silica_pct}%</span>
            </div>
            <div className="mono" style={{ fontSize: 12 }}>{p.iron_ppm} ppm</div>
            <Icon.arrow size={14}/>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 28, display: 'flex', justifyContent: 'center' }}>
        <MagButton variant="ghost" size="md" dir="b" onClick={() => onNavigate?.('product')}>
          View all 38 grades <Icon.arrow size={13}/>
        </MagButton>
      </div>
    </section>
  );
}

function CustomersB() {
  const customers = ['ARDAGH', 'OWENS', 'HOLCIM', 'PPG', '3M', 'CATERPILLAR', 'KOHLER', 'SHERWIN'];
  return (
    <section style={{ padding: '80px 32px', background: 'var(--paper)', borderBottom: '1px solid var(--line)', borderTop: '1px solid var(--line)' }}>
      <div className="label-mono" style={{ textAlign: 'center', marginBottom: 38, color: 'var(--ink-soft)' }}>
        Trusted by procurement and engineering teams at
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 0, alignItems: 'center' }}>
        {customers.map(c => (
          <div key={c} style={{
            textAlign: 'center', padding: 14, fontFamily: 'IBM Plex Sans',
            fontSize: 17, fontWeight: 600, letterSpacing: '0.08em',
            color: 'var(--ink-soft)', opacity: 0.7,
          }}>{c}</div>
        ))}
      </div>
    </section>
  );
}

function NetworkB({ onNavigate }) {
  return (
    <section style={{ padding: '96px 32px', background: 'var(--bg)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div className="label-mono">[03] · NETWORK</div>
          <h2 className="display" style={{ fontSize: 56, margin: '12px 0 0', fontWeight: 500 }}>
            27 facilities. <span style={{ color: 'var(--accent)' }}>One inventory system.</span>
          </h2>
          <p style={{ marginTop: 18, color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.55, maxWidth: 460 }}>
            Real-time visibility into the lot, the lab, and the truck. Click any
            site to see active grades, capacity, and rail access.
          </p>
          <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
            {[
              ['22 of 27', 'Rail-served plants'],
              ['100%', 'ISO 9001 certified'],
              ['<48 h', 'Avg dispatch-to-dock'],
              ['13', 'States with operations'],
            ].map(([v, l]) => (
              <div key={l} style={{ borderLeft: '2px solid var(--accent)', paddingLeft: 12 }}>
                <div className="display" style={{ fontSize: 30, fontWeight: 500 }}>{v}</div>
                <div className="label-mono" style={{ marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
          <MagButton variant="primary" size="md" dir="b" style={{ marginTop: 32 }} onClick={() => onNavigate?.('map')}>
            Open the network map <Icon.arrow size={13}/>
          </MagButton>
        </div>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 14, padding: 24, position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
            <div className="label-mono">FACILITY NETWORK · LIVE</div>
            <div style={{ display: 'flex', gap: 12, fontSize: 11, fontFamily: 'IBM Plex Mono', color: 'var(--ink-soft)' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, background: 'var(--accent)', borderRadius: 99 }}/>Mine + Plant</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, background: 'oklch(0.7 0.12 252)', borderRadius: 99 }}/>Plant</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, background: 'var(--ink)', borderRadius: 99 }}/>HQ</span>
            </div>
          </div>
          <MapTechnical />
        </div>
      </div>
    </section>
  );
}

function MapTechnical() {
  return (
    <svg viewBox="0 0 900 460" style={{ width: '100%', height: 'auto' }}>
      <defs>
        <pattern id="grid-b" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(10,10,10,0.05)" strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="900" height="460" fill="url(#grid-b)"/>
      <path d={US_MAP_D} fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.5)" strokeWidth="1"/>
      {FACILITIES.map(f => {
        const color = f.type === 'Headquarters' ? '#0a0a0a' : (f.type.includes('Mine') ? 'oklch(0.48 0.18 252)' : 'oklch(0.7 0.12 252)');
        return (
          <g key={f.id} transform={`translate(${f.x * 9} ${f.y * 4.6})`}>
            <circle r="5" fill={color}/>
            <circle r="9" fill={color} opacity="0.18"/>
          </g>
        );
      })}
    </svg>
  );
}

function TechResourcesB() {
  const items = [
    { icon: Icon.doc, title: 'Spec sheets', meta: '38 datasheets, ISO 9001', desc: 'Full chemistry, particle distribution, and lot-stability data per grade.' },
    { icon: Icon.beaker, title: 'Application notes', meta: '24 published guides', desc: 'How our grades behave in soda-lime batches, foundry casting, polymer fillers.' },
    { icon: Icon.factory, title: 'Capacity & lead times', meta: 'Updated daily', desc: 'Plant-by-plant capacity, rail access, and average dispatch windows.' },
    { icon: Icon.truck, title: 'Logistics calculator', meta: 'New tool', desc: 'Estimate landed cost from our nearest plant to your dock.' },
  ];
  return (
    <section style={{ padding: '96px 32px', background: 'var(--paper)', borderTop: '1px solid var(--line)' }}>
      <div style={{ marginBottom: 48 }}>
        <div className="label-mono">[04] · RESOURCES</div>
        <h2 className="display" style={{ fontSize: 56, margin: '12px 0 0', fontWeight: 500 }}>Built for technical buyers.</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {items.map((it, i) => (
          <div key={i} style={{ padding: 24, border: '1px solid var(--line)', borderRadius: 10, background: 'var(--bg)', 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: 18 }}>{it.meta}</div>
            <h3 style={{ fontSize: 20, margin: '8px 0', fontWeight: 500 }}>{it.title}</h3>
            <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5, margin: 0 }}>{it.desc}</p>
            <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--accent)' }}>
              Open <Icon.arrow size={13}/>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CtaB({ onNavigate }) {
  return (
    <section style={{ padding: '96px 32px', background: 'var(--bg-deep)', color: 'var(--paper)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div className="label-mono" style={{ color: 'rgba(255,255,255,0.5)' }}>[05] · TALK TO US</div>
          <h2 className="display" style={{ fontSize: 64, margin: '14px 0 0', color: 'var(--paper)', fontWeight: 500 }}>
            Let's build the spec.
          </h2>
          <p style={{ marginTop: 18, color: 'rgba(255,255,255,0.7)', fontSize: 17, lineHeight: 1.55, maxWidth: 480 }}>
            Four questions, ninety seconds. Our material specialist routes your inquiry
            and responds within one business day.
          </p>
        </div>
        <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 14, padding: 32 }}>
          <div className="label-mono" style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 18 }}>QUICK START</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <button onClick={() => onNavigate?.('rfq')} style={{
              padding: '18px 22px', background: 'var(--accent)', border: 0, color: '#fff',
              borderRadius: 8, fontSize: 16, fontWeight: 500, display: 'flex', justifyContent: 'space-between',
              cursor: 'pointer',
            }}>
              <span>Request a quote</span><Icon.arrow/>
            </button>
            <button style={{ padding: '18px 22px', background: 'transparent', border: '1px solid rgba(255,255,255,0.25)', color: 'var(--paper)', borderRadius: 8, fontSize: 16, fontWeight: 500, display: 'flex', justifyContent: 'space-between', cursor: 'pointer' }}>
              <span>Order a 5 lb sample</span><Icon.arrow/>
            </button>
            <button style={{ padding: '18px 22px', background: 'transparent', border: '1px solid rgba(255,255,255,0.25)', color: 'var(--paper)', borderRadius: 8, fontSize: 16, fontWeight: 500, display: 'flex', justifyContent: 'space-between', cursor: 'pointer' }}>
              <span>Talk to a material specialist</span><Icon.arrow/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function FooterB({ onNavigate }) {
  const nav = (r) => (e) => { e.preventDefault?.(); onNavigate?.(r); };
  const cols = [
    { h: 'Products', items: [
      ['Whole Grain', 'products'], ['Ground Silica', 'products'], ['Micronized', 'products'],
      ['Proppants', 'products'], ['Specialty Grades', 'products'], ['All grades', 'products'],
    ]},
    { h: 'Applications', items: [
      ['Glass', { route: 'application', params: { id: 'glass' } }],
      ['Foundry', { route: 'application', params: { id: 'foundry' } }],
      ['Building Products', { route: 'application', params: { id: 'building' } }],
      ['Oil & Gas', { route: 'application', params: { id: 'oilgas' } }],
      ['Coatings', { route: 'application', params: { id: 'coatings' } }],
      ['Filtration', { route: 'application', params: { id: 'filtration' } }],
    ]},
    { h: 'Resources', items: [
      ['SDS Library', 'sds'], ['Spec Sheets', 'resources'], ['Case Studies', 'newsroom'],
      ['Technical Library', 'resources'], ['Compliance', 'resources'],
    ]},
    { h: 'Company', items: [
      ['About', 'about'], ['Operations', 'facilities'], ['Sustainability', 'sustainability'],
      ['Newsroom', 'newsroom'], ['Investors', 'about'], ['Careers', 'careers'], ['Contact', 'contact'],
    ]},
  ];
  return (
    <footer style={{ background: 'var(--paper)', padding: '64px 32px 24px', borderTop: '1px solid var(--line)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr repeat(4, 1fr)', gap: 48, paddingBottom: 56 }}>
        <div>
          <Logo size={36} />
          <p style={{ marginTop: 20, fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.6, maxWidth: 320 }}>
            Industrial silica, built around your spec. Mined and milled in the United States since 1907.
          </p>
          <div className="mono" style={{ marginTop: 24, fontSize: 11, color: 'var(--ink-soft)' }}>
            Frederick, MD · NYSE: SLCA
          </div>
          <div style={{ marginTop: 18, display: 'flex', gap: 12 }}>
            <button onClick={nav('rfq')} style={{ padding: '8px 12px', background: 'var(--ink)', color: 'var(--paper)', border: 0, borderRadius: 5, fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'IBM Plex Sans' }}>
              Request a quote
            </button>
            <button onClick={nav('contact')} style={{ padding: '8px 12px', background: 'transparent', color: 'var(--ink)', border: '1px solid var(--line)', borderRadius: 5, fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'IBM Plex Sans' }}>
              Contact
            </button>
          </div>
        </div>
        {cols.map(c => (
          <div key={c.h}>
            <div className="label-mono" style={{ marginBottom: 14, color: 'var(--ink-soft)' }}>{c.h}</div>
            <ul style={{ padding: 0, margin: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 9 }}>
              {c.items.map(([label, target]) => (
                <li key={label} style={{ fontSize: 13 }}>
                  <a onClick={(e) => {
                    e.preventDefault();
                    if (typeof target === 'string') onNavigate?.(target);
                    else onNavigate?.(target.route, target.params);
                  }} style={{ cursor: 'pointer' }}>{label}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 20, borderTop: '1px solid var(--line)', fontSize: 11, color: 'var(--ink-soft)', fontFamily: 'IBM Plex Mono' }}>
        <span>© 2026 U.S. SILICA, INC.</span>
        <span style={{ display: 'flex', gap: 22 }}>
          <a>Privacy</a><a>Terms</a><a>CA Prop 65</a><a>Accessibility</a>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { HomeB });