/* New expanded-content sections — BeforeAfter, InsidePlatform, DocumentUpload,
   Results, Industries.
   All styling follows the existing cream/terracotta palette + serif/sans/mono
   CSS variables. */
const { useState: useStateX } = React;

/* --------------------------------------------------------- BEFORE / AFTER */
function BeforeAfter() {
  const before = [
    'Monday 9am. You spend 3 hours writing a $58,000 proposal for a maritime compliance platform. You attach the PDF. You press send.',
    'Tuesday. Nothing.',
    'Wednesday. You send: “Just checking in.” No reply.',
    'Friday. You try calling. Voicemail.',
    'Two weeks later. You find out they went with a competitor. You still don’t know why.',
  ];
  const after = [
    'Monday 9am. You upload your existing PDF. The AI extracts all 7 sections in 12 seconds. You press send.',
    'Monday 2:43pm. Notification: “Proposal opened — 8 minutes read time.”',
    'Tuesday 9:21am. Notification: “Forwarded internally — second visitor, same domain.”',
    'Tuesday 9:28am. Three AI questions logged — including: “What if our budget is $40K instead?”',
    'Tuesday 11:05pm. Proposal re-opened. 6 minutes on the Pricing section.',
    'Dashboard insight: “High pricing attention + budget question — consider offering Phase 1 standalone at $32K.”',
    'Wednesday morning. You call — not to check in, but to offer exactly what they need.',
    'Thursday. They accept Phase 1.',
  ];
  return (
    <Section id="before-after">
      <SectionHeader eyebrow="What changes">
        From guesswork to intelligence.<br />
        <span style={{ color: 'rgba(14,14,12,0.32)' }}>This is what your Monday looks like.</span>
      </SectionHeader>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
        gap: 18, alignItems: 'stretch',
      }}>
        <BACard kind="before" lines={before} />
        <BACard kind="after" lines={after} />
      </div>
    </Section>
  );
}

function BACard({ kind, lines }) {
  const isBefore = kind === 'before';
  const accent = isBefore ? '#DC2626' : PP.accent;
  const badge  = isBefore ? 'Without ProposalPulse' : 'With ProposalPulse';
  return (
    <article className="pp-ba-card" style={{
      position: 'relative',
      padding: '32px 30px 30px',
      background: isBefore ? PP.surface : 'rgba(229,83,60,0.04)',
      border: '1px solid ' + (isBefore ? PP.border : 'rgba(229,83,60,0.28)'),
      borderLeft: `3px solid ${isBefore ? 'rgba(220,38,38,0.55)' : accent}`,
      borderRadius: 14,
      display: 'flex', flexDirection: 'column', gap: 18,
      boxShadow: isBefore ? 'none' : '0 12px 40px -22px rgba(229,83,60,0.45)',
    }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '5px 12px', borderRadius: 999,
        background: isBefore ? 'rgba(220,38,38,0.08)' : 'rgba(229,83,60,0.12)',
        border: '1px solid ' + (isBefore ? 'rgba(220,38,38,0.25)' : 'rgba(229,83,60,0.3)'),
        fontFamily: PP.mono, fontSize: 10.5, letterSpacing: '1.2px',
        color: isBefore ? '#DC2626' : PP.accent, textTransform: 'uppercase',
        alignSelf: 'flex-start', whiteSpace: 'nowrap',
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: isBefore ? '#DC2626' : PP.accent }} />
        {badge}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {lines.map((l, i) => (
          <p key={i} style={{
            margin: 0,
            fontFamily: PP.mono,
            fontSize: 12.5, lineHeight: 1.75,
            color: isBefore ? 'rgba(14,14,12,0.6)' : 'rgba(14,14,12,0.78)',
            paddingLeft: 16,
            borderLeft: '1px solid ' + (isBefore ? 'rgba(14,14,12,0.08)' : 'rgba(229,83,60,0.2)'),
          }}>{l}</p>
        ))}
      </div>
    </article>
  );
}

/* ----------------------------------------------------- INSIDE THE PLATFORM */
function InsidePlatform() {
  const tabs = [
    { id: 'dash',  label: 'Dashboard',         body: 'Your proposal pipeline at a glance. Every proposal you have sent, its current status, last activity, engagement score, and deal value — in a single view. Sort by silence time to see which deals need attention first. Filter by status to focus on the ones that are close.' },
    { id: 'det',   label: 'Proposal Detail',   body: 'Click into any proposal and see the full story. Section heatmap of where attention landed. Engagement timeline with every open, forward, and AI question logged with timestamps. An AI insight card that reads the engagement pattern and tells you what it probably means. One-click pulse send if you want to trigger re-engagement right now.' },
    { id: 'site',  label: 'Micro-site Preview',body: 'This is what your prospect sees. A beautifully formatted, fully responsive page with your branding, a sticky Accept button, and an AI companion waiting in the corner. No PDF viewer. No download required. Works perfectly on mobile. Loads in under 2 seconds anywhere in the world.' },
  ];
  const [active, setActive] = useStateX('dash');
  return (
    <Section id="platform">
      <SectionHeader eyebrow="Inside the platform">
        Everything you need to convert proposals.<br />
        <span style={{ color: 'rgba(14,14,12,0.32)' }}>Nothing you don’t.</span>
      </SectionHeader>

      {/* Tab bar */}
      <div role="tablist" style={{
        display: 'flex', flexWrap: 'wrap', gap: 0,
        borderBottom: '1px solid ' + PP.border,
        marginBottom: 28,
      }}>
        {tabs.map(t => {
          const on = active === t.id;
          return (
            <button key={t.id} role="tab" aria-selected={on}
              onClick={() => setActive(t.id)}
              style={{
                position: 'relative',
                padding: '14px 22px 16px',
                fontFamily: PP.sans, fontSize: 14, fontWeight: 500,
                color: on ? PP.text : 'rgba(14,14,12,0.5)',
                cursor: 'pointer', whiteSpace: 'nowrap',
                transition: 'color .2s ease',
              }}>
              {t.label}
              <span style={{
                position: 'absolute', bottom: -1, left: 12, right: 12, height: 2,
                background: on ? PP.accent : 'transparent',
                transition: 'background .2s ease',
                borderRadius: 2,
              }} />
            </button>
          );
        })}
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.55fr) minmax(0, 1fr)',
        gap: 32, alignItems: 'start',
      }} className="pp-platform-grid">
        <div className="pp-platform-mock">
          {active === 'dash'  && <DashboardMock />}
          {active === 'det'   && <DetailMock />}
          {active === 'site'  && <MicrositeMock />}
        </div>
        <div>
          {tabs.map(t => active === t.id && (
            <div key={t.id}>
              <div style={{
                fontFamily: PP.mono, fontSize: 10.5, letterSpacing: '1.4px',
                color: PP.accent, textTransform: 'uppercase', marginBottom: 12,
              }}>{t.label}</div>
              <h3 style={{
                margin: '0 0 16px',
                fontFamily: PP.serif, fontStyle: 'italic',
                fontWeight: 'var(--pp-serif-weight, 400)',
                fontSize: 28, color: PP.text, letterSpacing: '-0.4px', lineHeight: 1.2,
              }}>
                {t.label === 'Dashboard'         && 'Every proposal in one view.'}
                {t.label === 'Proposal Detail'   && 'The full story, on one screen.'}
                {t.label === 'Micro-site Preview'&& 'What your prospect sees.'}
              </h3>
              <p style={{
                margin: 0, fontFamily: PP.sans, fontSize: 14.5,
                lineHeight: 1.7, color: 'rgba(14,14,12,0.66)', textWrap: 'pretty',
              }}>{t.body}</p>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

/* ---- Tab mocks (paper-light, sampled from the app design) ---- */

const mockFrame = {
  borderRadius: 14,
  background: '#FFFFFF',
  border: '1px solid rgba(14,14,12,0.1)',
  boxShadow: '0 24px 60px -28px rgba(14,14,12,0.18), 0 4px 12px -8px rgba(14,14,12,0.08)',
  overflow: 'hidden',
};

function DashboardMock() {
  const rows = [
    { c: 'Helio Health',          name: 'Patient portal rebuild',     status: 'Engaged',    sd: '3d ago',  pct: 78, val: '$84k' },
    { c: 'Northwind Labs',        name: 'Full-stack rebuild',         status: 'Pulse sent', sd: '7d ago',  pct: 42, val: '$58k' },
    { c: 'Maritime Innovations',  name: 'Compliance platform',        status: 'Opened',     sd: '1d ago',  pct: 64, val: '$32k' },
    { c: 'Sandbar Studios',       name: 'Marketing site redesign',    status: 'Won',        sd: '14d ago', pct: 100,val: '$24k' },
    { c: 'Driftwood Capital',     name: 'Internal tools migration',   status: 'Sent',       sd: '2h ago',  pct: 8,  val: '$112k' },
  ];
  const statusColor = (s) => ({
    'Sent': PP.textMute, 'Opened': PP.blue, 'Engaged': PP.accent,
    'Pulse sent': PP.amber, 'Won': PP.green, 'Lost': '#DC2626',
  }[s] || PP.textMute);
  return (
    <div style={mockFrame}>
      {/* metric cards */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        padding: 16, gap: 10, borderBottom: '1px solid rgba(14,14,12,0.06)',
        background: '#FAFAF7',
      }}>
        {[
          { l: 'Proposals · 30d', v: '23' },
          { l: 'Open rate',        v: '71%' },
          { l: 'AI chats',         v: '48' },
          { l: 'Pulse response',   v: '64%' },
        ].map(m => (
          <div key={m.l} style={{
            padding: '10px 12px', background: '#FFFFFF',
            border: '1px solid rgba(14,14,12,0.07)', borderRadius: 9,
          }}>
            <div style={{ fontFamily: PP.mono, fontSize: 9.5, letterSpacing: '1.1px', color: 'rgba(14,14,12,0.4)', textTransform: 'uppercase' }}>{m.l}</div>
            <div style={{ fontFamily: PP.serif, fontStyle: 'italic', fontSize: 22, color: PP.text, marginTop: 2, letterSpacing: '-0.4px' }}>{m.v}</div>
          </div>
        ))}
      </div>

      {/* table */}
      <div style={{ padding: '14px 18px 18px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 0.8fr 0.6fr',
          gap: 14, paddingBottom: 10, borderBottom: '1px solid rgba(14,14,12,0.07)',
          fontFamily: PP.mono, fontSize: 9.5, letterSpacing: '1.2px',
          color: 'rgba(14,14,12,0.4)', textTransform: 'uppercase',
        }}>
          <span>Proposal</span><span>Status</span><span>Engagement</span><span style={{ textAlign: 'right' }}>Value</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1fr 0.8fr 0.6fr',
            gap: 14, padding: '12px 0',
            borderBottom: i < rows.length - 1 ? '1px dashed rgba(14,14,12,0.07)' : 'none',
            alignItems: 'center',
          }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontFamily: PP.sans, fontSize: 13, color: PP.text, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.name}</div>
              <div style={{ fontFamily: PP.mono, fontSize: 10, color: 'rgba(14,14,12,0.42)', marginTop: 2, letterSpacing: '0.5px' }}>{r.c} · {r.sd}</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontFamily: PP.sans, fontSize: 12, color: statusColor(r.status) }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: statusColor(r.status) }} />
              {r.status}
            </div>
            <div style={{ position: 'relative', height: 4, background: 'rgba(14,14,12,0.06)', borderRadius: 999 }}>
              <div style={{ position: 'absolute', inset: 0, width: r.pct + '%', background: PP.accent, borderRadius: 999, opacity: 0.85 }} />
            </div>
            <div style={{ fontFamily: PP.serif, fontStyle: 'italic', fontSize: 16, color: PP.text, textAlign: 'right', letterSpacing: '-0.3px' }}>{r.val}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DetailMock() {
  const sections = [
    { n: 'Overview',  m: 2.0 },
    { n: 'Approach',  m: 3.5 },
    { n: 'Timeline',  m: 1.2 },
    { n: 'Pricing',   m: 6.0, hot: true },
    { n: 'Team',      m: 0.8 },
    { n: 'Next steps',m: 0.4 },
  ];
  const max = Math.max(...sections.map(s => s.m));
  return (
    <div style={mockFrame}>
      <div style={{ padding: '18px 22px', borderBottom: '1px solid rgba(14,14,12,0.07)' }}>
        <div style={{ fontFamily: PP.mono, fontSize: 10, letterSpacing: '1.3px', color: 'rgba(14,14,12,0.42)', textTransform: 'uppercase' }}>Proposal · #PP-2614</div>
        <div style={{ marginTop: 4, fontFamily: PP.serif, fontStyle: 'italic', fontSize: 22, color: PP.text, letterSpacing: '-0.4px' }}>Northwind — full-stack rebuild</div>
      </div>

      <div style={{ padding: '16px 22px', borderBottom: '1px solid rgba(14,14,12,0.06)' }}>
        <div style={{ fontFamily: PP.mono, fontSize: 9.5, letterSpacing: '1.2px', color: 'rgba(14,14,12,0.42)', textTransform: 'uppercase', marginBottom: 10 }}>Section heatmap</div>
        {sections.map(s => (
          <div key={s.n} style={{
            display: 'grid', gridTemplateColumns: '88px 1fr 44px',
            alignItems: 'center', gap: 12, padding: '6px 0',
          }}>
            <div style={{ fontFamily: PP.sans, fontSize: 12, color: s.hot ? PP.accent : 'rgba(14,14,12,0.72)' }}>{s.n}</div>
            <div style={{ position: 'relative', height: 8, background: 'rgba(14,14,12,0.05)', borderRadius: 3 }}>
              <div style={{
                position: 'absolute', inset: 0, width: (s.m / max * 100) + '%',
                borderRadius: 3,
                background: s.hot
                  ? 'linear-gradient(90deg, rgba(229,83,60,0.9), rgba(229,83,60,0.55))'
                  : 'linear-gradient(90deg, rgba(14,14,12,0.55), rgba(14,14,12,0.22))',
              }} />
            </div>
            <div style={{ fontFamily: PP.mono, fontSize: 10, color: 'rgba(14,14,12,0.5)', textAlign: 'right' }}>{s.m.toFixed(1)}m</div>
          </div>
        ))}
      </div>

      <div style={{
        padding: '14px 22px 18px',
        background: 'rgba(229,83,60,0.05)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <span style={{ width: 18, height: 18, borderRadius: 5, background: 'rgba(229,83,60,0.18)', border: '1px solid rgba(229,83,60,0.4)', display: 'grid', placeItems: 'center', color: PP.accent, fontSize: 10, fontWeight: 600 }}>✦</span>
          <span style={{ fontFamily: PP.mono, fontSize: 10, letterSpacing: '1.2px', color: PP.accent, textTransform: 'uppercase' }}>AI insight · 92% conf.</span>
        </div>
        <div style={{ fontFamily: PP.serif, fontStyle: 'italic', fontSize: 15, lineHeight: 1.35, color: PP.text }}>
          High pricing attention and a budget question. Offer a Phase 1 standalone at $32K before they reply.
        </div>
      </div>
    </div>
  );
}

function MicrositeMock() {
  return (
    <div style={{ ...mockFrame, background: '#FAFAF7' }}>
      {/* hero band */}
      <div style={{
        padding: '22px 24px',
        background: 'linear-gradient(180deg, #0E0E0C 0%, #1a1a17 100%)',
        color: '#FAFAF7',
      }}>
        <div style={{ fontFamily: PP.mono, fontSize: 9.5, letterSpacing: '1.3px', color: 'rgba(250,250,247,0.45)', textTransform: 'uppercase' }}>Proposal · prepared for Maritime Innovations</div>
        <div style={{
          marginTop: 6, fontFamily: PP.serif, fontStyle: 'italic',
          fontSize: 26, color: '#FAFAF7', letterSpacing: '-0.4px',
        }}>Compliance platform — discovery &amp; build</div>
        <div style={{ marginTop: 8, display: 'flex', gap: 22, fontFamily: PP.mono, fontSize: 10.5, color: 'rgba(250,250,247,0.6)' }}>
          <span>VALUE · $58k</span><span>TIMELINE · 14 wks</span><span>PHASES · 3</span>
        </div>
      </div>

      {/* sticky tabs */}
      <div style={{
        display: 'flex', gap: 18, padding: '10px 24px',
        borderBottom: '1px solid rgba(14,14,12,0.07)',
        fontFamily: PP.mono, fontSize: 10, letterSpacing: '1.2px',
        color: 'rgba(14,14,12,0.5)', textTransform: 'uppercase',
        background: '#FFFFFF',
      }}>
        <span style={{ color: PP.accent, borderBottom: `2px solid ${PP.accent}`, padding: '4px 0' }}>Overview</span>
        <span style={{ padding: '4px 0' }}>Scope</span>
        <span style={{ padding: '4px 0' }}>Timeline</span>
        <span style={{ padding: '4px 0' }}>Pricing</span>
        <span style={{ padding: '4px 0' }}>Team</span>
      </div>

      <div style={{ padding: '20px 24px 22px' }}>
        <p style={{
          margin: 0, fontFamily: PP.sans, fontSize: 13, lineHeight: 1.65,
          color: 'rgba(14,14,12,0.7)',
        }}>
          A focused 14-week engagement to design and ship the compliance reporting platform, beginning with a discovery sprint to validate the data model and identify integration risks before commitment.
        </p>
        <div style={{
          marginTop: 18, padding: 14, borderRadius: 10,
          background: '#FFFFFF', border: '1px solid rgba(14,14,12,0.08)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 30, height: 30, borderRadius: 8, background: 'rgba(229,83,60,0.1)', border: '1px solid rgba(229,83,60,0.3)', display: 'grid', placeItems: 'center', color: PP.accent, fontSize: 14 }}>?</div>
          <div style={{ flex: 1, fontFamily: PP.sans, fontSize: 12.5, color: PP.text }}>
            Ask a question about this proposal
          </div>
          <div style={{ fontFamily: PP.mono, fontSize: 9.5, letterSpacing: '1px', color: 'rgba(14,14,12,0.42)', textTransform: 'uppercase' }}>AI</div>
        </div>
      </div>

      <div style={{
        padding: '14px 24px',
        background: '#FFFFFF',
        borderTop: '1px solid rgba(14,14,12,0.07)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ fontFamily: PP.mono, fontSize: 10, color: 'rgba(14,14,12,0.4)', letterSpacing: '1.1px', textTransform: 'uppercase' }}>Valid through Jun 30</span>
        <span style={{
          padding: '8px 16px', borderRadius: 8,
          background: PP.accent, color: '#fff',
          fontFamily: PP.sans, fontSize: 12, fontWeight: 500,
        }}>Accept proposal</span>
      </div>
    </div>
  );
}

/* ----------------------------------------------------- DOCUMENT UPLOAD */
function DocumentUpload() {
  const pts = [
    { t: 'Supports PDF and DOCX', b: 'Any proposal document you have ever written can be imported. Up to 20MB per file.' },
    { t: 'AI section detection',  b: 'Identifies headings, scope items, pricing tables, team members, and FAQ pairs automatically.' },
    { t: 'Confidence scoring',    b: 'Every extracted block is rated 0 to 100 for accuracy. Green means go. Amber means review. Nothing gets missed.' },
  ];
  return (
    <Section id="upload">
      <SectionHeader eyebrow="Already have a proposal?"
        body="You have spent years perfecting your proposal template. We are not asking you to rebuild from scratch. Drop your PDF or DOCX into ProposalPulse and our AI does the work — reading every section, mapping the content to the correct block types, and flagging anything that needs a quick human review."
        maxBody={680}>
        Upload your existing PDF or Word doc.<br />
        <span style={{ color: 'rgba(14,14,12,0.32)' }}>We handle the rest in seconds.</span>
      </SectionHeader>

      <div style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)',
        gap: 28, alignItems: 'stretch',
      }} className="pp-upload-grid">
        <UploadMock />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {pts.map(p => (
            <div key={p.t} style={{
              padding: '20px 22px',
              background: PP.surface,
              border: '1px solid ' + PP.border,
              borderRadius: 12,
            }}>
              <div style={{
                fontFamily: PP.serif, fontStyle: 'italic',
                fontWeight: 'var(--pp-serif-weight, 400)',
                fontSize: 19, color: PP.text, letterSpacing: '-0.2px',
              }}>{p.t}</div>
              <div style={{
                marginTop: 6, fontFamily: PP.sans, fontSize: 13.5,
                color: 'rgba(14,14,12,0.62)', lineHeight: 1.6,
              }}>{p.b}</div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

function UploadMock() {
  const blocks = [
    { t: 'Overview',     c: 96, ok: true },
    { t: 'Scope',        c: 91, ok: true },
    { t: 'Timeline',     c: 88, ok: true },
    { t: 'Pricing',      c: 72, ok: false },
    { t: 'Team',         c: 94, ok: true },
    { t: 'FAQ',          c: 76, ok: false },
    { t: 'Next steps',   c: 89, ok: true },
  ];
  return (
    <div style={mockFrame}>
      <div style={{
        padding: '20px 22px',
        borderBottom: '1px solid rgba(14,14,12,0.07)',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 9,
          background: 'rgba(229,83,60,0.12)',
          border: '1px solid rgba(229,83,60,0.35)',
          display: 'grid', placeItems: 'center', color: PP.accent,
          fontFamily: PP.mono, fontSize: 10, fontWeight: 600,
        }}>PDF</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: PP.sans, fontSize: 13.5, color: PP.text, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>NorthwindRebuild_Proposal_v3.pdf</div>
          <div style={{ fontFamily: PP.mono, fontSize: 10, color: 'rgba(14,14,12,0.42)', marginTop: 2, letterSpacing: '0.4px' }}>4.2 MB · 7 sections detected · 12 sec</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '5px 11px', borderRadius: 999, background: 'rgba(31,138,91,0.1)', border: '1px solid rgba(31,138,91,0.35)' }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: PP.green }} />
          <span style={{ fontFamily: PP.mono, fontSize: 10, letterSpacing: '1px', color: PP.green, textTransform: 'uppercase' }}>Extracted</span>
        </div>
      </div>

      <div style={{ padding: '14px 22px 20px' }}>
        <div style={{ fontFamily: PP.mono, fontSize: 9.5, letterSpacing: '1.2px', color: 'rgba(14,14,12,0.4)', textTransform: 'uppercase', marginBottom: 12 }}>Extracted blocks</div>
        {blocks.map((b, i) => (
          <div key={b.t} style={{
            display: 'grid', gridTemplateColumns: '20px 1fr auto auto',
            alignItems: 'center', gap: 12, padding: '9px 0',
            borderTop: i ? '1px dashed rgba(14,14,12,0.07)' : 'none',
          }}>
            <span style={{
              width: 16, height: 16, borderRadius: 4,
              background: b.ok ? 'rgba(31,138,91,0.12)' : 'rgba(183,121,31,0.14)',
              border: '1px solid ' + (b.ok ? 'rgba(31,138,91,0.4)' : 'rgba(183,121,31,0.4)'),
              display: 'grid', placeItems: 'center',
              color: b.ok ? PP.green : PP.amber, fontSize: 9, fontWeight: 700,
            }}>{b.ok ? '✓' : '!'}</span>
            <div style={{ fontFamily: PP.sans, fontSize: 13, color: PP.text }}>{b.t}</div>
            <div style={{
              fontFamily: PP.mono, fontSize: 10, letterSpacing: '0.8px',
              color: b.ok ? PP.green : PP.amber, textTransform: 'uppercase',
            }}>{b.ok ? 'Auto-detected' : 'Please review'}</div>
            <div style={{ fontFamily: PP.mono, fontSize: 11, color: 'rgba(14,14,12,0.55)' }}>{b.c}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ----------------------------------------------------------- RESULTS */
function Results() {
  const rows = [
    ['Proposal open rate',                              '48% avg (PDF email)',                  '71%+ (branded link)'],
    ['Visibility into prospect engagement',             'None',                                 'Section-level heatmap, visit timeline, forwarding'],
    ['Prospect questions answered in real time',        '0% — they wait or go elsewhere',       '100% — AI companion replies instantly'],
    ['Follow-up strategy',                              'Guess and hope',                       'Data-driven from engagement pattern'],
    ['Silent-prospect re-engagement',                   'Awkward check-in email',               'Anonymous pulse, 64% response rate'],
    ['Average proposal conversion lift',                'Baseline',                             '26–38% improvement (early users)'],
    ['Time to first intelligence on a sent proposal',   'Unknown',                              'Within 60 seconds of opening'],
  ];
  return (
    <Section id="results">
      <SectionHeader eyebrow="The numbers">
        What actually changes<br />when you use ProposalPulse
      </SectionHeader>

      <div style={{
        border: '1px solid ' + PP.border,
        borderRadius: 14, background: PP.surface, overflow: 'hidden',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr)',
          padding: '14px 20px', borderBottom: '1px solid ' + PP.border,
          background: '#F2F1EC',
          fontFamily: PP.mono, fontSize: 10.5, letterSpacing: '1.3px',
          color: 'rgba(14,14,12,0.5)', textTransform: 'uppercase',
        }}>
          <span>Metric</span>
          <span>Without ProposalPulse</span>
          <span>With ProposalPulse</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr)',
            gap: 16, padding: '18px 20px',
            borderTop: i ? '1px solid ' + PP.border : 'none',
            background: i % 2 ? 'rgba(14,14,12,0.012)' : '#FFFFFF',
            alignItems: 'baseline',
          }}>
            <div style={{
              fontFamily: PP.sans, fontSize: 14, fontWeight: 500, color: PP.text,
            }}>{r[0]}</div>
            <div style={{
              fontFamily: PP.sans, fontSize: 13.5, color: '#DC2626',
              opacity: 0.85, lineHeight: 1.5,
            }}>{r[1]}</div>
            <div style={{
              fontFamily: PP.sans, fontSize: 13.5, color: PP.green,
              fontWeight: 500, lineHeight: 1.5,
            }}>{r[2]}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

/* --------------------------------------------------------- INDUSTRIES */
function Industries() {
  const items = [
    { t: 'Software development agencies', b: 'The primary use case. Complex scopes, variable pricing, long decision cycles, technical clients.', primary: true, icon: 'code' },
    { t: 'Web design & digital agencies', b: 'High-value creative proposals with multiple stakeholders. Section tracking reveals what mattered.', icon: 'layout' },
    { t: 'IT consultancies & managed services', b: 'Recurring and project proposals. Pulse engine maintains relationships across long evaluations.', icon: 'cloud' },
    { t: 'Marketing & growth agencies', b: 'Campaign and retainer proposals. AI companion handles budget and scope questions instantly.', icon: 'bar' },
    { t: 'Architecture & engineering firms', b: 'High-value projects with long approval chains. Forwarding detection shows who is evaluating internally.', icon: 'compass' },
    { t: 'Management consulting firms', b: 'Strategy and transformation proposals worth hundreds of thousands of dollars. Every data point matters.', icon: 'briefcase' },
    { t: 'Legal services firms', b: 'Retained services and matter-specific proposals. Discreet pulse re-engagement fits the formal tone.', icon: 'scales' },
    { t: 'Recruitment & executive search', b: 'Candidate shortlist proposals. Track which profiles get read longest. Pulse captures where the search stands.', icon: 'people' },
  ];
  return (
    <Section id="industries">
      <SectionHeader eyebrow="Who it’s for"
        body="ProposalPulse was designed first for software development agencies because that is where the proposal black hole is most acute. But the intelligence gap exists across every professional services category where you sell custom, high-value work to a business buyer."
        maxBody={680}>
        Built for agencies. Works for<br />anyone who sells custom work.
      </SectionHeader>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
        gap: 14,
      }}>
        {items.map(it => (
          <div key={it.t} className="pp-card" style={{
            padding: '22px 22px 24px',
            background: it.primary ? 'rgba(229,83,60,0.04)' : PP.surface,
            border: '1px solid ' + (it.primary ? 'rgba(229,83,60,0.32)' : PP.border),
            borderRadius: 14, position: 'relative',
            display: 'flex', flexDirection: 'column', gap: 12,
            boxShadow: it.primary ? '0 12px 32px -22px rgba(229,83,60,0.4)' : 'none',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8,
              background: it.primary ? 'rgba(229,83,60,0.14)' : 'rgba(14,14,12,0.05)',
              border: '1px solid ' + (it.primary ? 'rgba(229,83,60,0.35)' : 'rgba(14,14,12,0.1)'),
              display: 'grid', placeItems: 'center',
              color: it.primary ? PP.accent : 'rgba(14,14,12,0.6)',
            }}>
              <IndustryIcon name={it.icon} />
            </div>
            <div style={{
              fontFamily: PP.serif, fontStyle: 'italic',
              fontWeight: 'var(--pp-serif-weight, 400)',
              fontSize: 18, color: PP.text, letterSpacing: '-0.2px', lineHeight: 1.2,
            }}>{it.t}</div>
            <div style={{
              fontFamily: PP.sans, fontSize: 13, lineHeight: 1.6,
              color: 'rgba(14,14,12,0.6)', textWrap: 'pretty',
            }}>{it.b}</div>
            {it.primary && (
              <div style={{
                position: 'absolute', top: 14, right: 14,
                fontFamily: PP.mono, fontSize: 9.5, letterSpacing: '1.2px',
                color: PP.accent, textTransform: 'uppercase',
              }}>Primary</div>
            )}
          </div>
        ))}
      </div>
    </Section>
  );
}

function IndustryIcon({ name }) {
  const s = { width: 16, height: 16, stroke: 'currentColor', fill: 'none', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'code':      return (<svg viewBox="0 0 24 24" {...s}><path d="M9 8 4 12l5 4M15 8l5 4-5 4M13 6l-2 12" /></svg>);
    case 'layout':    return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 10h18M10 10v10" /></svg>);
    case 'cloud':     return (<svg viewBox="0 0 24 24" {...s}><path d="M7 18a4 4 0 0 1 0-8 5 5 0 0 1 10 .5A3.5 3.5 0 0 1 17 18Z" /></svg>);
    case 'bar':       return (<svg viewBox="0 0 24 24" {...s}><path d="M4 20V10M10 20V4M16 20v-7M22 20H2" /></svg>);
    case 'compass':   return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9" /><path d="m15 9-2 5-5 2 2-5 5-2Z" /></svg>);
    case 'briefcase': return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="7" width="18" height="13" rx="2" /><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18" /></svg>);
    case 'scales':    return (<svg viewBox="0 0 24 24" {...s}><path d="M12 4v17M3 21h18M6 8l-3 6h6Zm12 0-3 6h6Z" /></svg>);
    case 'people':    return (<svg viewBox="0 0 24 24" {...s}><circle cx="9" cy="8" r="3" /><circle cx="17" cy="10" r="2.5" /><path d="M3 20c0-3 3-5 6-5s6 2 6 5M14 20c0-2.5 2-4 4-4s4 1.5 4 4" /></svg>);
    default: return null;
  }
}

Object.assign(window, {
  BeforeAfter, InsidePlatform, DocumentUpload, Results, Industries,
});