/* global React */
// Home page -- top sections (hero, social proof, problem, pillars).

const Hero = () => (
  <section className="section site-grid-bg" style={{ paddingTop: 72, paddingBottom: 56, position: 'relative', overflow: 'hidden' }}>
    <div className="container" style={{ position: 'relative', zIndex: 1 }}>
      <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)', gap: 56, alignItems: 'center' }}>
        <div style={{ minWidth: 0 }}>
          <span className="t-eyebrow t-eyebrow--accent">South African industrial sites</span>
          <h1 className="t-display" style={{ marginTop: 16, marginBottom: 22 }}>
            Site attendance, <br/>
            <span style={{
              background: 'linear-gradient(180deg, transparent 65%, var(--ss-safety-yellow) 65%)',
              padding: '0 4px',
              whiteSpace: 'nowrap',
            }}>audit&#8209;ready</span> by design.
          </h1>
          <p className="t-lead" style={{ maxWidth: 540, marginBottom: 32 }}>
            Turn any tablet into a face + GPS verified clock-in station. Auto-close forgotten shifts. Defensible audit trail. Export clean to your payroll.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 28 }}>
            <a className="btn btn--cta btn--lg" href="#book-demo">Book a 15-min demo <IconArrowRight size={18}/></a>
            <a className="btn btn--secondary btn--lg" href="#install">Install on your tablet</a>
          </div>
          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', color: 'var(--ss-grey-mid)', fontSize: 13, fontWeight: 500 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconCheck size={16} stroke="var(--ss-success)"/>BYOD tablet</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconCheck size={16} stroke="var(--ss-success)"/>POPIA-aware retention</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconCheck size={16} stroke="var(--ss-success)"/>Works offline</span>
          </div>
        </div>

        {/* Hero visual placeholder -- a tablet at site entry */}
        <HeroVisual/>
      </div>
    </div>
    <style>{`
      @media (max-width: 720px) {
        .hero-grid {
          grid-template-columns: 1fr !important;
          gap: 32px !important;
        }
      }
    `}</style>
  </section>
);

const HeroVisual = () => (
  <div style={{ position: 'relative', aspectRatio: '5 / 4', minHeight: 280, width: '100%', maxWidth: 520, marginInline: 'auto' }}>
    {/* Outer placeholder = environment */}
    <div className="placeholder" style={{ position: 'absolute', inset: 0, padding: 0 }}>
      <div className="placeholder__label" style={{ position: 'absolute', top: 14, left: 14, margin: 0 }}>
        [SiteSign kiosk at industrial-site entry,<br/>PPE / hi-vis worker]
      </div>

      {/* Stylised tablet kiosk preview */}
      <div style={{
        position: 'relative',
        width: '78%',
        background: 'var(--ss-midnight-blue)',
        borderRadius: 18,
        padding: 14,
        boxShadow: '0 18px 40px rgba(31,45,61,0.35), 0 6px 12px rgba(31,45,61,0.25)',
        border: '6px solid #0F1A24',
      }}>
        <div style={{
          background: 'var(--ss-white)',
          borderRadius: 10,
          overflow: 'hidden',
          aspectRatio: '4 / 3',
          display: 'flex',
          flexDirection: 'column',
        }}>
          {/* In-tablet header */}
          <div style={{
            background: 'var(--ss-midnight-blue)',
            color: '#fff',
            padding: '10px 14px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            borderBottom: '3px solid var(--ss-safety-yellow)',
            fontSize: 11,
          }}>
            <span style={{ fontWeight: 700, letterSpacing: '0.04em' }}>SITE 04 &middot; GATE A</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, opacity: 0.85 }}>
              <span style={{ width: 7, height: 7, borderRadius: 99, background: '#1B7F3A' }}></span>
              Online
            </span>
          </div>
          {/* Tablet body */}
          <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10, flex: 1, fontSize: 11 }}>
            <div style={{ fontWeight: 700, color: 'var(--ss-midnight-blue)', fontSize: 13 }}>Tap to clock in</div>
            <div style={{
              display: 'flex',
              gap: 10,
              alignItems: 'center',
              padding: 10,
              border: '1px solid var(--ss-silver)',
              borderRadius: 8,
            }}>
              <div style={{ width: 32, height: 32, borderRadius: 99, background: 'var(--ss-bg-grey)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ss-grey-mid)' }}>
                <IconScan size={16}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 600, color: 'var(--ss-midnight-blue)' }}>Look at the camera</div>
                <div style={{ color: 'var(--ss-grey-mid)', fontSize: 10 }}>Face match &middot; GPS verified</div>
              </div>
              <span className="badge badge--success" style={{ height: 20, fontSize: 10 }}>Match</span>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              padding: '8px 10px',
              background: 'var(--ss-bg-grey)',
              borderRadius: 8,
              fontSize: 10,
            }}>
              <span style={{ color: 'var(--ss-dark-text)' }}>04-Apr-26 &middot; 06:42</span>
              <span style={{ color: 'var(--ss-grey-mid)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <IconMapPin size={12}/> Inside geofence
              </span>
            </div>
            <button style={{
              marginTop: 'auto',
              background: 'var(--ss-safety-yellow)',
              color: 'var(--ss-midnight-blue)',
              border: 'none',
              borderRadius: 8,
              padding: '12px 16px',
              fontWeight: 700,
              fontSize: 13,
            }}>Clock in</button>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const SocialProof = () => (
  <section className="section--tight" style={{ background: 'var(--ss-bg-grey)', padding: '36px 0' }}>
    <div className="container">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 28 }}>
        <p className="t-meta" style={{ color: 'var(--ss-grey-mid)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', fontSize: 12, margin: 0 }}>
          Trusted by South African industrial-site teams
        </p>
        <div style={{ display: 'flex', gap: 48, alignItems: 'center', flexWrap: 'wrap' }}>
          <img
            src="assets/customers/sara-rope-access/logo.png"
            alt="SARA Rope Access"
            style={{ height: 44, width: 'auto', maxWidth: 180, objectFit: 'contain' }}
          />
          <img
            src="assets/customers/newcastle-electroplating/logo.png"
            alt="Newcastle Electroplating"
            style={{ height: 56, width: 'auto', maxWidth: 200, objectFit: 'contain' }}
          />
        </div>
      </div>
    </div>
  </section>
);

const ProblemBlock = () => {
  const problems = [
    {
      icon: <IconClock size={22}/>,
      title: 'Supervisors waste hours chasing missing clock-outs.',
      body: 'A worker leaves at lunch, forgets to tap out, and on Friday the supervisor is reconstructing 80 shifts from memory. Every week. SiteSign auto-closes forgotten shifts at site closing time and flags them for review.',
    },
    {
      icon: <IconScale size={22}/>,
      title: 'BCEA disputes drag for months without an audit trail.',
      body: 'When a worker disputes their hours at the labour court, can you show who corrected the timesheet, when, and why? With paper and spreadsheets the answer is usually no. SiteSign keeps the original timestamp immutable and captures every correction with supervisor name and reason.',
    },
    {
      icon: <IconLock size={22}/>,
      title: 'POPIA risk: biometric data with no retention policy.',
      body: 'Faces and fingerprints are special-personal-information under POPIA. Most attendance systems keep them forever, in the clear, with no deletion policy. SiteSign auto-purges biometric descriptors when an employee is terminated and never stores raw face images.',
    },
  ];

  return (
    <section className="section">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <span className="t-eyebrow t-eyebrow--accent">The problem</span>
          <h2 className="t-h1" style={{ marginTop: 14 }}>
            Paper sign-in sheets and per-user SaaS weren't built for industrial sites.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
          {problems.map((p, i) => (
            <div key={i} className="card card--accent-left">
              <div style={{
                width: 44, height: 44, borderRadius: 8,
                background: 'var(--ss-bg-yellow)',
                color: 'var(--ss-midnight-blue)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 16,
              }}>
                {p.icon}
              </div>
              <h3 className="t-h3" style={{ fontSize: 17, marginBottom: 10 }}>{p.title}</h3>
              <p className="t-small" style={{ margin: 0 }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero, SocialProof, ProblemBlock });