const INDUSTRIES = [
  { id: 'mining',    name: 'Mining & search',        tagline: 'Quadruped platforms for inspection and emergency response.', painPoint: 'Eyes and hands where people shouldn\u2019t be.', Icon: (p) => <Icons.Mountain {...p}/> },
  { id: 'hospitality', name: 'Hospitality & guidance', tagline: 'Humanoid concierge and wayfinding for hotels, retail, and public venues.', painPoint: 'Staff capacity, 24/7.', Icon: (p) => <Icons.Concierge {...p}/> },
  { id: 'cleaning',  name: 'Commercial cleaning',    tagline: 'Autonomous cleaning for offices, transit, and large-format retail.', painPoint: 'Consistent clean, overnight.', Icon: (p) => <Icons.Sparkles {...p}/> },
  { id: 'patrol',    name: 'Field & perimeter patrol', tagline: 'Autonomous ground platforms for sites that need continuous presence.', painPoint: 'Always-on perimeter, no fatigue.', Icon: (p) => <Icons.Shield {...p}/> },
  { id: 'coastal',   name: 'Coastal surveillance',   tagline: 'Long-endurance UAVs for border and maritime monitoring.', painPoint: 'Thousands of kilometres of coastline.', Icon: (p) => <Icons.Waves {...p}/> },
  { id: 'agedcare',  name: 'Aged care & assistive',  tagline: 'Exoskeletons, smart beds, and assistive seating for residential care.', painPoint: 'Dignity, independence, and safer transfers.', Icon: (p) => <Icons.Heart {...p}/> },
];

function IndustryCard({ ind, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={() => onClick(ind)}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        textAlign: 'left', background: '#fff',
        border: `1px solid ${hover ? '#D2D8E0' : '#E6EAF0'}`,
        borderRadius: 8,
        boxShadow: hover ? '0 4px 12px rgba(10,15,26,0.08), 0 1px 3px rgba(10,15,26,0.04)' : '0 1px 3px rgba(10,15,26,0.06)',
        padding: 24, cursor: 'pointer', position: 'relative', overflow: 'hidden',
        transition: 'all 140ms cubic-bezier(0.2,0,0,1)',
        display: 'flex', flexDirection: 'column', gap: 12, minHeight: 200,
      }}>
      <div style={{
        width: 40, height: 40, borderRadius: 4, background: '#FBE4D6', color: '#B85420',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <ind.Icon size={22}/>
      </div>
      <h4 style={{ fontFamily: 'Inter', fontSize: 20, fontWeight: 600, letterSpacing: '-0.015em', color: '#0A0F1A', margin: 0 }}>{ind.name}</h4>
      <p style={{ fontFamily: 'Inter', fontSize: 14, lineHeight: 1.5, color: '#56606E', margin: 0 }}>{ind.tagline}</p>
      <div style={{
        position: 'absolute', right: 20, bottom: 18, color: '#E8753D',
        transform: `translateX(${hover ? 4 : 0}px)`, transition: 'transform 140ms',
      }}>
        <Icons.Arrow size={20}/>
      </div>
    </button>
  );
}

function IndustryGrid({ onPick }) {
  return (
    <section id="industries" style={{ padding: '96px 32px', background: '#FAFBFC' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="eyebrow" style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>Industries we serve</div>
        <h2 style={{ fontFamily: 'Inter', fontSize: 44, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1, color: '#0A0F1A', margin: 0, maxWidth: 720 }}>
          Six sectors. One local partner.
        </h2>
        <p style={{ fontFamily: 'Inter', fontSize: 17, lineHeight: 1.55, color: '#56606E', maxWidth: 620, marginTop: 16, marginBottom: 48 }}>
          Each platform is matched to its manufacturer, site conditions, and applicable Australian standards. Commissioned and supported by our team.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {INDUSTRIES.map(ind => <IndustryCard key={ind.id} ind={ind} onClick={onPick}/>)}
        </div>
      </div>
    </section>
  );
}

window.INDUSTRIES = INDUSTRIES;
window.IndustryCard = IndustryCard;
window.IndustryGrid = IndustryGrid;