/* global React, C, FONT_DISP, FONT_SANS, Eyebrow, Button, useWindowWidth, useReveal */

/* --- Differentiators -------------------------------------------- */
function Differentiators() {
  const [ref, shown] = useReveal();
  const w = useWindowWidth();
  const isMobile = w <= 768;
  const items = [
    { n: '01', t: 'Built for the decision-maker',
      b: 'We design for the leader who has to act on the data — finance controllers, operations managers, marketing leads — using their vocabulary, not the data model\'s.' },
    { n: '02', t: 'Enterprise-grade by default',
      b: 'Authentication, role separation, audit logging, validated inputs, automated PDF and Excel exports. Baseline, not upsells. Procurement-ready from day one.' },
    { n: '03', t: 'One trusted point of contact',
      b: 'Clients work directly with the person building their solution. Decisions are fast. Iteration is real. Nothing gets lost in handoff between sales, AM, and a developer behind a ticketing system.' },
    { n: '04', t: 'Tailored, not templated',
      b: 'Each engagement starts with the existing workflow — meeting it where it is — and produces a product shaped to it. We never force a one-size-fits-all template onto a process that has earned its complexity.' },
  ];
  return (
    <section style={{ background: C.white, padding: isMobile ? '72px 0' : '120px 0' }} ref={ref}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px' }}>
        <div style={{ maxWidth: 900, marginBottom: isMobile ? 40 : 64 }}>
          <Eyebrow>What makes us different</Eyebrow>
          <h2 style={{
            fontFamily: FONT_DISP, fontWeight: 700,
            fontSize: isMobile ? 28 : 48, lineHeight: isMobile ? '36px' : '56px',
            color: C.navy, margin: '14px 0 0', letterSpacing: '-0.01em',
          }}>Engineered for enterprise. Sized for the operator.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 20 }}>
          {items.map((x, i) => (
            <div key={i} style={{
              background: C.warm, border: `1px solid ${C.borderWarm}`, borderRadius: 12,
              padding: 36, display: 'flex', flexDirection: 'column', gap: 14,
              opacity: shown ? 1 : 0,
              transform: shown ? 'translateY(0)' : 'translateY(24px)',
              transition: `opacity 600ms ease ${i * 90}ms, transform 700ms cubic-bezier(0.2,0.8,0.2,1) ${i * 90}ms`,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 18, background: C.sageTint,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: FONT_DISP, fontWeight: 700, fontSize: 13, color: C.navy,
              }}>{x.n}</div>
              <h3 style={{
                fontFamily: FONT_DISP, fontWeight: 700, fontSize: 22, lineHeight: '28px',
                color: C.navy, margin: 0,
              }}>{x.t}</h3>
              <p style={{
                fontFamily: FONT_SANS, fontSize: 15, lineHeight: '25px', color: C.muted, margin: 0,
              }}>{x.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* --- Case study ------------------------------------------------- */
function CaseStudy() {
  const [ref, shown] = useReveal();
  const w = useWindowWidth();
  const isMobile = w <= 768;
  return (
    <section id="work" style={{ background: C.warm, padding: isMobile ? '72px 0' : '120px 0' }} ref={ref}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px' }}>
        <div style={{ marginBottom: isMobile ? 36 : 56, maxWidth: 1100 }}>
          <Eyebrow>Case study</Eyebrow>
          <h2 style={{
            fontFamily: FONT_DISP, fontWeight: 700,
            fontSize: isMobile ? 26 : 40, lineHeight: isMobile ? '34px' : '50px',
            color: C.navy, margin: '14px 0 0', letterSpacing: '-0.01em',
          }}>From spreadsheet to audit-ready operations system in six weeks.</h2>
        </div>
        <div style={{
          background: '#fff', border: `1px solid ${C.borderWarm}`, borderRadius: 16,
          padding: isMobile ? 28 : 56,
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 36 : 64,
          opacity: shown ? 1 : 0, transform: shown ? 'translateY(0)' : 'translateY(24px)',
          transition: 'opacity 700ms ease, transform 800ms cubic-bezier(0.2,0.8,0.2,1)',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <Field label="Client" body="A major construction firm running active sites with statutory weather monitoring obligations." bold />
            <Field label="Problem" body="Site teams collected weather readings and assembled compliance reports manually. Thresholds varied by site. PDFs were emailed and impossible to audit." />
            <Field label="What we built" body="A secure system with site- and station-level reporting, configurable thresholds, day/week/month/custom-range reporting, automated PDF and Excel exports, and validated ingestion that flags interval gaps automatically." />
            <a href="#" style={{
              fontFamily: FONT_SANS, fontWeight: 700, fontSize: 15,
              color: C.navy, textDecoration: 'none', marginTop: 4,
            }}>Read the full case study →</a>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['Replaced', 'Manual PDF assembly with a one-click export'],
              ['Per-site', 'Wind and rainfall thresholds, configurable in the UI'],
              ['Live', 'In production with the operations team using it daily'],
              ['Auditable', 'Every reading, threshold change, and export is logged'],
            ].map(([l, b], i) => (
              <div key={i} style={{
                background: C.warm, borderRadius: 10,
                padding: '18px 24px', display: 'flex', alignItems: 'center', gap: 16,
              }}>
                <span style={{
                  fontFamily: FONT_DISP, fontWeight: 700, fontSize: 20, color: C.orange, minWidth: 110,
                }}>{l}</span>
                <span style={{
                  fontFamily: FONT_SANS, fontSize: 15, lineHeight: '22px', color: C.ink,
                }}>{b}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
function Field({ label, body, bold = false }) {
  return (
    <div>
      <div style={{
        fontFamily: FONT_SANS, fontWeight: 700, fontSize: 12,
        letterSpacing: '0.12em', textTransform: 'uppercase', color: C.sage, marginBottom: 6,
      }}>{label}</div>
      <p style={{
        fontFamily: FONT_SANS, fontSize: 15, lineHeight: '24px',
        color: bold ? C.ink : C.muted, margin: 0,
      }}>{body}</p>
    </div>
  );
}

/* --- Engagement model ------------------------------------------- */
function Engagement() {
  const [ref, shown] = useReveal();
  const w = useWindowWidth();
  const isMobile = w <= 768;
  const isTablet = w <= 1024;
  const steps = [
    { w: 'Week 0', t: 'Discovery call', b: '30 minutes. No deck. We talk about the workflow and whether Key Metrics fits.' },
    { w: 'Week 1', t: 'Scope and shape', b: 'Fixed-scope proposal. One page. Outcomes, deliverables, timeline, price.' },
    { w: 'Weeks 2–6', t: 'Build', b: 'I build, you review weekly. You get the system running on your data, not a sandbox.' },
    { w: 'Handover', t: 'Run without me', b: 'Documentation, training, and a 30-day support window. Systems run without me embedded.' },
  ];
  return (
    <section id="engagement" style={{ background: C.white, padding: isMobile ? '72px 0' : '120px 0' }} ref={ref}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px' }}>
        <div style={{ maxWidth: 900, marginBottom: isMobile ? 40 : 64 }}>
          <Eyebrow>How we work together</Eyebrow>
          <h2 style={{
            fontFamily: FONT_DISP, fontWeight: 700,
            fontSize: isMobile ? 28 : 48, lineHeight: isMobile ? '36px' : '56px',
            color: C.navy, margin: '14px 0 16px', letterSpacing: '-0.01em',
          }}>Scoped, fixed, delivered in six weeks.</h2>
          <p style={{
            fontFamily: FONT_SANS, fontSize: isMobile ? 16 : 19, lineHeight: '30px', color: C.muted,
            margin: 0, maxWidth: 760,
          }}>
            Each engagement is scoped and priced before a line of code. No time-and-materials. No surprise invoices. One accountable partner from first call to handover.
          </p>
        </div>
        <div style={{ position: 'relative' }}>
          {!isMobile && (
            <>
              <div style={{
                position: 'absolute', left: 0, right: 0, top: 18,
                height: 1, background: C.borderWarm,
              }} />
              <div style={{
                position: 'absolute', left: 0, top: 18, height: 1,
                background: C.navy,
                width: shown ? '100%' : '0%',
                transition: 'width 1600ms cubic-bezier(0.2,0.8,0.2,1) 200ms',
              }} />
            </>
          )}
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : 'repeat(4, 1fr)',
            gap: isMobile ? 32 : 24,
          }}>
            {steps.map((s, i) => (
              <div key={i} style={{
                display: 'flex', flexDirection: 'column', gap: 8,
                paddingTop: isMobile ? 0 : 52, position: 'relative',
                borderLeft: isMobile ? `2px solid ${C.borderWarm}` : 'none',
                paddingLeft: isMobile ? 20 : 0,
              }}>
                {!isMobile && (
                  <span style={{
                    position: 'absolute', top: 10, left: 0,
                    width: 18, height: 18, borderRadius: '50%', background: '#fff',
                    border: `2px solid ${C.navy}`,
                    transform: shown ? 'scale(1)' : 'scale(0)',
                    transition: `transform 400ms cubic-bezier(0.2,0.8,0.2,1) ${300 + i * 180}ms`,
                  }} />
                )}
                <div style={{
                  fontFamily: FONT_SANS, fontWeight: 700, fontSize: 12,
                  letterSpacing: '0.12em', textTransform: 'uppercase', color: C.sage,
                }}>{s.w}</div>
                <div style={{
                  fontFamily: FONT_DISP, fontWeight: 700, fontSize: 22, lineHeight: '28px', color: C.navy,
                }}>{s.t}</div>
                <p style={{
                  fontFamily: FONT_SANS, fontSize: 14, lineHeight: '22px', color: C.muted, margin: 0,
                }}>{s.b}</p>
              </div>
            ))}
          </div>
        </div>
        <div style={{
          marginTop: isMobile ? 48 : 80, padding: isMobile ? '24px 20px' : '28px 32px',
          background: C.warm, borderRadius: 12,
          display: 'flex', alignItems: isMobile ? 'flex-start' : 'center',
          flexDirection: isMobile ? 'column' : 'row',
          justifyContent: 'space-between', gap: isMobile ? 20 : 32,
        }}>
          <div>
            <div style={{ fontFamily: FONT_SANS, fontWeight: 700, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.sage, marginBottom: 6 }}>
              Typical engagement
            </div>
            <div style={{ fontFamily: FONT_DISP, fontWeight: 700, fontSize: isMobile ? 18 : 24, color: C.navy }}>
              Fixed-scope, fixed-price · From R64,000 · 4–8 weeks
            </div>
          </div>
          <Button variant="navy" size="md" href="#contact">Request a scoping call</Button>
        </div>
      </div>
    </section>
  );
}

/* --- Final CTA -------------------------------------------------- */
function FinalCta() {
  const w = useWindowWidth();
  const isMobile = w <= 768;
  return (
    <section id="contact" style={{ background: C.navy, padding: isMobile ? '80px 0' : '120px 0', position: 'relative', overflow: 'hidden' }}>
      <HubAndSpokeBg />
      <div style={{
        maxWidth: 1100, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28, textAlign: 'center',
        position: 'relative',
      }}>
        <Eyebrow>Ready to talk?</Eyebrow>
        <h2 style={{
          fontFamily: FONT_DISP, fontWeight: 700,
          fontSize: isMobile ? 36 : 56, lineHeight: isMobile ? '44px' : '64px',
          color: '#fff', margin: 0, maxWidth: 980, letterSpacing: '-0.01em',
        }}>What's breaking in your reporting today?</h2>
        <p style={{
          fontFamily: FONT_SANS, fontSize: isMobile ? 16 : 19, lineHeight: '30px', color: C.navyMuted,
          margin: 0, maxWidth: 720,
        }}>
          A 30-minute call. No deck. We'll talk about the workflow and whether Key Metrics fits. If it doesn't, I'll tell you what does.
        </p>
        <div style={{ display: 'flex', gap: 16, marginTop: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          <Button variant="primary" size="lg" href="mailto:insights@keymetrics.live">Book a 30-min call</Button>
          <Button variant="outline_white" size="lg" href="mailto:insights@keymetrics.live">insights@keymetrics.live</Button>
        </div>
      </div>
    </section>
  );
}
function HubAndSpokeBg() {
  /* Large, faint hub-and-spoke motif behind the CTA */
  return (
    <svg width="720" height="720" viewBox="0 0 100 100" style={{
      position: 'absolute', right: -160, top: -160, opacity: 0.08, pointerEvents: 'none',
    }}>
      <g stroke="#fff" strokeWidth="0.3" fill="none">
        {Array.from({ length: 7 }).map((_, i) => {
          const a = (i / 7) * Math.PI * 2;
          const x = 50 + Math.cos(a) * 36, y = 50 + Math.sin(a) * 36;
          return <line key={i} x1="50" y1="50" x2={x} y2={y} />;
        })}
      </g>
      {Array.from({ length: 7 }).map((_, i) => {
        const a = (i / 7) * Math.PI * 2;
        const x = 50 + Math.cos(a) * 36, y = 50 + Math.sin(a) * 36;
        return <circle key={i} cx={x} cy={y} r="2.8" fill="#fff" />;
      })}
      <circle cx="50" cy="50" r="4.2" fill="#E2733B" />
    </svg>
  );
}

Object.assign(window, { Differentiators, CaseStudy, Engagement, FinalCta });