/* Messaging & positioning — what we say.
   Source of truth: Notion "Nexus ReGen — Messaging & Positioning". */

function Boilerplate({ label, chars, body, note }) {
  const [copied, setCopied] = useState(false);
  const onCopy = () => {
    copy(body);
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };
  return (
    <Card pad={0} style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <div style={{
        padding: '14px 20px', display: 'flex', justifyContent: 'space-between',
        alignItems: 'center', borderBottom: '1px solid var(--border-tertiary)',
        background: 'var(--bg-secondary)',
      }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{label}</div>
          {note && <div style={{ fontSize: 12, color: 'var(--text-quaternary)', marginTop: 2 }}>{note}</div>}
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-quaternary)' }}>{chars}</span>
          <button onClick={onCopy} style={{
            border: '1px solid var(--border-primary)',
            background: copied ? 'var(--brand-600)' : 'var(--bg-primary)',
            color: copied ? '#fff' : 'var(--text-secondary)',
            padding: '6px 12px', borderRadius: 6, fontWeight: 600, fontSize: 12,
            transition: 'all .15s',
          }}>{copied ? '✓ Copied' : 'Copy'}</button>
        </div>
      </div>
      <div style={{ padding: 20, fontSize: 15, lineHeight: 1.6, color: 'var(--text-secondary)', flex: 1 }}>
        {body}
      </div>
    </Card>
  );
}

function PillarCard({ n, name, headline, what, replaces, proof, tint }) {
  return (
    <Card pad={0} style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <div style={{
        background: tint || 'var(--brand-600)',
        color: '#fff',
        padding: '20px 24px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
      }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em',
            color: 'var(--accent-400)' }}>{n} · {name.toUpperCase()}</div>
          <div style={{ fontSize: 22, fontWeight: 600, marginTop: 6, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
            {headline}
          </div>
        </div>
        <ArrowMark size={40} fill="var(--accent-400)" />
      </div>
      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em',
            color: 'var(--text-quaternary)', textTransform: 'uppercase' }}>What it does</div>
          <div style={{ fontSize: 14, color: 'var(--text-secondary)', marginTop: 4, lineHeight: 1.55 }}>{what}</div>
        </div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em',
            color: 'var(--text-quaternary)', textTransform: 'uppercase' }}>Replaces</div>
          <div style={{ fontSize: 14, color: 'var(--text-tertiary)', marginTop: 4, lineHeight: 1.55 }}>{replaces}</div>
        </div>
        <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '1px dashed var(--border-secondary)' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em',
            color: 'var(--brand-500)', textTransform: 'uppercase' }}>Key proof</div>
          <div style={{ fontSize: 14, color: 'var(--text-primary)', marginTop: 4, fontWeight: 500 }}>{proof}</div>
        </div>
      </div>
    </Card>
  );
}

function ProofStat({ value, label }) {
  return (
    <div style={{
      padding: 24, background: 'var(--bg-primary)',
      border: '1px solid var(--border-secondary)', borderRadius: 12,
    }}>
      <div style={{ fontSize: 40, fontWeight: 600, letterSpacing: '-0.02em',
        color: 'var(--brand-600)', fontVariantNumeric: 'tabular-nums' }}>{value}</div>
      <div style={{ fontSize: 13, color: 'var(--text-tertiary)', marginTop: 6, lineHeight: 1.4 }}>{label}</div>
    </div>
  );
}

function PersonaRow({ name, sub, pain, lead, proof }) {
  return (
    <tr>
      <td style={{ padding: '18px 20px', borderBottom: '1px solid var(--border-tertiary)',
        verticalAlign: 'top', minWidth: 180 }}>
        <div style={{ fontSize: 14, fontWeight: 600 }}>{name}</div>
        <div style={{ fontSize: 12, color: 'var(--text-quaternary)', marginTop: 4 }}>{sub}</div>
      </td>
      <td style={{ padding: '18px 20px', borderBottom: '1px solid var(--border-tertiary)',
        verticalAlign: 'top', fontSize: 13, color: 'var(--text-tertiary)', lineHeight: 1.5, fontStyle: 'italic' }}>
        "{pain}"
      </td>
      <td style={{ padding: '18px 20px', borderBottom: '1px solid var(--border-tertiary)',
        verticalAlign: 'top', fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
        {lead}
      </td>
      <td style={{ padding: '18px 20px', borderBottom: '1px solid var(--border-tertiary)',
        verticalAlign: 'top', fontSize: 13, color: 'var(--text-primary)', lineHeight: 1.5, fontWeight: 500 }}>
        {proof}
      </td>
    </tr>
  );
}

function S_Messaging() {
  return (
    <Section
      id="messaging"
      eyebrow="08 · Messaging"
      title="What we say."
      intro="The single reference for how Nexus ReGen describes itself — internally and externally. Everyone on the team should be able to work from this."
    >
      {/* The messaging house — the stack */}
      <Block title="The messaging house" note="Tagline → one-liner → three pillars of value. Everything else hangs off this.">
        <Card pad={0} style={{ overflow: 'hidden', background: 'var(--brand-600)', color: '#fff', border: 'none' }}>
          <div style={{ position: 'relative', padding: '64px 40px 56px', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: -80, right: -80, opacity: .1 }}>
              <ArrowMark size={520} fill="var(--accent-400)" />
            </div>
            <div style={{ position: 'relative', maxWidth: 900 }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em',
                color: 'var(--accent-400)' }}>TAGLINE</div>
              <div style={{ fontSize: 56, fontWeight: 600, letterSpacing: '-0.028em', marginTop: 8, lineHeight: 1.04 }}>
                Materially smarter construction.
              </div>

              <div style={{ marginTop: 36, fontSize: 11, fontWeight: 700, letterSpacing: '.14em',
                color: 'var(--accent-400)' }}>ONE-LINER</div>
              <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.01em', marginTop: 8, lineHeight: 1.35, color: 'var(--brand-100)' }}>
                One platform to plan, source, move and prove every material on every project.
              </div>
            </div>
          </div>

          {/* Three value pillars (compliance / cost / intelligence) */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
            borderTop: '1px solid rgba(255,255,255,.12)' }}>
            {[
              {
                label: 'Compliance',
                role: 'The problem we solve',
                head: 'Every tonne tracked. Every decision auditable.',
                body: 'Construction compliance is getting stricter. Nexus ReGen gives you one auditable system of record for every material movement — built around UK regulatory frameworks so you\'re always covered, not catching up.',
              },
              {
                label: 'Cost',
                role: 'The value we deliver',
                head: 'From cost centre to competitive advantage.',
                body: 'Clients save 26% on average by sourcing smarter, reusing more and eliminating reactive procurement. The platform pays for itself.',
              },
              {
                label: 'Intelligence',
                role: 'The moat we build',
                head: 'Smarter decisions, automatically.',
                body: 'AI reads your site data, matches supply to demand, and surfaces opportunities you\'d never find manually. The more you use it, the smarter it gets.',
              },
            ].map((p, i, arr) => (
              <div key={p.label} style={{
                padding: 28,
                borderRight: i < arr.length - 1 ? '1px solid rgba(255,255,255,.12)' : 'none',
                background: 'rgba(255,255,255,.03)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--accent-400)' }}>{p.label}</div>
                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,.55)', fontStyle: 'italic' }}>— {p.role}</div>
                </div>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 10, color: '#fff', lineHeight: 1.3 }}>
                  {p.head}
                </div>
                <div style={{ fontSize: 13, color: 'var(--brand-200)', marginTop: 10, lineHeight: 1.55 }}>
                  {p.body}
                </div>
              </div>
            ))}
          </div>
        </Card>
      </Block>

      {/* The two-beat pitch */}
      <Block title="The two-beat pitch" note="Compliance opens the door. Cost closes the deal. In that order.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: 16 }}>
          <Card pad={28} style={{ background: 'var(--bg-primary)', borderLeft: '3px solid var(--signal-red, #FF331F)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em',
              color: '#B42318', textTransform: 'uppercase' }}>Beat 1 · The problem</div>
            <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 10, lineHeight: 1.35, color: 'var(--text-primary)' }}>
              "Your compliance obligations are getting more complex and your current process won't scale."
            </div>
            <div style={{ fontSize: 13, color: 'var(--text-tertiary)', marginTop: 12, lineHeight: 1.55 }}>
              Door-opener. Creates urgency. Why they take the meeting.
            </div>
          </Card>
          <Card pad={28} style={{ background: 'var(--bg-primary)', borderLeft: '3px solid var(--accent-400)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em',
              color: 'var(--accent-800)', textTransform: 'uppercase' }}>Beat 2 · The value</div>
            <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 10, lineHeight: 1.35, color: 'var(--text-primary)' }}>
              "And the platform that solves your compliance problem also saves you 26% on materials costs."
            </div>
            <div style={{ fontSize: 13, color: 'var(--text-tertiary)', marginTop: 12, lineHeight: 1.55 }}>
              Deal-closer. Proves ROI. Why they sign.
            </div>
          </Card>
        </div>
      </Block>

      {/* Four pillars — Plan, Source, Move, Prove */}
      <Block title="The four pillars" note="Plan → Source → Move → Prove. Always in that order — it's a lifecycle, not a grab-bag.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 12 }}>
          <PillarCard
            n="01" name="Plan"
            headline="Know what you've got before you move a tonne."
            what="AI reads your project data — including SI reports — and builds a live material balance. Surplus, deficit, reuse opportunities, in minutes instead of weeks."
            replaces="Manual document reading, spreadsheet material balances"
            proof="Hours of document analysis → minutes."
          />
          <PillarCard
            n="02" name="Source"
            headline="The right material, matched to the right job."
            what="A marketplace and smart-matching engine. Connects you with verified suppliers, hauliers and direct reuse opportunities — matched by spec, location and price."
            replaces="Phone calls, brokers, reactive procurement"
            proof="26% avg cost saving vs traditional sourcing."
          />
          <PillarCard
            n="03" name="Move"
            headline="Every tonne tracked, with paperwork built in."
            what="Track every movement across every site. Digital waste transfer documentation and compliance paperwork generated as the work happens."
            replaces="Paper WTNs, fragmented logs, no visibility"
            proof="Fewer empty miles, full traceability."
          />
          <PillarCard
            n="04" name="Prove"
            headline="Audit-ready from day one, not day last."
            what="Compliance, carbon and cost reports generated automatically — aligned with CL:AIRE DoW CoP, BS 3882 and the emerging DEFRA Digital Waste Tracking mandate."
            replaces="End-of-project scramble for audit evidence"
            proof="Defensible ESG and compliance evidence from day one."
          />
        </div>

        <div style={{ marginTop: 16 }}>
          <Card pad={20} style={{ background: 'var(--bg-secondary)' }}>
            <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', flexWrap: 'wrap' }}>
              <div style={{ fontSize: 22 }}>⚠️</div>
              <div style={{ flex: 1, minWidth: 260 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>Be honest about roadmap.</div>
                <div style={{ fontSize: 13, color: 'var(--text-tertiary)', marginTop: 4, lineHeight: 1.55 }}>
                  <b>Move</b> is today's thinnest pillar — Material Movement Tracking and Project DataPoint are partly in development.
                  Don't oversell live capability that isn't yet. <b>Plan</b> is the most differentiated (AI document ingestion is a real moat).
                  <b> Prove</b> is increasingly the door-opener as regulatory pressure tightens. Lead with it when the buyer has an ESG or legal angle.
                </div>
              </div>
            </div>
          </Card>
        </div>
      </Block>

      {/* One-liner variants — copy to clipboard */}
      <Block title="One-liner variants" note="Same story, different rooms. Pick the line that fits the moment.">
        <Card pad={0}>
          {[
            ['Canonical / formal', 'One platform to plan, source, move and prove every material on every project.'],
            ['Hero headline', 'Plan, source, move and prove your materials — all in one platform.'],
            ['Construction-native', 'One platform to plan, source, move and prove every tonne across every project.'],
            ['Brand / slides / video', 'Plan it. Source it. Move it. Prove it.'],
            ['Enterprise / lifecycle', 'One platform to plan, source, move and prove your materials — from first estimate to final report.'],
            ['With attitude', 'Plan, source, move and prove. Where construction materials get managed properly.'],
          ].map(([ctx, line], i, arr) => (
            <div key={ctx}
              onClick={() => copy(line)}
              style={{
                display: 'grid', gridTemplateColumns: '220px 1fr auto', gap: 20,
                alignItems: 'center', padding: '16px 20px',
                borderBottom: i < arr.length - 1 ? '1px solid var(--border-tertiary)' : 'none',
                cursor: 'pointer',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{ctx}</div>
              <div style={{ fontSize: 16, color: 'var(--text-secondary)', lineHeight: 1.45, fontStyle: 'italic' }}>"{line}"</div>
              <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)',
                color: 'var(--text-quaternary)' }}>Click to copy</div>
            </div>
          ))}
        </Card>
      </Block>

      {/* Headline proof */}
      <Block title="Headline proof" note="The specific numbers we use. Update them in one pass if anything moves.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12, marginBottom: 16 }}>
          <ProofStat value="4,500+" label="Live projects on the platform" />
          <ProofStat value="£320B" label="Project value on the platform" />
          <ProofStat value="260+" label="Organisations on the network" />
          <ProofStat value="26%" label="Avg cost saving on materials" />
          <ProofStat value="2,196" label="tCO₂e avoided on a single link-up" />
        </div>

        <Card pad={0}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
            background: 'var(--bg-secondary)',
            padding: '12px 20px',
            fontSize: 11, fontWeight: 700, letterSpacing: '.08em',
            color: 'var(--text-quaternary)', textTransform: 'uppercase',
            borderBottom: '1px solid var(--border-tertiary)',
          }}>
            <div>Project</div><div>Result</div><div>Best used for</div>
          </div>
          {[
            ['Leeds project', '£255k saved on a single project', 'Commercial / cost-led audiences'],
            ['Reuse link-up', '£300k saved, 30,000 m³ reused', 'Scale of opportunity'],
            ['Reading project', '£210k saved through reuse', 'Cost + reuse combined'],
            ['Topsoil reuse', '£36k saved · 210 tCO₂e avoided · 6,000 tonnes reused', 'Sustainability + operational'],
            ['Single carbon link-up', '2,196 tCO₂e avoided (≈ 1,400 cars off the road for a year)', 'Sustainability / ESG audiences'],
          ].map(([proj, result, use], i, arr) => (
            <div key={proj} style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
              padding: '16px 20px', gap: 16,
              borderBottom: i < arr.length - 1 ? '1px solid var(--border-tertiary)' : 'none',
              fontSize: 14, color: 'var(--text-secondary)',
            }}>
              <div style={{ fontWeight: 600, color: 'var(--text-primary)' }}>{proj}</div>
              <div>{result}</div>
              <div style={{ color: 'var(--text-tertiary)', fontSize: 13 }}>{use}</div>
            </div>
          ))}
        </Card>

        <div style={{ marginTop: 16 }}>
          <Card pad={20} style={{ background: 'var(--brand-50)', border: '1px solid var(--brand-100)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em',
              color: 'var(--brand-700)', textTransform: 'uppercase' }}>Approved named customers</div>
            <div style={{ fontSize: 15, color: 'var(--brand-800)', marginTop: 8, lineHeight: 1.55 }}>
              <b>Housebuilders:</b> Barratt Redrow, Taylor Wimpey, Miller Homes, Persimmon · <b>Infrastructure:</b> National Highways, HS2 / BBV (active engagement on Soil Nexus).
            </div>
            <div style={{ fontSize: 13, color: 'var(--text-tertiary)', marginTop: 8, fontStyle: 'italic' }}>
              Framing: "Three of the UK's top five housebuilders are already on the platform."
            </div>
          </Card>
        </div>
      </Block>

      {/* Audience / persona messaging */}
      <Block title="Who we talk to" note="Five personas plus a legal/compliance overlay. Lead with the right beat for the room.">
        <Card pad={0} style={{ overflow: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ background: 'var(--bg-secondary)' }}>
                <th style={{ padding: '12px 20px', textAlign: 'left', fontSize: 11, fontWeight: 700,
                  letterSpacing: '.08em', color: 'var(--text-quaternary)', textTransform: 'uppercase',
                  borderBottom: '1px solid var(--border-tertiary)' }}>Persona</th>
                <th style={{ padding: '12px 20px', textAlign: 'left', fontSize: 11, fontWeight: 700,
                  letterSpacing: '.08em', color: 'var(--text-quaternary)', textTransform: 'uppercase',
                  borderBottom: '1px solid var(--border-tertiary)' }}>Their pain (in their words)</th>
                <th style={{ padding: '12px 20px', textAlign: 'left', fontSize: 11, fontWeight: 700,
                  letterSpacing: '.08em', color: 'var(--text-quaternary)', textTransform: 'uppercase',
                  borderBottom: '1px solid var(--border-tertiary)' }}>Open with</th>
                <th style={{ padding: '12px 20px', textAlign: 'left', fontSize: 11, fontWeight: 700,
                  letterSpacing: '.08em', color: 'var(--text-quaternary)', textTransform: 'uppercase',
                  borderBottom: '1px solid var(--border-tertiary)' }}>Key proof</th>
              </tr>
            </thead>
            <tbody>
              <PersonaRow
                name="Commercial Director"
                sub="Primary buyer in residential developers. Signs contracts."
                pain="Materials costs keep going up, we're overpaying for disposal, and I can't see what's happening across our sites."
                lead="Your teams are sourcing reactively, site by site. One platform to plan, source, move and prove materials across every project — and our clients save 26% on average. And the platform that saves the money is the same one that keeps you audit-ready."
                proof="£255k Leeds · top-5 housebuilders"
              />
              <PersonaRow
                name="Sustainability Lead"
                sub="Secondary buyer or internal champion."
                pain="I know we should be reusing more material, but I can't prove what we've done, and nobody trusts my reports."
                lead="Nexus ReGen automatically tracks every tonne you reuse and generates the carbon, cost and compliance data to prove your impact — instead of estimating it. AI reads SI reports and surfaces reuse opportunities you'd never spot manually."
                proof="2,196 tCO₂e · DEFRA conversion factors · GHG Protocol"
              />
              <PersonaRow
                name="Quantity Surveyor / Buyer"
                sub="Operational buyer. Lives in spreadsheets, manages procurement day-to-day."
                pain="I'm ringing around for quotes, comparing apples to oranges, and half the time the material doesn't meet spec."
                lead="Replace the phone calls with one place to post what you need, get matched to verified suppliers, and compare quotes — standardised by spec, location and price. Every transaction builds your audit trail automatically."
                proof="£36k + 210 tCO₂e topsoil reuse · matched in minutes"
              />
              <PersonaRow
                name="Board / MD / CEO"
                sub="Cares about risk, reputation and strategic advantage."
                pain="I don't have visibility of materials across our portfolio, and I'm worried about regulatory risk I can't see."
                lead="Portfolio-wide visibility of every material movement, cost saving and compliance obligation — in one dashboard. Three of the UK's top five housebuilders are already on the platform; being early is a competitive advantage."
                proof="4,500+ projects · £320B · 260+ orgs"
              />
              <PersonaRow
                name="Suppliers / Hauliers"
                sub="Supply side — want to win work and fill capacity."
                pain="We only hear about opportunities through word of mouth. Half our trucks go back empty."
                lead="Get in front of thousands of live projects looking for exactly what you offer — matched by material, location and timing. Backload opportunities so your return journeys earn."
                proof="260+ orgs · direct RFQs · free to join"
              />
              <PersonaRow
                name="Legal / compliance buyer"
                sub="HS2, BBV, infrastructure programmes where legal obligation is the driver."
                pain="Schedule 16, duty of care, long-term liability on contaminated land."
                lead="One auditable system of record for every material decision on your programme. The cost and sustainability benefits are secondary — governance and traceability are the sale."
                proof="CL:AIRE DoW CoP · BS 3882 · DEFRA DWT-ready"
              />
            </tbody>
          </table>
        </Card>
      </Block>

      {/* Regulatory tailwind */}
      <Block title="The regulatory tailwind" note="Why urgency is real, and why Prove is increasingly the door-opener.">
        <Card pad={32} style={{ background: 'var(--brand-50)', border: '1px solid var(--brand-100)' }}>
          <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
            <div style={{ fontSize: 32, lineHeight: 1 }}>⚠️</div>
            <div>
              <div style={{ fontSize: 20, fontWeight: 600, color: 'var(--brand-700)', letterSpacing: '-0.01em' }}>
                Regulation is accelerating, not easing.
              </div>
              <div style={{ fontSize: 15, color: 'var(--brand-800)', marginTop: 10, lineHeight: 1.6, maxWidth: 900 }}>
                UK construction compliance is tightening — evolving waste regulations, Environment Agency enforcement,
                CL:AIRE DoW CoP, BS 3882, DEFRA Digital Waste Tracking. For some buyers (HS2, BBV, infrastructure programmes),
                legal obligation <i>is</i> the buying driver. Schedule 16, duty of care, long-term liability on contaminated land.
              </div>
              <div style={{ fontSize: 15, color: 'var(--brand-800)', marginTop: 12, lineHeight: 1.6, maxWidth: 900, fontWeight: 500 }}>
                Nexus ReGen is the system of record that gets teams ahead of it — not scrambling to catch up.
              </div>
            </div>
          </div>
        </Card>
      </Block>

      {/* Marketplace nuance */}
      <Block title="Talking about the marketplace" note="The nuance that matters — not the whole platform, and not denied.">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <Card pad={20} style={{ borderLeft: '3px solid var(--success-500)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', color: '#067647', textTransform: 'uppercase' }}>Say</div>
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--text-primary)' }}>
                "A marketplace sits at the heart of the platform — matching material surplus with demand, including direct reuse."
              </div>
              <div style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--text-primary)' }}>
                "Our marketplace is one of four core modules, alongside planning, movement tracking and compliance reporting."
              </div>
              <div style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--text-primary)' }}>
                "We match users who have material with users who need it — through direct reuse or nearby sourcing."
              </div>
            </div>
          </Card>
          <Card pad={20} style={{ borderLeft: '3px solid var(--error-500)', background: 'var(--bg-secondary)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', color: '#B42318', textTransform: 'uppercase' }}>Don't say</div>
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--text-tertiary)',
                textDecoration: 'line-through', textDecorationColor: 'rgba(180,35,24,.3)' }}>
                "We're not a marketplace."
              </div>
              <div style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--text-tertiary)',
                textDecoration: 'line-through', textDecorationColor: 'rgba(180,35,24,.3)' }}>
                "Nexus ReGen is a marketplace for construction materials."
              </div>
              <div style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--text-tertiary)',
                textDecoration: 'line-through', textDecorationColor: 'rgba(180,35,24,.3)' }}>
                "Digital platform for trading materials."
              </div>
            </div>
          </Card>
        </div>
      </Block>

      {/* Boilerplates library */}
      <Block title="Boilerplate library" note="Pre-approved, ready to paste. Click Copy on any block.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 12 }}>
          <Boilerplate
            label="10 words" chars="~70 chars"
            note="Footers, sponsor slides, one-line bios"
            body="Materially smarter construction — plan, source, move and prove every material."
          />
          <Boilerplate
            label="25 words" chars="~175 chars"
            note="Short bios, caption copy, panel intros"
            body="Nexus ReGen is the UK's materials management platform for construction. One place to plan, source, move and prove every material on every project."
          />
          <Boilerplate
            label="50 words" chars="~330 chars"
            note="Directories, award submissions, speaker profiles"
            body="Nexus ReGen is the UK's materials management platform for construction. We give teams one place to plan, source, move and prove every material on every project — cutting costs, simplifying compliance and making reuse the default. On average, our clients save 26% on materials costs while reducing carbon."
          />
          <Boilerplate
            label="100 words" chars="~670 chars"
            note="Proposals, press releases, about pages"
            body={`Nexus ReGen is the UK's materials management platform for construction, giving teams one place to plan, source, move and prove every material on every project. The platform reads project data to identify opportunities, matches supply with demand across a nationwide network — including direct reuse — tracks every tonne with built-in digital documentation, and generates compliance, carbon and cost reports automatically. Used by leading housebuilders, infrastructure programmes and 260+ organisations across 4,500+ live projects, the platform delivers an average 26% cost saving — while making teams audit-ready and carbon-accountable from day one.`}
          />
          <Boilerplate
            label="Conversational" chars="Pub / DM"
            note="When someone asks what you do"
            body="We make a platform for construction companies to manage their materials properly — where they come from, where they go, what they cost, whether you're compliant. Our clients save about 26% on materials costs, and everything's tracked and auditable from the start."
          />
          <Boilerplate
            label="Investor one-liner" chars="For warm intros"
            note="VC office hours, teaser first line"
            body="Nexus ReGen is building the system of record for how UK construction manages its materials — a B2B SaaS platform with a marketplace at its heart, powering 4,500+ live projects across £320B of project value. 26% average cost savings, regulatory tailwinds from DEFRA Digital Waste Tracking, and three of the UK's top five housebuilders already on."
          />
          <Boilerplate
            label="LinkedIn company About" chars="Paste verbatim"
            note="For the LinkedIn Company Page"
            body={`Materially smarter construction.

Nexus ReGen is the UK's materials management platform for construction. One place to plan, source, move and prove every material on every project — from first estimate to final report.

🔹 Plan — AI reads your project data and identifies surplus, deficit and reuse opportunities in minutes.
🔹 Source — our marketplace and smart-matching connect you with verified suppliers, hauliers and direct reuse opportunities.
🔹 Move — track every tonne across every site, with digital paperwork built in.
🔹 Prove — compliance, carbon and cost reports generated automatically.

Used by leading housebuilders, infrastructure programmes and 260+ organisations. 4,500+ live projects. £320B project value. 26% average cost saving.

Compliance by default. Carbon accounted for. Materials managed properly.`}
          />
          <Boilerplate
            label="Press release boilerplate" chars="End-of-release"
            note='"About Nexus ReGen" block'
            body="About Nexus ReGen. Nexus ReGen is the UK's materials management platform for construction. The platform gives teams one place to plan, source, move and prove every material on every project — cutting costs, simplifying compliance, and making reuse the default. Nexus ReGen is used by leading housebuilders, infrastructure programmes and 260+ organisations across 4,500+ live projects with a combined value of £320B. Clients save 26% on materials costs on average while becoming audit-ready and carbon-accountable from day one. For more information, visit nexusregen.com."
          />
        </div>
      </Block>

      {/* Email signature taglines */}
      <Block title="Email signature taglines" note="Pick one. Rotate if you like.">
        <Card pad={0}>
          {[
            'Materially smarter construction.',
            'Plan. Source. Move. Prove.',
            'One platform for every material on every project.',
            'The system of record for construction materials.',
            'Making reuse the default in construction.',
          ].map((line, i, arr) => (
            <div key={line}
              onClick={() => copy(line)}
              style={{
                padding: '14px 20px', cursor: 'pointer',
                borderBottom: i < arr.length - 1 ? '1px solid var(--border-tertiary)' : 'none',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{ fontSize: 16, color: 'var(--text-primary)', fontStyle: 'italic' }}>"{line}"</div>
              <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-quaternary)' }}>Click to copy</div>
            </div>
          ))}
        </Card>
      </Block>
    </Section>
  );
}
window.S_Messaging = S_Messaging;