/* Voice & tone — follows the Brand Voice & Writing Guide */

function VoiceCompare({ good, bad }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
      <Card pad={20} style={{ borderLeft: '3px solid var(--success-500)' }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', color: '#067647', textTransform: 'uppercase' }}>We write</div>
        <div style={{ fontSize: 17, fontWeight: 500, color: 'var(--text-primary)', marginTop: 10, lineHeight: 1.45 }}>
          "{good}"
        </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' }}>Not this</div>
        <div style={{ fontSize: 17, fontWeight: 500, color: 'var(--text-tertiary)', marginTop: 10, lineHeight: 1.45,
          textDecoration: 'line-through', textDecorationColor: 'rgba(180,35,24,.3)', textDecorationThickness: '1px' }}>
          "{bad}"
        </div>
      </Card>
    </div>
  );
}

function BannedRow({ bad, good }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr auto 1fr',
      alignItems: 'center', gap: 16,
      padding: '14px 0', borderBottom: '1px solid var(--border-tertiary)',
    }}>
      <div style={{
        fontSize: 14, color: 'var(--text-tertiary)',
        textDecoration: 'line-through', textDecorationColor: 'rgba(240,68,56,.5)',
      }}>{bad}</div>
      <div style={{ fontSize: 14, color: 'var(--text-quaternary)' }}>→</div>
      <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-primary)' }}>{good}</div>
    </div>
  );
}

function S_Voice() {
  return (
    <Section
      id="voice"
      eyebrow="09 · Voice"
      title="How we sound."
      intro="Confident, plain-English, construction-native — with enough wit to feel human, enough rigour to feel credible, and enough ambition to feel like the category-definer we're becoming."
    >
      {/* One-sentence voice summary */}
      <Block>
        <Card variant="inset" pad={32} style={{
          display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start',
        }}>
          <Eyebrow>Voice in one sentence</Eyebrow>
          <div style={{ fontSize: 26, lineHeight: 1.35, fontWeight: 500, letterSpacing: '-0.01em', color: 'var(--text-primary)', maxWidth: 780 }}>
            We write like someone who's been on site — not someone who's read about it.
          </div>
        </Card>
      </Block>

      {/* Five voice principles */}
      <Block title="Five voice principles" note="The rulebook for every word we publish.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 12 }}>
          {[
            {
              n: '01',
              t: 'Plain English, construction-native',
              d: 'Use the words our customers use — tonnes, loads, SI reports, WTNs, backloads, spec, surplus. Avoid tech-industry jargon that makes construction people switch off.',
            },
            {
              n: '02',
              t: 'Verbs over nouns',
              d: 'The whole platform story is built on four verbs — Plan, Source, Move, Prove. Lead with what things do, not what they are. Active voice. Short sentences.',
            },
            {
              n: '03',
              t: 'Proof beats promise',
              d: 'One specific number beats three paragraphs of adjectives. £255k Leeds beats "significant cost savings". Use the receipt.',
            },
            {
              n: '04',
              t: 'Confident, not cocky',
              d: 'We have the right to make big claims — 4,500+ projects, top-5 housebuilders. State them plainly. No hedging, no overselling.',
            },
            {
              n: '05',
              t: 'Intelligence without the hype',
              d: 'The platform is intelligent. But we don\'t shout "AI-POWERED" on every surface. Describe what the AI does. Save the label for where it earns its keep.',
            },
          ].map(p => (
            <Card key={p.n} pad={24}>
              <div style={{ fontSize: 13, fontFamily: 'var(--font-mono)', fontWeight: 700, color: 'var(--brand-500)' }}>{p.n}</div>
              <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 10 }}>{p.t}</div>
              <div style={{ fontSize: 14, color: 'var(--text-tertiary)', marginTop: 8, lineHeight: 1.55 }}>{p.d}</div>
            </Card>
          ))}
        </div>
      </Block>

      {/* Tone by context */}
      <Block title="Tone by context" note="Voice is constant. Tone flexes. Same Nexus ReGen in every room — we just read the room.">
        <Card pad={0} style={{ overflow: 'hidden' }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '200px 200px 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>Context</div><div>Tone</div><div>Example</div>
          </div>
          {[
            ['Homepage hero', 'Confident, punchy, verb-led', 'Plan, source, move and prove your materials — all in one platform.'],
            ['Enterprise proposal, RFP', 'Measured, lifecycle-framed, proof-heavy', 'One platform to plan, source, move and prove your materials — from first estimate to final report.'],
            ['Sales deck opening', 'Problem-first, then platform', "Your compliance obligations are getting more complex and your current process won't scale. Nexus ReGen fixes that — and saves you 26% on materials while it's at it."],
            ['LinkedIn, thought leadership', 'Opinionated, observational, some attitude', 'Plan, source, move and prove. Where construction materials get managed properly.'],
            ['Pub, networking, DM', 'Relaxed, no jargon, human', "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."],
            ['Regulatory / legal buyer', 'Serious, governance-led', 'One auditable system of record for every material decision on your programme.'],
            ['Board / investor', 'Strategic, scale-led, category-defining', "Three of the UK's top five housebuilders are already on the platform. This is becoming the standard way the industry manages materials."],
          ].map(([c, t, ex], i, arr) => (
            <div key={c} style={{
              display: 'grid', gridTemplateColumns: '200px 200px 1fr',
              padding: '18px 20px', gap: 16,
              borderBottom: i < arr.length - 1 ? '1px solid var(--border-tertiary)' : 'none',
              background: 'var(--bg-primary)', alignItems: 'baseline',
            }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{c}</div>
              <div style={{ fontSize: 13, color: 'var(--text-tertiary)', lineHeight: 1.5 }}>{t}</div>
              <div style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.5, fontStyle: 'italic' }}>"{ex}"</div>
            </div>
          ))}
        </Card>
      </Block>

      {/* Say this, not that */}
      <Block title="Say this, not that">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <VoiceCompare
            good="Every tonne tracked. Every decision auditable."
            bad="End-to-end material resource orchestration leveraging AI-driven insights." />
          <VoiceCompare
            good="AI reads your SI reports and matches surplus to demand."
            bad="Our platform provides AI-driven document analysis capabilities for material balance identification." />
          <VoiceCompare
            good="£255k saved on a single project in Leeds."
            bad="Significant cost savings across our client base." />
          <VoiceCompare
            good="A marketplace sits at the heart of the platform — matching surplus with demand, including direct reuse."
            bad="We're a marketplace for construction materials." />
          <VoiceCompare
            good="Your current spreadsheet process won't survive a DEFRA audit. This gets you ahead of that."
            bad="Nexus ReGen helps you prepare for upcoming regulatory changes in a compliance-ready manner." />
        </div>
      </Block>

      {/* Do / Don't */}
      <Block title="Do & don't">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 12 }}>
          {[
            { k: 'do',   t: 'Lead with compliance, close with cost', d: "Compliance is the door-opener, cost is the deal-closer. Two-beat, in that order." },
            { k: 'do',   t: 'Plan → Source → Move → Prove', d: "Always list the pillars in order. It's a lifecycle, not a grab-bag." },
            { k: 'do',   t: 'Frame the marketplace as a core module', d: 'Never the whole platform. Never denied. It matches surplus to demand, including direct reuse.' },
            { k: 'do',   t: 'Use specific proof over superlatives', d: '£255k, 26%, 2,196 tCO₂e, 4,500+ projects. Numbers earn trust faster than adjectives.' },
            { k: 'do',   t: 'British English, Oxford comma, sentence case', d: 'organisation, optimise, colour, centre, programme. Capital R, capital G in Nexus ReGen.' },
            { k: 'do',   t: 'Capitalise pillars as proper nouns', d: '"The Plan module" (product). "We help you plan, source, move and prove…" (prose).' },
            { k: 'dont', t: "Don't lead with sustainability alone", d: "It's a pillar — and a door-opener for some personas — not the default opener." },
            { k: 'dont', t: "Don't lead with cost alone", d: 'Without the compliance frame, "26% saving" sounds like any other procurement pitch.' },
            { k: 'dont', t: 'Don\'t call us a trading platform, broker, or "just a marketplace"', d: 'Undersells the platform and misframes what we do.' },
            { k: 'dont', t: "Don't hedge", d: "No \"we believe\", \"we think we can help\", \"potentially\". State it." },
            { k: 'dont', t: "Don't say \"AI-powered\" as a label", d: 'Describe what the AI does — reads SI reports, matches supply to demand. The capability carries the signal.' },
            { k: 'dont', t: "Don't write Regen, RE:GEN, re-gen or NexusRegen", d: "It's Nexus ReGen. Always." },
          ].map((r, i) => (
            <div key={i} style={{
              padding: '12px 16px', background: 'var(--bg-primary)',
              border: '1px solid var(--border-secondary)', borderRadius: 10,
              display: 'flex', gap: 12, alignItems: 'flex-start',
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: 6, flexShrink: 0,
                background: r.k === 'do' ? '#ECFDF3' : '#FEF3F2',
                color:      r.k === 'do' ? '#067647' : '#B42318',
                border:     `1px solid ${r.k === 'do' ? '#ABEFC6' : '#FECDCA'}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, fontWeight: 700,
              }}>{r.k === 'do' ? '✓' : '×'}</div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{r.t}</div>
                <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 2, lineHeight: 1.45 }}>{r.d}</div>
              </div>
            </div>
          ))}
        </div>
      </Block>

      {/* Banned phrases */}
      <Block title="Banned phrases" note="If you catch yourself reaching for one of these, swap it.">
        <Card pad={'4px 24px'}>
          <BannedRow bad="AI-powered platform" good="The platform reads your project data and matches supply to demand" />
          <BannedRow bad="Digital platform for trading materials" good="One platform to plan, source, move and prove every material on every project" />
          <BannedRow bad="Material Intelligence platform" good="Materials management platform" />
          <BannedRow bad="Material resource management solution" good="Materials management platform" />
          <BannedRow bad="Powering regenerative construction" good="Materially smarter construction" />
          <BannedRow bad="End-to-end / holistic / comprehensive" good="One platform. Every project. Every material." />
          <BannedRow bad="Revolutionary / game-changing / disruptive / paradigm shift" good="Just describe what it does and what it saves" />
          <BannedRow bad="Leverage / utilise / synergise" good="Use" />
          <BannedRow bad={'"In today\'s fast-paced construction industry…"'} good="Start with a specific, concrete observation" />
          <BannedRow bad="Regen / RE:GEN / re-gen / NexusRegen" good="Nexus ReGen" />
        </Card>

        <div style={{ marginTop: 16 }}>
          <Card pad={20} style={{ background: 'var(--bg-secondary)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em',
              color: 'var(--text-quaternary)', textTransform: 'uppercase', marginBottom: 10 }}>Filler words we cut</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['journey','synergy','leverage','unlock','game-changer','revolutionary','seamless',
                'simply','effortless','empower','harness','ecosystem','holistic','disrupt','next-gen','best-in-class',
                'cutting-edge','paradigm shift','robust','streamline','utilise'
              ].map(w => (
                <span key={w} style={{
                  padding: '6px 12px', borderRadius: 999,
                  fontSize: 13, fontWeight: 500,
                  background: 'var(--bg-primary)',
                  color: 'var(--text-tertiary)',
                  border: '1px solid var(--border-secondary)',
                  textDecoration: 'line-through',
                  textDecorationColor: 'rgba(240,68,56,.6)',
                }}>{w}</span>
              ))}
            </div>
          </Card>
        </div>
      </Block>

      {/* Writing mechanics */}
      <Block title="Writing mechanics">
        <Card pad={24}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 32 }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.08em',
                color: 'var(--text-quaternary)', textTransform: 'uppercase', marginBottom: 12 }}>Numbers &amp; units</div>
              <ul style={{ margin: 0, paddingLeft: 20, fontSize: 14, lineHeight: 1.75, color: 'var(--text-secondary)' }}>
                <li>Figures when persuading: <b>26%</b>, <b>4,500+</b>, <b>£255k</b>.</li>
                <li>£ with no space. Use <Code>k</Code>, <Code>m</Code>, <Code>B</Code> for scale.</li>
                <li>Weight: <b>tonnes</b> or <b>t</b>. Volume: <b>m³</b> with a space.</li>
                <li>Carbon: <Code>tCO₂e</Code> — lower t, upper CO, subscript 2, lower e.</li>
                <li>Always cite 26% as an <b>average</b>, not a guarantee.</li>
              </ul>
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.08em',
                color: 'var(--text-quaternary)', textTransform: 'uppercase', marginBottom: 12 }}>Grammar</div>
              <ul style={{ margin: 0, paddingLeft: 20, fontSize: 14, lineHeight: 1.75, color: 'var(--text-secondary)' }}>
                <li>British English: organisation, optimise, colour, programme.</li>
                <li>Oxford comma: yes.</li>
                <li>Em dashes — with spaces — for asides. En dashes (–) for ranges.</li>
                <li>Sentence case for headings. Proper nouns keep their caps.</li>
                <li>Never italicise Inter — use weight or colour for emphasis.</li>
              </ul>
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.08em',
                color: 'var(--text-quaternary)', textTransform: 'uppercase', marginBottom: 12 }}>Dates &amp; names</div>
              <ul style={{ margin: 0, paddingLeft: 20, fontSize: 14, lineHeight: 1.75, color: 'var(--text-secondary)' }}>
                <li>Dates: <b>17 April 2026</b>. No ordinals.</li>
                <li>Company: <b>Nexus ReGen</b> — capital R, capital G. Always.</li>
                <li>Pillars: <Code>Plan</Code> <Code>Source</Code> <Code>Move</Code> <Code>Prove</Code>.</li>
                <li>Capitalise as proper nouns; lowercase in prose.</li>
                <li>Domain: <Code>nexusregen.com</Code> lowercase in URLs.</li>
              </ul>
            </div>
          </div>
        </Card>
      </Block>

      {/* Pre-publish checklist */}
      <Block title="Pre-publish checklist" note="Run through before it goes out.">
        <Card variant="inset" pad={24}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '10px 32px' }}>
            {[
              'Does it sound like Nexus ReGen, or like any other B2B SaaS?',
              'Does it use verbs over nouns?',
              'Is there at least one specific proof point?',
              'Is "Nexus ReGen" spelled correctly throughout?',
              'Am I leading with the right beat for this audience?',
              'Have I avoided the banned phrases?',
              'If I mentioned the marketplace, is it framed as a core module?',
              'Would someone on-site actually say this?',
            ].map((q, i) => (
              <label key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--text-secondary)', cursor: 'pointer', padding: '6px 0' }}>
                <input type="checkbox" style={{ marginTop: 3, accentColor: 'var(--brand-600)' }} />
                <span>{q}</span>
              </label>
            ))}
          </div>
        </Card>
      </Block>

      {/* Sign-off */}
      <Block>
        <Card variant="brand" pad={40} style={{ display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
          <ArrowMark size={80} fill="var(--accent-400)" />
          <div style={{ flex: 1, minWidth: 240 }}>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.12em',
              textTransform: 'uppercase', color: 'var(--accent-400)' }}>Brand · voice guide</div>
            <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 8, lineHeight: 1.3 }}>
              Found a gap or want to propose a new boilerplate? Email{' '}
              <span style={{ color: 'var(--accent-400)', textDecoration: 'underline', textUnderlineOffset: 4 }}>
                brand@nexusregen.com
              </span>
            </div>
          </div>
        </Card>
      </Block>
    </Section>
  );
}
window.S_Voice = S_Voice;