// ContactPage.jsx — Contact page with form
Object.assign(window, { ContactPage });

function ContactPage() {
  const [form, setForm] = React.useState({ name:"", company:"", email:"", service:"", message:"" });
  const [submitted, setSubmitted] = React.useState(false);

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

  if (submitted) return (
    <div style={ctStyles.successWrap}>
      <div style={ctStyles.successCard}>
        <div style={{fontSize:48, marginBottom:16}}>✓</div>
        <h2 style={ctStyles.successTitle}>You're in!</h2>
        <p style={ctStyles.successMsg}>We got your message and will reach out within 1 business day. Talk soon.</p>
      </div>
    </div>
  );

  return (
    <section style={ctStyles.section}>
      <div style={ctStyles.inner}>
        {/* Left side */}
        <div style={ctStyles.left}>
          <div style={ctStyles.eyebrow}>Let's Talk</div>
          <h2 style={ctStyles.headline}>Ready to make your data work for you?</h2>
          <p style={ctStyles.body}>Fill out the form and one of our dudes will get back to you within 24 hours. No fluff, no pressure — just a real conversation about your data.</p>

          <div style={ctStyles.infoList}>
            {[["📧","hello@datadudes.com"],["📞","(555) 123-4567"],["📍","Remote-first. We work everywhere."]].map(([icon, txt]) => (
              <div key={txt} style={ctStyles.infoRow}>
                <span>{icon}</span>
                <span style={ctStyles.infoTxt}>{txt}</span>
              </div>
            ))}
          </div>

          {/* Testimonial */}
          <div style={ctStyles.testimonial}>
            <p style={ctStyles.quote}>"Data Dudes took our reporting from a mess of spreadsheets to a live Power BI suite in 6 weeks."</p>
            <div style={ctStyles.attrib}>— Sarah K., CFO at GlobeInc</div>
          </div>
        </div>

        {/* Form */}
        <div style={ctStyles.formCard}>
          <div style={ctStyles.formGrid}>
            <Field label="Your Name" value={form.name} onChange={update("name")} placeholder="Jane Smith" />
            <Field label="Company" value={form.company} onChange={update("company")} placeholder="Acme Corp" />
          </div>
          <Field label="Email" value={form.email} onChange={update("email")} placeholder="jane@acme.com" type="email" fullWidth />
          <div style={ctStyles.fieldWrap}>
            <label style={ctStyles.label}>Service you need</label>
            <select style={ctStyles.select} value={form.service} onChange={update("service")}>
              <option value="">Select a service…</option>
              {["Power BI Dashboards","Data Architecture","Data Modeling","Analysis","ETL & Pipelines","Training & Enablement","Not sure yet"].map(s => (
                <option key={s} value={s}>{s}</option>
              ))}
            </select>
          </div>
          <div style={ctStyles.fieldWrap}>
            <label style={ctStyles.label}>Tell us about your project</label>
            <textarea style={ctStyles.textarea} rows={4} value={form.message} onChange={update("message")} placeholder="We have a bunch of data in Excel and need a dashboard by end of quarter..." />
          </div>
          <button style={ctStyles.submit} onClick={() => { if(form.name && form.email) setSubmitted(true); }}>
            Send it →
          </button>
        </div>
      </div>
    </section>
  );
}

function Field({ label, value, onChange, placeholder, type="text", fullWidth }) {
  return (
    <div style={{...ctStyles.fieldWrap, gridColumn: fullWidth ? "1 / -1" : "auto"}}>
      <label style={ctStyles.label}>{label}</label>
      <input style={ctStyles.input} type={type} value={value} onChange={onChange} placeholder={placeholder} />
    </div>
  );
}

const ctStyles = {
  section: { background:"#fff", padding:"80px 32px", minHeight:"70vh" },
  inner: { maxWidth:1200, margin:"0 auto", display:"grid", gridTemplateColumns:"1fr 1.2fr", gap:64, alignItems:"flex-start" },
  left: { display:"flex", flexDirection:"column", gap:24 },
  eyebrow: { fontFamily:"'Patrick Hand',cursive", fontSize:16, letterSpacing:"0.06em", color:"#69BAC9", textTransform:"uppercase" },
  headline: { fontFamily:"'Patrick Hand',cursive", fontSize:40, color:"#1b1b1b", margin:0, lineHeight:1.1 },
  body: { fontFamily:"'Patrick Hand',cursive", fontSize:19, color:"#737373", margin:0, lineHeight:1.5 },
  infoList: { display:"flex", flexDirection:"column", gap:12, marginTop:8 },
  infoRow: { display:"flex", gap:12, alignItems:"center" },
  infoTxt: { fontFamily:"'Patrick Hand',cursive", fontSize:18, color:"#333" },
  testimonial: { background:"#f9f9f9", borderRadius:16, border:"1px solid #e6e6e6", padding:24, marginTop:8 },
  quote: { fontFamily:"'Comic Relief',cursive", fontSize:18, color:"#1b1b1b", lineHeight:1.5, margin:"0 0 12px", fontStyle:"italic" },
  attrib: { fontFamily:"'Inter',sans-serif", fontSize:13, color:"#737373", fontWeight:500 },
  formCard: { background:"#f9f9f9", borderRadius:20, border:"1px solid rgba(0,0,0,0.08)", boxShadow:"0 4px 16px rgba(0,0,0,0.06)", padding:36, display:"flex", flexDirection:"column", gap:20 },
  formGrid: { display:"grid", gridTemplateColumns:"1fr 1fr", gap:16 },
  fieldWrap: { display:"flex", flexDirection:"column", gap:6 },
  label: { fontFamily:"'Patrick Hand',cursive", fontSize:18, color:"#1b1b1b" },
  input: { fontFamily:"'Patrick Hand',cursive", fontSize:18, color:"#1b1b1b", background:"#fff", border:"1.5px solid #b4b4b4", borderRadius:8, padding:"9px 14px", outline:"none", width:"100%" },
  select: { fontFamily:"'Patrick Hand',cursive", fontSize:18, color:"#1b1b1b", background:"#fff", border:"1.5px solid #b4b4b4", borderRadius:8, padding:"9px 14px", outline:"none", width:"100%" },
  textarea: { fontFamily:"'Patrick Hand',cursive", fontSize:18, color:"#1b1b1b", background:"#fff", border:"1.5px solid #b4b4b4", borderRadius:8, padding:"9px 14px", outline:"none", width:"100%", resize:"vertical" },
  submit: { background:"#69BAC9", color:"#fff", border:"none", borderRadius:9999, padding:"13px 32px", fontFamily:"'Patrick Hand',cursive", fontSize:20, cursor:"pointer", alignSelf:"flex-start", marginTop:4 },
  successWrap: { display:"flex", alignItems:"center", justifyContent:"center", minHeight:"60vh", padding:32 },
  successCard: { background:"#fff", borderRadius:20, border:"1px solid rgba(0,0,0,0.08)", boxShadow:"0 8px 24px rgba(0,0,0,0.10)", padding:"56px 48px", textAlign:"center", maxWidth:440 },
  successTitle: { fontFamily:"'Patrick Hand',cursive", fontSize:44, color:"#1b1b1b", margin:"0 0 12px" },
  successMsg: { fontFamily:"'Patrick Hand',cursive", fontSize:20, color:"#737373", lineHeight:1.5, margin:0 },
};