function TileSection({ id, eyebrow, title, subtitle, tiles }) {
  return (
    <section id={id} className="section-pad" style={{ background: 'var(--bg-elevated)', borderTop: '1px solid var(--border-subtle)' }}>
      <div className="container">
        <div className="section-header reveal">
          <div className="eyebrow">{eyebrow}</div>
          <h2>{title}</h2>
          <p>{subtitle}</p>
        </div>

        <div className="tile-grid">
          {tiles.map((tile, i) => (
            <TileCard key={i} tile={tile} delay={i * 40} />
          ))}
        </div>
      </div>
    </section>
  );
}

function TileCard({ tile, delay }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      className="tile-card reveal"
      style={{ transitionDelay: `${delay}ms` }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div className="tile-top-bar" style={{ opacity: hovered ? 1 : 0 }} />
      <div className="tile-img-wrap">
        <img src={tile.img} alt={tile.name} className="tile-img" loading="lazy" decoding="async"
          style={{ transform: hovered ? 'scale(1.03)' : 'scale(1)' }} />
        <div className="tile-img-fade" />
      </div>
      <div className="tile-body">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <h3 style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em' }}>{tile.name}</h3>
        </div>
      </div>
    </div>
  );
}

const EQUIPMENT_TILES = [
  { name: 'Mining Trucks',         img: 'img/equipment/mining_trucks.webp',         skus: '340+ SKUs' },
  { name: 'Drill Rigs',            img: 'img/equipment/drill_rigs.webp',            skus: '210+ SKUs' },
  { name: 'Crushers',              img: 'img/equipment/crushers.webp',              skus: '280+ SKUs' },
  { name: 'Conveyors',             img: 'img/equipment/conveyors.webp',             skus: '190+ SKUs' },
  { name: 'Pumps',                 img: 'img/equipment/pumps.webp',                 skus: '240+ SKUs' },
  { name: 'Underground Equipment', img: 'img/equipment/underground_equipment.webp', skus: '160+ SKUs' },
  { name: 'Motors & Gearboxes',    img: 'img/equipment/motors_gearboxes.webp',      skus: '300+ SKUs' },
  { name: 'Wear Parts',            img: 'img/equipment/wear_parts.webp',            skus: '420+ SKUs' },
];

const SPAREPARTS_TILES = [
  { name: 'Hydraulic Parts',      img: 'img/spare-parts/hydraulic_parts.webp',    skus: '380+ SKUs' },
  { name: 'Bearings',             img: 'img/spare-parts/bearings.webp',           skus: '600+ SKUs' },
  { name: 'Filters',              img: 'img/spare-parts/filters.webp',            skus: '450+ SKUs' },
  { name: 'Gearboxes',            img: 'img/spare-parts/gearboxes.webp',          skus: '220+ SKUs' },
  { name: 'Conveyor Rollers',     img: 'img/spare-parts/conveyor_rollers.webp',   skus: '310+ SKUs' },
  { name: 'Crusher Liners',       img: 'img/spare-parts/crusher_liners.webp',     skus: '180+ SKUs' },
  { name: 'Seal Kits',            img: 'img/spare-parts/seal_kits.webp',          skus: '520+ SKUs' },
  { name: 'Electric Components',  img: 'img/spare-parts/electric_components.webp',skus: '290+ SKUs' },
];

function EquipmentSection() {
  return (
    <TileSection
      id="equipment"
      eyebrow="// EQUIPMENT"
      title="Parts for every machine in your pit."
      subtitle="From haul trucks to underground drills — we source for 27+ OEM brands including Caterpillar, Komatsu, Sandvik, Metso, Atlas Copco."
      tiles={EQUIPMENT_TILES}
    />
  );
}

function SparePartsSection() {
  return (
    <TileSection
      id="spare-parts"
      eyebrow="// SPARE PARTS"
      title="10,000+ SKUs in stock and on order."
      subtitle="Hydraulic, mechanical, electrical. Shipped globally from partner warehouses in Europe, North America, Middle East, and Asia."
      tiles={SPAREPARTS_TILES}
    />
  );
}

Object.assign(window, { EquipmentSection, SparePartsSection });