/* Page sections — Nav, Hero, SocialProof, Problem, Features, HowItWorks,
   Comparison, Testimonials, Pricing, FAQ, FinalCTA, Footer */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

/* ------------------------------------------------------------------ NAV */
function Nav({ onJoin }) {
  const [scrolled, setScrolled] = useStateS(false);
  useEffectS(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  const linkStyle = {
    fontFamily: PP.sans, fontSize: 13, fontWeight: 500,
    color: 'rgba(14,14,12,0.55)', padding: '6px 10px',
    transition: 'color .15s ease',
    whiteSpace: 'nowrap'
  };
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, height: 60,
      zIndex: 100,
      background: scrolled ? 'rgba(250,250,247,0.82)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(14,14,12,0.1)' : '1px solid transparent',
      transition: 'background .25s ease, border-color .25s ease, backdrop-filter .25s ease'
    }}>
      <div style={{
        maxWidth: 1240, height: '100%', margin: '0 auto',
        padding: '0 32px',
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center'
      }}>
        <a href="#top" onClick={go('top')} style={{
          fontFamily: PP.serif, fontStyle: 'italic',
          color: PP.text, letterSpacing: '-0.2px', fontSize: "26px"
        }}>
          Proposal<span style={{ color: PP.accentHi, fontSize: "26px" }}>Pulse</span>
        </a>

        <div className="pp-nav-links" style={{ display: 'flex', gap: 4 }}>
          <a href="#features" onClick={go('features')} style={{ ...linkStyle, fontSize: "16px" }} className="pp-nav-link">Features</a>
          <a href="#how-it-works" onClick={go('how-it-works')} style={{ ...linkStyle, fontSize: "16px" }} className="pp-nav-link">How it works</a>
          <a href="#platform" onClick={go('platform')} style={{ ...linkStyle, fontSize: "16px" }} className="pp-nav-link">Platform</a>
          <a href="#faq" onClick={go('faq')} style={{ ...linkStyle, fontSize: "16px" }} className="pp-nav-link">FAQ</a>
        </div>

        <div className="pp-nav-join" style={{
          flex: '0 0 auto',
          display: 'flex', justifyContent: 'end'
        }}>
          <button onClick={onJoin} className="pp-btn-primary" style={{
            padding: '9px 16px', borderRadius: 9,
            background: PP.accent, color: '#fff',
            fontFamily: PP.sans, fontSize: 13, fontWeight: 500,
            boxShadow: '0 6px 18px -8px rgba(229,83,60,0.7)',
            transition: 'transform .2s ease, box-shadow .2s ease',
            whiteSpace: 'nowrap'
          }}>Join Waitlist</button>
        </div>
      </div>
    </nav>);

}

/* ------------------------------------------------------------------ HERO */
function Hero({ shared, onJoined }) {
  return (
    <header id="top" data-screen-label="01 Hero" style={{
      position: 'relative', minHeight: '100vh',
      paddingTop: 140, paddingBottom: 90,
      overflow: 'hidden'
    }}>
      {/* grid texture */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage:
        'linear-gradient(rgba(229,83,60,0.045) 1px, transparent 1px),' +
        'linear-gradient(90deg, rgba(229,83,60,0.045) 1px, transparent 1px)',
        backgroundSize: '60px 60px',
        maskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 85%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 85%)'
      }} />
      {/* radial glow */}
      <div aria-hidden style={{
        position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)',
        width: 1200, height: 700,
        background: 'radial-gradient(ellipse at center, rgba(229,83,60,0.22) 0%, transparent 60%)',
        pointerEvents: 'none'
      }} />

      <div style={{
        position: 'relative', maxWidth: 1180, margin: '0 auto',
        padding: '0 32px',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        textAlign: 'center', gap: 56
      }}>
        <PulsePill>Now accepting early access</PulsePill>

        <h1 style={{
          margin: 0, fontFamily: PP.serif, fontStyle: 'italic',
          fontWeight: 'var(--pp-serif-weight, 400)',
          fontSize: 'clamp(42px, 6.2vw, 76px)',
          lineHeight: 1.22, letterSpacing: '-1.4px',
          color: PP.text, maxWidth: 920, textWrap: 'balance',
          paddingBottom: '0.1em'
        }}>
          Your proposals deserve<br />
          <span style={{
            background: 'linear-gradient(100deg, #0E0E0C 10%, #E5533C 95%)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text',
            WebkitTextFillColor: 'transparent', color: 'transparent'
          }}>to be seen.</span>
        </h1>

        <p style={{
          margin: 0, maxWidth: 580,
          fontFamily: PP.sans, fontSize: 17,
          lineHeight: 1.7, color: 'rgba(14,14,12,0.6)',
          textWrap: 'pretty'
        }}>
          ProposalPulse turns static proposals into intelligent micro-sites that
          track every open, answer questions with AI, and re-engage silent
          prospects automatically. <span style={{ color: PP.text, fontWeight: 500 }}>Stop losing deals to silence.</span>
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, width: '100%' }}>
          <WaitlistForm shared={shared} onJoined={onJoined} />
          <div style={{
            fontFamily: PP.mono, fontSize: 11.5, letterSpacing: '1px',
            color: 'rgba(14,14,12,0.36)', textTransform: 'uppercase'
          }}>
            {shared.count} agency owners already waiting · No credit card required · Cancel anytime
          </div>
        </div>

        <div style={{ width: '100%', marginTop: 64 }}>
          <HeroMockup />
        </div>
      </div>
    </header>);

}

/* ----------------------------------------------------------- SOCIAL PROOF */
function SocialProof() {
  const items = ['Dev Agencies', 'IT Consultancies', 'Web Studios', 'Marketing Firms', 'SaaS Builders', 'Design Agencies', 'Digital Agencies'];
  return (
    <div data-reveal="social" style={{
      borderTop: '1px solid rgba(14,14,12,0.08)',
      borderBottom: '1px solid rgba(14,14,12,0.08)',
      padding: '22px 32px',
      margin: '40px 0 0',
      overflow: 'hidden'
    }}>
      <div style={{
        maxWidth: 1180, margin: '0 auto',
        display: 'flex', alignItems: 'center', gap: 28,
        flexWrap: 'nowrap'
      }}>
        <div style={{
          fontFamily: PP.mono, letterSpacing: '1.6px',
          color: 'rgba(14,14,12,0.42)', textTransform: 'uppercase',
          whiteSpace: 'nowrap', flex: '0 0 auto', fontSize: "12px"
        }}>Trusted by teams at</div>
        <div className="pp-marquee" style={{
          flex: 1, minWidth: 0,
          display: 'flex', alignItems: 'center', gap: 32,
          fontFamily: PP.sans,
          color: 'rgba(14,14,12,0.5)',
          overflowX: 'auto', whiteSpace: 'nowrap',
          scrollbarWidth: 'none',
          WebkitMaskImage: 'linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%)',
          maskImage: 'linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%)', fontSize: "15px"
        }}>
          {items.map((i, k) =>
          <span key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 32,
            whiteSpace: 'nowrap', flex: '0 0 auto', fontSize: "15px"
          }}>
              {i}
              {k < items.length - 1 && <span aria-hidden style={{
              width: 3, height: 3, borderRadius: 999,
              background: 'rgba(14,14,12,0.22)'
            }} />}
            </span>
          )}
        </div>
      </div>
    </div>);

}

/* ----------------------------------------------------------------- PROBLEM */
function Problem() {
  const stats = [
    { v: '71%',     l: 'of commercial proposals receive no reply', s: 'The prospect simply disappears' },
    { v: '$0',      l: 'in meaningful feedback on failed proposals', s: 'No explanation. No reason. Nothing.' },
    { v: '6–12 hrs',l: 'spent writing the average agency proposal', s: 'Every silent deal is a total write-off' },
  ];
  const paras = [
    'The average software agency spends 6 to 12 hours writing a single commercial proposal. They research the client, scope the project carefully, price it competitively, and write copy that communicates genuine expertise. Then they attach it to an email and press send.',
    'Most of the time, they hear nothing back. Not a rejection. Not a question. Nothing. The proposal disappears into a void and the agency has no idea what happened to it. Did the prospect read it? Was the price too high? Did they choose a competitor? Was the scope not quite right? Nobody knows.',
    'The conventional response is the follow-up email. "Just checking in to see if you had a chance to review our proposal." But this creates social awkwardness, signals desperation, and almost never produces useful information. The prospect feels pressured. The agency gets a one-word reply — or worse, no reply at all.',
  ];
  return (
    <Section id="problem">
      <SectionHeader eyebrow="The problem">
        You sent a great proposal.<br />
        They went silent. <span style={{ color: 'rgba(14,14,12,0.28)' }}>Again.</span>
      </SectionHeader>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
        gap: 28, maxWidth: 1080, margin: '0 auto 64px',
      }}>
        {paras.map((p, i) => (
          <p key={i} style={{
            margin: 0, fontFamily: PP.sans, fontSize: 15.5, lineHeight: 1.7,
            color: 'rgba(14,14,12,0.62)', textWrap: 'pretty',
          }}>{p}</p>
        ))}
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
        gap: 14,
      }}>
        {stats.map((s, i) =>
          <div key={s.v} className="pp-card" style={{
            padding: '28px 26px',
            background: PP.surface, border: '1px solid ' + PP.border,
            borderRadius: 14,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              fontFamily: PP.mono, fontSize: 10.5, letterSpacing: '1.2px',
              color: 'rgba(14,14,12,0.38)', textTransform: 'uppercase',
            }}>0{i + 1}</div>
            <div style={{
              marginTop: 6,
              fontFamily: PP.serif, fontStyle: 'italic', fontSize: 52,
              color: PP.text, letterSpacing: '-1.5px', lineHeight: 1,
              fontWeight: 'var(--pp-serif-weight, 400)',
            }}>{s.v}</div>
            <div style={{
              marginTop: 16, fontFamily: PP.sans, fontSize: 13.5,
              color: 'rgba(14,14,12,0.78)',
            }}>{s.l}</div>
            <div style={{
              marginTop: 4, fontFamily: PP.sans, fontSize: 12.5,
              color: 'rgba(14,14,12,0.45)',
            }}>{s.s}</div>
          </div>
        )}
      </div>

      <div style={{
        marginTop: 36, textAlign: 'center',
        fontFamily: PP.mono, fontSize: 11.5, letterSpacing: '1.4px',
        color: 'rgba(14,14,12,0.42)', textTransform: 'uppercase',
      }}>
        This is not bad luck · It is a broken process · And it is completely fixable
      </div>
    </Section>
  );
}

/* ---------------------------------------------------------------- FEATURES */
function Features() {
  const cards = [
    {
      tag: 'Layer 01', title: 'Proposal Intelligence', accent: PP.accentHi, icon: 'eye',
      lead: 'See exactly what your prospect does after you send. Section by section. Visit by visit. In real time.',
      body: 'When your prospect opens the proposal link, a tracking beacon records their entire reading session. You see which sections they read and skipped, how many minutes they spent on pricing, whether they returned for a second visit, and whether they forwarded the proposal to a colleague at their company. A prospect reading at 11pm on a Sunday is a very different signal from someone who glanced at it Tuesday morning and closed it in 30 seconds.',
      out: ['Section heatmap', 'Visit timeline', 'Forwarding detection', 'Engagement score', 'AI-generated insight'],
    },
    {
      tag: 'Layer 02', title: 'AI Proposal Companion', accent: PP.green, icon: 'bot',
      lead: 'An AI assistant lives inside every proposal and answers your prospect\u2019s questions in real time — so they never have to wait for you to reply.',
      body: 'Most prospects have questions they want answered before they commit to a conversation with the agency — can Phase 1 be done standalone, is the timeline flexible, do you have relevant experience. But asking these questions requires sending an email, which feels like a commitment. So they do nothing. ProposalPulse puts an AI assistant inside every proposal that can answer instantly — anonymously, without social pressure. Every question asked is logged and sent to you in real time.',
      out: ['Full Q&A transcript', 'Real-time question alerts', 'Escalation when the AI cannot answer', 'Intent intelligence from question patterns'],
    },
    {
      tag: 'Layer 03', title: 'Pulse Re-engagement', accent: PP.amber, icon: 'pulse',
      lead: 'After 5 days of silence, a single anonymous question reaches your prospect. One tap to respond. No awkwardness. No pressure.',
      body: 'When a prospect goes quiet after opening your proposal, ProposalPulse automatically sends a pulse email at your configured threshold. One question. Three one-tap response options. No sign-in, no reply to compose, no commitment. 89% of pulse respondents are still actively considering the deal — the pulse tells you which deals are worth your energy and which have truly moved on, before you waste another week chasing.',
      out: ['Response-rate metrics', 'Intent distribution (yes / not yet / no)', 'Auto-scheduled follow-up pulses', 'Suppression when the deal closes'],
    },
  ];
  return (
    <Section id="features">
      <SectionHeader eyebrow="The solution"
        body="ProposalPulse wraps every proposal you send in a layer of intelligence that gives you visibility, answers, and re-engagement — automatically, without any additional work on your part."
        maxBody={620}>
        Three layers that turn silence<br />into intelligence
      </SectionHeader>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
        gap: 14
      }}>
        {cards.map(c =>
          <article key={c.tag} className="pp-feature" style={{
            position: 'relative',
            padding: '30px 28px 28px',
            background: PP.surface,
            border: '1px solid ' + PP.border,
            borderRadius: 16,
            overflow: 'hidden',
            display: 'flex', flexDirection: 'column',
            transition: 'transform .25s ease, border-color .25s ease, background .25s ease'
          }}>
            <div className="pp-feature-edge" style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: 1,
              background: `linear-gradient(90deg, transparent, ${c.accent}, transparent)`,
              opacity: 0, transition: 'opacity .25s ease'
            }} />
            <div style={{
              width: 42, height: 42, borderRadius: 11,
              background: c.accent + '14',
              border: '1px solid ' + c.accent + '44',
              display: 'grid', placeItems: 'center',
              color: c.accent, marginBottom: 22
            }}>
              <FeatureIcon name={c.icon} color={c.accent} />
            </div>
            <div style={{
              fontFamily: PP.mono, fontSize: 10.5, letterSpacing: '1.4px',
              color: 'rgba(14,14,12,0.5)', textTransform: 'uppercase'
            }}>{c.tag}</div>
            <h3 style={{
              margin: '8px 0 14px',
              fontFamily: PP.serif, fontStyle: 'italic', fontWeight: 'var(--pp-serif-weight, 400)',
              fontSize: 26, color: PP.text, letterSpacing: '-0.4px', lineHeight: 1.15,
            }}>{c.title}</h3>
            <p style={{
              margin: 0, fontFamily: PP.sans, fontSize: 15,
              lineHeight: 1.55, color: PP.text, fontWeight: 500,
              textWrap: 'pretty',
            }}>{c.lead}</p>
            <p style={{
              margin: '14px 0 22px', fontFamily: PP.sans, fontSize: 13.5,
              lineHeight: 1.65, color: 'rgba(14,14,12,0.62)',
              textWrap: 'pretty', flex: 1,
            }}>{c.body}</p>
            <div style={{
              paddingTop: 18, borderTop: '1px dashed ' + PP.border,
            }}>
              <div style={{
                fontFamily: PP.mono, fontSize: 10, letterSpacing: '1.3px',
                color: 'rgba(14,14,12,0.42)', textTransform: 'uppercase', marginBottom: 10,
              }}>In the dashboard</div>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
                {c.out.map(o => (
                  <li key={o} style={{
                    fontFamily: PP.sans, fontSize: 12.5, color: 'rgba(14,14,12,0.66)',
                    display: 'flex', alignItems: 'center', gap: 9,
                  }}>
                    <span style={{ width: 4, height: 4, borderRadius: 999, background: c.accent }} />
                    {o}
                  </li>
                ))}
              </ul>
            </div>
          </article>
        )}
      </div>
    </Section>);
}

function FeatureIcon({ name, color }) {
  const s = { width: 20, height: 20, stroke: color, fill: 'none', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'eye') return (
    <svg viewBox="0 0 24 24" {...s}>
      <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
      <circle cx="12" cy="12" r="3" />
    </svg>);

  if (name === 'bot') return (
    <svg viewBox="0 0 24 24" {...s}>
      <rect x="4" y="7" width="16" height="12" rx="3" />
      <path d="M12 4v3" />
      <circle cx="9" cy="13" r="1" fill={color} />
      <circle cx="15" cy="13" r="1" fill={color} />
      <path d="M9 17h6" />
    </svg>);

  return (
    <svg viewBox="0 0 24 24" {...s}>
      <path d="M3 12h4l2-5 4 10 2-5h6" />
    </svg>);

}

/* ------------------------------------------------------------ HOW IT WORKS */
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Upload or build in minutes',
      b: 'Drop your existing PDF or Word proposal into ProposalPulse. The AI reads it, identifies every section, and populates the builder in seconds. Or start from a pre-built template for SaaS, mobile, e-commerce, AI projects, and more. Or build from scratch with the block editor — 8 section types, all editable.' },
    { n: '02', t: 'Send a branded micro-site link',
      b: 'Instead of attaching a PDF, you copy a branded proposal URL and paste it into your email. The prospect clicks the link and lands on a beautifully formatted, fully responsive web page — your proposal, on any device, loading in under 2 seconds. Tracking starts the moment they open it.' },
    { n: '03', t: 'Watch engagement in real time',
      b: 'Your dashboard updates as the prospect reads. Section heatmap. Time on pricing. Number of visits. Internal forwards. AI companion questions. You see everything — not as vanity data, but as actionable intelligence. The platform even suggests what to do next based on the engagement pattern it detects.' },
    { n: '04', t: 'Re-engage silence without pressure',
      b: 'If the prospect goes quiet, ProposalPulse handles the follow-up. A single-question anonymous pulse email goes out at your configured threshold — 5 days by default. Three one-tap response buttons. No awkward check-in email from you. Just intelligence about where the deal really stands.' },
  ];
  return (
    <Section id="how-it-works">
      <SectionHeader eyebrow="How it works"
        body="You do not need to change how you write proposals. You just change how you send them.">
        From proposal to won deal.<br />In four steps.
      </SectionHeader>

      <div style={{ position: 'relative' }}>
        <div aria-hidden style={{
          position: 'absolute', top: 22, left: '6%', right: '6%', height: 1,
          background: 'linear-gradient(90deg, transparent, rgba(229,83,60,0.25) 15%, rgba(229,83,60,0.25) 85%, transparent)'
        }} />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 24, position: 'relative'
        }}>
          {steps.map(s =>
            <div key={s.n} style={{ padding: '0 6px' }}>
              <div style={{
                width: 44, height: 44, borderRadius: 999,
                background: '#FFFFFF',
                border: '1px solid rgba(229,83,60,0.35)',
                display: 'grid', placeItems: 'center',
                fontFamily: PP.mono, fontSize: 12, letterSpacing: '0.5px',
                color: PP.accentHi,
                boxShadow: '0 0 0 6px #FAFAF7, 0 0 24px rgba(229,83,60,0.25)'
              }}>{s.n}</div>
              <h4 style={{
                margin: '20px 0 12px',
                fontFamily: PP.serif, fontStyle: 'italic', fontWeight: 'var(--pp-serif-weight, 400)',
                fontSize: 22, color: PP.text, letterSpacing: '-0.3px', lineHeight: 1.2,
              }}>{s.t}</h4>
              <p style={{
                margin: 0, fontFamily: PP.sans, fontSize: 14,
                lineHeight: 1.65, color: 'rgba(14,14,12,0.62)', textWrap: 'pretty',
              }}>{s.b}</p>
            </div>
          )}
        </div>
      </div>

      <div style={{
        marginTop: 56, textAlign: 'center',
        fontFamily: PP.mono, fontSize: 11.5, letterSpacing: '1.4px',
        color: 'rgba(14,14,12,0.45)', textTransform: 'uppercase',
      }}>
        Under 5 minutes to set up · After that it runs on its own
      </div>
    </Section>);
}

/* -------------------------------------------------------------- COMPARISON */
function Comparison() {
  const cols = ['Feature', 'ProposalPulse', 'Qwilr', 'GetAccept', 'PandaDoc'];
  const rows = [
    ['Section-level reading tracking',                 1, 1, 1, 0],
    ['AI assistant trained on your specific proposal', 1, 0, 0, 0],
    ['Anonymous pulse re-engagement engine',           1, 0, 0, 0],
    ['PDF and DOCX import with AI extraction',         1, 0, 0, 0],
    ['Built specifically for software agencies',       1, 0, 0, 0],
    ['Aggregate intelligence across all proposals',    1, 0, 0, 0],
    ['AI-generated follow-up recommendations',         1, 0, 0, 0],
    ['One-click accept without a DocuSign account',    1, 0, 1, 1],
  ];
  const cell = (v) => v ?
    <span style={{ color: PP.green, fontSize: 16, fontWeight: 500 }}>✓</span> :
    <span style={{ color: 'rgba(14,14,12,0.22)', fontSize: 16 }}>—</span>;

  return (
    <Section id="comparison">
      <SectionHeader eyebrow="Vs everything else"
        body="Qwilr, GetAccept, and PandaDoc are all good products — they help you create professional-looking proposals and track whether the recipient opened them. But none were built for the specific dynamics of a software agency sales process, where projects are custom-scoped, pricing is complex, decision cycles are long, and the most important moment is the 7 to 14 days after you send."
        maxBody={720}>
        Why not just use Qwilr,<br />GetAccept, or PandaDoc?
      </SectionHeader>

      <div style={{
        border: '1px solid ' + PP.border,
        borderRadius: 14,
        background: PP.surface,
        overflow: 'hidden'
      }}>
        <div style={{ overflowX: 'auto' }}>
          <table style={{
            width: '100%', borderCollapse: 'collapse',
            position: 'relative', zIndex: 1, minWidth: 720
          }}>
            <thead>
              <tr>
                {cols.map((c, i) =>
                  <th key={c} style={{
                    textAlign: i === 0 ? 'left' : 'center',
                    padding: '20px 18px',
                    width: i === 0 ? '34%' : '16.5%',
                    fontFamily: i === 1 ? PP.serif : PP.mono,
                    fontStyle: i === 1 ? 'italic' : 'normal',
                    fontSize: i === 1 ? 18 : 11,
                    letterSpacing: i === 1 ? '-0.2px' : '1.4px',
                    textTransform: i === 1 ? 'none' : 'uppercase',
                    color: i === 1 ? PP.accentHi : 'rgba(14,14,12,0.5)',
                    fontWeight: i === 1 ? 500 : 500,
                    borderBottom: '1px solid ' + PP.border
                  }}>{c}</th>
                )}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, ri) =>
                <tr key={ri}>
                  {r.map((v, ci) =>
                    <td key={ci} style={{
                      padding: '16px 18px',
                      textAlign: ci === 0 ? 'left' : 'center',
                      fontFamily: PP.sans, fontSize: 13.5,
                      color: ci === 0 ? 'rgba(14,14,12,0.78)' : undefined,
                      borderTop: ri ? '1px solid ' + PP.border : 'none'
                    }}>
                      {ci === 0 ? v : cell(v)}
                    </td>
                  )}
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      <p style={{
        margin: '32px auto 0', maxWidth: 720, textAlign: 'center',
        fontFamily: PP.sans, fontSize: 14.5, lineHeight: 1.65,
        color: 'rgba(14,14,12,0.55)', textWrap: 'pretty',
      }}>
        ProposalPulse is not trying to be the best general-purpose proposal tool. It is the only tool that combines tracking, AI, and re-engagement in one product built specifically for professional services agencies that sell custom work.
      </p>
    </Section>);
}

/* ------------------------------------------------------------- TESTIMONIALS */
function Testimonials() {
  const quotes = [
    { q: 'Finding out a prospect re-opened our proposal at 11pm on a Sunday would completely change how I follow up the next morning. That single data point is worth the subscription.', n: 'Ravi M.',  r: 'Founder, 18-person dev agency', loc: 'Bangalore' },
    { q: 'The thing I hate most is the "just checking in" email. It makes me feel like a salesperson in the worst sense. If there was a way for them to signal intent without pressure, I would pay for that alone.', n: 'Sarah K.', r: 'Business Development Lead, IT consultancy', loc: 'London' },
    { q: 'We once lost a $120,000 deal and nobody told us why. Our proposal was good. Our team was strong. We never found out what happened. A tool that tells me which section killed it would be invaluable.', n: 'James O.', r: 'CEO, software studio', loc: 'Toronto' },
    { q: 'I love the idea of the AI companion. Our prospects always have the same five questions. If they could get those answered at 10pm without waiting for me to reply, so many more deals would stay warm.', n: 'Priya N.', r: 'Managing Director, digital agency', loc: 'Sydney' },
    { q: 'The pulse email is the most psychologically smart thing I have seen in B2B sales software. One tap with no social pressure. That changes the entire dynamic of the follow-up conversation.', n: 'Marcus T.', r: 'Head of Growth, IT consulting firm', loc: 'Amsterdam' },
  ];
  return (
    <Section id="testimonials">
      <SectionHeader eyebrow="Early feedback"
        body="Not made-up marketing quotes. Real responses from agency owners who were told what ProposalPulse does and asked what they thought."
        maxBody={600}>
        What agency owners say<br />
        <span style={{ color: 'rgba(14,14,12,0.32)' }}>before they even had it</span>
      </SectionHeader>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
        gap: 14
      }}>
        {quotes.map(q =>
          <figure key={q.n} style={{
            margin: 0, padding: '30px 28px',
            background: PP.surface,
            border: '1px solid ' + PP.border,
            borderRadius: 16,
            display: 'flex', flexDirection: 'column', gap: 18
          }}>
            <div style={{
              fontFamily: PP.serif, fontStyle: 'italic',
              fontSize: 64, lineHeight: 0.6,
              color: 'rgba(229,83,60,0.5)', height: 22
            }}>“</div>
            <blockquote style={{
              margin: 0, fontFamily: PP.sans, fontStyle: 'italic',
              fontSize: 14.5, lineHeight: 1.65,
              color: 'rgba(14,14,12,0.78)', textWrap: 'pretty',
            }}>{q.q}</blockquote>
            <figcaption style={{
              marginTop: 'auto',
              paddingTop: 16, borderTop: '1px solid ' + PP.border,
              display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 10,
            }}>
              <div>
                <div style={{ fontFamily: PP.sans, fontSize: 13, fontWeight: 500, color: PP.text }}>{q.n}</div>
                <div style={{ fontFamily: PP.mono, fontSize: 10.5, letterSpacing: '1.2px', color: 'rgba(14,14,12,0.5)', textTransform: 'uppercase', marginTop: 4 }}>{q.r}</div>
              </div>
              <div style={{
                fontFamily: PP.mono, fontSize: 10, letterSpacing: '1.6px',
                color: 'rgba(14,14,12,0.4)', textTransform: 'uppercase',
                whiteSpace: 'nowrap',
              }}>{q.loc}</div>
            </figcaption>
          </figure>
        )}
      </div>
    </Section>);
}

window.Nav = Nav;
window.Hero = Hero;
window.SocialProof = SocialProof;
window.Problem = Problem;
window.Features = Features;
window.HowItWorks = HowItWorks;
window.Comparison = Comparison;
window.Testimonials = Testimonials;