const fieldStyle = { width: '100%', background: '#0c0c0c', border: '1px solid #2a2a2a', color: '#fff', padding: '14px 16px', fontFamily: 'var(--font-body)', fontSize: 15, borderRadius: 0, outline: 'none' };
const labelStyle = { display: 'block', fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase', color: 'var(--ash)', marginBottom: 9 };

function ContactForm() {
  const [d, setD] = React.useState({ name: '', contact: '', msg: '' });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState('');
  const set = (k) => (e) => setD(p => ({ ...p, [k]: e.target.value }));
  /* Show the success screen when FormSubmit returns the visitor here. */
  React.useEffect(() => {
    try {
      if (new URLSearchParams(window.location.search).get('sent') === '1') setSent(true);
    } catch (err) { /* ignore */ }
  }, []);

  /*
    Submitted natively by the BROWSER, not by JavaScript fetch().
    The fetch() approach was being rejected before it ever reached
    FormSubmit ("Connection issue"), because cross-origin JavaScript
    requests get blocked by ad blockers, privacy extensions and
    content-security policies. A normal form post is not.
  */
  const submit = (e) => {
    if (!d.name.trim() || !d.contact.trim()) { e.preventDefault(); return; }
    if (!FORM_KEY) {
      e.preventDefault();
      setError('The form is not configured yet — please contact us on WhatsApp or by phone.');
      return;
    }
    setSending(true);
    // no preventDefault — the browser posts the form from here
  };
  if (sent) return (
    <div className="card" style={{ padding: '44px 36px', textAlign: 'center' }}>
      <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--gold-metal)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}><Icon name="check" size={32} color="#161616" stroke={2.4} /></div>
      <h3 className="display h-3" style={{ textTransform: 'uppercase' }}>Message sent</h3>
      <p className="muted" style={{ marginTop: 10 }}>Thank you — your message has been sent directly to us. We'll get back to you shortly.</p>
      <Button href={waLink()} target="_blank" variant="gold" icon="whatsapp" style={{ marginTop: 22 }}>WhatsApp us</Button>
    </div>
  );
  return (
    <form
      className="card"
      style={{ padding: 'clamp(24px,4vw,36px)' }}
      action="https://api.web3forms.com/submit"
      method="POST"
      onSubmit={submit}
    >
      <input type="hidden" name="Name" value={d.name} readOnly />
      <input type="hidden" name="Contact" value={d.contact} readOnly />
      <input type="hidden" name="Message" value={d.msg || '—'} readOnly />
      <input type="hidden" name="subject" value={`Website enquiry — ${d.name || 'MVH website'}`} readOnly />
      <input type="hidden" name="access_key" value={FORM_KEY} readOnly />
      <input type="hidden" name="from_name" value="MVH Mobile Detailing Website" readOnly />
      
      <input type="hidden" name="redirect" value={typeof window !== 'undefined' ? `${window.location.origin}${window.location.pathname}?sent=1` : ''} readOnly />
      <Eyebrow>Send A Message</Eyebrow>
      <div style={{ display: 'grid', gap: 20, marginTop: 24 }}>
        <div><label style={labelStyle}>Your name</label><input style={fieldStyle} value={d.name} onChange={set('name')} placeholder="Jane Smith" required /></div>
        <div><label style={labelStyle}>Phone or email</label><input style={fieldStyle} value={d.contact} onChange={set('contact')} placeholder="So we can reply" required /></div>
        <div><label style={labelStyle}>How can we help?</label><textarea style={{ ...fieldStyle, resize: 'vertical' }} rows={5} value={d.msg} onChange={set('msg')} placeholder="Tell us about your vehicle and what you're after…"></textarea></div>
      </div>
      <Button variant="gold" size="lg" icon="arrowUpRight" block style={{ marginTop: 24 }}>{sending ? 'Sending…' : 'Send Enquiry'}</Button>
      {error && <div style={{ color: '#e06a5a', fontSize: 13, marginTop: 10 }}>{error}</div>}
    </form>
  );
}

function Method({ icon, label, value, href, target }) {
  return (
    <a className="card" href={href} target={target} style={{ padding: '24px 26px', display: 'flex', alignItems: 'center', gap: 18 }}>
      <div style={{ width: 52, height: 52, flexShrink: 0, border: '1px solid #2c2c2c', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={icon} size={24} color="var(--lambo-gold)" /></div>
      <div>
        <div style={{ fontSize: 12, color: 'var(--ash)', textTransform: 'uppercase', letterSpacing: 1.2 }}>{label}</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: '#fff', marginTop: 3 }}>{value}</div>
      </div>
    </a>
  );
}

function App() {
  return (
    <div>
      <Nav active="Contact" />
      <section style={{ paddingTop: 130, paddingBottom: 20 }} data-screen-label="Contact Hero">
        <div className="shell">
          <Eyebrow>Get In Touch</Eyebrow>
          <h1 className="display h-hero" style={{ marginTop: 16 }}>Contact</h1>
          <p className="lede" style={{ marginTop: 16 }}>Questions, quotes or bookings — we'll always come back to you quickly. The fastest way to reach us is a call or WhatsApp.</p>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }} data-screen-label="Contact Body">
        <div className="shell">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 36, alignItems: 'start' }} id="contact-grid">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Method icon="phone" label="Call us" value={MVH.phoneDisplay} href={`tel:${MVH.tel}`} />
              <Method icon="whatsapp" label="WhatsApp" value={MVH.phoneDisplay} href={waLink()} target="_blank" />
              <Method icon="mail" label="Email" value={MVH.email} href={`mailto:${MVH.email}`} />
              <div className="card" style={{ padding: '24px 26px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}><Icon name="clock" size={22} color="var(--lambo-gold)" /><span style={{ fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: 1.2, textTransform: 'uppercase', color: 'var(--ash)' }}>Opening Hours</span></div>
                {[['Monday – Friday', '8:00 – 18:00'], ['Saturday', '8:00 – 17:00'], ['Sunday', 'By appointment']].map((r, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '9px 0', borderBottom: i < 2 ? '1px solid #1d1d1d' : 'none', fontSize: 14.5 }}>
                    <span className="muted">{r[0]}</span><span style={{ fontFamily: 'var(--font-display)', fontWeight: 500 }}>{r[1]}</span>
                  </div>
                ))}
              </div>
              <div className="card" style={{ padding: '24px 26px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}><Icon name="pin" size={22} color="var(--lambo-gold)" /><span style={{ fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: 1.2, textTransform: 'uppercase', color: 'var(--ash)' }}>Coverage</span></div>
                <p style={{ color: 'var(--smoke)', fontSize: 14, lineHeight: 1.6, fontWeight: 300, margin: 0 }}>Mobile across {AREAS.slice(0, 6).join(', ')} and surrounding Staffordshire areas.</p>
              </div>
            </div>
            <ContactForm />
          </div>
        </div>
        <style>{`@media (max-width:860px){ #contact-grid{grid-template-columns:1fr!important} }`}</style>
      </section>

      <Footer />
      <StickyActions />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);