// Demo CTA + Footer
const Demo = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [form, setForm] = React.useState({
    name: '',
    institution: '',
    email: '',
    sampleType: '',
    platform: '',
    volume: '',
    notes: '',
  });

  const update = (key) => (e) => setForm(f => ({ ...f, [key]: e.target.value }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setError(null);
    setSubmitting(true);
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ formType: 'pilot', ...form }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error || 'Submission failed. Please try again.');
      }
      setSubmitted(true);
    } catch (err) {
      setError(err.message || 'Network error. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="demo" className="section demo-section" style={{paddingTop: 160, paddingBottom: 160}}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 96,
        alignItems: 'start',
      }} className="demo-grid">
        {/* Left — pitch */}
        <div>
          <span className="sec-num" style={{display:'block', marginBottom: 16}}>— 08 / Demo</span>
          <span className="eyebrow" style={{display:'block', marginBottom: 32}}>
            <span className="marker"></span>Run a sample with us
          </span>
          <h2 className="h-section" style={{marginBottom: 32}}>
            Send us a sample.<br/>
            We'll send back a <em>library.</em>
          </h2>
          <p style={{
            fontSize: 17,
            lineHeight: 1.55,
            color: 'var(--ink-soft)',
            maxWidth: '46ch',
            marginBottom: 40,
          }}>
            NGI is a service — you don't buy the instrument, we run it for you. Tell us your sample type, target NGS platform, and volume. Our scientists will run a free pilot batch and ship sequencing-ready libraries back within seven days.
          </p>

          <div style={{
            display: 'flex', flexDirection: 'column', gap: 12,
            paddingTop: 24, borderTop: '1px solid var(--rule)',
          }}>
            {[
              ['Pilot batch', 'Free · up to 8 samples'],
              ['Turnaround', '2 days · excl. shipping'],
              ['Output', 'QC-validated libraries + run report'],
            ].map(([k, v], i) => (
              <div key={i} style={{
                display: 'flex',
                justifyContent: 'space-between',
                paddingBottom: 12,
                borderBottom: i < 2 ? '1px solid var(--rule-soft)' : 'none',
              }}>
                <span className="mono" style={{
                  fontSize: 11,
                  color: 'var(--ink-mute)',
                  letterSpacing: '0.04em',
                  textTransform: 'uppercase',
                }}>{k}</span>
                <span style={{fontSize: 14, color: 'var(--ink)'}}>{v}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Right — form */}
        <div className="demo-card" style={{
          background: 'var(--paper)',
          border: '1px solid var(--rule)',
          padding: 40,
        }}>
          {!submitted ? (
            <form onSubmit={handleSubmit}>
              <div style={{
                display: 'flex', justifyContent: 'space-between',
                fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-mute)',
                letterSpacing: '0.04em', textTransform: 'uppercase',
                marginBottom: 32, paddingBottom: 16,
                borderBottom: '1px solid var(--rule-soft)',
              }}>
                <span>Pilot Request</span>
                <span>FORM-NGI-01</span>
              </div>

              <div style={{display:'flex', flexDirection:'column', gap: 24}}>
                <Field label="Full name" placeholder="Dr. Maria Chen" value={form.name} onChange={update('name')} required />
                <Field label="Institution / Company" placeholder="Broad Institute" value={form.institution} onChange={update('institution')} required />
                <Field label="Work email" placeholder="m.chen@broadinstitute.org" type="email" value={form.email} onChange={update('email')} required />

                <div className="demo-fields" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
                  <Field label="Sample type" placeholder="cfDNA, gDNA, FFPE…" value={form.sampleType} onChange={update('sampleType')} />
                  <Field label="NGS platform" placeholder="NovaSeq X" value={form.platform} onChange={update('platform')} />
                </div>

                <Field label="Approximate monthly volume" placeholder="~5,000 libraries / month" value={form.volume} onChange={update('volume')} />

                <Field label="Notes" placeholder="Anything we should know about your samples or workflow." textarea value={form.notes} onChange={update('notes')} />

                {error && (
                  <div className="mono" style={{
                    fontSize: 11,
                    color: '#C0473C',
                    letterSpacing: '0.04em',
                    padding: '10px 12px',
                    border: '1px solid #C0473C',
                    background: 'rgba(192,71,60,0.05)',
                  }}>{error}</div>
                )}

                <button className="btn btn-primary" type="submit" disabled={submitting} style={{
                  marginTop: 8,
                  justifyContent: 'space-between',
                  padding: '16px 24px',
                  fontSize: 14,
                  opacity: submitting ? 0.6 : 1,
                  cursor: submitting ? 'wait' : 'pointer',
                }}>
                  {submitting ? 'Sending…' : 'Request pilot batch'}
                  <span className="arrow"></span>
                </button>

                <p className="mono" style={{
                  fontSize: 10.5,
                  color: 'var(--ink-mute)',
                  letterSpacing: '0.02em',
                  margin: 0,
                  lineHeight: 1.5,
                }}>
                  By submitting you agree to our handling of project metadata. We do not retain or sequence sample data without a signed MTA.
                </p>
              </div>
            </form>
          ) : (
            <div style={{
              padding: '60px 0',
              display: 'flex',
              flexDirection: 'column',
              gap: 16,
              alignItems: 'flex-start',
            }}>
              <span className="mono" style={{
                fontSize: 11, color:'var(--accent)', letterSpacing:'0.04em', textTransform:'uppercase'
              }}>
                <span style={{display:'inline-block', width:6, height:6, background:'var(--accent)', borderRadius:'50%', marginRight: 8, verticalAlign:'middle', marginBottom: 4}}></span>
                Request received
              </span>
              <h3 className="serif" style={{fontSize: 36, letterSpacing:'-0.02em', fontWeight: 380, lineHeight: 1.05}}>
                Thank you. Our scientists will be in touch within 48 hours.
              </h3>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .demo-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 760px) {
          .demo-section { padding-top: 96px !important; padding-bottom: 96px !important; }
          .demo-card { padding: 28px 22px !important; }
          .demo-fields { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
};

const Field = ({ label, placeholder, type = 'text', textarea = false, value, onChange, required = false }) => (
  <label style={{display:'flex', flexDirection:'column', gap: 6}}>
    <span className="mono" style={{
      fontSize: 10.5,
      color: 'var(--ink-mute)',
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
    }}>{label}{required && <span style={{color:'var(--accent)', marginLeft: 4}}>*</span>}</span>
    {textarea ? (
      <textarea placeholder={placeholder} rows={3} style={fieldStyle} value={value} onChange={onChange} required={required} />
    ) : (
      <input type={type} placeholder={placeholder} style={fieldStyle} value={value} onChange={onChange} required={required} />
    )}
  </label>
);

const fieldStyle = {
  fontFamily: 'var(--sans)',
  fontSize: 14,
  color: 'var(--ink)',
  background: 'transparent',
  border: 'none',
  borderBottom: '1px solid var(--rule)',
  padding: '8px 0',
  outline: 'none',
  resize: 'none',
};

const Footer = () => (
  <footer className="ftr-root" style={{
    borderTop: '1px solid var(--rule)',
    padding: '64px 48px 40px',
    maxWidth: 1440,
    margin: '0 auto',
  }}>
    <div style={{
      display: 'grid',
      gridTemplateColumns: '2fr 1fr 1fr 1fr',
      gap: 48,
      marginBottom: 64,
    }} className="ftr-grid">
      <div>
        <div style={{display:'flex', alignItems:'center', gap: 10, marginBottom: 24}}>
          <span className="serif" style={{
            fontFamily:'var(--serif)',
            fontWeight: 400,
            fontSize: 22,
            letterSpacing: '-0.01em',
            lineHeight: 1,
          }}>NGI</span>
        </div>
        <p style={{fontSize: 13, color:'var(--ink-mute)', maxWidth:'32ch', lineHeight: 1.5, margin: 0}}>
          New Generation Instruments. Genomics for the next decade.
        </p>
      </div>

      {[
        ['Product', [
          ['Technology', '/#technology'],
          ['Workflow', '/#workflow'],
          ['Comparison', '/#comparison'],
          ['Platforms', '/#platforms'],
        ]],
        ['Contact', [
          ['Request demo', '/#demo'],
          ['Sales', 'mailto:sales@ngi.bio'],
          ['Support', 'mailto:support@ngi.bio'],
          ['Silicon Valley · Boston (soon)', null],
        ]],
      ].map(([heading, items]) => (
        <div key={heading}>
          <span className="mono" style={{
            fontSize: 10.5,
            color: 'var(--ink-mute)',
            letterSpacing: '0.04em',
            textTransform: 'uppercase',
            display: 'block',
            marginBottom: 16,
          }}>{heading}</span>
          <div style={{display:'flex', flexDirection:'column', gap: 10}}>
            {items.map(([label, href]) => (
              href ? (
                <a key={label} href={href} style={{
                  fontSize: 13.5,
                  color: 'var(--ink)',
                  textDecoration: 'none',
                }}>{label}</a>
              ) : (
                <span key={label} style={{
                  fontSize: 13.5,
                  color: 'var(--ink-mute)',
                }}>{label}</span>
              )
            ))}
          </div>
        </div>
      ))}
    </div>

    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      paddingTop: 24,
      borderTop: '1px solid var(--rule-soft)',
      fontFamily: 'var(--mono)',
      fontSize: 10.5,
      color: 'var(--ink-mute)',
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
    }} className="ftr-bottom">
      <span>© 2026 New Generation Instruments, Inc.</span>
      <span>Research · clinical · applied genomics · super SaaS<span style={{textTransform:'lowercase'}}>y</span></span>
      <span>v1.0 · NGI-01</span>
    </div>

    <style>{`
      @media (max-width: 900px) {
        .ftr-root { padding: 56px 36px 32px !important; }
        .ftr-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
      }
      @media (max-width: 600px) {
        .ftr-root { padding: 48px 20px 28px !important; }
        .ftr-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        .ftr-bottom { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
      }
    `}</style>
  </footer>
);

window.Demo = Demo;
window.Footer = Footer;