/* Contact page — real details + working form (posts to /api/contact) */
function Contact() {
  const C = window.CONTACT;
  const [done, setDone] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);
  const rows = [
    { icon:'pixelarticons:mail', k:'Email', v:C.email, href:'mailto:'+C.email },
    { icon:'pixelarticons:device-phone', k:'Phone', v:C.phone, href:C.phoneHref },
    { icon:'pixelarticons:map', k:'Location', v:C.location, href:null },
    { icon:'pixelarticons:clock', k:'Hours', v:'Mon–Fri · 8a–6p ET', href:null },
  ];
  return (
    <div className="crt-page">
      <window.SiteNav active="contact" />

      <header className="about-hero wrap" style={{ paddingBottom:24 }}>
        <div className="eyebrow">★ Insert Coin ★</div>
        <h1 style={{ fontFamily:'var(--font-pixel)', fontSize:'clamp(24px,4vw,42px)', color:'var(--fg)', textShadow:'var(--text-glow-p)', lineHeight:1.5, margin:'20px 0 10px' }}>
          LET'S <span style={{ color:'var(--primary)' }}>TALK</span>
        </h1>
        <p className="about-prose">Free assessment, straight answers, no pressure. Reach out and we’ll get back to you within one business day.</p>
      </header>

      <section className="section wrap" style={{ paddingTop:24 }}>
        <div className="contact-grid">
          <div>
            <div className="info-list">
              {rows.map((r,i)=> r.href ? (
                <a className="info-row" key={i} href={r.href}>
                  <iconify-icon icon={r.icon}></iconify-icon>
                  <div><div className="k">{r.k}</div><div className="v">{r.v}</div></div>
                </a>
              ) : (
                <div className="info-row" key={i}>
                  <iconify-icon icon={r.icon}></iconify-icon>
                  <div><div className="k">{r.k}</div><div className="v">{r.v}</div></div>
                </div>
              ))}
            </div>
            <div className="map-strip">
              <div className="pin"><iconify-icon icon="pixelarticons:map" style={{ fontSize:'18px' }}></iconify-icon> Lakewood, Ohio · Serving Northeast Ohio</div>
            </div>
          </div>

          <div className="form-box">
            <div className="form-head">{done ? 'PLAYER 1 READY' : 'FREE ASSESSMENT'}</div>
            {done ? (
              <div className="form-done">
                <div className="big">● 1-UP! ●</div>
                <p style={{ fontFamily:'var(--font-term)', fontSize:23, color:'var(--fg-dim)', lineHeight:1.25 }}>Thanks — we’ll be in touch within one business day. Talk soon!</p>
                <div style={{ marginTop:22 }}><button className="btn" onClick={()=>setDone(false)}>Send Another ▸</button></div>
              </div>
            ) : (
              <form className="form-body" onSubmit={async (e)=>{
                e.preventDefault();
                setError(null);
                setSending(true);
                const f = e.target;
                const payload = {
                  business: f.business.value,
                  email: f.email.value,
                  phone: f.phone.value,
                  need: f.need.value,
                  message: f.message.value,
                };
                try {
                  const res = await fetch('/api/contact', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload),
                  });
                  if (!res.ok) throw new Error('request failed');
                  setDone(true);
                } catch (err) {
                  setError(`Something went wrong — email us directly at ${C.email} instead.`);
                } finally {
                  setSending(false);
                }
              }}>
                <div className="field"><label>Business Name</label><input name="business" required placeholder="Your business" /></div>
                <div className="field"><label>Email</label><input name="email" required type="email" placeholder="you@business.com" /></div>
                <div className="field"><label>Phone</label><input name="phone" type="tel" placeholder="(330) 555-0100" /></div>
                <div className="field"><label>What do you need?</label>
                  <select name="need" defaultValue="">
                    <option value="" disabled>Select a line…</option>
                    {window.PRODUCTS.map(p=> <option key={p.key} value={p.key}>{p.name}</option>)}
                    <option value="not-sure">Not sure yet</option>
                  </select>
                </div>
                <div className="field"><label>Tell us a bit</label><textarea name="message" placeholder="A sentence or two about your setup…"></textarea></div>
                {error && <div style={{ color:'var(--primary)', fontFamily:'var(--font-term)', fontSize:15, marginBottom:10 }}>{error}</div>}
                <button className="btn" type="submit" disabled={sending} style={{ justifyContent:'center' }}><iconify-icon icon="pixelarticons:coin"></iconify-icon> {sending ? 'Sending…' : 'Insert Coin'}</button>
              </form>
            )}
          </div>
        </div>
      </section>

      <window.SiteFooter />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Contact />);