// Contact section + footer
//
// 2026-08-02: added an intent selector (feeds the message placeholder so
// the form asks a more specific question depending on what brought someone
// here), and rewrote the success state to be honest about what this
// template actually does — no submissions are stored, unlike the live
// deployment behavior it describes.
const CONTACT_INTENTS = [
  { k: 'question', label: 'Ask a question',                placeholder: 'What would you like to know about the project?' },
  { k: 'source',   label: 'Request a source',               placeholder: 'Which claim on this site would you like the underlying source for?' },
  { k: 'flag',     label: 'Flag an inaccurate statement',   placeholder: 'What statement seems inaccurate, and what should it say instead?' },
  { k: 'topic',    label: 'Suggest a topic',                placeholder: "What's a concern this site doesn't cover yet?" },
];

function Contact() {
  const [sent, setSent] = useState(false);
  const [refNum, setRefNum] = useState('');
  const [form, setForm] = useState({ name:'', email:'', role:'Resident', intent:'question', message:'' });
  const submit = (e) => {
    e.preventDefault();
    setRefNum('DEMO-' + Date.now().toString(36).toUpperCase());
    setSent(true);
  };
  const activeIntent = CONTACT_INTENTS.find(i => i.k === form.intent) || CONTACT_INTENTS[0];

  return (
    <>
    <section id="contact" className="band-ink" style={{ padding: '140px 0 120px', background: 'var(--ink-navy)', position: 'relative', overflow: 'clip' }}>
      {/* Signature texture — quiet topo backdrop; this and the footer's
          grass strip are the two dark-band brand moments (2026-08-03). */}
      <div style={{ position: 'absolute', left: -80, bottom: -80, pointerEvents: 'none' }} aria-hidden>
        <Textures.Topo width={420} height={420} color="var(--wheat-500)" opacity={0.07} />
      </div>
      <div className="container-x" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'stretch' }}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <Reveal><div className="eyebrow on-ink"><span className="kicker-num">12</span><span className="dot" /> Project feedback</div></Reveal>
            <Reveal delay={1}><h2 className="h2" style={{ marginTop: 18, color: 'var(--on-ink-heading)' }}>Still have <span className="accent-underline" style={{ color: 'var(--wheat-400)', backgroundImage: 'linear-gradient(90deg, var(--wheat-500), var(--wheat-500))' }}>questions?</span></h2></Reveal>
            <Reveal delay={2}>
              <p style={{ color:'var(--on-ink-body)', fontSize: 16, lineHeight: 1.6, marginTop: 20, maxWidth: 440 }}>
                We respond to corridor-resident questions before they reach a council meeting. The fastest path is the form to the right — or use the project line.
              </p>
            </Reveal>
            <Reveal delay={2}>
              <p style={{ color:'var(--on-ink-muted)', fontSize: 13, lineHeight: 1.6, marginTop: 14, maxWidth: 440 }}>
                Answered questions and any corrections to this site get published, not just emailed back — so the next person asking the same thing can find it too.
              </p>
            </Reveal>
            <Reveal delay={3} style={{ marginTop: 28, display: 'grid', gridAutoRows: '1fr', gap: 14, flex: '1 1 auto' }}>
              {[
                { t: 'Contact', s: SITE.locationLine },
                { t: 'Response time', s: 'Typically within 2 business days' },
                { t: 'Public records', s: `${SITE.county} public records` },
              ].map((r, i) => (
                // Dark-tile treatment, not .glass — .glass's light translucent
                // fill read as a muddy gray box on the ink band (2026-08-03
                // fix). Flat dark surface + wheat mono label instead.
                <div key={i} style={{ padding: '16px 20px', borderRadius: 'var(--r-sm)', background: 'rgba(255,255,255,.05)', border: '1px solid var(--on-ink-line)', display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 76 }}>
                  <div className="tag-mono" style={{ color: 'var(--wheat-400)' }}>{r.t}</div>
                  <div style={{ marginTop: 6, fontSize: 14.5, color: 'var(--on-ink-heading)', lineHeight: 1.45 }}>{r.s}</div>
                </div>
              ))}
            </Reveal>
          </div>
          {/* The form stays a bright white card — a deliberate "spotlight"
              against the ink band rather than following it dark. */}
          <Reveal delay={1} className="card" style={{ padding: 28, display: 'flex', flexDirection: 'column', boxShadow: 'var(--shadow-lg)' }}>
            {!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="Your name" required /></div>
                  <div className="field"><label>Email</label><input type="email" value={form.email} onChange={e=>setForm({...form, email:e.target.value})} placeholder="you@example.com" required /></div>
                </div>
                <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>What brings you here?</label>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    {CONTACT_INTENTS.map(opt => {
                      const active = form.intent === opt.k;
                      return (
                        <button
                          key={opt.k}
                          type="button"
                          onClick={() => setForm({ ...form, intent: opt.k })}
                          aria-pressed={active}
                          style={{
                            padding: '8px 14px', borderRadius: 999,
                            fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 500,
                            cursor: 'pointer',
                            border: `1px solid ${active ? 'var(--ink)' : 'rgba(10,24,18,.18)'}`,
                            background: active ? 'var(--ink)' : 'transparent',
                            color: active ? 'white' : 'var(--ink)',
                            transition: 'background .2s, border-color .2s, color .2s',
                          }}
                        >{opt.label}</button>
                      );
                    })}
                  </div>
                </div>
                <div className="field"><label>Message</label><textarea rows={5} value={form.message} onChange={e=>setForm({...form, message:e.target.value})} placeholder={activeIntent.placeholder} 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 }}>
                    This demonstration does not store your email or message.
                  </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 — here's what happens next.</div>
                <div style={{ color: 'var(--slate-700)', marginTop: 10, fontSize: 14, lineHeight: 1.65, maxWidth: 380, marginLeft: 'auto', marginRight: 'auto' }}>
                  In a live deployment, this would route to the project team with a reference number and a committed response time (typically 2 business days). <strong>This demonstration doesn't store submissions</strong> — nothing you typed was sent or saved anywhere.
                </div>
                <div className="tag-mono" style={{ marginTop: 16, color: 'var(--slate-500)' }}>Demo reference: {refNum}</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', position: 'relative', overflow: 'clip' }}>
      {/* Signature texture — small brand moment closing the page: a quiet
          prairie-grass line grows up from the footer's bottom edge, the
          other half of the hero's topo+grass motif (2026-08-03). */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 90, pointerEvents: 'none', display: 'flex', justifyContent: 'flex-end' }} aria-hidden>
        <Textures.Grass width={340} height={90} color="rgba(255,255,255,.10)" opacity={1} />
      </div>
      <div className="container-x" style={{ position: 'relative' }}>
        <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 }}>{SITE.park}</div>
            </div>
            <p style={{ color:'rgba(255,255,255,.6)', fontSize: 14, lineHeight: 1.6, marginTop: 14, maxWidth: 460 }}>
              Sponsored by {SITE.sponsor}. This website provides a demonstration of resident-facing factual information about a proposed data center campus. For a real deployment, replace these figures with the relevant county, city, and public-record sources.
            </p>
            <p style={{ color:'rgba(255,255,255,.4)', fontSize: 12, lineHeight: 1.6, marginTop: 16, maxWidth: 460 }}>
              Demonstration template — the project, place, and figures shown are illustrative.
            </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 }}>
              {(window.SECTIONS || []).map(s => <a key={s.id} href={`#${s.id}`} style={{ fontSize: 14, color: 'rgba(255,255,255,.75)' }}>{s.label}</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 }}>
              {SITE.county}<br/>{SITE.state}
            </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 {SITE.park}. All rights reserved.</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <a href="/deck/" style={{ color: 'rgba(255,255,255,.45)' }}>Community meeting deck</a>
            <span>Template demo · Figures and form behavior are illustrative · Last updated August 2, 2026</span>
          </div>
        </div>
      </div>
    </footer>
    </>
  );
}
window.Contact = Contact;