/* Sweep Geophysical — Contact page */
const { Input: CIn, Select: CSel, Textarea: CTa, Button: CB, Card: CCard } = window.SweepGeophysicalDesignSystem_5187bc;

function ContactInfo() {
  const I = window.Icons;
  const items = [
    { ic: 'pin', label: 'Headquarters', val: '1400 Survey Park Dr, Suite 220, Denver, CO 80204' },
    { ic: 'mail', label: 'Email', val: 'hello@sweepgeophysical.com' },
    { ic: 'phone', label: 'Phone', val: '(555) 480-2200' },
    { ic: 'compass', label: 'Service Areas', val: 'Nationwide mobilization · Rocky Mountain & West HQ' },
    { ic: 'clock', label: 'Business Hours', val: 'Mon–Fri, 7:00 AM – 6:00 PM MT · Field crews 24/7' },
  ];
  return (
    <div className="cinfo">
      {items.map((it) => {
        const Ic = I[it.ic];
        return (
          <div className="cinfo__item" key={it.label}>
            <span className="cinfo__ic"><Ic size={22} /></span>
            <div><b>{it.label}</b><span>{it.val}</span></div>
          </div>
        );
      })}
      <div className="cmap">
        <div className="cmap__contours"><img src="./assets/contours.svg" alt="" /></div>
        <div className="cmap__pin">
          <span className="lbl">Sweep HQ · Denver, CO</span>
          <span className="dot" />
        </div>
      </div>
    </div>
  );
}

function ContactForm() {
  const I = window.Icons;
  const [sent, setSent] = React.useState(false);
  if (sent) {
    return (
      <CCard pad="lg">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', alignItems: 'flex-start', padding: 'var(--space-6) 0' }}>
          <span style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--orange-tint)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--border-accent)' }}><I.check size={28} /></span>
          <h3 style={{ fontSize: 'var(--text-2xl)' }}>Request received</h3>
          <p style={{ color: 'var(--text-body)', margin: 0 }}>Thanks — a Sweep geophysicist will reach out within one business day to scope your survey.</p>
          <CB variant="outline" onClick={() => setSent(false)}>Send another request</CB>
        </div>
      </CCard>
    );
  }
  return (
    <CCard pad="lg">
      <form className="cform" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
        <CIn label="Name" placeholder="Jane Doe" required />
        <CIn label="Company" placeholder="Firm or organization" />
        <CIn label="Email" type="email" placeholder="jane@firm.com" required />
        <CIn label="Phone" type="tel" placeholder="(555) 010-2233" />
        <div className="span">
          <CSel label="Service Needed" placeholder="Select a service"
            options={window.SERVICES.map((s) => s.title).concat(['Not sure — help me choose'])} />
        </div>
        <div className="span">
          <CTa label="Message" rows={4} placeholder="Tell us about the site, the question you need answered, and your timeline…" />
        </div>
        <div className="span">
          <CB type="submit" variant="primary" size="lg" fullWidth iconRight={<I.arrowRight size={20} />}>Request Consultation</CB>
        </div>
      </form>
    </CCard>
  );
}

function ContactPage() {
  return (
    <React.Fragment>
      {window.PageHero({
        eyebrow: 'Contact',
        title: "Let's discuss your project",
        children: 'Contact our experts for consultation and pricing. Tell us what you need to know about your site and we will recommend the right approach.',
      })}
      <section className="section">
        <div className="wrap wrap--wide">
          <div className="contact-grid">
            <ContactForm />
            <ContactInfo />
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.ContactPage = ContactPage;