/* global React */
// Three pillars + how-it-works + why-sitesign + customer quote.

const PillarRow = ({ index, eyebrow, title, body, points, children, reverse }) => (
  <div style={{
    display: 'grid',
    gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.05fr)',
    gap: 56,
    alignItems: 'center',
    marginBottom: 88,
  }} className={reverse ? 'pillar-row pillar-row--reverse' : 'pillar-row'}>
    <div style={{ order: reverse ? 2 : 1 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
        <span style={{
          width: 36, height: 36, borderRadius: 8,
          background: 'var(--ss-midnight-blue)', color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 800, fontSize: 14, letterSpacing: '0.04em',
        }}>{index}</span>
        <span className="t-eyebrow" style={{ color: 'var(--ss-grey-mid)' }}>{eyebrow}</span>
      </div>
      <h2 className="t-h1" style={{ fontSize: 'clamp(28px, 3.2vw, 40px)' }}>{title}</h2>
      <hr className="rule-safety"/>
      <p className="t-lead" style={{ marginBottom: 18 }}>{body}</p>
      {points && (
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {points.map((pt, i) => (
            <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 15, color: 'var(--ss-dark-text)' }}>
              <span style={{ flex: '0 0 auto', marginTop: 3, color: 'var(--ss-success)' }}><IconCheck size={16}/></span>
              <span>{pt}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
    <div style={{ order: reverse ? 1 : 2 }}>{children}</div>
  </div>
);

/* ---------- Pillar A visual: BCEA correction-with-audit ---------- */
const PillarVisualA = () => (
  <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
    <div style={{ background: 'var(--ss-midnight-blue)', color: '#fff', padding: '14px 20px', borderBottom: '4px solid var(--ss-safety-yellow)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{
          fontSize: 10, fontWeight: 800, letterSpacing: '0.12em',
          padding: '3px 7px', borderRadius: 4,
          background: 'var(--ss-safety-yellow)', color: 'var(--ss-midnight-blue)',
        }}>EXAMPLE</span>
        <span style={{ fontWeight: 700, letterSpacing: '0.02em', fontSize: 14 }}>Shift audit · Mokoena, T.</span>
      </div>
      <span className="badge badge--review">Corrected</span>
    </div>
    <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14, fontSize: 14 }}>
      <Row label="Original clock-in" value="04-Apr-26 · 06:14" sub="Captured at gate · GPS verified" muted/>
      <Row label="Original clock-out" value="04-Apr-26 · 18:00" sub="Auto-closed at site closing time" muted strike/>
      <div style={{ height: 1, background: 'var(--ss-grey-light)', margin: '4px 0' }}/>
      <Row label="Corrected clock-out" value="04-Apr-26 · 16:30" sub="Supervisor: J. Naidoo · 04-Apr-26 · 18:42" emphasis/>
      <div style={{
        background: 'var(--ss-bg-yellow)',
        borderRadius: 8,
        padding: '10px 12px',
        fontSize: 13,
        color: 'var(--ss-dark-text)',
        borderLeft: '3px solid var(--ss-safety-yellow)',
      }}>
        <strong style={{ color: 'var(--ss-midnight-blue)' }}>Reason: </strong>
        Worker left at 16:30 for safety briefing, did not tap out. Confirmed with foreman.
      </div>
      <p className="t-meta" style={{ margin: 0, paddingTop: 4, borderTop: '1px dashed var(--ss-grey-light)' }}>
        Original timestamp retained · Immutable record
      </p>
    </div>
  </div>
);

const Row = ({ label, value, sub, muted, strike, emphasis }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
    <div>
      <div style={{ fontSize: 12, color: 'var(--ss-grey-mid)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 12, color: 'var(--ss-grey-mid)', marginTop: 2 }}>{sub}</div>
    </div>
    <div style={{
      fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
      fontSize: 14,
      fontWeight: 600,
      color: emphasis ? 'var(--ss-midnight-blue)' : (muted ? 'var(--ss-grey-mid)' : 'var(--ss-dark-text)'),
      textDecoration: strike ? 'line-through' : 'none',
      textAlign: 'right',
    }}>{value}</div>
  </div>
);

/* ---------- Pillar B: BYOD / no lock-in ---------- */
const PillarVisualB = () => (
  <div className="card" style={{ padding: 28 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
      <div style={{
        flex: '0 0 56px', height: 56, borderRadius: 12,
        background: 'var(--ss-midnight-blue)', color: '#fff',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <IconTablet size={26}/>
      </div>
      <div>
        <div style={{ fontWeight: 700, color: 'var(--ss-midnight-blue)', fontSize: 16 }}>Any tablet. 30 seconds.</div>
        <div className="t-meta">Pair with a 6-digit code from your dashboard.</div>
      </div>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '20px', background: 'var(--ss-bg-grey)', borderRadius: 10, marginBottom: 18 }}>
      <code style={{
        fontSize: 'clamp(28px, 4vw, 36px)',
        fontWeight: 800,
        letterSpacing: '0.18em',
        color: 'var(--ss-midnight-blue)',
        fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
      }}>4 · 7 · 2 · 9 · 1 · 6</code>
      <span className="badge badge--success" style={{ height: 28, padding: '0 10px' }}>Paired</span>
    </div>
    <div style={{ marginBottom: 8, fontSize: 13, color: 'var(--ss-grey-mid)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Export to your payroll</div>
    <div style={{
      padding: '20px 22px',
      border: '1px solid var(--ss-silver)',
      borderRadius: 10,
      background: 'var(--ss-bg-grey)',
      display: 'flex',
      alignItems: 'center',
      gap: 14,
    }}>
      <div style={{
        flex: '0 0 44px', height: 44, borderRadius: 8,
        background: 'var(--ss-midnight-blue)', color: 'var(--ss-safety-yellow)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <IconDownload size={20}/>
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{
          fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
          fontWeight: 700, fontSize: 14, color: 'var(--ss-midnight-blue)',
          marginBottom: 2,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>shifts_2026-04-30.csv</div>
        <div className="t-meta" style={{ fontSize: 12 }}>Clean CSV. Works with any payroll.</div>
      </div>
    </div>
    <p className="t-meta" style={{ marginTop: 14, fontSize: 12 }}>No proprietary device. No fingerprint scanner to buy. No lock-in.</p>
  </div>
);

/* ---------- Pillar C: pricing visual ---------- */
const PillarVisualC = () => (
  <div className="card" style={{ padding: 28, position: 'relative' }}>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
      <span style={{ fontSize: 14, color: 'var(--ss-grey-mid)', fontWeight: 600 }}>From</span>
      <span style={{ fontSize: 44, fontWeight: 900, color: 'var(--ss-midnight-blue)', lineHeight: 1 }}>R1,000</span>
      <span style={{ fontSize: 14, color: 'var(--ss-grey-mid)', fontWeight: 500 }}>/ month</span>
    </div>
    <p className="t-small" style={{ margin: '4px 0 22px' }}>2 sites included, 50 workers per site. R500 per extra site, R20 per extra worker.</p>

    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <PriceLine label="2 sites · 80 workers total"     price="R1,000"/>
      <PriceLine label="2 sites · 140 workers total"    price="R1,800" sub="R1,000 base + 40 extra workers × R20"/>
      <PriceLine label="3 sites · 220 workers total"    price="R3,900" sub="R1,000 base + 1 extra site × R500 + 120 extra workers × R20" highlight/>
    </div>
    <p className="t-meta" style={{ marginTop: 18, marginBottom: 0, paddingTop: 14, borderTop: '1px dashed var(--ss-grey-light)' }}>
      No per-user surprise bill. No "premium tier" for features you should already have.
    </p>
  </div>
);

const PriceLine = ({ label, price, sub, highlight }) => (
  <div style={{
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '14px 16px',
    border: '1px solid var(--ss-silver)',
    borderRadius: 10,
    background: highlight ? 'var(--ss-bg-yellow)' : 'var(--ss-white)',
    borderColor: highlight ? 'var(--ss-safety-yellow)' : 'var(--ss-silver)',
  }}>
    <div>
      <div style={{ fontWeight: 600, color: 'var(--ss-midnight-blue)', fontSize: 14 }}>{label}</div>
      {sub && <div className="t-meta" style={{ marginTop: 2, fontSize: 12 }}>{sub}</div>}
    </div>
    <div style={{ fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace', fontWeight: 700, fontSize: 16, color: 'var(--ss-midnight-blue)' }}>{price}</div>
  </div>
);

const Pillars = () => (
  <section className="section section--grey" id="pillars">
    <div className="container">
      <div style={{ maxWidth: 720, marginBottom: 64 }}>
        <span className="t-eyebrow t-eyebrow--accent">The spine</span>
        <h2 className="t-h1" style={{ marginTop: 14 }}>Three commitments. Everything else is detail.</h2>
      </div>

      <PillarRow
        index="A"
        eyebrow="Pillar A · Compliance"
        title="Audit-ready by design."
        body="Every clock-in is an immutable record. When a supervisor corrects a shift, the original timestamp stays, and a separate corrected_timestamp is captured with the supervisor's name and a reason. Defensible against any BCEA labour-court dispute — without a single piece of paper."
        points={[
          'Original timestamps cannot be overwritten.',
          'Every correction captures who, when, and why.',
          'Architecture reviewed against POPIA Article 19 and BCEA Section 31.',
        ]}
      >
        <PillarVisualA/>
      </PillarRow>

      <PillarRow
        index="B"
        eyebrow="Pillar B · Hardware"
        title="No hardware. No lock-in."
        body="Pair any tablet at the gate in 30 seconds. No fingerprint scanner to buy. No proprietary device. Export clean CSV that you import into whichever payroll system you already use."
        points={[
          'Any modern tablet works. iPad, Samsung, Lenovo, Huawei.',
          'Bring-your-own-device. Pair with a 6-digit code.',
          'Clean CSV export — works with any payroll system.',
        ]}
        reverse
      >
        <PillarVisualB/>
      </PillarRow>

      <PillarRow
        index="C"
        eyebrow="Pillar C · Pricing"
        title="Site-first pricing."
        body="Two sites included. R1,000 / month for up to 50 workers per site. R500 per extra site. R20 per extra worker. No surprise per-user bill. Built for the way industrial-site operators actually count."
        points={[
          'Priced per site, not per seat.',
          '2 sites and 50 workers per site included.',
          'Predictable bill at month-end. No "active user" surprise.',
        ]}
      >
        <PillarVisualC/>
      </PillarRow>
    </div>
  </section>
);

/* ---------- How it works ---------- */

const HowItWorks = () => {
  const steps = [
    { icon: <IconTablet size={22}/>,    title: 'Pair tablet at gate',         body: '30-second setup. Any tablet. 6-digit code.' },
    { icon: <IconScan size={22}/>,      title: 'Worker taps + face + GPS',    body: 'Tap to clock in. Face match. Geofence verified.' },
    { icon: <IconAlert size={22}/>,     title: 'Supervisor reviews flagged', body: 'Outside-geofence, no-match, no-clock-out. All in one queue.' },
    { icon: <IconClock size={22}/>,     title: 'Auto-close at closing time', body: 'Forgotten clock-outs caught automatically.' },
    { icon: <IconUpload size={22}/>,    title: 'Export to your payroll',     body: 'One click. Clean CSV. Works with any payroll system.' },
  ];

  return (
    <section className="section">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <span className="t-eyebrow t-eyebrow--accent">How it works</span>
          <h2 className="t-h1" style={{ marginTop: 14 }}>Five steps. Gate to payroll.</h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(5, 1fr)',
          gap: 20,
          position: 'relative',
        }} className="how-grid">
          {steps.map((s, i) => (
            <div key={i} style={{ position: 'relative', zIndex: 1 }}>
              <div style={{
                width: 56, height: 56, borderRadius: 12,
                background: 'var(--ss-midnight-blue)', color: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 16, border: '4px solid var(--ss-white)',
                boxShadow: '0 0 0 1px var(--ss-silver)',
              }}>
                {s.icon}
              </div>
              <div style={{
                fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
                fontSize: 11, color: 'var(--ss-grey-mid)', fontWeight: 700,
                letterSpacing: '0.1em', marginBottom: 6,
              }}>STEP {String(i+1).padStart(2,'0')}</div>
              <h3 className="t-h3" style={{ fontSize: 16, marginBottom: 6 }}>{s.title}</h3>
              <p className="t-small" style={{ margin: 0, fontSize: 14 }}>{s.body}</p>
            </div>
          ))}
          {/* Connector line */}
          <div aria-hidden="true" style={{
            position: 'absolute',
            top: 28, left: '5%', right: '5%',
            height: 2, background: 'repeating-linear-gradient(to right, var(--ss-silver) 0 6px, transparent 6px 12px)',
            zIndex: 0,
          }}/>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .how-grid { grid-template-columns: 1fr 1fr !important; }
          .how-grid > [aria-hidden] { display: none; }
        }
        @media (max-width: 520px) {
          .how-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 720px) {
          .pillar-row { grid-template-columns: 1fr !important; gap: 32px !important; margin-bottom: 56px !important; }
          .pillar-row > * { order: unset !important; }
        }
      `}</style>
    </section>
  );
};

/* ---------- Why SiteSign ---------- */

const WhySiteSign = () => {
  const verticals = [
    {
      title: 'Construction',
      icon: <IconHardHat size={22}/>,
      body: "Foreman at a Cape Town site reviews the morning's clock-ins on her tablet. Every worker verified by face plus GPS. Ready for BIBC reporting on Friday.",
    },
    {
      title: 'Mining',
      icon: <IconPickaxe size={22}/>,
      body: '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.',
    },
    {
      title: 'Manufacturing',
      icon: <IconFactory size={22}/>,
      body: 'Plant manager at a Durban factory exports verified hours straight to payroll. Overtime tiers split correctly. No Friday-afternoon scramble.',
    },
    {
      title: 'Agriculture',
      icon: <IconWheat size={22}/>,
      body: 'Farm manager in the Cape winelands tracks 200 seasonal pickers across three blocks. One tablet per block. SIZA-ready hours by lunchtime.',
    },
  ];

  return (
    <section className="section section--midnight">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)',
          gap: 56,
          alignItems: 'center',
        }} className="why-grid">
          <div>
            <span className="t-eyebrow t-eyebrow--accent" style={{ color: 'rgba(255,255,255,0.7)' }}>Why SiteSign</span>
            <h2 className="t-h1" style={{ color: '#fff', marginTop: 14 }}>
              Built in South Africa for South African industrial sites.
            </h2>
            <p className="t-lead" style={{ color: 'rgba(255,255,255,0.85)', marginBottom: 18 }}>
              SiteSign was built for construction, mining, manufacturing, warehousing, agriculture, and security — anywhere a worker needs to check in. Designed against the Protection of Personal Information Act, 2013, and the Basic Conditions of Employment Act, 1997.
            </p>
            <p className="t-lead" style={{ color: 'rgba(255,255,255,0.85)', margin: 0 }}>
              Privacy by design, not as a checkbox.
            </p>
          </div>
          <div className="why-cards" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {verticals.map((v, i) => (
              <div key={i} style={{
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.12)',
                borderRadius: 10,
                padding: 22,
                borderLeft: '3px solid var(--ss-safety-yellow)',
                display: 'flex',
                flexDirection: 'column',
                gap: 10,
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 8,
                  background: 'rgba(238,210,2,0.12)',
                  color: 'var(--ss-safety-yellow)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>{v.icon}</div>
                <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--ss-safety-yellow)', letterSpacing: '0.01em' }}>{v.title}</div>
                <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.82)', lineHeight: 1.55 }}>{v.body}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .why-grid { grid-template-columns: 1fr !important; } }
        @media (max-width: 520px) { .why-cards { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

/* ---------- Customer quote ---------- */

const CustomerQuote = () => (
  <section className="section">
    <div className="container" style={{ maxWidth: 920 }}>
      <div className="card card--accent-top" style={{ padding: 'clamp(28px, 4vw, 48px)', position: 'relative' }}>
        <div style={{ position: 'absolute', top: 24, right: 28, color: 'var(--ss-bg-yellow)', opacity: 1 }}>
          <IconQuote size={56} stroke="var(--ss-safety-yellow)" strokeWidth={1.5}/>
        </div>
        <p style={{
          fontSize: 'clamp(20px, 2.4vw, 26px)',
          lineHeight: 1.45,
          color: 'var(--ss-midnight-blue)',
          fontWeight: 500,
          margin: '0 0 28px',
          maxWidth: 740,
          textWrap: 'pretty',
        }}>
          "SiteSign has helped us smooth our daily sign-in procedures, greatly reducing the admin burden of making sure the teams are in attendance. The wage calculations admin is now an automated task."
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <img
            src="assets/customers/sara-rope-access/logo.png"
            alt="SARA Rope Access Global"
            style={{ height: 44, width: 'auto', objectFit: 'contain' }}
          />
          <div style={{ borderLeft: '1px solid var(--ss-grey-light)', paddingLeft: 16 }}>
            <div style={{ fontWeight: 700, color: 'var(--ss-midnight-blue)', fontSize: 14 }}>Operations team</div>
            <div className="t-meta">SARA Rope Access Global · Construction</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Pillars, HowItWorks, WhySiteSign, CustomerQuote });