// Native intake section + final CTA + footer.

const IntakeSection = ({ ctaCopy }) => (
  <section id="intake" style={{
    padding: '120px 0',
    background: `
      radial-gradient(ellipse 600px 400px at 80% 20%, rgba(184,134,11,0.10), transparent 65%),
      var(--paper)
    `,
    borderTop: '1px solid var(--rule)',
  }}>
    <div className="container">
      <div className="intake-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 64, alignItems: 'start' }}>
        <div className="intake-copy" style={{ position: 'sticky', top: 120 }}>
          <div className="eyebrow">§ Start here</div>
          <h2 className="display" style={{ fontSize: 68, margin: '18px 0 24px', color: 'var(--navy-deep)' }}>
            Tell us where<br/>
            <span style={{ fontStyle: 'italic', color: 'var(--gold)' }}>you're stuck.</span>
          </h2>
          <p className="serif" style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--ink)', opacity: 0.82, maxWidth: 440 }}>
            Two minutes. We triage within five business days — and you'll hear back either way. Membership
            is free to apply; member dues start once you're onboarded.
          </p>

          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['01', 'Submit the intake form'],
              ['02', 'AI reviews your request against the provider network'],
              ['03', 'FGBVA reviews the recommendation'],
              ['04', 'Warm intro to a named contact'],
            ].map(([n, t]) => (
              <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', color: 'var(--gold)', width: 24 }}>{n}</div>
                <div className="serif" style={{ fontSize: 15.5, color: 'var(--navy-deep)' }}>{t}</div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 40, padding: 20,
            background: 'var(--paper-2)',
            border: '1px solid var(--rule)',
            borderLeft: '3px solid var(--gold)',
          }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 6 }}>
              Human-reviewed routing
            </div>
            <div className="serif" style={{ fontSize: 15, color: 'var(--ink)', lineHeight: 1.5 }}>
              Your request is reviewed before any intro is made. FGBVA member data is never sold.
            </div>
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{
            background: 'var(--paper)',
            border: '1px solid var(--navy)',
            boxShadow: '8px 8px 0 var(--gold)',
            padding: 6,
          }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '10px 14px',
              borderBottom: '1px solid var(--rule)',
              background: 'var(--paper-2)',
            }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--muted)', textTransform: 'uppercase' }}>
                Growth Front Door · Intake
              </div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--muted)' }}>
                ~ 2 min
              </div>
            </div>
            <NativeIntakeForm ctaCopy={ctaCopy} />
          </div>
          <div className="mono" style={{ marginTop: 12, fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', textAlign: 'center' }}>
            Secure · <span style={{ color: 'var(--navy)' }}>AI-assisted, FGBVA-approved routing</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const NativeIntakeForm = ({ ctaCopy }) => {
  const [status, setStatus] = React.useState({ state: 'idle', message: '' });
  const [needs, setNeeds] = React.useState([]);

  const toggleNeed = (need) => {
    setNeeds(current => current.includes(need) ? current.filter(item => item !== need) : [...current, need]);
  };

  const submit = async (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    const data = Object.fromEntries(new FormData(form).entries());
    const payload = {
      requesterName: data.requesterName,
      companyName: data.companyName,
      requesterEmail: data.requesterEmail,
      geography: data.geography,
      stage: data.stage,
      industry: data.industry,
      headcount: data.headcount,
      desiredOutcome: needs.join(', '),
      requestDescription: data.requestDescription,
      urgency: data.urgency,
      consent: Boolean(data.consent),
      source: 'fgbva.org',
    };

    if (!payload.consent) {
      setStatus({ state: 'error', message: 'Please confirm consent before submitting.' });
      return;
    }

    setStatus({ state: 'loading', message: 'Submitting your request...' });
    try {
      const response = await fetch('/.netlify/functions/intake', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const result = await response.json();
      if (!response.ok) throw new Error(result.error || 'Submission failed');
      form.reset();
      setNeeds([]);
      setStatus({
        state: 'success',
        message: 'Request received. FGBVA will review the recommendation and follow up within five business days.',
      });
    } catch (error) {
      setStatus({ state: 'error', message: error.message || 'Something went wrong. Please try again.' });
    }
  };

  return (
    <form style={{ padding: 32, background: '#fff' }} onSubmit={submit}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <FormField name="requesterName" label="Founder / operator name" placeholder="Jane Doe" required />
        <FormField name="companyName" label="Company" placeholder="Acme Logistics, Inc." required />
      </div>
      <FormField name="requesterEmail" label="Work email" placeholder="jane@acmelogistics.com" type="email" required />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <FormField name="geography" label="HQ region" placeholder="Richmond corridor" required />
        <FormSelect name="stage" label="Stage" options={['$1M-$5M revenue', '$5M-$15M revenue', '$15M+ revenue', 'Pre-$1M']} required />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <FormSelect name="industry" label="Industry" options={['Tech-enabled services', 'SaaS', 'Defense / GovCon', 'Multi-location services', 'Light manufacturing', 'Other']} required />
        <FormField name="headcount" label="Headcount" placeholder="38" />
      </div>
      <div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 8, marginTop: 8 }}>
          Which front door do you need first?
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {['Capital', 'Procurement', 'Talent', 'Compliance'].map(p => (
            <label key={p} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '10px 12px', border: '1px solid var(--rule)', cursor: 'pointer',
              fontFamily: 'Inter, sans-serif', fontSize: 13,
              background: needs.includes(p) ? 'rgba(184,134,11,0.10)' : '#fff',
            }}>
              <input type="checkbox" checked={needs.includes(p)} onChange={() => toggleNeed(p)} style={{ accentColor: 'var(--gold)' }} />
              {p}
            </label>
          ))}
        </div>
      </div>
      <div style={{ marginTop: 18 }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 8 }}>
          Tell us the specific bottleneck
        </div>
        <textarea
          className="field"
          name="requestDescription"
          rows="4"
          required
          placeholder="e.g. We're ready to bid on state contracts but can't figure out SWaM certification alongside our existing 8(a) work..."
          style={{ resize: 'vertical', fontFamily: 'Inter, sans-serif' }}
        />
      </div>
      <FormSelect name="urgency" label="Urgency" options={['Medium', 'High', 'Critical', 'Low']} />
      <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginTop: 18, fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'var(--muted)', lineHeight: 1.45 }}>
        <input name="consent" type="checkbox" required style={{ marginTop: 2, accentColor: 'var(--gold)' }} />
        I consent to FGBVA processing this business request for AI-assisted matching and human-reviewed warm introductions.
      </label>
      {status.message && (
        <div role="status" style={{
          marginTop: 18,
          padding: '12px 14px',
          border: `1px solid ${status.state === 'error' ? 'var(--red)' : 'var(--rule)'}`,
          background: status.state === 'success' ? 'rgba(58,107,74,0.10)' : status.state === 'error' ? 'rgba(161,60,44,0.08)' : 'var(--paper-2)',
          color: status.state === 'error' ? 'var(--red)' : 'var(--ink)',
          fontFamily: 'Inter, sans-serif',
          fontSize: 13,
          lineHeight: 1.45,
        }}>
          {status.message}
        </div>
      )}
      <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 18 }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em' }}>
          Response within 5 business days
        </div>
        <button type="submit" className="btn btn-primary" disabled={status.state === 'loading'}>
          {status.state === 'loading' ? 'Submitting...' : ctaCopy} <span>→</span>
        </button>
      </div>
    </form>
  );
};

const FormField = ({ label, name, placeholder, type = 'text', required = false }) => (
  <div style={{ marginBottom: 16 }}>
    <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 6 }}>
      {label}
    </div>
    <input name={name} type={type} className="field" placeholder={placeholder} required={required} />
  </div>
);

const FormSelect = ({ label, name, options, required = false }) => (
  <div style={{ marginBottom: 16 }}>
    <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 6 }}>
      {label}
    </div>
    <select name={name} className="field" defaultValue="" required={required}>
      <option value="" disabled>Select...</option>
      {options.map(o => <option key={o}>{o}</option>)}
    </select>
  </div>
);

const FooterSection = () => (
  <footer style={{ background: 'var(--navy-deep)', color: 'var(--paper)', padding: '72px 0 32px', borderTop: '4px solid var(--gold)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, paddingBottom: 48, borderBottom: '1px solid rgba(247,242,228,0.15)' }}>
        <div>
          <FGBVALogo variant="light" />
          <p className="serif" style={{ fontSize: 15, lineHeight: 1.5, color: 'rgba(247,242,228,0.7)', marginTop: 20, maxWidth: 320 }}>
            A trade association for Virginia founder-operators scaling past the startup phase.
            Capital · Procurement · Talent · Compliance.
          </p>
        </div>
        {[
          ['Navigate', ['Growth Front Door', 'Peer Circles', 'Policy Agenda', 'Member Directory']],
          ['Learn', ['The Front Door (brief)', 'Research', 'Events', 'Media kit']],
          ['Contact', ['hello@fgbva.org', 'Richmond, Virginia', 'Hampton Roads, Virginia', 'Northern Virginia']],
        ].map(([title, items]) => (
          <div key={title}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--gold-2)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18 }}>{title}</div>
            {items.map(i => (
              <div key={i} style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(247,242,228,0.75)', marginBottom: 10 }}>{i}</div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className="mono" style={{ fontSize: 10, color: 'rgba(247,242,228,0.5)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          © 2026 Founders &amp; Growth Virginia Alliance · Built in the Commonwealth
        </div>
        <div style={{ display: 'flex', gap: 16 }}>
          {['Privacy', 'Terms', 'Code of Conduct'].map(l => (
            <div key={l} className="mono" style={{ fontSize: 10, color: 'rgba(247,242,228,0.5)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{l}</div>
          ))}
        </div>
      </div>
    </div>
  </footer>
);

window.IntakeSection = IntakeSection;
window.FooterSection = FooterSection;