// Hi-Fi Hero — routing-diagram hero, editorial headline
// Takes B's "Growth Front Door" diagram and fuses D's big-serif editorial hero.

const RoutingDiagram = () => {
  // Static-but-alive: animated dashed flow, subtle pulse on central node.
  const navy = 'var(--navy)'; const gold = 'var(--gold)'; const muted = 'var(--muted)';
  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: 1100, margin: '0 auto' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1.1fr 1fr',
        gap: 0, alignItems: 'stretch', minHeight: 460,
      }}>
        {/* Left — operator pain */}
        <div style={{ padding: '4px 12px 4px 0' }}>
          <div className="eyebrow" style={{ color: 'var(--red)', marginBottom: 18 }}>Operator · inbound</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              "We can't get through to the right state program.",
              "Our next contract needs GovCon compliance help.",
              "Stuck on the capital raise — wrong intros.",
              "Need 12 hires in 6 months. No workforce map.",
            ].map((q, i) => (
              <Reveal key={q} delay={i * 80} className="reveal" style={{
                padding: '12px 14px',
                background: 'rgba(255,255,255,0.55)',
                border: '1px solid var(--rule)',
                borderLeft: '2px solid var(--red)',
                fontFamily: '"Source Serif 4", Georgia, serif',
                fontSize: 15, lineHeight: 1.4, color: 'var(--ink)',
                fontStyle: 'italic',
              }}>
                &ldquo;{q}&rdquo;
              </Reveal>
            ))}
          </div>
        </div>

        {/* Middle — router */}
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg viewBox="0 0 400 460" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
            {/* Incoming */}
            {[60, 150, 240, 330].map((y, i) => (
              <path key={'in-'+i}
                d={`M0 ${y} C 110 ${y}, 140 230, 180 230`}
                stroke="var(--rule)" strokeWidth="1.25" fill="none"
                strokeDasharray="3 3"
              />
            ))}
            {/* Outgoing */}
            {[60, 150, 240, 330].map((y, i) => (
              <path key={'out-'+i}
                d={`M220 230 C 260 230, 290 ${y}, 400 ${y}`}
                stroke="var(--gold)" strokeWidth="1.6" fill="none"
                className="flow-out"
              />
            ))}
          </svg>

          {/* Central router card */}
          <div style={{
            position: 'relative', zIndex: 2,
            width: 210,
            background: 'var(--navy)', color: 'var(--paper)',
            border: '1px solid var(--navy)',
            boxShadow: '6px 6px 0 var(--gold), 0 30px 60px -30px rgba(15,29,58,0.45)',
            padding: '22px 18px',
            textAlign: 'center',
          }}>
            <div className="eyebrow" style={{ color: 'var(--gold-2)' }}>FGBVA · Router</div>
            <div className="display" style={{ fontSize: 26, margin: '10px 0 8px', color: 'var(--paper)' }}>
              Growth<br/>Front Door
            </div>
            <div className="mono" style={{ fontSize: 10.5, color: 'rgba(247,242,228,0.65)', letterSpacing: '0.06em' }}>
              human-verified handoff
            </div>
            <div style={{ marginTop: 14, display: 'flex', flexWrap: 'wrap', gap: 5, justifyContent: 'center' }}>
              {['triage', 'match', 'intro', 'follow-up'].map(t => (
                <span key={t} className="mono" style={{
                  fontSize: 9.5, padding: '3px 7px', color: 'var(--paper)',
                  border: '1px solid rgba(247,242,228,0.35)',
                  letterSpacing: '0.08em',
                }}>{t}</span>
              ))}
            </div>
          </div>
        </div>

        {/* Right — outbound intros */}
        <div style={{ padding: '4px 0 4px 12px' }}>
          <div className="eyebrow" style={{ color: 'var(--green)', marginBottom: 18, textAlign: 'right' }}>Real intro · outbound</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              ['Capital', 'VA SSBCI · growth bank desk'],
              ['Procurement', 'VA SBSD · SWaM · prime intro'],
              ['Talent', 'VCCS · apprenticeship · GO VA'],
              ['Compliance', 'counsel on retainer · SCC'],
            ].map(([p, who], i) => (
              <Reveal key={p} delay={i * 80 + 120} style={{
                padding: '12px 14px',
                background: 'rgba(255,255,255,0.55)',
                border: '1px solid var(--rule)',
                borderRight: '2px solid var(--gold)',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <div>
                  <div className="serif" style={{ fontSize: 17, fontWeight: 600, color: 'var(--navy)' }}>{p}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', marginTop: 2, letterSpacing: '0.06em' }}>{who}</div>
                </div>
                <div className="mono" style={{ color: 'var(--gold)', fontSize: 14 }}>↗</div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>

      {/* Footer caption */}
      <div style={{
        marginTop: 28, display: 'flex', justifyContent: 'space-between',
        paddingTop: 16, borderTop: '1px dashed var(--rule)',
      }}>
        <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          avg. time to named intro · <span style={{ color: 'var(--navy)', fontWeight: 600 }}>5 business days</span>
        </div>
        <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          follow-up at · <span style={{ color: 'var(--navy)', fontWeight: 600 }}>14 days</span>
        </div>
      </div>
    </div>
  );
};

const Hero = ({ ctaCopy }) => {
  return (
    <section id="top" style={{
      position: 'relative',
      padding: '40px 0 100px',
      background: `
        radial-gradient(ellipse 800px 500px at 20% 0%, rgba(184,134,11,0.08), transparent 60%),
        radial-gradient(ellipse 800px 500px at 90% 40%, rgba(15,29,58,0.06), transparent 60%),
        var(--paper)
      `,
      overflow: 'hidden',
    }}>
      {/* Subtle grid */}
      <svg style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        pointerEvents: 'none', opacity: 0.35,
      }}>
        <defs>
          <pattern id="hg" width="48" height="48" patternUnits="userSpaceOnUse">
            <path d="M48 0 H0 V48" fill="none" stroke="var(--rule)" strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#hg)" />
      </svg>

      <div className="container" style={{ position: 'relative', paddingTop: 60 }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 22 }}>
          <div className="chip">
            <span className="dot"></span>
            <span>A trade association for Virginia founder-operators</span>
          </div>
        </div>

        <Reveal>
          <h1 className="display" style={{
            fontSize: 92, textAlign: 'center', margin: 0, color: 'var(--navy-deep)',
            maxWidth: 1100, marginLeft: 'auto', marginRight: 'auto',
          }}>
            You built the company.<br/>
            Now scale it — <span style={{ fontStyle: 'italic', color: 'var(--gold)' }}>without<br/>
            the insider tax.</span>
          </h1>
        </Reveal>

        <Reveal delay={140}>
          <p className="serif" style={{
            maxWidth: 720, margin: '32px auto 0',
            textAlign: 'center', fontSize: 20, lineHeight: 1.55,
            color: 'var(--ink)', opacity: 0.82,
          }}>
            FGBVA is the Growth Front Door for Virginia companies past $1M in revenue.
            One form gets you a warm handoff to capital, procurement, talent, and compliance —
            plus a peer circle of operators at your stage, and a policy voice that carries your asks to Richmond.
          </p>
        </Reveal>

        <Reveal delay={240}>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 14, marginTop: 40 }}>
            <a href="#intake" className="btn btn-primary">{ctaCopy} <span>→</span></a>
            <a href="#front-door" className="btn btn-ghost">See how routing works</a>
          </div>
        </Reveal>

        {/* Diagram */}
        <div style={{ marginTop: 90 }}>
          <Reveal delay={320}>
            <RoutingDiagram />
          </Reveal>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;