/* Overview / Hero section */

function S_Overview() {
  const meta = [
    { k: 'Tagline',  v: 'Materially smarter construction.' },
    { k: 'Category', v: 'UK materials management platform' },
    { k: 'Pillars',  v: 'Plan · Source · Move · Prove' },
    { k: 'System',   v: 'v0.1 · April 2026' },
  ];
  return (
    <section data-section="overview" data-screen-label="01 Overview" id="overview" style={{ padding: 0 }}>
      {/* Hero band — brand navy with arrow motif */}
      <div style={{
        background: 'var(--brand-600)',
        color: '#fff',
        position: 'relative',
        overflow: 'hidden',
        padding: '80px 40px 96px',
        borderBottom: '1px solid var(--brand-700)',
      }}>
        {/* Decorative arrows */}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          <div style={{ position: 'absolute', top: -60, right: -80, opacity: 0.09 }}>
            <ArrowMark size={520} fill="var(--accent-400)" />
          </div>
          <div style={{ position: 'absolute', bottom: -140, left: -60, opacity: 0.18 }}>
            <ArrowMark size={360} fill="var(--brand-500)" />
          </div>
        </div>

        <div style={{ position: 'relative', maxWidth: 1160, margin: '0 auto' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 12px',
            background: 'rgba(255,255,255,.08)', border: '1px solid rgba(255,255,255,.16)',
            borderRadius: 999, fontSize: 12, fontWeight: 500, letterSpacing: '.06em' }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--accent-400)' }} />
            DESIGN SYSTEM · v0.1
          </div>

          <h1 style={{
            fontSize: 'clamp(48px, 6.5vw, 84px)',
            lineHeight: 1.02,
            fontWeight: 600,
            letterSpacing: '-0.03em',
            margin: '24px 0 0',
            maxWidth: 980,
          }}>
            <span style={{ color: 'var(--accent-400)' }}>Materially smarter</span><br />
            construction.
          </h1>

          <p style={{ fontSize: 20, lineHeight: 1.5, color: 'var(--brand-200)', marginTop: 24, maxWidth: 640 }}>
            The brand and design system for Nexus ReGen — the UK's materials management
            platform for construction. One place to plan, source, move and prove every
            material on every project.
          </p>

          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 40 }}>
            <a href="#messaging" style={{ textDecoration: 'none' }}>
              <Btn variant="accent" size="lg" iconRight={<span style={{ fontWeight: 700 }}>→</span>}>
                Read the messaging
              </Btn>
            </a>
            <a href="#assets" style={{ textDecoration: 'none' }}>
              <Btn
                size="lg"
                style={{
                  background: 'rgba(255,255,255,.06)',
                  color: '#fff',
                  border: '1px solid rgba(255,255,255,.2)',
                  boxShadow: 'none',
                }}
              >
                Download assets
              </Btn>
            </a>
          </div>

          {/* Meta strip */}
          <div style={{
            marginTop: 64, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,.12)',
            display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 24,
          }}>
            {meta.map(m => (
              <div key={m.k}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em',
                  textTransform: 'uppercase', color: 'var(--brand-300)' }}>{m.k}</div>
                <div style={{ fontSize: 15, fontWeight: 500, marginTop: 6 }}>{m.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Principles strip */}
      <div style={{ padding: '56px 40px', maxWidth: 1240 }}>
        <div style={S.eyebrow}>
          <span style={{ width: 6, height: 6, background: 'var(--brand-500)', borderRadius: 2 }} />
          Design principles
        </div>
        <h2 style={{ ...S.h2, marginTop: 12 }}>Four rules we design around.</h2>
        <p style={{ ...S.intro, maxWidth: 640 }}>
          The product is construction-native and proof-led. The brand reads the same — calm,
          credible, and built for people who need the answer now.
        </p>

        <div style={{
          marginTop: 40,
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 16,
        }}>
          {[
            { n: '01', t: 'Evidence over ornament', d: 'Specific numbers — 26% average saving, £255k Leeds, 2,196 tCO₂e — earn trust faster than adjectives. Every claim ships with a receipt.' },
            { n: '02', t: 'Calm by default', d: 'Navy and white do the heavy lifting. Aureolin yellow is reserved for a single action or callout per view — never two.' },
            { n: '03', t: 'Built for the field', d: 'Type sizes, hit targets and contrast tested for gloved hands, dusty screens and split-second decisions on a live site.' },
            { n: '04', t: 'One system, every surface', d: 'A haulier form, a housebuilder dashboard and an investor deck share the same grid, type ramp and token names. No forks.' },
          ].map(p => (
            <Card key={p.n} pad={24} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--brand-500)', fontFamily: 'var(--font-mono)' }}>{p.n}</div>
              <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em' }}>{p.t}</div>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-tertiary)' }}>{p.d}</div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}
window.S_Overview = S_Overview;