// Hi-fi middle sections: 4 pillars, 3-step how-it-works, peer circles (editorial), policy, trust bar

const WhySection = () => (
  <section id="why" style={{ padding: '100px 0', background: 'var(--paper)', borderTop: '1px solid var(--rule)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 120 }}>
          <div className="eyebrow">§ Why FGBVA</div>
          <h2 className="display" style={{ fontSize: 48, marginTop: 14, color: 'var(--navy-deep)' }}>
            The gap<br/>nobody built for.
          </h2>
        </div>
        <div>
          <Reveal>
            <p className="serif dropcap" style={{ fontSize: 22, lineHeight: 1.5, margin: 0, color: 'var(--ink)' }}>
              You're past the "will this work?" question.<br/>
              You're stuck on "why is growing this so hard?"<br/>
              — and Virginia's support infrastructure is fragmented across forty agencies, half a dozen capital programs, and a dozen workforce portals.
              <br/><br/>
              You're not big enough for a full-time government-affairs person, an in-house lawyer, or a CFO who knows every capital program.
              <br/><br/>
              That's the gap FGBVA was built to close.
            </p>
          </Reveal>
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, paddingTop: 32, borderTop: '1px solid var(--rule)' }}>
            {[
              ['$1M–$15M', 'target revenue'],
              ['5–75', 'headcount'],
              ['Statewide', 'RVA · HRV · NoVA'],
            ].map(([n, l]) => (
              <div key={l}>
                <div className="display" style={{ fontSize: 34, color: 'var(--navy)' }}>{n}</div>
                <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 6 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const PillarsSection = () => (
  <section id="front-door" style={{ padding: '120px 0', background: 'var(--paper-2)', borderTop: '1px solid var(--rule)' }}>
    <div className="container">
      <div style={{ textAlign: 'center', maxWidth: 780, margin: '0 auto 72px' }}>
        <div className="eyebrow">§ The Growth Front Door</div>
        <h2 className="display" style={{ fontSize: 64, marginTop: 14, color: 'var(--navy-deep)' }}>
          One front door.<br/>
          <span style={{ fontStyle: 'italic', color: 'var(--gold)' }}>Four bottlenecks.</span>
        </h2>
        <p className="serif" style={{ fontSize: 18, marginTop: 22, color: 'var(--ink)', opacity: 0.8, lineHeight: 1.5 }}>
          Every growth-stage operator hits the same four walls. We've indexed the programs behind each
          one and built the relationships to route you to the right named contact.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {[
          { num: '01', title: 'Capital', roman: 'I', copy: 'Intros to banks, SSBCI programs, state loan funds, and growth-stage capital providers — with your story pre-framed.', tags: ['SSBCI', 'VSBFA', 'Banker intros', 'Growth funds'] },
          { num: '02', title: 'Procurement', roman: 'II', copy: 'A real path into SWaM, eVA, and GovCon adjacencies without hiring a six-figure consultant.', tags: ['SWaM', 'eVA', 'Mentor-protégé', 'Federal 8(a)'] },
          { num: '03', title: 'Talent', roman: 'III', copy: 'VCCS, apprenticeship funding, and workforce programs mapped to your region and pipeline.', tags: ['VCCS', 'Apprenticeship VA', 'GO Virginia'] },
          { num: '04', title: 'Compliance', roman: 'IV', copy: 'Licensing, multi-state tax, and regulatory asks translated into plain English.', tags: ['SCC', 'DOLI', 'VCDPA', 'Multi-state tax'] },
        ].map((p, i) => (
          <Reveal key={p.num} delay={i * 80}>
            <div className="card-lift" style={{
              background: 'var(--paper)',
              border: '1px solid var(--rule)',
              padding: '28px 24px',
              minHeight: 340,
              position: 'relative',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
                <span className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.18em' }}>PILLAR · {p.num}</span>
                <span className="serif" style={{ fontSize: 20, color: 'var(--gold)', fontStyle: 'italic', fontWeight: 600 }}>{p.roman}</span>
              </div>
              <div className="display" style={{ fontSize: 30, color: 'var(--navy-deep)', marginBottom: 12 }}>{p.title}</div>
              <p className="serif" style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink)', opacity: 0.8, margin: 0, flex: 1 }}>
                {p.copy}
              </p>
              <div style={{ marginTop: 18, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {p.tags.map(t => (
                  <span key={t} className="mono" style={{
                    fontSize: 9.5, padding: '3px 7px', color: 'var(--muted)',
                    border: '1px solid var(--rule)', letterSpacing: '0.06em',
                  }}>{t}</span>
                ))}
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

const HowItWorksSection = () => (
  <section style={{ padding: '120px 0', background: 'var(--paper)', borderTop: '1px solid var(--rule)' }}>
    <div className="container">
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 64, borderBottom: '1px solid var(--rule)', paddingBottom: 20 }}>
        <div className="eyebrow">§ How the handoff works</div>
        <h2 className="display" style={{ fontSize: 44, color: 'var(--navy-deep)', margin: 0, textAlign: 'right' }}>
          Not a link dump.<br/>
          <span style={{ fontStyle: 'italic', color: 'var(--gold)' }}>A real introduction.</span>
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, position: 'relative' }}>
        {[
          { n: '01', t: 'Tell us where you\'re stuck.', c: 'Two-minute intake form. Stage, region, and the specific bottleneck — procurement, capital, talent, or compliance.' },
          { n: '02', t: 'A real operator triages you.', c: 'Not a chatbot. An FGBVA operations lead reviews your intake and matches you to the right one or two resources inside or outside our network.' },
          { n: '03', t: 'Warm intro to a named person.', c: 'You get an introduction to a specific human at a specific agency, bank, or capital partner. We follow up at two weeks to make sure it landed.' },
        ].map((s, i) => (
          <Reveal key={s.n} delay={i * 100}>
            <div style={{
              padding: '0 32px',
              borderLeft: i > 0 ? '1px solid var(--rule)' : 'none',
              minHeight: 260,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
                <div style={{
                  width: 38, height: 38, borderRadius: '50%',
                  border: '1.5px solid var(--gold)', color: 'var(--gold)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: '"JetBrains Mono", monospace', fontSize: 12, fontWeight: 600,
                }}>{s.n}</div>
                <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '0.18em' }}>
                  STEP {parseInt(s.n)} OF 3
                </div>
              </div>
              <h3 className="display" style={{ fontSize: 26, color: 'var(--navy-deep)', margin: '0 0 12px', lineHeight: 1.15 }}>
                {s.t}
              </h3>
              <p className="serif" style={{ fontSize: 15.5, lineHeight: 1.55, color: 'var(--ink)', opacity: 0.82, margin: 0 }}>{s.c}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

const PeerCirclesSection = () => (
  <section id="peers" style={{
    padding: '140px 0',
    background: 'var(--navy-deep)',
    color: 'var(--paper)',
    position: 'relative', overflow: 'hidden',
  }}>
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.08, pointerEvents: 'none' }}>
      <defs>
        <pattern id="nv-grid" width="60" height="60" patternUnits="userSpaceOnUse">
          <path d="M60 0 H0 V60" fill="none" stroke="#d4a017" strokeWidth="0.5"/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#nv-grid)" />
    </svg>

    <div className="container" style={{ position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ color: 'var(--gold-2)' }}>§ The Peer Circle</div>
          <h2 className="display" style={{ fontSize: 78, margin: '18px 0 0', color: 'var(--paper)', lineHeight: 0.96 }}>
            No vendors.<br/>
            <span style={{ fontStyle: 'italic', color: 'var(--gold-2)' }}>No cheerleaders.</span><br/>
            Just operators.
          </h2>
          <p className="serif" style={{ fontSize: 18, lineHeight: 1.55, color: 'rgba(247,242,228,0.78)', marginTop: 28, maxWidth: 520 }}>
            Stage-matched monthly circles in Richmond, Hampton Roads, and Northern Virginia. Chatham House
            rules. One hot-seat, three asks, one win per session. You leave with a shortlist of things to do
            on Monday — not a pile of decks.
          </p>

          <div style={{ marginTop: 36, display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {['8–12 operators', '90 min · facilitated', 'Vendor-free', 'Stage-matched', 'Quarterly hot-seat'].map(t => (
              <span key={t} className="mono" style={{
                fontSize: 10.5, padding: '7px 12px', color: 'var(--paper)',
                border: '1px solid rgba(247,242,228,0.25)', letterSpacing: '0.08em',
                textTransform: 'uppercase',
              }}>{t}</span>
            ))}
          </div>
        </div>

        {/* Circle roster */}
        <div style={{
          background: 'rgba(247,242,228,0.04)',
          border: '1px solid rgba(247,242,228,0.15)',
          padding: '8px 24px',
        }}>
          {[
            ['RVA · Circle 02', '$5M–$15M · services', '12 / 12'],
            ['HRV · Circle 01', '$1M–$5M · tech-enabled', '10 / 12'],
            ['NOVA · Circle 03', '$5M–$15M · GovCon', '11 / 12'],
            ['RVA · Circle 04', '$1M–$5M · multi-location', '9 / 12'],
            ['NOVA · Circle 05', '$15M+ · cross-sector', '8 / 10'],
          ].map(([name, tag, count], i, arr) => (
            <div key={name} style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '18px 0',
              borderBottom: i < arr.length - 1 ? '1px dashed rgba(247,242,228,0.18)' : 'none',
            }}>
              <div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--gold-2)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{name}</div>
                <div className="serif" style={{ fontSize: 16, color: 'var(--paper)', marginTop: 4 }}>{tag}</div>
              </div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--paper)', letterSpacing: '0.05em' }}>{count}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Pull quote */}
      <div style={{ marginTop: 100, borderTop: '1px solid rgba(247,242,228,0.2)', paddingTop: 60, display: 'grid', gridTemplateColumns: '1fr 3fr', gap: 40, alignItems: 'start' }}>
        <div className="serif" style={{ fontSize: 96, lineHeight: 0.8, color: 'var(--gold-2)' }}>"</div>
        <div>
          <blockquote className="serif" style={{
            fontSize: 34, lineHeight: 1.25, margin: 0, color: 'var(--paper)',
            fontStyle: 'italic', fontWeight: 400,
          }}>
            I spent six months trying to figure out which state program to call. FGBVA got me on the
            phone with the right person in a week — and that call turned into our biggest contract of the year.
          </blockquote>
          <div className="mono" style={{ marginTop: 22, fontSize: 11, color: 'var(--gold-2)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            — Member quote · placeholder · Founder, $7M services co · Richmond
          </div>
        </div>
      </div>
    </div>
  </section>
);

const PolicySection = () => (
  <section id="policy" style={{ padding: '120px 0', background: 'var(--paper)', borderTop: '1px solid var(--rule)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'start', marginBottom: 48 }}>
        <div>
          <div className="eyebrow">§ Policy</div>
          <h2 className="display" style={{ fontSize: 56, marginTop: 14, color: 'var(--navy-deep)' }}>
            A voice in Richmond — <span style={{ fontStyle: 'italic', color: 'var(--gold)' }}>not a lobbyist in a suit.</span>
          </h2>
        </div>
        <p className="serif" style={{ fontSize: 19, lineHeight: 1.6, color: 'var(--ink)', opacity: 0.82, marginTop: 48 }}>
          We translate what operators tell us in circles into specific, measurable asks — the kind a
          legislator can vote on and an agency head can implement. No "business climate" abstractions.
          No panels about ecosystem vibrancy. Real line items: thresholds, timelines, dollar figures,
          portals, pilots. Members see every ask before it's filed.
        </p>
      </div>

      <div style={{ border: '1px solid var(--rule)', background: 'var(--paper-2)' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '140px 160px 1fr 120px',
          padding: '14px 24px',
          borderBottom: '1px solid var(--rule)',
          background: 'var(--paper-3)',
        }}>
          {['Docket', 'Pillar', 'Ask', 'Status'].map(h => (
            <div key={h} className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{h}</div>
          ))}
        </div>
        {[
          ['#VA-2026-001', 'Procurement', 'Raise SWaM micro-purchase threshold from $10K to $25K', 'filed'],
          ['#VA-2026-002', 'Capital', 'Expand SSBCI loan-loss reserves for $1M–$15M tier', 'drafting'],
          ['#VA-2026-003', 'Talent', 'Apprenticeship tax credit, growth-stage employers', 'research'],
          ['#VA-2026-004', 'Compliance', 'Single-portal multi-agency licensing pilot', 'proposed'],
        ].map(([id, pillar, ask, status], i, arr) => {
          const statusColor = { filed: '#3a6b4a', drafting: '#b8860b', research: '#4a6fa5', proposed: '#5b6780' }[status];
          return (
            <div key={id} style={{
              display: 'grid', gridTemplateColumns: '140px 160px 1fr 120px',
              padding: '18px 24px',
              borderBottom: i < arr.length - 1 ? '1px solid var(--rule)' : 'none',
              alignItems: 'center',
              background: i % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.3)',
            }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.06em' }}>{id}</div>
              <div className="mono" style={{ fontSize: 10.5, color: 'var(--gold)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{pillar}</div>
              <div className="serif" style={{ fontSize: 16, color: 'var(--navy-deep)' }}>{ask}</div>
              <div className="mono" style={{ fontSize: 10.5, color: statusColor, letterSpacing: '0.12em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: statusColor }}></span>{status}
              </div>
            </div>
          );
        })}
      </div>
      <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', marginTop: 14, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
        Docket shown is illustrative · replace with live agenda pre-launch
      </div>
    </div>
  </section>
);

const TrustBar = () => (
  <section style={{ padding: '48px 0', background: 'var(--paper-2)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, alignItems: 'center' }}>
        <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '0.16em', textTransform: 'uppercase', lineHeight: 1.5 }}>
          Convened with<br/>
          <span style={{ color: 'var(--navy)' }}>state agencies, capital partners, workforce boards</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24 }}>
          {['Commonwealth of VA', 'VEDP', 'VA SBSD', 'VA Bankers Assn', 'VA Chamber'].map(p => (
            <div key={p} className="placeholder" style={{ height: 56 }}>{p}</div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

window.WhySection = WhySection;
window.PillarsSection = PillarsSection;
window.HowItWorksSection = HowItWorksSection;
window.PeerCirclesSection = PeerCirclesSection;
window.PolicySection = PolicySection;
window.TrustBar = TrustBar;