/* Contact page — interactive quote form. */

const DS_contact = window.DawsonsDesignSystem_489d7d;

function Contact() {
  const { Input, Select, Textarea, Button, Alert, Icon } = DS_contact;
  const [sent, setSent] = React.useState(false);
  const [name, setName] = React.useState('');

  const details = [
    { icon: 'phone', label: 'Call us', value: window.SITE.phone, href: `tel:${window.SITE.phone.replace(/\s/g, '')}` },
    { icon: 'mail', label: 'Email', value: window.SITE.email, href: `mailto:${window.SITE.email}` },
    { icon: 'map-pin', label: 'Workshop', value: 'Unit 4, Parkway Works, Sheffield S9' },
    { icon: 'clock', label: 'Hours', value: 'Mon–Fri 7:30–17:30 · 24/7 emergencies' },
  ];

  return (
    <div>
      <PageHeader eyebrow="Contact" title="Get a free, no-obligation quote"
        intro="Tell us about the job and we'll be back to you within one working day. For emergencies, call us any time." />
      <section className="section">
        <div className="container container-wide">
          <div className="grid-2" style={{ alignItems: 'start', gap: 56 }}>
            <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: 'clamp(1.75rem,3vw,2.5rem)', boxShadow: 'var(--shadow-md)' }}>
              {sent ? (
                <Alert tone="success" title={`Thanks${name ? ', ' + name.split(' ')[0] : ''} — quote request sent`}>
                  A member of the Dawsons team will be in touch within one working day. For anything urgent, call {window.SITE.phone}.
                </Alert>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                    <Input label="Full name" placeholder="Jane Smith" required value={name} onChange={(e) => setName(e.target.value)} />
                    <Input label="Phone" icon="phone" type="tel" placeholder="07700 900000" required />
                    <Input label="Email" icon="mail" type="email" placeholder="jane@email.com" style={{ gridColumn: '1 / -1' }} />
                    <Select label="Service needed" placeholder="Choose a service" style={{ gridColumn: '1 / -1' }}
                      options={window.SITE.services.map((s) => s.title).concat('Something else')} />
                    <Textarea label="Tell us about the job" rows={4} placeholder="A few details help us quote accurately…" style={{ gridColumn: '1 / -1' }} />
                  </div>
                  <Button type="submit" variant="primary" size="lg" fullWidth iconRight="arrow-right" style={{ marginTop: 20 }}>Send my request</Button>
                  <p style={{ fontSize: 'var(--fs-caption)', color: 'var(--text-muted)', textAlign: 'center', marginTop: 12 }}>
                    <Icon name="lock" size={12} style={{ display: 'inline-flex', verticalAlign: '-2px', marginRight: 5 }} />
                    We'll only use your details to respond to this enquiry.
                  </p>
                </form>
              )}
            </div>

            <div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {details.map((d) => (
                  <a key={d.label} href={d.href || '#'} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', padding: '18px 0', borderBottom: '1px solid var(--color-border)', textDecoration: 'none' }}>
                    <span style={{ flex: '0 0 auto', width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--brand-soft)', color: 'var(--brand)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name={d.icon} size={22} />
                    </span>
                    <span>
                      <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{d.label}</span>
                      <span style={{ display: 'block', fontSize: 'var(--fs-body-lg)', color: 'var(--text-primary)', fontWeight: 'var(--fw-semibold)', marginTop: 3 }}>{d.value}</span>
                    </span>
                  </a>
                ))}
              </div>
              <Photo label="Service area: Sheffield · Barnsley · Manchester" icon="map" style={{ height: 240, borderRadius: 'var(--radius-lg)', marginTop: 24 }} />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Contact });