/* ============================================================
   Industry page template — first instance: Mining & Search.
   Designed so [data-swap] zones can be re-populated for the
   other 5 industries without structural change.
   ============================================================ */

/* ----- Master data for this instance ----- */
const MINING = {
  id: 'mining',
  breadcrumb: ['Home', 'Industries', 'Mining & Search'],
  hero: {
    eyebrow: 'Industries / Mining & Search',
    h1: 'Send the robot. Bring your people home.',
    lede: "Quadruped robots that go where humans shouldn't — into unstable ground, post-blast zones, confined spaces, and emergency search operations across Australia's toughest mine sites.",
  },
  painH2: "The hardest jobs on a mine site shouldn't cost lives.",
  pains: [
    { Icon: Icons.Shield, t: 'Inspections that put people at risk', b: "Tailings dams, underground voids, post-blast zones, confined spaces — your team shouldn't be the first ones in." },
    { Icon: Icons.MapPin, t: 'Coverage gaps in remote operations', b: 'Vast sites, limited personnel, rotating shifts. Critical inspections get deferred or skipped entirely.' },
    { Icon: Icons.Mountain, t: 'Emergency response that is too slow, too dangerous', b: 'When something goes wrong underground, every minute matters — and sending more humans in adds risk to risk.' },
  ],
  solutionH2: 'Quadruped robots, deployed and supported for Australian mining.',
  solutionBody: "We commission Boston Dynamics and Unitree platforms on your site, tune them for your conditions, and keep them running. Our engineers work alongside your safety and operations teams so the robot integrates with existing workflows — not as a bolt-on, but as part of how the site operates.",
  solutionBullets: [
    'Routine inspection on schedule, not on availability',
    'First-in capability for high-risk zones',
    'Real-time data feeds to your control room',
    'Integrated with your existing safety and mine-management systems',
  ],
  models: [
    {
      id: 'spot',
      name: 'Boston Dynamics Spot',
      sub: 'Mining configuration · Industry-leading agility and payload flexibility for complex mine environments',
      maker: 'Boston Dynamics · localized by AusMotion',
      image: 'assets/robot-spot.jpg',
      tags: ['AS/NZS compliant', 'Heat-tested to 50 °C', 'Red-dust certified'],
      specs: [['Mass', '32.7 kg'], ['Payload', '14 kg'], ['Runtime', '90 min / swap-in battery'], ['IP rating', 'IP54'], ['Op temp', '−20 to 50 °C'], ['Autonomy', 'Mission Control 3.3']],
      price: 'From $8,500 / month',
    },
    {
      id: 'b2',
      name: 'Unitree B2 Industrial',
      sub: 'Cost-effective alternative for higher-volume deployments and multi-unit rollouts',
      maker: 'Unitree · localized by AusMotion',
      image: 'assets/robot-unitree-b2.jpg',
      tags: ['AS/NZS compliant', 'Dust-sealed chassis', 'Fleet mode'],
      specs: [['Mass', '60 kg'], ['Payload', '40 kg'], ['Runtime', '4–6 h'], ['IP rating', 'IP65'], ['Op temp', '−20 to 55 °C'], ['Autonomy', 'B2-Auto (AusMotion stack)']],
      price: 'From $5,200 / month',
    },
    {
      id: 'custom',
      name: 'Custom-configured platforms',
      sub: 'Integrate the sensors, payloads, and autonomy stack your use case actually needs',
      maker: 'Engineered by AusMotion',
      image: 'assets/robot-unitree-g1.jpg',
      tags: ['Methane / gas sensing', 'Thermal + LiDAR', 'Mine-site comms integration'],
      specs: [['Base platform', 'Spot or B2'], ['Payload window', 'Up to 40 kg'], ['Integration', 'Modbus, OPC-UA, MQTT'], ['Commissioning', '4–6 weeks'], ['Support', 'On-site + remote'], ['Cybersecurity', 'Essential Eight aligned']],
      price: 'Scoped to use case',
      custom: true,
    },
  ],
  useCases: [
    { t: 'Routine pre-shift safety inspections', scenario: 'Operators rotate through areas that need a visual and thermal pass before crews enter.', deploy: 'A Spot or B2 runs a scheduled mission across fixed waypoints each shift, delivering imagery, thermal delta, and gas readings back to the control room.', outcome: 'Inspections become scheduled rather than opportunistic. Exceptions flagged before people enter.' },
    { t: 'Post-blast inspection and survey', scenario: 'Re-entry after a blast traditionally requires a 90+ minute wait and human first-entry.', deploy: 'Quadruped deploys from the magazine boundary, confirms air quality, images highwall, scans for misfires, returns LiDAR ground model.', outcome: 'Re-entry time cut 70%+. No human exposure to post-blast atmosphere.' },
    { t: 'Tailings dam monitoring', scenario: 'Required inspections across vegetation, crest, decant, and spillway — manually intensive, weather-exposed.', deploy: 'Scheduled autonomous patrols with RGB, thermal, and RTK-GNSS deformation reference. Data piped into your geotech system.', outcome: 'Frequency up, consistency up, human exposure down. Trend data usable for compliance reporting.' },
    { t: 'Underground emergency search and response', scenario: 'Structural failure or casualty event requires immediate reconnaissance before rescue team entry.', deploy: 'Tethered or untethered quadruped with gas sensors, thermal, and two-way audio deployed from nearest refuge chamber or portal.', outcome: 'Rescue team gets atmosphere and geometry before committing personnel. Decision-ready within minutes.' },
    { t: 'Confined space inspection', scenario: 'Bins, chutes, conveyor drive houses, stockpile galleries — confined, restricted entry permits required.', deploy: 'Robot enters with payload-mounted 360° camera and gas sensors, returns inspection record to maintenance planning system.', outcome: 'Permit-to-work burden reduced. Inspection frequency up without headcount up.' },
    { t: 'Equipment monitoring in remote sections', scenario: 'Critical equipment in sections of the mine that see personnel only on scheduled rounds.', deploy: 'Weekly autonomous patrol reads gauges, captures thermal signatures, flags deviations for maintenance planning.', outcome: 'Early detection of thermal and vibration anomalies. Fewer unplanned outages on critical kit.' },
  ],
  caseStudy: {
    eyebrow: 'Case study',
    image: 'assets/case-pilbara-postblast.jpg',
    clientAnon: 'Tier-1 iron ore operator · Pilbara, WA',
    headline: 'Two quadruped units, three pits, 76% reduction in post-blast re-entry exposure.',
    body: 'A major Pilbara iron ore operator engaged AusMotion for a twelve-month rental pilot across three active pits. After month six, the operator moved to purchase and is rolling the program out to four additional sites.',
    stats: [
      { n: '76%', l: 'Faster post-blast re-entry' },
      { n: '3×', l: 'Inspection frequency uplift' },
      { n: '14 mo', l: 'Payback on capital' },
    ],
  },
  faqs: [
    { q: 'How does this integrate with our existing safety systems?', a: "The robot is a data source — it does not replace your safety case, it feeds into it. We deliver inspection records, gas readings, and imagery into your SMS, maintenance management system, or OT historian via Modbus, OPC-UA, or MQTT. Integration scope is agreed during commissioning." },
    { q: 'What about cybersecurity and data sovereignty?', a: "All data can be kept on-premises. The fleet operates on your network segment with no mandatory cloud dependency. We align deployments to Essential Eight and ISM controls, and we provide documentation for your information security reviews." },
    { q: 'Can it operate underground without GPS?', a: "Yes. The platforms we deploy use visual-inertial odometry and LiDAR SLAM for localization, so GPS denial is the normal operating condition. We map the site during commissioning and the robot navigates against that map." },
    { q: "What's the realistic uptime in Australian conditions?", a: "For scheduled inspection workloads in the Pilbara and Goldfields we see 95%+ mission-completion rates after commissioning. Heat above 50 °C and abrasive dust are the two biggest risks — both are handled through our localization package, not left to the OEM default." },
    { q: 'How long does training take for our operators?', a: "Two days for a certified tele-op operator, four days for a mission designer, one day for maintainers. Delivered on your site, in English, with materials that suit your site induction format." },
    { q: 'What happens if it fails on a remote site?', a: "We hold spares inventory in Perth, Brisbane, and Kalgoorlie. Remote diagnostics typically resolve software issues within the shift; hardware swaps are usually next business day to a Tier-1 site, subject to access." },
    { q: 'How does this fit into our safety case?', a: "We provide a robot-specific risk assessment template, AS/NZS-aligned evidence of compliance, and documentation that slots into your existing safety case. Our engineers work with your safety function during commissioning." },
    { q: 'Can we trial before committing?', a: "Yes — most engagements start with a four- to six-week paid pilot on a specific use case. You keep the data; we provide the platform, the operator training, and the commissioning." },
  ],
  cta: {
    h2: 'Bring a robot to your site.',
    sub: "We'll come to you. Free site assessment, no obligation. Let's see if quadruped robotics fits your operation.",
    phone: '+61 46805588',
  },
  related: [
    { id: 'patrol', name: 'Field & perimeter patrol', tagline: 'Autonomous ground platforms for sites that need continuous presence.', Icon: Icons.Shield },
    { id: 'coastal', name: 'Coastal surveillance', tagline: 'Long-endurance UAVs for border and maritime monitoring.', Icon: Icons.Waves },
    { id: 'hospitality', name: 'Hospitality & guidance', tagline: 'Humanoid concierge and wayfinding for hotels and public venues.', Icon: Icons.Concierge },
  ],
};

/* ----- Breadcrumb ----- */
function Breadcrumb({ trail }) {
  return (
    <div className="ip-crumb" style={{ background: '#0A0F1A', color: 'rgba(250,251,252,0.7)', padding: '10px 32px', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
        {trail.map((x, i) => (
          <span key={x}>
            {i > 0 && <span style={{ margin: '0 10px', color: 'rgba(250,251,252,0.35)' }}>/</span>}
            <span style={{ color: i === trail.length - 1 ? '#F4B08F' : 'rgba(250,251,252,0.7)' }}>{x}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ----- Industry hero ----- */
function IndustryHero({ data }) {
  return (
    <section className="ip-hero" data-swap="hero" style={{
      position: 'relative', overflow: 'hidden',
      background: '#0F1E3D', color: '#FAFBFC',
      minHeight: '70vh', display: 'flex', alignItems: 'flex-end',
    }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/photo-placeholder.svg)', backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.9 }}/>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(20deg, rgba(10,15,26,0.94) 0%, rgba(15,30,61,0.65) 50%, rgba(15,30,61,0.25) 100%)' }}/>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/pattern-topo.svg)', backgroundSize: '800px auto', opacity: 0.14, mixBlendMode: 'screen' }}/>

      <div className="ip-hero__inner" style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '80px 32px', width: '100%' }}>
        <div className="ip-hero__eyebrow" style={{ fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#F4B08F', marginBottom: 20 }}>
          {data.hero.eyebrow}
        </div>
        <h1 className="ip-hero__h1" style={{ fontFamily: 'Inter', fontSize: 72, fontWeight: 800, lineHeight: 1.02, letterSpacing: '-0.035em', margin: 0, maxWidth: 980, color: '#FAFBFC', textWrap: 'balance' }}>
          {data.hero.h1}
        </h1>
        <p className="ip-hero__lede" style={{ fontFamily: 'Inter', fontSize: 19, lineHeight: 1.55, color: 'rgba(250,251,252,0.82)', marginTop: 24, maxWidth: 700, marginBottom: 36 }}>
          {data.hero.lede}
        </p>
        <div className="ip-hero__ctas" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button size="lg" iconRight={<Icons.Arrow size={16}/>}>Book a site assessment</Button>
          <Button size="lg" variant="secondary-light" iconRight={<Icons.Download size={16}/>}>Download capability brief</Button>
        </div>
      </div>
    </section>
  );
}

/* ----- Pain points ----- */
function PainPoints({ data }) {
  return (
    <section className="ip-pains" data-swap="pain-points" style={{ padding: '120px 32px', background: '#FAFBFC' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>The problem</div>
        <h2 className="ip-h2" style={{ fontFamily: 'Inter', fontSize: 46, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08, color: '#0A0F1A', margin: 0, maxWidth: 900, textWrap: 'balance' }}>
          {data.painH2}
        </h2>
        <div className="ip-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 64 }}>
          {data.pains.map((p, i) => (
            <div key={p.t} style={{ background: '#fff', border: '1px solid #E6EAF0', padding: 28, borderLeft: '3px solid #E8753D' }}>
              <div style={{ width: 40, height: 40, borderRadius: 4, background: '#FBE4D6', color: '#B85420', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                <p.Icon size={22}/>
              </div>
              <h3 style={{ fontFamily: 'Inter', fontSize: 20, fontWeight: 600, letterSpacing: '-0.015em', color: '#0A0F1A', margin: '0 0 10px' }}>{p.t}</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.6, color: '#56606E', margin: 0 }}>{p.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Solution ----- */
function Solution({ data }) {
  return (
    <section className="ip-solution" data-swap="solution" style={{ padding: '120px 32px', background: '#fff' }}>
      <div className="ip-solution__grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden', border: '1px solid #E6EAF0' }}>
          <img src="assets/mining-solution.jpg" alt="Quadruped robot on a mine site" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
        </div>
        <div>
          <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>The solution</div>
          <h2 className="ip-h2" style={{ fontFamily: 'Inter', fontSize: 38, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1, color: '#0A0F1A', margin: 0, textWrap: 'balance' }}>
            {data.solutionH2}
          </h2>
          <p style={{ fontFamily: 'Inter', fontSize: 16, lineHeight: 1.65, color: '#3A424D', marginTop: 20 }}>
            {data.solutionBody}
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {data.solutionBullets.map(b => (
              <li key={b} style={{ display: 'flex', gap: 12, fontFamily: 'Inter', fontSize: 15, color: '#121721', alignItems: 'flex-start' }}>
                <span style={{ color: '#2E8B5F', marginTop: 2, flexShrink: 0 }}><Icons.Check size={18}/></span>
                {b}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ----- Robot models (tabs) ----- */
function RobotModels({ data }) {
  const [active, setActive] = React.useState(data.models[0].id);
  const model = data.models.find(m => m.id === active);
  return (
    <section className="ip-models" data-swap="models" style={{ padding: '120px 32px', background: '#F3F5F8' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>Platforms</div>
        <h2 className="ip-h2" style={{ fontFamily: 'Inter', fontSize: 44, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08, color: '#0A0F1A', margin: 0, maxWidth: 820, textWrap: 'balance' }}>
          Quadruped platforms for Australian mining.
        </h2>

        {/* Tab strip */}
        <div role="tablist" className="ip-models__tabs" style={{ display: 'flex', gap: 0, marginTop: 48, borderBottom: '1px solid #D2D8E0', overflowX: 'auto' }}>
          {data.models.map(m => {
            const isActive = m.id === active;
            return (
              <button key={m.id} role="tab" aria-selected={isActive} onClick={() => setActive(m.id)} style={{
                background: 'transparent', border: 'none', borderBottom: `2px solid ${isActive ? '#E8753D' : 'transparent'}`,
                padding: '18px 24px', cursor: 'pointer', fontFamily: 'Inter', fontSize: 15, fontWeight: 600,
                color: isActive ? '#0A0F1A' : '#56606E', whiteSpace: 'nowrap',
                transition: 'all 140ms cubic-bezier(0.2,0,0,1)', marginBottom: -1,
              }}>
                {m.name}
              </button>
            );
          })}
        </div>

        {/* Active panel */}
        <div className="ip-models__panel" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, padding: '48px 0 0', alignItems: 'start' }}>
          <div style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden', border: '1px solid #E6EAF0', background: '#fff' }}>
            <img src={model.image || 'assets/photo-placeholder.svg'} alt={`${model.name} on site`} style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
            <div style={{ position: 'absolute', left: 16, top: 16, fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FAFBFC', background: 'rgba(10,15,26,0.75)', padding: '6px 10px' }}>
              {model.name}
            </div>
          </div>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 8 }}>{model.maker}</div>
            <h3 style={{ fontFamily: 'Inter', fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', color: '#0A0F1A', margin: '0 0 10px' }}>{model.name}</h3>
            <p style={{ fontFamily: 'Inter', fontSize: 15.5, lineHeight: 1.6, color: '#3A424D', margin: '0 0 20px' }}>{model.sub}</p>

            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>
              {model.tags.map(t => (
                <span key={t} style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.08em', color: '#0F1E3D', background: '#fff', border: '1px solid #D2D8E0', padding: '6px 10px' }}>
                  {t}
                </span>
              ))}
            </div>

            <div style={{ background: '#fff', border: '1px solid #E6EAF0', borderTop: '2px solid #0F1E3D' }}>
              {model.specs.map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 16px', borderBottom: '1px solid #F3F5F8', fontFamily: 'JetBrains Mono', fontSize: 12 }}>
                  <span style={{ color: '#7B8593', letterSpacing: '0.04em' }}>{k}</span>
                  <span style={{ color: '#121721', fontWeight: 600 }}>{v}</span>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 24, flexWrap: 'wrap' }}>
              <div>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#56606E' }}>
                  {model.custom ? 'Engagement' : 'Rental from'}
                </div>
                <div style={{ fontFamily: 'Inter', fontSize: 22, fontWeight: 700, letterSpacing: '-0.015em', color: '#0A0F1A', marginTop: 4 }}>{model.price}</div>
              </div>
              <div style={{ display: 'flex', gap: 8, marginLeft: 'auto' }}>
                <Button>{model.custom ? 'Talk to integration team' : 'Request quote'}</Button>
                {!model.custom && <Button variant="secondary" iconRight={<Icons.Download size={14}/>}>Spec sheet</Button>}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- Localization quadrants ----- */
function Localization() {
  const quads = [
    { k: '01', t: 'Environmental hardening', b: 'Heat, dust, humidity, and corrosion testing for Australian mine conditions. We do not just import — we re-engineer for site reality.' },
    { k: '02', t: 'Regulatory compliance', b: 'Full AS/NZS certification, integration with your site safety management system, alignment with WHS requirements and your company safety case.' },
    { k: '03', t: 'Operator training and certification', b: 'On-site training programs in English, plus other languages on request, for your operators, supervisors, and maintenance teams.' },
    { k: '04', t: '24/7 Australian support', b: 'Field service, parts, and remote diagnostics from our Australian team. Not a 12-hour timezone problem.' },
  ];
  return (
    <section className="ip-local" data-swap="localization" style={{ padding: '120px 32px', background: '#0F1E3D', color: '#FAFBFC', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/pattern-topo.svg)', backgroundSize: '700px auto', opacity: 0.12, mixBlendMode: 'screen' }}/>
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#F4B08F', marginBottom: 12 }}>Our differentiator</div>
        <h2 className="ip-h2" style={{ fontFamily: 'Inter', fontSize: 46, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08, color: '#FAFBFC', margin: 0, maxWidth: 780, textWrap: 'balance' }}>
          Built for here. Supported from here.
        </h2>
        <p style={{ fontFamily: 'Inter', fontSize: 17, lineHeight: 1.6, color: 'rgba(250,251,252,0.78)', maxWidth: 680, marginTop: 18 }}>
          Imported robots struggle in Australian conditions without proper localization. We close that gap: environmentally, operationally, and commercially.
        </p>
        <div className="ip-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, marginTop: 64, background: 'rgba(255,255,255,0.1)' }}>
          {quads.map(q => (
            <div key={q.k} style={{ background: '#0F1E3D', padding: 32 }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: 600, color: '#E8753D', letterSpacing: '0.12em' }}>{q.k}</div>
              <h3 style={{ fontFamily: 'Inter', fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em', color: '#FAFBFC', margin: '10px 0 12px' }}>{q.t}</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.65, color: 'rgba(250,251,252,0.72)', margin: 0 }}>{q.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Use cases accordion ----- */
function UseCases({ data }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="ip-uses" data-swap="use-cases" style={{ padding: '120px 32px', background: '#fff' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>Use cases</div>
        <h2 className="ip-h2" style={{ fontFamily: 'Inter', fontSize: 44, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08, color: '#0A0F1A', margin: 0, textWrap: 'balance' }}>
          Where quadruped robots earn their keep.
        </h2>
        <div style={{ marginTop: 48, borderTop: '1px solid #E6EAF0' }}>
          {data.useCases.map((u, i) => {
            const isOpen = open === i;
            return (
              <div key={u.t} style={{ borderBottom: '1px solid #E6EAF0' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', background: 'transparent', border: 'none', padding: '22px 0',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  cursor: 'pointer', textAlign: 'left',
                }} aria-expanded={isOpen}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
                    <span style={{ fontFamily: 'JetBrains Mono', fontSize: 12, color: '#7B8593', letterSpacing: '0.1em', width: 32 }}>0{i + 1}</span>
                    <span style={{ fontFamily: 'Inter', fontSize: 19, fontWeight: 600, color: '#0A0F1A', letterSpacing: '-0.015em' }}>{u.t}</span>
                  </div>
                  <span style={{ color: '#E8753D', transform: `rotate(${isOpen ? 45 : 0}deg)`, transition: 'transform 220ms cubic-bezier(0.2,0,0,1)' }}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
                  </span>
                </button>
                {isOpen && (
                  <div style={{ padding: '0 0 28px 52px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="ip-uses__expand">
                    {[['Scenario', u.scenario], ['Deployment', u.deploy], ['Outcome', u.outcome]].map(([k, v]) => (
                      <div key={k}>
                        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7B8593', marginBottom: 8 }}>{k}</div>
                        <p style={{ fontFamily: 'Inter', fontSize: 14.5, lineHeight: 1.6, color: '#3A424D', margin: 0 }}>{v}</p>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ----- Case study ----- */
function CaseStudySpotlight({ data }) {
  const cs = data.caseStudy;
  return (
    <section className="ip-case" data-swap="case-study" style={{ padding: '120px 32px', background: '#F3F5F8' }}>
      <div className="ip-case__grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden', border: '1px solid #E6EAF0' }}>
          <img src={cs.image || 'assets/photo-placeholder.svg'} alt="Pilbara iron ore site — composite scenario" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          <div style={{ position: 'absolute', inset: 'auto 0 0 0', height: '55%', background: 'linear-gradient(to top, rgba(10,15,26,0.85), rgba(10,15,26,0))' }}/>
          <div style={{ position: 'absolute', left: 24, bottom: 22, right: 24, color: '#FAFBFC' }}>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#F4B08F', fontWeight: 600 }}>Composite scenario · anonymized</div>
            <div style={{ fontFamily: 'Inter', fontSize: 17, fontWeight: 600, marginTop: 6 }}>{cs.clientAnon}</div>
          </div>
        </div>
        <div>
          <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>{cs.eyebrow}</div>
          <h2 className="ip-case__h2" style={{ fontFamily: 'Inter', fontSize: 34, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.14, color: '#0A0F1A', margin: 0, textWrap: 'balance' }}>{cs.headline}</h2>
          <p style={{ fontFamily: 'Inter', fontSize: 16, lineHeight: 1.65, color: '#3A424D', marginTop: 20 }}>{cs.body}</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 28, paddingTop: 24, borderTop: '1px solid #D2D8E0' }}>
            {cs.stats.map(s => (
              <div key={s.l}>
                <div style={{ fontFamily: 'Inter', fontSize: 34, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1, color: '#0A0F1A' }}>{s.n}</div>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#56606E', marginTop: 10 }}>{s.l}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 28 }}>
            <Button variant="tertiary" iconRight={<Icons.Arrow size={14}/>}>Read the full case study</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- Engagement models ----- */
function EngagementModels() {
  const models = [
    { t: 'Rental', p: 'From $5,200 / month', body: 'Test the technology against real site conditions. Monthly pricing, full support included, no long-term commitment.', best: 'Pilots, seasonal work, project-based deployments' },
    { t: 'Purchase', p: 'Capex + support plan', body: 'Own outright with full lifecycle support, training, and upgrade pathways.', best: 'Established programs, multi-site rollouts, capex budgeting', featured: true },
    { t: 'Managed service', p: 'Outcomes-based', body: 'We deploy, operate, and maintain — you receive the data and outcomes.', best: 'Teams without in-house robotics capability' },
  ];
  return (
    <section className="ip-engage" data-swap="engagement" style={{ padding: '120px 32px', background: '#fff' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>Engagement</div>
        <h2 className="ip-h2" style={{ fontFamily: 'Inter', fontSize: 44, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08, color: '#0A0F1A', margin: 0, textWrap: 'balance' }}>
          Three ways to deploy.
        </h2>
        <div className="ip-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 56 }}>
          {models.map(m => (
            <div key={m.t} style={{
              background: m.featured ? '#0F1E3D' : '#fff',
              color: m.featured ? '#FAFBFC' : '#0A0F1A',
              border: m.featured ? 'none' : '1px solid #E6EAF0',
              padding: 32,
            }}>
              {m.featured && <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>Most common</div>}
              <h3 style={{ fontFamily: 'Inter', fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 8px' }}>{m.t}</h3>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 13, color: m.featured ? '#F4B08F' : '#E8753D', letterSpacing: '0.04em', fontWeight: 500 }}>{m.p}</div>
              <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.6, color: m.featured ? 'rgba(250,251,252,0.78)' : '#3A424D', marginTop: 16, marginBottom: 24 }}>{m.body}</p>
              <div style={{ borderTop: `1px solid ${m.featured ? 'rgba(255,255,255,0.12)' : '#E6EAF0'}`, paddingTop: 16 }}>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: m.featured ? 'rgba(250,251,252,0.5)' : '#7B8593', marginBottom: 6 }}>Best for</div>
                <p style={{ fontFamily: 'Inter', fontSize: 14, lineHeight: 1.55, margin: 0, color: m.featured ? 'rgba(250,251,252,0.82)' : '#3A424D' }}>{m.best}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- FAQ ----- */
function FAQ({ data }) {
  const [open, setOpen] = React.useState(-1);
  return (
    <section className="ip-faq" data-swap="faq" style={{ padding: '120px 32px', background: '#FAFBFC' }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>FAQ</div>
        <h2 className="ip-h2" style={{ fontFamily: 'Inter', fontSize: 40, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08, color: '#0A0F1A', margin: 0, textWrap: 'balance' }}>
          Common questions from mining operators.
        </h2>
        <div style={{ marginTop: 40, borderTop: '1px solid #E6EAF0' }}>
          {data.faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={f.q} style={{ borderBottom: '1px solid #E6EAF0' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', background: 'transparent', border: 'none', padding: '20px 0',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  cursor: 'pointer', textAlign: 'left',
                }} aria-expanded={isOpen}>
                  <span style={{ fontFamily: 'Inter', fontSize: 17, fontWeight: 600, color: '#0A0F1A', letterSpacing: '-0.01em' }}>{f.q}</span>
                  <span style={{ color: '#E8753D', flexShrink: 0, transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: 'transform 220ms' }}>
                    <Icons.ChevronDown size={18}/>
                  </span>
                </button>
                {isOpen && (
                  <div style={{ paddingBottom: 24, paddingRight: 40 }}>
                    <p style={{ fontFamily: 'Inter', fontSize: 15.5, lineHeight: 1.7, color: '#3A424D', margin: 0 }}>{f.a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ----- CTA banner (industry specific) ----- */
function IndustryCta({ data, onRequestDemo }) {
  return (
    <section className="ip-cta" data-swap="cta" style={{
      background: 'linear-gradient(95deg, #B85420 0%, #E8753D 55%, #EE9264 100%)',
      color: '#FAFBFC', padding: '96px 32px', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/pattern-topo.svg)', backgroundSize: '700px auto', opacity: 0.14, mixBlendMode: 'overlay' }}/>
      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <h2 className="ip-cta__h2" style={{ fontFamily: 'Inter', fontSize: 54, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05, color: '#FAFBFC', margin: 0, textWrap: 'balance' }}>
          {data.cta.h2}
        </h2>
        <p style={{ fontFamily: 'Inter', fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.92)', marginTop: 18, maxWidth: 720, marginInline: 'auto', marginBottom: 32 }}>
          {data.cta.sub}
        </p>
        <div style={{ display: 'inline-flex', gap: 20, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
          <button onClick={onRequestDemo} style={{
            fontFamily: 'Inter', fontWeight: 600, fontSize: 16, padding: '16px 28px',
            background: '#0F1E3D', color: '#FAFBFC', border: '1px solid #0F1E3D',
            borderRadius: 4, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10,
            transition: 'all 140ms', boxShadow: '0 4px 12px rgba(10,15,26,0.18)',
          }}>
            Book a site assessment <Icons.Arrow size={16}/>
          </button>
          <span style={{ fontFamily: 'Inter', fontSize: 15, color: 'rgba(255,255,255,0.9)' }}>
            Or call us directly: <a href={`tel:${data.cta.phone}`} style={{ color: '#FAFBFC', borderBottom: '1px solid rgba(255,255,255,0.5)', paddingBottom: 2 }}>{data.cta.phone}</a>
          </span>
        </div>
      </div>
    </section>
  );
}

/* ----- Related industries ----- */
function RelatedIndustries({ data }) {
  return (
    <section className="ip-related" data-swap="related" style={{ padding: '80px 32px', background: '#FAFBFC', borderTop: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7B8593', marginBottom: 20 }}>
          Also relevant for your operation
        </div>
        <div className="ip-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {data.related.map(r => (
            <a key={r.id} href="#" style={{
              display: 'flex', gap: 18, alignItems: 'center', padding: 20,
              background: '#fff', border: '1px solid #E6EAF0', textDecoration: 'none',
              transition: 'all 140ms cubic-bezier(0.2,0,0,1)',
            }}
              onMouseEnter={e => e.currentTarget.style.borderColor = '#D2D8E0'}
              onMouseLeave={e => e.currentTarget.style.borderColor = '#E6EAF0'}>
              <div style={{ width: 40, height: 40, borderRadius: 4, background: '#FBE4D6', color: '#B85420', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <r.Icon size={22}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'Inter', fontSize: 15, fontWeight: 600, color: '#0A0F1A' }}>{r.name}</div>
                <div style={{ fontFamily: 'Inter', fontSize: 13, color: '#56606E', marginTop: 2, lineHeight: 1.45 }}>{r.tagline}</div>
              </div>
              <Icons.Arrow size={18}/>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Page shell ----- */
function MiningIndustryPage() {
  const [demoOpen, setDemoOpen] = React.useState(false);
  const [industry, setIndustry] = React.useState(null);
  return (
    <div data-screen-label="Industry · Mining & Search">
      <Nav onRequestDemo={() => setDemoOpen(true)} onIndustry={setIndustry}/>
      <Breadcrumb trail={MINING.breadcrumb}/>
      <IndustryHero data={MINING}/>
      <PainPoints data={MINING}/>
      <Solution data={MINING}/>
      <RobotModels data={MINING}/>
      <Localization/>
      <UseCases data={MINING}/>
      <CaseStudySpotlight data={MINING}/>
      <EngagementModels/>
      <FAQ data={MINING}/>
      <IndustryCta data={MINING} onRequestDemo={() => setDemoOpen(true)}/>
      <RelatedIndustries data={MINING}/>
      <Footer/>
      <InquiryModal open={demoOpen} onClose={() => setDemoOpen(false)}/>
    </div>
  );
}

window.MiningIndustryPage = MiningIndustryPage;
