/* global React */
// Industries page sections.

const IndustriesHero = () => (
  <section className="section site-grid-bg" style={{ paddingTop: 72, paddingBottom: 40 }}>
    <div className="container" style={{ maxWidth: 880, textAlign: 'center' }}>
      <span className="t-eyebrow t-eyebrow--accent" style={{ display: 'inline-block' }}>Industries</span>
      <h1 className="t-display" style={{ marginTop: 18, marginBottom: 18, fontSize: 'clamp(34px, 4.6vw, 54px)' }}>
        One product. Six industries.
      </h1>
      <p className="t-lead" style={{ maxWidth: 720, margin: '0 auto 28px' }}>
        SiteSign is built for any industrial site that needs verifiable worker check-in. From a Cape Town construction site to a Free State packhouse to a Durban factory floor.
      </p>
      <a className="btn btn--cta btn--lg" href="index.html#book-demo">
        Book a 15-min demo
        <IconArrowRight size={18}/>
      </a>
    </div>
  </section>
);

const IndustryCard = ({ id, Icon, name, mini, scenario, pains }) => (
  <article id={id} className="card" style={{
    padding: 28,
    display: 'flex', flexDirection: 'column', gap: 16,
    scrollMarginTop: 80,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <span style={{
        width: 44, height: 44, borderRadius: 10,
        background: 'var(--ss-safety-yellow)',
        color: 'var(--ss-midnight-blue)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        flex: '0 0 auto',
      }}>
        <Icon size={22}/>
      </span>
      <div>
        <div style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
          color: 'var(--ss-grey-mid)',
        }}>{name}</div>
        <h3 className="t-h3" style={{ fontSize: 20, margin: '2px 0 0', color: 'var(--ss-midnight-blue)' }}>{mini}</h3>
      </div>
    </div>

    <p className="t-small" style={{
      margin: 0,
      paddingLeft: 14,
      borderLeft: '3px solid var(--ss-safety-yellow)',
      fontStyle: 'italic',
      color: 'var(--ss-dark-text)',
      lineHeight: 1.6,
    }}>{scenario}</p>

    <div>
      <div style={{
        fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: 'var(--ss-grey-mid)', marginBottom: 8,
      }}>Common pains addressed</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
        {pains.map((p, i) => (
          <li key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13.5, color: 'var(--ss-dark-text)' }}>
            <span style={{ flex: '0 0 auto', marginTop: 2, color: 'var(--ss-success)' }}><IconCheck size={14}/></span>
            <span>{p}</span>
          </li>
        ))}
      </ul>
    </div>
  </article>
);

const IndustryGrid = () => {
  const cards = [
    {
      id: 'construction', Icon: IconHardHat, name: 'Construction',
      mini: 'Built for the gate.',
      scenario: 'Foreman at a Cape Town site reviews the morning\u2019s clock-ins on her tablet. Every worker verified by face plus GPS. Ready for BIBC reporting on Friday.',
      pains: ['Buddy clocking with paper sign-in books', 'BCEA-safe correction trail', 'Subcontractor mix'],
    },
    {
      id: 'mining', Icon: IconPickaxe, name: 'Mining',
      mini: 'Built for the shaft.',
      scenario: 'Shaft supervisor at a North-West mine sees the night-shift roll out at 06:00. Auto-close has already captured the contractors who exited late. Roll-call complete in 30 seconds.',
      pains: ['Contractor verification', 'Shift handovers', 'Designed for MHSA-aware mining operations'],
    },
    {
      id: 'manufacturing', Icon: IconFactory, name: 'Manufacturing',
      mini: 'Built for the plant floor.',
      scenario: 'Plant manager at a Durban factory exports verified hours straight to payroll. Overtime tiers split correctly. No Friday-afternoon scramble.',
      pains: ['Shift-overs', 'Production-line attendance', 'Overtime tier accuracy'],
    },
    {
      id: 'agriculture', Icon: IconWheat, name: 'Agriculture',
      mini: 'Built for the packhouse.',
      scenario: 'Farm manager in the Cape winelands tracks 200 seasonal pickers across three blocks. One tablet per block. SIZA-ready hours by lunchtime.',
      pains: ['Seasonal-worker turnover', 'Multi-block deployment', 'Records exportable for SIZA / BIBC submission'],
    },
    {
      id: 'warehousing', Icon: IconWarehouse, name: 'Warehousing & Logistics',
      mini: 'Built for the loading bay.',
      scenario: 'Operations manager at a Johannesburg distribution hub verifies which staff are on the floor for a shift bonus. No paper sign-in. No buddy clocking.',
      pains: ['Shift-bonus verification', 'Multi-shift attendance', 'High worker turnover'],
    },
    {
      id: 'fmcg', Icon: IconTruck, name: 'FMCG Distribution',
      mini: 'Built for the depot.',
      scenario: 'Depot supervisor at a Pretoria FMCG hub verifies merchandiser arrivals at the depot before a route. Face plus GPS confirms presence. Payroll export goes to your payroll vendor on Friday.',
      pains: ['Mobile workforce verification', 'Route-start attendance', 'Multi-region depot consolidation'],
    },
  ];

  return (
    <section className="section">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 20,
        }}>
          {cards.map(c => <IndustryCard key={c.id} {...c}/>)}
        </div>
      </div>
    </section>
  );
};

const IndustriesOther = () => (
  <section className="section section--grey">
    <div className="container" style={{ maxWidth: 760, textAlign: 'center' }}>
      <p className="t-lead" style={{ margin: 0 }}>
        Don't see your industry? SiteSign also serves <strong>security</strong>, <strong>utilities</strong>, <strong>ports</strong>, and any operation where workers must check in.{' '}
        <a href="index.html#book-demo" style={{ color: 'var(--ss-midnight-blue)', textDecoration: 'underline' }}>Book a demo to discuss your site.</a>
      </p>
    </div>
  </section>
);

Object.assign(window, { IndustriesHero, IndustryGrid, IndustriesOther });