/* Patterns — real surfaces showing the system applied */

function PatternFrame({ title, children, tall }) {
  return (
    <div style={{
      border: '1px solid var(--border-secondary)', borderRadius: 16,
      overflow: 'hidden', background: 'var(--bg-secondary)',
    }}>
      <div style={{
        padding: '14px 20px', borderBottom: '1px solid var(--border-tertiary)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        background: 'var(--bg-primary)',
      }}>
        <div style={{ fontSize: 14, fontWeight: 600 }}>{title}</div>
        <div style={{ display: 'flex', gap: 4 }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--neutral-300)' }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--neutral-300)' }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--neutral-300)' }} />
        </div>
      </div>
      <div style={{ padding: 32, minHeight: tall ? 520 : 'auto' }}>
        {children}
      </div>
    </div>
  );
}

/* Marketing header */
function MarketingHero() {
  return (
    <div style={{
      background: 'var(--brand-600)', color: '#fff',
      borderRadius: 12, padding: 48, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', top: -40, right: -40, opacity: .2 }}>
        <ArrowMark size={260} fill="var(--brand-500)" />
      </div>
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginBottom: 40 }}>
          <img src="assets/logo-primary-reverse.png" alt="NR" style={{ height: 22 }} />
          <div style={{ height: 16, width: 1, background: 'rgba(255,255,255,.2)' }} />
          <nav style={{ display: 'flex', gap: 24, fontSize: 14, color: 'var(--brand-200)' }}>
            <span>Platform</span><span>Verify</span><span>Partners</span><span>Docs</span>
          </nav>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
            <Btn size="sm" style={{ background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.2)' }}>Sign in</Btn>
            <Btn variant="accent" size="sm">Request demo</Btn>
          </div>
        </div>
        <div style={{ maxWidth: 680 }}>
          <Badge color="accent" variant="subtle" dot>4,500+ live projects · 26% avg saving</Badge>
          <h1 style={{ fontSize: 56, fontWeight: 600, letterSpacing: '-0.028em', lineHeight: 1.05, margin: '20px 0 0' }}>
            Plan, source, move and <span style={{ color: 'var(--accent-400)' }}>prove</span> your materials — all in one platform.
          </h1>
          <p style={{ fontSize: 18, color: 'var(--brand-200)', lineHeight: 1.55, marginTop: 20 }}>
            Nexus ReGen is the UK's materials management platform for construction.
            Save 26% on materials costs while becoming audit-ready by default.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
            <Btn variant="accent" size="lg">Book a demo</Btn>
            <Btn size="lg" style={{ background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.2)' }}>See the platform →</Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Dashboard */
function Dashboard() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 0,
      border: '1px solid var(--border-secondary)', borderRadius: 12, overflow: 'hidden', background: 'var(--bg-primary)' }}>
      {/* Sidebar */}
      <aside style={{ background: 'var(--brand-700)', color: '#fff', padding: 20, minHeight: 520 }}>
        <img src="assets/logo-primary-reverse.png" alt="NR" style={{ height: 18, marginBottom: 32 }} />
        {[
          { n: 'Overview', a: true },
          { n: 'Plan' },
          { n: 'Source' },
          { n: 'Move' },
          { n: 'Prove' },
          { n: 'Projects' },
          { n: 'Reports' },
          { n: 'Settings' },
        ].map(item => (
          <div key={item.n} style={{
            padding: '8px 12px', borderRadius: 6, marginBottom: 2,
            background: item.a ? 'rgba(255,255,255,.08)' : 'transparent',
            color: item.a ? '#fff' : 'var(--brand-200)',
            fontSize: 14, fontWeight: item.a ? 600 : 400,
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999,
              background: item.a ? 'var(--accent-400)' : 'transparent' }} />
            {item.n}
          </div>
        ))}
      </aside>

      {/* Main */}
      <main style={{ padding: 32, background: 'var(--bg-secondary)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-quaternary)', letterSpacing: '.08em', textTransform: 'uppercase' }}>Portfolio overview</div>
            <h2 style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', margin: '4px 0 0' }}>Good afternoon, Jonathan.</h2>
            <div style={{ fontSize: 14, color: 'var(--text-tertiary)', marginTop: 4 }}>18 April 2026 · 12 active projects · 2 need attention</div>
          </div>
          <Btn variant="primary" size="md">+ New project</Btn>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 20 }}>
          {[
            { l: 'Saved this quarter', n: '£182k', sub: '26% vs baseline' },
            { l: 'Diverted from landfill', n: '4,280t', sub: 'Across 12 projects' },
            { l: 'Audit-ready evidence', n: '100%', sub: 'DEFRA DWT aligned' },
          ].map(k => (
            <Card key={k.l} pad={20}>
              <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--text-tertiary)' }}>{k.l}</div>
              <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 8,
                fontVariantNumeric: 'tabular-nums' }}>{k.n}</div>
              <div style={{ fontSize: 12, color: 'var(--text-quaternary)', marginTop: 4 }}>{k.sub}</div>
            </Card>
          ))}
        </div>

        <DataTable />
      </main>
    </div>
  );
}

/* Ledger receipt */
function LedgerReceipt() {
  return (
    <div style={{
      maxWidth: 520, margin: '0 auto',
      background: 'var(--bg-primary)', border: '1px solid var(--border-secondary)', borderRadius: 12,
      overflow: 'hidden', boxShadow: 'var(--shadow-lg)',
    }}>
      <div style={{ background: 'var(--brand-600)', color: '#fff', padding: 24, position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', color: 'var(--accent-400)' }}>LEDGER ENTRY</div>
            <div style={{ fontSize: 20, fontWeight: 600, marginTop: 8, fontFamily: 'var(--font-mono)' }}>NR-2026-04-18-4102</div>
          </div>
          <ArrowMark size={32} fill="var(--accent-400)" />
        </div>
      </div>
      <div style={{ padding: 24 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 16, padding: '8px 0' }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--text-quaternary)', fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase' }}>From</div>
            <div style={{ fontSize: 15, fontWeight: 600, marginTop: 4 }}>Newcastle Quays</div>
            <div style={{ fontSize: 13, color: 'var(--text-tertiary)' }}>Site A · Weighbridge 2</div>
          </div>
          <div style={{ fontSize: 20, color: 'var(--brand-500)' }}>→</div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 11, color: 'var(--text-quaternary)', fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase' }}>To</div>
            <div style={{ fontSize: 15, fontWeight: 600, marginTop: 4 }}>Gateshead Link</div>
            <div style={{ fontSize: 13, color: 'var(--text-tertiary)' }}>Site B · Bay 3</div>
          </div>
        </div>
        <div style={{ height: 1, background: 'var(--border-tertiary)', margin: '20px 0' }} />
        {[
          ['Material', 'Crushed concrete 6F2'],
          ['Weight', '28.4t'],
          ['Departed', '18 Apr · 08:42'],
          ['Arrived', '18 Apr · 11:17'],
          ['Haulier', 'Tyneside Aggregates Ltd'],
          ['Driver', 'B. Okafor · HGV Class 2'],
        ].map(([k, v]) => (
          <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: 14 }}>
            <span style={{ color: 'var(--text-tertiary)' }}>{k}</span>
            <span style={{ fontFamily: k === 'Weight' || k.includes('ed') ? 'var(--font-mono)' : 'inherit',
              fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>{v}</span>
          </div>
        ))}
        <div style={{ height: 1, background: 'var(--border-tertiary)', margin: '20px 0' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Badge color="success" dot>Verified · 3 signatures</Badge>
          <span style={{ fontSize: 12, color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)' }}>0x7a2f…c9e1</span>
        </div>
      </div>
    </div>
  );
}

function S_Patterns() {
  return (
    <Section
      id="patterns"
      eyebrow="07 · Patterns"
      title="The system, applied."
      intro="How the tokens, type and components come together on real surfaces — marketing, product and document output."
    >
      <Block title="Marketing hero" note="Brand navy, one accent, one image-style CTA pair.">
        <PatternFrame title="nexusregen.com / home">
          <MarketingHero />
        </PatternFrame>
      </Block>

      <Block title="Product dashboard" note="Dense, utilitarian, navy chrome + white canvas.">
        <PatternFrame title="app.nexusregen.com / dashboard" tall>
          <Dashboard />
        </PatternFrame>
      </Block>

      <Block title="Ledger receipt" note="Output document — used in exports, PDFs, partner systems.">
        <PatternFrame title="Document · PDF-ready">
          <LedgerReceipt />
        </PatternFrame>
      </Block>
    </Section>
  );
}
window.S_Patterns = S_Patterns;