// Contact section + footer
function Contact() {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name:'', email:'', role:'Resident', topic:'General question', message:'' });
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <>
    <section id="contact" style={{ padding: '140px 0 120px', background: 'linear-gradient(180deg, var(--paper), var(--forest-50))' }}>
      <div className="container-x">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems:'start' }}>
          <div>
            <Reveal><div className="eyebrow"><span className="dot" /> Community feedback</div></Reveal>
            <Reveal delay={1}><h2 className="h2" style={{ marginTop: 18 }}>Still have <span className="accent-underline">questions?</span></h2></Reveal>
            <Reveal delay={2}>
              <p style={{ color:'var(--slate-700)', fontSize: 16, lineHeight: 1.6, marginTop: 20, maxWidth: 440 }}>
                Have questions about the project? We'd love to hear from you. Your feedback helps shape how the Piedmont Technology Park is planned.
              </p>
            </Reveal>
            <Reveal delay={3} style={{ marginTop: 24, display:'flex', flexDirection:'column', gap: 14 }}>
              {[
                { t: 'Contact', s: 'Piedmont, Oklahoma · Kingfisher County' },
                { t: 'Response time', s: 'Typically within 2 business days' },
                { t: 'Public records', s: 'For official information, visit the City of Piedmont and Kingfisher County websites.' },
              ].map((r, i) => (
                <div key={i} style={{ padding: '14px 18px', borderRadius: 14, border: '1px solid rgba(10,24,18,.1)', background: 'rgba(255,255,255,.6)', backdropFilter: 'blur(8px)' }}>
                  <div className="tag-mono">{r.t}</div>
                  <div style={{ marginTop: 4, fontSize: 14.5, color: 'var(--ink)' }}>{r.s}</div>
                </div>
              ))}
            </Reveal>
          </div>
          <Reveal delay={1} className="card" style={{ padding: 28 }}>
            {!sent ? (
              <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap: 14 }}>
                <div style={{ display:'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <div className="field"><label>Name</label><input value={form.name} onChange={e=>setForm({...form, name:e.target.value})} placeholder="Jane Doe" required /></div>
                  <div className="field"><label>Email</label><input type="email" value={form.email} onChange={e=>setForm({...form, email:e.target.value})} placeholder="jane@example.com" required /></div>
                </div>
                <div style={{ display:'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <div className="field"><label>I am a...</label>
                    <select value={form.role} onChange={e=>setForm({...form, role:e.target.value})}>
                      <option>Resident</option>
                      <option>Business owner</option>
                      <option>Elected official</option>
                      <option>Journalist</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div className="field"><label>Topic</label>
                    <select value={form.topic} onChange={e=>setForm({...form, topic:e.target.value})}>
                      <option>General question</option>
                      <option>Noise & sound</option>
                      <option>Water & wells</option>
                      <option>Traffic</option>
                      <option>Power & grid</option>
                      <option>Tax revenue</option>
                    </select>
                  </div>
                </div>
                <div className="field"><label>Message</label><textarea rows={5} value={form.message} onChange={e=>setForm({...form, message:e.target.value})} placeholder="Share your questions or feedback…" required /></div>
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap: 16, marginTop: 6, flexWrap: 'wrap' }}>
                  <div style={{ fontSize: 12, color: 'var(--slate-500)', maxWidth: 280, lineHeight: 1.5 }}>
                    We read every submission. Your email won't be shared outside the project team.
                  </div>
                  <button type="submit" className="btn-primary" style={{ whiteSpace: 'nowrap' }}>Send <ArrowRight /></button>
                </div>
              </form>
            ) : (
              <div style={{ padding: '20px 0', textAlign:'center' }}>
                <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--forest-50)', color: 'var(--forest-700)', display:'flex', alignItems:'center', justifyContent:'center', margin: '0 auto 16px' }}>
                  <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M5 14 L12 21 L23 8" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </div>
                <div className="font-display" style={{ fontSize: 22, fontWeight: 600 }}>Thanks — we got it.</div>
                <div style={{ color: 'var(--slate-700)', marginTop: 8, fontSize: 14 }}>We'll follow up within 2 business days.</div>
              </div>
            )}
          </Reveal>
        </div>
      </div>
      <style>{`
        @media(max-width: 960px){ #contact > .container-x > div { grid-template-columns: 1fr !important; gap: 40px !important; } }
        @media(max-width: 720px){
          .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
        @media(max-width: 560px){
          #contact form > div { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>

    <footer style={{ padding: '60px 0 40px' }}>
      <div className="container-x">
        <div className="footer-grid" style={{ display:'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 40, alignItems:'start' }}>
          <div>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <LogoMark size={28} color="white" />
              <div className="font-display" style={{ fontSize: 18, fontWeight: 600 }}>Piedmont Technology Park</div>
            </div>
            <p style={{ color:'rgba(255,255,255,.6)', fontSize: 14, lineHeight: 1.6, marginTop: 14, maxWidth: 460 }}>
              This website provides factual information about the proposed Piedmont Technology Park data center campus. For official county information, please visit the Kingfisher County and City of Piedmont websites.
            </p>
          </div>
          <div>
            <div className="tag-mono" style={{ color:'rgba(255,255,255,.5)' }}>Quick links</div>
            <div style={{ display:'flex', flexDirection:'column', gap: 8, marginTop: 14 }}>
              {['Overview','Benefits','Environment','Infrastructure','Power','Land Use','FAQ'].map(l => <a key={l} href={`#${l.toLowerCase().replace(' ','')}`} style={{ fontSize: 14, color: 'rgba(255,255,255,.75)' }}>{l}</a>)}
            </div>
          </div>
          <div>
            <div className="tag-mono" style={{ color:'rgba(255,255,255,.5)' }}>Get in touch</div>
            <div style={{ marginTop: 14, fontSize: 14, color: 'rgba(255,255,255,.75)', lineHeight: 1.7 }}>
              Piedmont, Oklahoma<br/>Kingfisher County
            </div>
            <a href="#contact" className="btn-ghost" style={{ color:'white', borderColor:'rgba(255,255,255,.3)', marginTop: 16 }}>Contact us <ArrowRight /></a>
          </div>
        </div>
        <div style={{ marginTop: 40, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,.08)', display:'flex', justifyContent:'space-between', alignItems:'center', fontSize: 12, color:'rgba(255,255,255,.45)', flexWrap: 'wrap', gap: 12 }}>
          <div>© 2026 Piedmont Technology Park. All rights reserved.</div>
          <div>Proposed · Advocacy site</div>
        </div>
      </div>
    </footer>
    </>
  );
}
window.Contact = Contact;