// Remaining sections

const { useEffect: uE2, useState: uS2, useRef: uR2 } = React;

// Oregon map with pulsing agency dots + lens
function OregonMap() {
  const [ref, seen] = useReveal(0.2);
  const [hover, setHover] = uS2(null);
  const [mouse, setMouse] = uS2({ x: 500, y: 300, on: false });
  const svgRef = uR2(null);

  const onMove = (e) => {
    const rect = svgRef.current?.getBoundingClientRect();
    if (!rect) return;
    const x = ((e.clientX - rect.left) / rect.width) * 1000;
    const y = ((e.clientY - rect.top) / rect.height) * 640;
    setMouse({ x, y, on: true });
  };

  return (
    <section ref={ref} style={{ padding: '140px 32px', position: 'relative', zIndex: 3 }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div className="section-label"><span>§ 02 · The Territory</span><span className="mid" /><span>43 agencies · 36 counties</span></div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginTop: 48, alignItems: 'start' }} className="two-col">
          <div className={`reveal ${seen ? 'in' : ''}`}>
            <h2 className="serif" style={{ margin: 0, fontSize: 'clamp(36px, 5vw, 68px)', lineHeight: 1.02, letterSpacing: '-0.025em', fontWeight: 500 }}>
              From Astoria to Enterprise, <span style={{ fontStyle: 'italic', color: 'var(--rust)' }}>we follow the money.</span>
            </h2>
            <p style={{ marginTop: 28, fontSize: 17, lineHeight: 1.65, color: 'var(--muted)', maxWidth: 480 }}>
              Every pulsing dot is an Oregon public entity in our library — a city, county, school district, or
              special district whose eligibility we've verified. Hover to see who.
            </p>

            <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20, maxWidth: 480 }}>
              {[
                ['Federal', 62, 'var(--rust)'],
                ['State', 78, 'var(--ink)'],
                ['Private / foundation', 31, 'var(--slate)'],
                ['Cycles open now', 68, 'var(--rust-soft)'],
              ].map(([l, n, c]) => (
                <div key={l} style={{ borderTop: `3px solid ${c}`, paddingTop: 14 }}>
                  <div className="eyebrow" style={{ fontSize: 10 }}>{l}</div>
                  <div className="serif" style={{ fontSize: 40, fontWeight: 500, lineHeight: 1, fontStyle: 'italic', color: 'var(--ink)', marginTop: 4 }}>
                    <Counter to={n} />
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className={`reveal d2 ${seen ? 'in' : ''}`} style={{ position: 'relative', border: '1px solid var(--rule)', background: 'var(--surface)', padding: 20 }}>
            <svg ref={svgRef} viewBox="0 0 1000 640" className="or-svg"
              onMouseMove={onMove}
              onMouseLeave={() => { setMouse(m => ({ ...m, on: false })); setHover(null); }}>
              <path d={OREGON_PATH} className="state" />
              {/* sub lines for texture */}
              {[120, 240, 360, 480].map(y => (
                <line key={y} x1="60" y1={y} x2="930" y2={y} stroke="var(--rule)" strokeDasharray="2,6" />
              ))}

              {AGENCY_DOTS.map((d, i) => {
                const dx = mouse.x - d.x, dy = mouse.y - d.y;
                const dist = Math.sqrt(dx*dx + dy*dy);
                const near = mouse.on && dist < 110;
                return (
                  <g key={i}>
                    <circle cx={d.x} cy={d.y} r="14" fill="var(--rust)" opacity={near ? .18 : 0} style={{ transition: 'opacity .3s' }} />
                    <circle
                      cx={d.x} cy={d.y}
                      r={hover === i ? 7 : 4}
                      className={hover === i ? '' : 'pulse'}
                      fill={hover === i ? 'var(--ink)' : 'var(--rust)'}
                      style={{ cursor: 'pointer', transition: 'r .2s, fill .2s', animationDelay: `${(i * 0.07) % 2}s` }}
                      onMouseEnter={() => setHover(i)}
                      onMouseLeave={() => setHover(null)}
                    />
                  </g>
                );
              })}

              {/* Lens */}
              {mouse.on && (
                <circle cx={mouse.x} cy={mouse.y} r="90" fill="none" stroke="var(--ink)" strokeWidth="1" strokeDasharray="3,4" opacity=".5" />
              )}

              {/* Hover label */}
              {hover !== null && (
                <g transform={`translate(${AGENCY_DOTS[hover].x + 14} ${AGENCY_DOTS[hover].y - 24})`}>
                  <rect x="0" y="-14" width={AGENCY_DOTS[hover].n.length * 9 + 24} height="34" fill="var(--ink)" />
                  <text x="12" y="-1" fill="var(--bg)" fontFamily="var(--mono)" fontSize="11" letterSpacing="1.4">{AGENCY_DOTS[hover].n.toUpperCase()}</text>
                  <text x="12" y="14" fill="var(--rust-soft)" fontFamily="var(--mono)" fontSize="9" letterSpacing="1">{AGENCY_DOTS[hover].t.toUpperCase()}</text>
                </g>
              )}
            </svg>

            <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '.1em', textTransform: 'uppercase' }}>
              <span>Fig. 1 — Oregon public entity coverage</span>
              <span>Hover to inspect</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Pull quote
function PullQuote() {
  const [ref, seen] = useReveal();
  return (
    <section ref={ref} style={{ padding: '140px 32px', background: 'var(--ink)', color: 'var(--bg)', position: 'relative', zIndex: 3, overflow: 'hidden' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.2em', opacity: .5, marginBottom: 24 }}>
          § 03 — OPINION
        </div>
        <blockquote style={{ margin: 0 }}>
          <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--rust-soft)', fontSize: 200, lineHeight: 1, position: 'absolute', top: -20, left: -20, opacity: .3 }}>“</span>
          <p className={`serif wipe ${seen ? 'in' : ''}`} style={{
            margin: 0, fontSize: 'clamp(32px, 4.8vw, 72px)', lineHeight: 1.15, letterSpacing: '-0.015em',
            fontWeight: 400, textWrap: 'pretty', animationDuration: '1.8s',
          }}>
            Your agency qualifies for more grants than you know about. Someone has to{' '}
            <span style={{ fontStyle: 'italic', color: 'var(--rust-soft)' }}>read the fine print</span> on fifteen agency websites, three hundred PDFs, and a dozen statutory schedules.
            <br /><br />
            <span className="serif" style={{ fontStyle: 'italic', color: 'var(--rust-soft)' }}>That's the job.</span>
          </p>
        </blockquote>
      </div>
    </section>
  );
}

// Library chapters — editorial showcase, no operational details
function Library() {
  const [ref, seen] = useReveal();
  return (
    <section id="library" ref={ref} style={{ padding: '140px 32px', position: 'relative', zIndex: 3 }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div className="section-label"><span>§ 04 · The Library</span><span className="mid" /><span>Six chapters · 171 entries</span></div>

        <div className={`reveal d1 ${seen ? 'in' : ''}`} style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end' }}>
          <h2 className="serif" style={{ margin: 0, fontSize: 'clamp(36px, 5vw, 68px)', lineHeight: 1.02, letterSpacing: '-0.025em', fontWeight: 500 }}>
            Six chapters. <span style={{ fontStyle: 'italic', color: 'var(--rust)' }}>A sampling of what's inside.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--muted)', margin: 0, justifySelf: 'end', maxWidth: 460 }}>
            Every entry is verified against the administering agency's current guidance and maintained as cycles shift.
            The excerpts below show how we organize the library.
          </p>
        </div>

        <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 56 }}>
          {LIBRARY.map((g, i) => (
            <div key={g.title} className={`reveal ${seen ? 'in' : ''} chapter`} style={{ transitionDelay: `${i * 0.1}s` }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 4 }}>
                <span className="serif" style={{ fontSize: 18, fontStyle: 'italic', color: 'var(--rust)', fontWeight: 500 }}>Ch. {String(i + 1).padStart(2, '0')}</span>
                <span style={{ flex: 1, height: 1, background: 'var(--rule)' }} />
              </div>
              <h3 className="serif" style={{ margin: 0, fontSize: 26, lineHeight: 1.15, letterSpacing: '-0.015em', fontWeight: 500 }}>{g.title}</h3>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: 'var(--muted)' }}>{g.sub}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '12px 0 0', display: 'flex', flexDirection: 'column' }}>
                {g.programs.map((p, k) => (
                  <li key={p.name} className="entry" style={{ borderTop: '1px dashed var(--rule)', borderBottom: k === g.programs.length - 1 ? '1px dashed var(--rule)' : 'none' }}>
                    <div className="eyebrow" style={{ fontSize: 9.5, marginBottom: 4 }}>{p.agency}</div>
                    <div className="serif" style={{ fontSize: 16.5, fontWeight: 600, letterSpacing: '-0.01em', lineHeight: 1.25 }}>{p.name}</div>
                    <div className="serif" style={{ fontSize: 13, fontStyle: 'italic', color: 'var(--muted)', marginTop: 3, lineHeight: 1.4 }}>{p.desc}</div>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 44, textAlign: 'center' }}>
          <div className="serif" style={{ fontSize: 22, fontStyle: 'italic', color: 'var(--muted)' }}>
            Plus <span style={{ color: 'var(--rust)', fontStyle: 'normal', fontWeight: 600 }}>150+</span> more programs tracked across every Oregon public entity type.
          </div>
        </div>
      </div>
    </section>
  );
}

// How it works
function How() {
  const [ref, seen] = useReveal();
  const steps = [
    { num: '01', t: 'Tell us about your agency', d: "One 30-minute call. What you are, what you're trying to fund, and the timeline you're working against." },
    { num: '02', t: 'We match against the library', d: "We run your profile against every program we track and return a shortlist with eligibility notes and fit analysis." },
    { num: '03', t: 'You pursue, we help', d: "Take the shortlist and run it yourself, or engage us to draft the narrative, build the budget, and submit on your deadline." },
  ];
  return (
    <section id="how" ref={ref} style={{ padding: '140px 32px', background: 'var(--surface)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', position: 'relative', zIndex: 3 }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div className="section-label"><span>§ 05 · Procedure</span><span className="mid" /><span>From call to shortlist · One week</span></div>
        <div className={`reveal d1 ${seen ? 'in' : ''}`} style={{ marginTop: 48 }}>
          <h2 className="serif" style={{ margin: 0, fontSize: 'clamp(36px, 5vw, 68px)', lineHeight: 1.02, letterSpacing: '-0.025em', fontWeight: 500 }}>
            From <span style={{ fontStyle: 'italic', color: 'var(--rust)' }}>call</span> to <span style={{ fontStyle: 'italic', color: 'var(--rust)' }}>shortlist</span> in three moves.
          </h2>
        </div>
        <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24, marginTop: 56 }}>
          {steps.map((s, i) => (
            <div key={i} className={`reveal ${seen ? 'in' : ''}`} style={{ transitionDelay: `${i*0.12}s`, border: '1px solid var(--rule)', background: 'var(--bg)', padding: '36px 30px', minHeight: 280, display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                <span className="serif" style={{ fontSize: 84, lineHeight: 1, color: 'var(--rust)', fontWeight: 500, letterSpacing: '-0.03em', fontStyle: 'italic' }}>{s.num}</span>
                <span style={{ flex: 1, height: 1, background: 'var(--rule)', alignSelf: 'center' }} />
              </div>
              <h3 className="serif" style={{ margin: 0, fontSize: 26, lineHeight: 1.15, fontWeight: 500, letterSpacing: '-0.015em' }}>{s.t}</h3>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: 'var(--muted)' }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Why
function Why() {
  const [ref, seen] = useReveal();
  const pillars = [
    { k: 'i.', t: 'Oregon-only', d: "Every program in the library is verified for Oregon public entity eligibility and cross-referenced against the administering agency's current NOFO." },
    { k: 'ii.', t: 'Full primary sources', d: 'Every entry cites its authorizing regulation, current application instructions, and recent award announcements. No paraphrased hearsay.' },
    { k: 'iii.', t: 'Maintained, not static', d: "Funding cycles open and close. Appropriations change. Deadlines move. We track the sources so you don't have to." },
  ];
  return (
    <section ref={ref} style={{ padding: '140px 32px', background: 'var(--ink)', color: 'var(--bg)', position: 'relative', zIndex: 3 }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 24, padding: '14px 0', borderTop: '1px solid rgba(255,255,255,.3)', borderBottom: '1px solid rgba(255,255,255,.3)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase' }}>
          <span>§ 06 · Masthead</span><span style={{ height: 1, background: 'rgba(255,255,255,.3)' }} /><span>Three tenets</span>
        </div>
        <h2 className={`serif reveal d1 ${seen ? 'in' : ''}`} style={{ marginTop: 48, fontSize: 'clamp(36px, 5vw, 68px)', lineHeight: 1.02, letterSpacing: '-0.025em', fontWeight: 500, maxWidth: 1000 }}>
          Oregon grant specialists, working for <span style={{ fontStyle: 'italic', color: 'var(--rust-soft)' }}>Oregon public agencies.</span>
        </h2>
        <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 0, marginTop: 72, borderTop: '1px solid rgba(255,255,255,.2)' }}>
          {pillars.map((p, i) => (
            <div key={i} className={`reveal ${seen ? 'in' : ''}`} style={{ transitionDelay: `${i*0.15}s`, padding: '40px 32px', paddingLeft: i === 0 ? 0 : 32, borderRight: i < pillars.length - 1 ? '1px solid rgba(255,255,255,.2)' : 'none' }}>
              <div className="serif" style={{ fontSize: 18, fontStyle: 'italic', color: 'var(--rust-soft)', marginBottom: 20, fontWeight: 500 }}>{p.k}</div>
              <h3 className="serif" style={{ fontSize: 32, lineHeight: 1.1, letterSpacing: '-0.02em', fontWeight: 500, margin: '0 0 16px' }}>{p.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, opacity: .8, margin: 0 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Coverage
function Coverage() {
  const [ref, seen] = useReveal();
  return (
    <section id="about" ref={ref} style={{ padding: '140px 32px', position: 'relative', zIndex: 3 }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div className="section-label"><span>§ 07 · Coverage</span><span className="mid" /><span>15 entity types · Statewide</span></div>
        <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, marginTop: 48, alignItems: 'start' }}>
          <div className={`reveal ${seen ? 'in' : ''}`} style={{ position: 'sticky', top: 100 }}>
            <h2 className="serif" style={{ margin: 0, fontSize: 'clamp(32px, 4.5vw, 56px)', lineHeight: 1.02, letterSpacing: '-0.025em', fontWeight: 500 }}>
              Every public entity type <span style={{ fontStyle: 'italic', color: 'var(--rust)' }}>in Oregon.</span>
            </h2>
            <p style={{ marginTop: 24, fontSize: 16.5, lineHeight: 1.6, color: 'var(--muted)', maxWidth: 460 }}>
              If your agency is on this list, we've verified eligibility for every matching program. If it's not — tell us. We add entities when clients ask.
            </p>
          </div>
          <div className={`reveal d2 ${seen ? 'in' : ''}`} style={{ border: '1px solid var(--rule)', background: 'var(--surface)' }}>
            {ENTITIES.map(([name, count], i) => (
              <div key={name} className="entry" style={{ display: 'grid', gridTemplateColumns: '60px 1fr auto', alignItems: 'center', padding: '16px 22px', borderBottom: i === ENTITIES.length - 1 ? 'none' : '1px solid var(--rule)', gap: 20 }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{String(i + 1).padStart(2, '0')}</span>
                <span className="serif" style={{ fontSize: 19, letterSpacing: '-0.01em', fontWeight: 500 }}>{name}</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--rust)' }}>{count} programs</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// Services
function Services() {
  const [ref, seen] = useReveal();
  return (
    <section id="services" ref={ref} style={{ padding: '140px 32px', background: 'var(--surface)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', position: 'relative', zIndex: 3 }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div className="section-label"><span>§ 08 · Services</span><span className="mid" /><span>Three engagements</span></div>
        <div className={`reveal d1 ${seen ? 'in' : ''}`} style={{ marginTop: 48, maxWidth: 780 }}>
          <h2 className="serif" style={{ margin: 0, fontSize: 'clamp(32px, 4.5vw, 60px)', lineHeight: 1.02, letterSpacing: '-0.025em', fontWeight: 500 }}>
            Three ways to work with us.
          </h2>
          <p style={{ marginTop: 18, fontSize: 16, lineHeight: 1.6, color: 'var(--muted)' }}>
            Flat fees, never contingent on the award. Start small, scale up when the fit is right.
          </p>
        </div>
        <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 0, border: '1px solid var(--rule)', marginTop: 48 }}>
          {SERVICES.map((s, i) => (
            <div key={i} className={`reveal ${seen ? 'in' : ''}`} style={{ transitionDelay: `${i*0.1}s`, padding: '40px 32px', background: 'var(--bg)', borderRight: i < SERVICES.length - 1 ? '1px solid var(--rule)' : 'none', display: 'flex', flexDirection: 'column', gap: 16, minHeight: 340 }}>
              <div className="eyebrow" style={{ color: 'var(--rust)' }}>Level {String(i+1).padStart(2,'0')}</div>
              <h3 className="serif" style={{ fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>{s.name}</h3>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span className="serif" style={{ fontSize: 36, color: 'var(--ink)', fontWeight: 500, letterSpacing: '-0.02em', fontStyle: 'italic' }}>{s.price}</span>
                {s.unit && <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{s.unit}</span>}
              </div>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--muted)', margin: 0, flex: 1 }}>{s.d}</p>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '.05em', textTransform: 'uppercase', paddingTop: 14, borderTop: '1px dashed var(--rule)' }}>{s.turn}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 24, padding: '18px 24px', background: 'var(--ink)', color: 'var(--bg)', fontSize: 13.5, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <span className="eyebrow" style={{ color: 'var(--rust-soft)' }}>Procurement note</span>
          <span style={{ opacity: .85 }}>Under $25,000 per engagement = direct hire under ORS 279B.065. No RFP required.</span>
        </div>
      </div>
    </section>
  );
}

// Boundaries — typewriter style
function Typewriter({ text, seen, delay = 0 }) {
  const [shown, setShown] = uS2(0);
  uE2(() => {
    if (!seen) return;
    const t = setTimeout(() => {
      let i = 0;
      const iv = setInterval(() => {
        i++;
        setShown(i);
        if (i >= text.length) clearInterval(iv);
      }, 18);
      return () => clearInterval(iv);
    }, delay);
    return () => clearTimeout(t);
  }, [seen, text, delay]);
  return <span>{text.slice(0, shown)}<span className="cursor" style={{ color: 'var(--rust)', fontWeight: 400 }}>{shown < text.length ? '│' : ''}</span></span>;
}

function Boundaries() {
  const [ref, seen] = useReveal(0.25);
  return (
    <section ref={ref} style={{ padding: '140px 32px', position: 'relative', zIndex: 3 }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div className="section-label"><span>§ 09 · Corrections</span><span className="mid" /><span>What we won't do</span></div>
        <div style={{ marginTop: 40 }}>
          {BOUNDARIES.map((p, i) => (
            <div key={i} style={{ padding: '28px 0', borderBottom: '1px solid var(--rule)', display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24 }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', paddingTop: 8 }}>{String(i+1).padStart(2, '0')}</span>
              <div className="serif" style={{ fontSize: 'clamp(22px, 2.4vw, 32px)', lineHeight: 1.35, fontWeight: 400, letterSpacing: '-0.015em' }}>
                <span style={{ fontWeight: 500 }}><Typewriter text={i === 1 ? "No contingency or success fees." : p.t} seen={seen} delay={i * 400} /></span>
                <span style={{ color: 'var(--muted)', fontStyle: 'italic' }}> — {i === 1 ? "Federal grant-making rules require professional-service costs to be reasonable and not contingent upon recovery from the Federal Government (2 CFR 200.459(a)). All fees are flat or hourly, payable regardless of outcome." : p.d}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Giant contact — ink fills word based on scroll
function Contact() {
  const ref = uR2(null);
  const [fill, setFill] = uS2(0);
  const [copied, setCopied] = uS2(false);
  uE2(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      const p = 1 - Math.max(0, Math.min(1, (rect.top) / (vh * 0.8)));
      setFill(Math.max(0, Math.min(1, p)));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const email = 'paul@grnted.co';
  return (
    <section id="contact" ref={ref} style={{ padding: '180px 32px 160px', background: 'var(--ink)', color: 'var(--bg)', position: 'relative', zIndex: 3, overflow: 'hidden' }}>
      {/* giant word */}
      <div aria-hidden style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none', overflow: 'hidden' }}>
        <div className="giant-gr" style={{ position: 'relative' }}>
          <span style={{ color: 'rgba(247,245,241,0.06)' }}>grnted</span>
          <span style={{
            position: 'absolute', inset: 0, color: 'var(--rust)', clipPath: `inset(${(1 - fill) * 100}% 0 0 0)`,
            opacity: .5,
          }}>grnted</span>
        </div>
      </div>
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 24, padding: '14px 0', borderTop: '1px solid rgba(255,255,255,.3)', borderBottom: '1px solid rgba(255,255,255,.3)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', marginBottom: 48 }}>
          <span>§ 10 · Start here</span><span style={{ height: 1, background: 'rgba(255,255,255,.3)' }} /><span>Consider it grnted</span>
        </div>
        <h2 className="serif" style={{ margin: '0 0 48px', fontSize: 'clamp(44px, 7vw, 120px)', lineHeight: .95, letterSpacing: '-0.035em', fontWeight: 500 }}>
          Ready to find <span style={{ fontStyle: 'italic', color: 'var(--rust-soft)' }}>your grants?</span>
        </h2>
        <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <div style={{ border: '1px solid rgba(255,255,255,.22)', padding: '28px', display: 'flex', flexDirection: 'column', gap: 18, background: 'rgba(255,255,255,0.03)' }}>
            <div className="eyebrow" style={{ color: 'var(--rust-soft)' }}>Write us</div>
            <button onClick={() => { navigator.clipboard?.writeText(email); setCopied(true); setTimeout(() => setCopied(false), 1400); }}
              style={{ textAlign: 'left', padding: 0 }}>
              <div className="serif" style={{ fontSize: 'clamp(24px, 3vw, 40px)', fontWeight: 500, letterSpacing: '-0.015em' }}>{email}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--rust-soft)', marginTop: 8, letterSpacing: '.08em', textTransform: 'uppercase' }}>{copied ? '✓ Copied' : 'Click to copy ↗'}</div>
            </button>
          </div>
          <div style={{ border: '1px solid rgba(255,255,255,.22)', padding: '28px', display: 'flex', flexDirection: 'column', gap: 18, background: 'rgba(255,255,255,0.03)' }}>
            <div className="eyebrow" style={{ color: 'var(--rust-soft)' }}>Or book a scan call</div>
            <div className="serif" style={{ fontSize: 'clamp(22px, 2.5vw, 32px)', fontWeight: 500, letterSpacing: '-0.015em', lineHeight: 1.2 }}>
              30 minutes — we'll tell you if there's a fit.
            </div>
            <a href="#" onClick={(e) => e.preventDefault()} className="btn" style={{ background: 'var(--rust)', borderColor: 'var(--rust)', marginTop: 'auto', alignSelf: 'flex-start' }}>
              Reserve a time <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// Tiny T-Rex mark for the Tyrannosaurx holding-company credit.
// Draws in currentColor so the footer's text color controls the fill.
function TyrxMark({ size = 28 }) {
  return (
    <svg viewBox="0 0 100 60" width={size} height={size * 0.6} xmlns="http://www.w3.org/2000/svg" aria-label="Tyrannosaurx" role="img" style={{ verticalAlign: 'middle' }}>
      {/* tail */}
      <path d="M 5 32 Q 18 26 35 28 L 40 32 L 34 32 Q 22 30 10 36 Z" fill="currentColor"/>
      {/* body */}
      <ellipse cx="55" cy="30" rx="22" ry="12" fill="currentColor"/>
      {/* back leg */}
      <path d="M 46 38 Q 44 50 48 52 L 55 52 L 54 40 Z" fill="currentColor"/>
      {/* front leg */}
      <path d="M 62 38 Q 60 50 64 52 L 71 52 L 69 40 Z" fill="currentColor"/>
      {/* neck + head */}
      <path d="M 70 24 Q 78 15 90 17 L 95 21 Q 95 28 86 28 L 78 28 L 72 30 Z" fill="currentColor"/>
      {/* tiny trademark arm */}
      <path d="M 63 32 L 66 36 L 64 38" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
      {/* eye */}
      <circle cx="86" cy="22" r="1.4" fill="#f7f5f1"/>
      <circle cx="86.4" cy="22.2" r="0.7" fill="#0a0f1a"/>
      {/* little smile */}
      <path d="M 86 26 Q 89.5 27.5 93 26" stroke="#0a0f1a" strokeWidth="0.9" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

// Footer
function Footer() {
  return (
    <footer style={{ padding: '60px 32px 40px', background: 'var(--ink-deep)', color: 'rgba(247,245,241,0.7)', borderTop: '1px solid rgba(255,255,255,.1)', position: 'relative', zIndex: 3 }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 40, paddingBottom: 40, borderBottom: '1px solid rgba(255,255,255,.15)' }} className="two-col">
          <div>
            <Wordmark light />
            <p style={{ marginTop: 14, fontSize: 13, lineHeight: 1.6, maxWidth: 360 }}>
              An intelligence service for Oregon public agencies. We index every federal, state, and private grant available to public entities and deliver shortlists tailored to yours. E&O insured.
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'var(--rust-soft)', marginBottom: 12 }}>The firm</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13.5 }}>
              <li><a href="#services" style={{ textDecoration: 'none' }}>Services</a></li>
              <li><a href="#about" style={{ textDecoration: 'none' }}>About</a></li>
              <li><a href="#contact" style={{ textDecoration: 'none' }}>Contact</a></li>
            </ul>
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'var(--rust-soft)', marginBottom: 12 }}>Fine print</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13.5 }}>
              <li><a href="#" onClick={(e) => e.preventDefault()} style={{ textDecoration: 'none' }}>Privacy</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()} style={{ textDecoration: 'none' }}>Terms</a></li>
            </ul>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 24, fontSize: 12, flexWrap: 'wrap', gap: 12, fontFamily: 'var(--mono)' }}>
          <span>© 2026 Tyrannosaurx LLC</span>
          <span style={{ opacity: .6 }}>Salem, Oregon</span>
          <span>Consider it grnted.</span>
        </div>

        {/* Tyrannosaurx holding-company credit + legal DBA disclosure */}
        <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,.08)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
          <a
            href="https://tyrannosaurx.com"
            target="_blank"
            rel="noopener noreferrer"
            style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: 'var(--rust-soft)', textDecoration: 'none', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', fontFamily: 'var(--mono)', fontWeight: 600, transition: 'color .2s' }}
            onMouseEnter={(e) => { e.currentTarget.style.color = '#e87d5a'; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--rust-soft)'; }}
          >
            <TyrxMark size={26} />
            <span>A Tyrannosaurx company</span>
          </a>
          <p style={{ margin: 0, fontSize: 10.5, lineHeight: 1.6, color: 'rgba(247,245,241,0.35)', fontFamily: 'var(--mono)', letterSpacing: '.04em', textAlign: 'center', maxWidth: 580 }}>
            Granted is a registered assumed business name of Tyrannosaurx LLC, an Oregon limited liability company.
          </p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { OregonMap, PullQuote, Library, How, Why, Coverage, Services, Boundaries, Contact, Footer });
