/* Contact page — real details + working (fake) form */
function Contact() {
  const C = window.CONTACT;
  const [done, setDone] = React.useState(false);
  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={(e)=>{ e.preventDefault(); setDone(true); }}>
                <div className="field"><label>Business Name</label><input required placeholder="Your business" /></div>
                <div className="field"><label>Email</label><input required type="email" placeholder="you@business.com" /></div>
                <div className="field"><label>Phone</label><input type="tel" placeholder="(330) 555-0100" /></div>
                <div className="field"><label>What do you need?</label>
                  <select 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 placeholder="A sentence or two about your setup…"></textarea></div>
                <button className="btn" type="submit" style={{ justifyContent:'center' }}><iconify-icon icon="pixelarticons:coin"></iconify-icon> Insert Coin</button>
              </form>
            )}
          </div>
        </div>
      </section>

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