/* global React */
// Contact
const { useState } = React;
const NS_CT = window.GamekeepersCottageDesignSystem_070bc7;
const { Eyebrow, Button, Card, Input } = NS_CT;
const C = window.GKContact;
const submitEnquiry = window.GKsubmitEnquiry;

function Method({ icon, label, value, href }) {
  const inner = (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
      <span style={{ width: 46, height: 46, flex: 'none', borderRadius: 999, background: 'var(--accent-fern)', color: 'var(--color-primary)', display: 'grid', placeItems: 'center' }}><i data-lucide={icon} style={{ width: 21, height: 21 }}></i></span>
      <div><b style={{ color: 'var(--text-strong)' }}>{label}</b><div className="muted" style={{ fontSize: 15.5 }}>{value}</div></div>
    </div>
  );
  return href ? <a href={href} style={{ textDecoration: 'none' }}>{inner}</a> : inner;
}

function ContactContent() {
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [sendError, setSendError] = useState('');
  const [form, setForm] = useState({ firstName: '', lastName: '', email: '', phone: '', arrive: '', depart: '', message: '', company: '' });
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSendError(''); setSubmitting(true);
    try {
      await submitEnquiry({ type: 'contact', firstName: form.firstName, lastName: form.lastName, email: form.email, phone: form.phone, arrive: form.arrive, depart: form.depart, message: form.message, company: form.company });
      setSent(true);
    } catch (err) {
      setSendError('Sorry — we couldn’t send that just now. Please call ' + C.PHONE + ', or email ' + C.EMAIL + '.');
    } finally { setSubmitting(false); }
  };
  return (
    <React.Fragment>
      <section className="section--tight" style={{ paddingTop: 56 }}>
        <div className="container">
          <Eyebrow>Contact</Eyebrow>
          <h1 className="h1" style={{ margin: '14px 0 12px' }}>Get in touch with Nick</h1>
          <p className="lead muted" style={{ maxWidth: 600 }}>Please don't hesitate to contact us — we'll gladly answer any questions about the cottage, the wood or getting here before you book.</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 32 }}>
        <div className="container gk-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'start' }}>
          <div style={{ display: 'grid', gap: 26 }}>
            <Method icon="phone" label="Call us" value={C.PHONE} href={'tel:' + C.PHONE.replace(/\s/g, '')} />
            <Method icon="phone" label="Or call the mobile" value={C.PHONE2} href={'tel:' + C.PHONE2.replace(/\s/g, '')} />
            <Method icon="message-circle" label="WhatsApp" value={C.PHONE2} href={'https://wa.me/44' + C.PHONE2.replace(/\D/g, '').replace(/^0/, '')} />
            <Method icon="mail" label="Email" value={C.EMAIL} href={'mailto:' + C.EMAIL} />
            <Method icon="map-pin" label="Find us" value="The Wood, Southwold Rd, Brampton, Beccles NR34 8DW" />
            <Card variant="soft" padding="md">
              <b style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--text-strong)' }}>Hi, I'm Nick — your host</b>
              <p className="muted" style={{ margin: '8px 0 0', fontSize: 15.5, lineHeight: 1.65 }}>The cottage was my family home as a teenager and we look after it ourselves. We keep it more like a home than a rental, and love sharing the wood with our guests.</p>
            </Card>
          </div>

          <Card padding="md">
            {sent ? (
              <div style={{ textAlign: 'center', padding: '40px 16px' }}>
                <div style={{ width: 60, height: 60, borderRadius: 999, background: 'var(--accent-fern)', color: 'var(--color-primary)', display: 'grid', placeItems: 'center', margin: '0 auto 18px' }}><i data-lucide="check" style={{ width: 28, height: 28 }}></i></div>
                <h2 className="h3" style={{ marginBottom: 10 }}>Message sent</h2>
                <p className="muted">Thank you — we'll reply as soon as we can, usually within a day.</p>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'grid', gap: 14 }}>
                <h2 className="h3" style={{ marginBottom: 2 }}>Send us a message</h2>
                <input type="text" name="company" value={form.company} onChange={set('company')} tabIndex={-1} aria-hidden="true" autoComplete="off" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
                <div className="form-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <Input label="First name" required value={form.firstName} onChange={set('firstName')} />
                  <Input label="Last name" required value={form.lastName} onChange={set('lastName')} />
                </div>
                <Input label="Email" type="email" required value={form.email} onChange={set('email')} />
                <Input label="Phone (optional)" value={form.phone} onChange={set('phone')} />
                <div className="form-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <Input label="Arrival (if known)" type="date" value={form.arrive} onChange={set('arrive')} />
                  <Input label="Departure" type="date" value={form.depart} onChange={set('depart')} />
                </div>
                <label className="gk-field"><span className="gk-field__label">Message</span><textarea className="gk-input" rows="4" placeholder="Tell us a little about your stay…" value={form.message} onChange={set('message')}></textarea></label>
                {sendError && <div role="alert" style={{ background: '#fbeae6', color: '#9f3d2e', borderRadius: 'var(--radius-sm)', padding: '9px 12px', fontSize: 13.5 }}>{sendError}</div>}
                <Button variant="primary" size="lg" type="submit" fullWidth disabled={submitting}>{submitting ? 'Sending…' : 'Send message'}</Button>
              </form>
            )}
          </Card>
        </div>
      </section>

      <section className="section--tight" style={{ paddingBottom: 72 }}>
        <div className="container">
          <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border-soft)', boxShadow: 'var(--shadow-sm)' }}>
            <iframe title="Map" width="100%" height="360" style={{ border: 0, display: 'block' }} loading="lazy"
              src="https://www.openstreetmap.org/export/embed.html?bbox=1.40%2C52.34%2C1.66%2C52.46&layer=mapnik&marker=52.398%2C1.531"></iframe>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.GKmount('contact', ContactContent);