// ============================================================
// SEO-OPTIMIZED PRODUCT DETAIL PAGE
// Direction B aesthetic. Shows the SEO scaffolding visibly:
// breadcrumbs, semantic headings, FAQ-style schema content,
// related searches, related products, comparison table, etc.
// ============================================================

function ProductPage({ onNavigate, onBack }) {
  const p = PRODUCTS[0]; // MX-30/50
  const [tab, setTab] = React.useState('overview');
  return (
    <div className="dir-b ab-page">
      <BrowserChrome url={`ussilica.com/products/whole-grain-silica/${p.sku.toLowerCase()}-glass-grade`} />
      <NavB onNavigate={onNavigate} />
      <SEOAnnotationBar />
      <BreadcrumbsB onBack={onBack} product={p} />
      <ProductHeroB p={p} onNavigate={onNavigate} />
      <ProductTabsB tab={tab} setTab={setTab} />
      <ProductBodyB tab={tab} p={p} />
      <FAQSection />
      <RelatedSearchesB />
      <ComparisonTable />
      <CtaB onNavigate={onNavigate} />
      <FooterB onNavigate={onNavigate} />
    </div>
  );
}

// Diagnostic strip that visualizes the SEO scaffolding —
// useful in a design proposal context to show search-team thinking.
function SEOAnnotationBar() {
  return (
    <div style={{
      background: '#fff8e1', borderBottom: '1px solid #f0d97d',
      padding: '10px 32px', display: 'flex', alignItems: 'center', gap: 18,
      fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#5c4a16',
    }}>
      <span style={{ background: '#e0a423', color: '#fff', padding: '2px 8px', borderRadius: 3, letterSpacing: '0.08em' }}>SEO OVERLAY</span>
      <span>H1 keyword: <strong>“whole grain silica for container glass”</strong></span>
      <span style={{ opacity: 0.6 }}>·</span>
      <span>Schema: Product + FAQ</span>
      <span style={{ opacity: 0.6 }}>·</span>
      <span>Internal links: 14</span>
      <span style={{ opacity: 0.6 }}>·</span>
      <span>Word count: 1,840</span>
      <span style={{ marginLeft: 'auto', opacity: 0.55 }}>Toggle in Tweaks →</span>
    </div>
  );
}

function BreadcrumbsB({ onBack, product }) {
  return (
    <nav className="mono" style={{ padding: '16px 32px', fontSize: 12, color: 'var(--ink-soft)', borderBottom: '1px solid var(--line)', background: 'var(--bg)' }}>
      <a onClick={onBack} style={{ cursor: 'pointer' }}>Home</a>
      <span style={{ margin: '0 8px' }}>›</span>
      <a>Products</a>
      <span style={{ margin: '0 8px' }}>›</span>
      <a>Whole Grain Silica</a>
      <span style={{ margin: '0 8px' }}>›</span>
      <a>Glass Grade</a>
      <span style={{ margin: '0 8px' }}>›</span>
      <span style={{ color: 'var(--ink)' }}>{product.name}</span>
    </nav>
  );
}

function ProductHeroB({ p, onNavigate }) {
  return (
    <section style={{ padding: '48px 32px 64px', background: 'var(--paper)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
        {/* Gallery */}
        <div>
          <div style={{ aspectRatio: '4 / 3', borderRadius: 12, overflow: 'hidden', background: '#000', marginBottom: 14 }}>
            <Photo src={p.image} height="100%" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {['assets/glass-sand.jpg', 'assets/sem-microscope.jpg', 'assets/lab-samples.jpg', 'assets/product-vials.jpg'].map((src, i) => (
              <div key={i} style={{ aspectRatio: '1 / 1', borderRadius: 8, overflow: 'hidden', border: i === 0 ? '2px solid var(--accent)' : '1px solid var(--line)' }}>
                <Photo src={src} height="100%" />
              </div>
            ))}
          </div>
        </div>
        {/* Info */}
        <div>
          <div className="label-mono" style={{ marginBottom: 14 }}>{p.category} · {p.grade}</div>
          <h1 className="display" style={{ fontSize: 56, margin: 0, fontWeight: 500 }}>
            {p.name}
          </h1>
          <p style={{ marginTop: 14, fontSize: 17, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
            High-purity whole-grain silica engineered for container and flat-glass batches.
            Lot-stable iron content. ISO 9001 certified production from Mid-Atlantic seams.
          </p>
          <div style={{ marginTop: 24, padding: 22, background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 12 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginBottom: 18 }}>
              {[
                ['SKU', p.sku], ['Mesh', p.mesh],
                ['SiO₂', `${p.silica_pct}%`], ['Iron', `${p.iron_ppm} ppm`],
              ].map(([k, v]) => (
                <div key={k}>
                  <div className="label-mono">{k}</div>
                  <div className="mono" style={{ fontSize: 17, fontWeight: 500, marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ borderTop: '1px solid var(--line)', paddingTop: 18, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                <span style={{ color: 'var(--ink-soft)' }}>Available facilities</span>
                <span className="mono">5 plants · WV, IL, MO, WI, OK</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                <span style={{ color: 'var(--ink-soft)' }}>Avg lead time</span>
                <span className="mono">3–5 business days</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                <span style={{ color: 'var(--ink-soft)' }}>Packaging</span>
                <span className="mono">Bulk · Super-sack · 50 lb bag</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                <span style={{ color: 'var(--ink-soft)' }}>Certifications</span>
                <span className="mono">ISO 9001 · FDA · NSF/ANSI 61</span>
              </div>
            </div>
          </div>
          <div style={{ marginTop: 22, display: 'flex', gap: 10 }}>
            <MagButton variant="primary" size="lg" dir="b" onClick={() => onNavigate?.('rfq')}>Request a quote <Icon.arrow size={14}/></MagButton>
            <MagButton variant="ghost" size="lg" dir="b">Order a sample</MagButton>
            <MagButton variant="ghost" size="lg" dir="b"><Icon.download size={14}/> Spec sheet</MagButton>
          </div>
          <div style={{ marginTop: 16, display: 'flex', gap: 18, fontSize: 12, color: 'var(--ink-soft)', fontFamily: 'IBM Plex Mono' }}>
            <a>↓ SDS (PDF, 240 KB)</a>
            <a>↓ COA template</a>
            <a>↓ Particle distribution (CSV)</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductTabsB({ tab, setTab }) {
  const tabs = [
    ['overview', 'Overview'],
    ['specs', 'Full specifications'],
    ['applications', 'Applications'],
    ['logistics', 'Logistics & packaging'],
    ['compliance', 'Compliance & SDS'],
  ];
  return (
    <div style={{ borderBottom: '1px solid var(--line)', background: 'var(--paper)', position: 'sticky', top: 90, zIndex: 10 }}>
      <div style={{ padding: '0 32px', display: 'flex', gap: 4 }}>
        {tabs.map(([id, label]) => (
          <button key={id} onClick={() => setTab(id)} style={{
            background: 'transparent', border: 0, padding: '16px 18px',
            fontSize: 14, fontWeight: 500, cursor: 'pointer',
            color: tab === id ? 'var(--accent)' : 'var(--ink-soft)',
            borderBottom: tab === id ? '2px solid var(--accent)' : '2px solid transparent',
            transition: 'all .15s',
          }}>{label}</button>
        ))}
      </div>
    </div>
  );
}

function ProductBodyB({ tab, p }) {
  if (tab === 'specs') return <SpecsTable p={p}/>;
  if (tab === 'applications') return <ApplicationsForProduct p={p}/>;
  if (tab === 'logistics') return <LogisticsTab p={p}/>;
  if (tab === 'compliance') return <ComplianceTab p={p}/>;
  return <OverviewTab p={p}/>;
}

function OverviewTab({ p }) {
  return (
    <section style={{ padding: '64px 32px', background: 'var(--bg)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2.5fr 1fr', gap: 56, alignItems: 'start' }}>
        <article>
          <h2 className="display" style={{ fontSize: 36, margin: 0, fontWeight: 500 }}>
            Why container-glass engineers specify MX-30/50
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink)', marginTop: 18 }}>
            The Oriskany sandstone formation in the Mid-Atlantic has been producing silica
            for flat and container glass since 1907. Its naturally low iron content — typically
            below 90 ppm at the seam — makes it the default specification for engineers who
            need predictable batch chemistry without expensive secondary purification.
          </p>
          <h3 style={{ fontSize: 22, fontWeight: 500, margin: '36px 0 12px' }}>Lot stability that holds up at scale</h3>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink)' }}>
            Every truck of MX-30/50 ships with a Certificate of Analysis that locks chemistry
            to a ±0.4% band on SiO₂ and a 20 ppm band on iron. Our QA team scans every fifth
            ton in production, and the results are published to the customer portal within
            two hours of dispatch.
          </p>
          <h3 style={{ fontSize: 22, fontWeight: 500, margin: '36px 0 12px' }}>Particle distribution, by request</h3>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink)' }}>
            Our standard 30/50 mesh distribution is engineered for soda-lime container batches,
            but we can re-cut for fiber, optical, or solar-grade requirements without changing
            the seam or the chemistry. Tell us the application and we'll propose a profile.
          </p>
          <div style={{ marginTop: 36, padding: 24, background: 'var(--paper)', borderLeft: '3px solid var(--accent)', borderRadius: 6 }}>
            <div className="label-mono" style={{ color: 'var(--accent)', marginBottom: 8 }}>↳ ENGINEER'S NOTE</div>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, fontStyle: 'italic' }}>
              "If you're switching from a Mid-Continent grade to MX-30/50, plan for a one-week
              parallel run on your batch house. The cut is similar, but the iron drop will
              affect your colorant ratio."
            </p>
            <div style={{ marginTop: 12, fontSize: 13, color: 'var(--ink-soft)' }}>— J. Rivera, Sr. Materials Engineer</div>
          </div>
        </article>
        <aside style={{ position: 'sticky', top: 160 }}>
          <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 12, padding: 22 }}>
            <div className="label-mono" style={{ marginBottom: 14 }}>ON THIS PAGE</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                'Container-glass spec',
                'Lot stability',
                'Particle distribution',
                'Engineer’s notes',
                'Common applications',
                'Logistics & lead times',
                'Frequently asked',
              ].map((s, i) => (
                <li key={i} style={{ fontSize: 13, color: i === 0 ? 'var(--accent)' : 'var(--ink-soft)', display: 'flex', gap: 8 }}>
                  <span className="mono">0{i+1}</span> {s}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ background: 'var(--bg-deep)', color: 'var(--paper)', borderRadius: 12, padding: 22, marginTop: 14 }}>
            <div className="label-mono" style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 8 }}>NEED HELP CHOOSING?</div>
            <div style={{ fontSize: 14, lineHeight: 1.5, color: 'rgba(255,255,255,0.85)' }}>
              Our material specialists respond in &lt; 1 business day.
            </div>
            <button style={{ marginTop: 14, padding: '10px 16px', background: 'var(--accent)', color: '#fff', border: 0, borderRadius: 6, fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>
              Talk to an engineer
            </button>
          </div>
        </aside>
      </div>
    </section>
  );
}

function SpecsTable({ p }) {
  const rows = [
    ['SiO₂ content', '99.7% min', '99.5–99.9%', 'ASTM C146'],
    ['Iron content (Fe₂O₃)', '≤ 90 ppm', '60–110 ppm', 'XRF'],
    ['Aluminum (Al₂O₃)', '≤ 0.18%', '0.12–0.22%', 'XRF'],
    ['Titanium (TiO₂)', '≤ 0.03%', '0.02–0.04%', 'XRF'],
    ['Calcium (CaO)', '≤ 0.05%', '< 0.05%', 'ICP-OES'],
    ['Magnesium (MgO)', '≤ 0.05%', '< 0.05%', 'ICP-OES'],
    ['Loss on ignition', '≤ 0.20%', '0.10–0.18%', 'ASTM C25'],
    ['Mesh (US)', '30/50', '95% pass 30, 5% retain 50', 'ASTM C136'],
    ['Mean diameter', '450 µm', '420–480 µm', 'Sieve / Camsizer'],
    ['Bulk density', '95 lb/ft³', '93–98 lb/ft³', 'ASTM C29'],
    ['Moisture (as shipped)', '≤ 0.3%', '< 0.3%', 'ASTM C566'],
  ];
  return (
    <section style={{ padding: '64px 32px', background: 'var(--bg)' }}>
      <h2 className="display" style={{ fontSize: 36, margin: 0, fontWeight: 500 }}>Full specifications · {p.sku}</h2>
      <p style={{ color: 'var(--ink-soft)', marginTop: 8, fontSize: 14 }}>Values reflect Q2 2026 published spec. Lot certificates available with every shipment.</p>
      <div style={{ marginTop: 28, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden' }}>
        <div className="mono" style={{ display: 'grid', gridTemplateColumns: '2fr 1.4fr 2fr 1.4fr', gap: 16, padding: '14px 22px', borderBottom: '1px solid var(--line)', fontSize: 11, color: 'var(--ink-soft)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
          <span>Parameter</span><span>Specification</span><span>Typical (last 12 mo.)</span><span>Method</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 1.4fr 2fr 1.4fr', gap: 16, padding: '14px 22px', borderBottom: i < rows.length - 1 ? '1px solid var(--line)' : 'none', alignItems: 'center', fontSize: 14 }}>
            <span style={{ fontWeight: 500 }}>{r[0]}</span>
            <span className="mono" style={{ color: 'var(--accent)' }}>{r[1]}</span>
            <span className="mono" style={{ color: 'var(--ink-soft)' }}>{r[2]}</span>
            <span className="mono" style={{ color: 'var(--ink-soft)' }}>{r[3]}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function ApplicationsForProduct({ p }) {
  const apps = [
    { name: 'Container glass', fit: 'Excellent', notes: 'Default spec for amber and flint bottles.' },
    { name: 'Flat / float glass', fit: 'Excellent', notes: 'Iron below 90 ppm suits most flat lines.' },
    { name: 'Fiberglass insulation', fit: 'Good', notes: 'May need finer re-cut for tighter D50.' },
    { name: 'Specialty optical glass', fit: 'Consult', notes: 'Discuss iron-floor and TiO₂ ceiling.' },
    { name: 'Solar PV cover glass', fit: 'Good', notes: 'Iron below 80 ppm available on request.' },
  ];
  return (
    <section style={{ padding: '64px 32px', background: 'var(--bg)' }}>
      <h2 className="display" style={{ fontSize: 36, margin: 0, fontWeight: 500 }}>Where {p.sku} performs</h2>
      <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
        {apps.map(a => (
          <div key={a.name} style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, padding: 20 }}>
            <div className="label-mono" style={{ marginBottom: 8, color: a.fit === 'Excellent' ? 'oklch(0.55 0.15 145)' : (a.fit === 'Good' ? 'var(--accent)' : 'oklch(0.6 0.15 60)') }}>
              {a.fit.toUpperCase()}
            </div>
            <h3 style={{ fontSize: 17, margin: '0 0 8px', fontWeight: 500 }}>{a.name}</h3>
            <p style={{ fontSize: 13, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.5 }}>{a.notes}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function LogisticsTab({ p }) {
  return (
    <section style={{ padding: '64px 32px', background: 'var(--bg)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56 }}>
        <div>
          <h2 className="display" style={{ fontSize: 36, margin: 0, fontWeight: 500 }}>Packaging & lead time</h2>
          <p style={{ marginTop: 16, color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.6 }}>
            {p.sku} is available bulk (rail or truck), in super-sack, or in 50 lb paper bag.
            Bulk orders out of Berkeley Springs, WV typically dispatch within 3 business days.
          </p>
          <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            {[
              ['BULK', 'Rail · 110-ton car', '3–5 days'],
              ['SUPER-SACK', '2,000 lb FIBC', '5–7 days'],
              ['50 LB BAG', 'Palletized · 40 bags', '5–7 days'],
            ].map(([k, v, t]) => (
              <div key={k} style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, padding: 18 }}>
                <div className="label-mono" style={{ color: 'var(--accent)' }}>{k}</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 8 }}>{v}</div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 6 }}>{t}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 12, padding: 20 }}>
          <div className="label-mono" style={{ marginBottom: 14 }}>SHIPPING FROM</div>
          {[
            ['Berkeley Springs, WV', '5 plants · primary', 'Rail + Truck'],
            ['Ottawa, IL', 'Backup', 'Rail + Truck'],
            ['Pacific, MO', 'West fulfillment', 'Truck'],
          ].map(([n, t, l], i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none', alignItems: 'center' }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{n}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 2 }}>{t}</div>
              </div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ComplianceTab() {
  const docs = [
    ['SDS — Safety Data Sheet', 'PDF · 244 KB', 'OSHA HCS 2012'],
    ['Certificate of Analysis (template)', 'PDF · 88 KB', 'Per lot, dispatched'],
    ['ISO 9001 certificate', 'PDF · 1.2 MB', 'Current to 2027'],
    ['NSF/ANSI 61 letter', 'PDF · 312 KB', 'Potable water use'],
    ['Prop 65 statement', 'PDF · 68 KB', 'California disclosure'],
    ['REACH letter (EU)', 'PDF · 110 KB', 'For European customers'],
  ];
  return (
    <section style={{ padding: '64px 32px', background: 'var(--bg)' }}>
      <h2 className="display" style={{ fontSize: 36, margin: 0, fontWeight: 500 }}>Compliance & documentation</h2>
      <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
        {docs.map((d, i) => (
          <a key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 20, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, cursor: 'pointer' }}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <span style={{ color: 'var(--accent)' }}><Icon.doc size={18}/></span>
              <div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>{d[0]}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 4 }}>{d[1]} · {d[2]}</div>
              </div>
            </div>
            <Icon.download size={16}/>
          </a>
        ))}
      </div>
    </section>
  );
}

function FAQSection() {
  const faqs = [
    ['What is whole-grain silica and why does mesh size matter?', 'Whole-grain (un-ground) silica preserves the natural crystal habit from the seam, giving it different flow and packing behaviour than ground silica. Mesh size matters because container-glass batches require a tight 30/50 cut to melt evenly with soda ash and limestone.'],
    ['How is MX-30/50 different from ASTM 20/30 reference sand?', 'MX-30/50 is a production grade tuned for batch chemistry. ASTM 20/30 is a narrower laboratory reference sand used for concrete testing and mortar studies. We publish both.'],
    ['What is your minimum order quantity for MX-30/50?', 'Bulk orders begin at one 110-ton rail car or a single 25-ton truckload. Super-sack and palletized 50 lb bag orders begin at one pallet.'],
    ['Do you ship internationally?', 'Yes. Most international customers source through our Eastern terminals (Berkeley Springs, WV and Mauricetown, NJ). We can dispatch FOB origin or arrange CIF to most ports.'],
    ['Can you match an existing supplier’s spec?', 'In most cases, yes. Send us a spec sheet or a recent COA and our material science team will propose a candidate grade and a parallel-run plan.'],
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: '80px 32px', background: 'var(--paper)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'start' }}>
        <div>
          <div className="label-mono">SCHEMA · FAQPage</div>
          <h2 className="display" style={{ fontSize: 40, margin: '14px 0 12px', fontWeight: 500 }}>
            Frequently asked
          </h2>
          <p style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 320 }}>
            Indexed as <code className="mono" style={{ background: 'var(--bg)', padding: '1px 5px', borderRadius: 3 }}>FAQPage</code> schema
            so these answers can surface as rich results.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {faqs.map((f, i) => (
            <div key={i} style={{ border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden', background: open === i ? 'var(--bg)' : 'transparent' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)}
                style={{ width: '100%', padding: '20px 22px', background: 'transparent', border: 0, textAlign: 'left', fontSize: 15, fontWeight: 500, display: 'flex', justifyContent: 'space-between', cursor: 'pointer', color: 'var(--ink)' }}>
                {f[0]}
                <span style={{ transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform .2s', color: 'var(--accent)' }}><Icon.plus size={18}/></span>
              </button>
              {open === i && (
                <div style={{ padding: '0 22px 22px', fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.65, animation: 'fadeUp .3s ease' }}>
                  {f[1]}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RelatedSearchesB() {
  const searches = [
    'whole grain silica glass',
    'low iron silica supplier',
    'container glass batch sand',
    'ISO 9001 silica sand',
    'silica sand 30/50 mesh',
    'flat glass silica spec',
    'silica supplier mid atlantic',
    'industrial sand certificate of analysis',
  ];
  const products = PRODUCTS.slice(1, 5);
  return (
    <section style={{ padding: '64px 32px', background: 'var(--bg)', borderTop: '1px solid var(--line)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 56 }}>
        <div>
          <div className="label-mono">RELATED SEARCHES</div>
          <h3 style={{ fontSize: 24, margin: '12px 0 18px', fontWeight: 500 }}>People also looked for</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {searches.map(s => (
              <a key={s} style={{
                padding: '8px 14px', background: 'var(--paper)', border: '1px solid var(--line)',
                borderRadius: 99, fontSize: 13, color: 'var(--ink-soft)', cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
                <Icon.search size={12}/>{s}
              </a>
            ))}
          </div>
        </div>
        <div>
          <div className="label-mono">RELATED PRODUCTS</div>
          <h3 style={{ fontSize: 24, margin: '12px 0 18px', fontWeight: 500 }}>Customers who specified MX-30/50 also looked at</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {products.map(p => (
              <div key={p.sku} style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden', cursor: 'pointer' }}>
                <Photo src={p.image} height={120}/>
                <div style={{ padding: 14 }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{p.sku}</div>
                  <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4, lineHeight: 1.3 }}>{p.name}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ComparisonTable() {
  return (
    <section style={{ padding: '64px 32px', background: 'var(--paper)', borderTop: '1px solid var(--line)' }}>
      <h2 className="display" style={{ fontSize: 28, margin: 0, fontWeight: 500 }}>How MX-30/50 compares</h2>
      <div style={{ marginTop: 22, border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden', background: 'var(--bg)' }}>
        <div className="mono" style={{ display: 'grid', gridTemplateColumns: '1.6fr repeat(3, 1fr)', padding: '14px 22px', borderBottom: '1px solid var(--line)', fontSize: 11, color: 'var(--ink-soft)', textTransform: 'uppercase' }}>
          <span></span>
          <span>MX-30/50 (this product)</span>
          <span>Mid-Cont. 30/50 (typical)</span>
          <span>Imported European</span>
        </div>
        {[
          ['SiO₂ minimum', '99.7%', '99.5%', '99.8%'],
          ['Iron content', '≤ 90 ppm', '≤ 140 ppm', '≤ 70 ppm'],
          ['Lot stability', '±0.4%', '±0.7%', '±0.5%'],
          ['Lead time (bulk)', '3–5 days', '5–7 days', '14–28 days'],
          ['Price band', '$$', '$$', '$$$'],
          ['Onshore', 'Yes', 'Yes', 'No'],
        ].map((r, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.6fr repeat(3, 1fr)', padding: '14px 22px', borderBottom: i < 5 ? '1px solid var(--line)' : 'none', fontSize: 14, alignItems: 'center' }}>
            <span style={{ fontWeight: 500 }}>{r[0]}</span>
            <span className="mono" style={{ color: 'var(--accent)' }}>{r[1]}</span>
            <span className="mono" style={{ color: 'var(--ink-soft)' }}>{r[2]}</span>
            <span className="mono" style={{ color: 'var(--ink-soft)' }}>{r[3]}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { ProductPage });
