// Contact / direct enquiry form.
const Contact = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    cottage: 'either', name: '', email: '', dates: '', guests: '2', dogs: '0', message: '',
  });

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <section id="contact" style={{ padding: '120px 56px', background: 'var(--bg-inverse)', color: 'var(--cream)' }}>
        <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: 'var(--sage-pale)', marginBottom: 14 }}>Message sent</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--fs-h2)', color: 'var(--cream)', margin: 0 }}>
            Thank you, {form.name.split(' ')[0] || 'friend'}.
          </h2>
          <p className="lead" style={{ color: 'rgba(245,239,226,0.86)', marginTop: 20 }}>
            We'll come back to you within a day, usually sooner. The kettle's already on.
          </p>
          <p style={{ marginTop: 32, fontFamily: 'var(--font-sans)', fontSize: 13, color: 'rgba(245,239,226,0.6)' }}>
            — Harriet &amp; Richard
          </p>
        </div>
      </section>
    );
  }

  return (
    <section id="contact" style={{ padding: '120px 56px', background: 'var(--bg-inverse)', color: 'var(--cream)' }}>
      <div className="slf-contact-grid" style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80 }}>
        {/* Left: editorial intro */}
        <div>
          <div className="eyebrow" style={{ color: 'var(--sage-pale)', marginBottom: 16 }}>Contact</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--fs-h2)', color: 'var(--cream)', margin: 0, lineHeight: 1.05 }}>
            Write to us directly.
          </h2>
          <p style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            fontSize: 22, lineHeight: 1.55, color: 'rgba(245,239,226,0.84)', marginTop: 22,
          }}>
            For specific dates, longer stays, both-cottages bookings, or any question that needs a human — message us here.
            We answer everything ourselves, usually within a day.
          </p>

          <div style={{ marginTop: 40, paddingTop: 28, borderTop: '1px solid rgba(245,239,226,0.18)' }}>
            <DetailRow label="By post"   value={<>Slowley Farm<br/>Luxborough<br/>Watchet<br/>Somerset<br/>TA23 0SB</>}/>
            <DetailRow label="By email"  value="info@slowleyfarm.com"/>
          </div>
        </div>

        {/* Right: form */}
        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <Field label="Which cottage?">
            <div className="slf-contact-cottage" style={{ display: 'flex', gap: 8 }}>
              {[
                { id: 'buttercup',   label: 'Buttercup' },
                { id: 'countryside', label: 'Countryside View' },
                { id: 'either',      label: "Either / both" },
              ].map((opt) => {
                const active = form.cottage === opt.id;
                return (
                  <button type="button" key={opt.id} onClick={() => setForm({ ...form, cottage: opt.id })}
                    style={{
                      flex: 1, padding: '12px 14px', cursor: 'pointer',
                      fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
                      background: active ? 'var(--cream)' : 'transparent',
                      color: active ? 'var(--slate)' : 'var(--cream)',
                      border: '1px solid rgba(245,239,226,0.32)',
                      borderRadius: 6,
                    }}>{opt.label}</button>
                );
              })}
            </div>
          </Field>

          <div className="slf-contact-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Field label="Your name">
              <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} style={inputStyle}/>
            </Field>
            <Field label="Email">
              <input type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} style={inputStyle}/>
            </Field>
          </div>

          <Field label="Dates you're hoping for">
            <input placeholder="e.g. a Friday→Monday in late June" value={form.dates} onChange={(e) => setForm({ ...form, dates: e.target.value })} style={inputStyle}/>
          </Field>

          <div className="slf-contact-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Field label="Guests">
              <select value={form.guests} onChange={(e) => setForm({ ...form, guests: e.target.value })}
                style={{ ...inputStyle, color: 'var(--cream)',
                  backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27 stroke=%27%23F5EFE2%27 stroke-width=%271.6%27><path d=%27M1 1.5 L6 6.5 L11 1.5%27/></svg>")',
                  backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center', paddingRight: 36 }}>
                {['1','2'].map((n) => <option key={n} value={n} style={{ background: 'var(--slate)', color: 'var(--cream)' }}>{n}</option>)}
              </select>
            </Field>
            <Field label="Dogs">
              <select value={form.dogs} onChange={(e) => setForm({ ...form, dogs: e.target.value })}
                style={{ ...inputStyle, color: 'var(--cream)',
                  backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27 stroke=%27%23F5EFE2%27 stroke-width=%271.6%27><path d=%27M1 1.5 L6 6.5 L11 1.5%27/></svg>")',
                  backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center', paddingRight: 36 }}>
                {['0','1','2'].map((n) => <option key={n} value={n} style={{ background: 'var(--slate)', color: 'var(--cream)' }}>{n}</option>)}
              </select>
            </Field>
          </div>

          <Field label="A note (optional)">
            <textarea rows={4} value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}
              placeholder="Anything we should know — anniversaries, dietary things, the dog's name..."
              style={{ ...inputStyle, resize: 'vertical', fontFamily: 'var(--font-sans)' }}/>
          </Field>

          <button type="submit" className="slf-btn" style={{
            background: 'var(--cream)', color: 'var(--slate)', padding: '14px 22px',
            fontSize: 14, marginTop: 8, alignSelf: 'flex-start',
          }}>
            Send the enquiry →
          </button>
        </form>
      </div>
    </section>
  );
};

const inputStyle = {
  width: '100%', boxSizing: 'border-box',
  padding: '12px 14px', minHeight: 44,
  background: 'rgba(245,239,226,0.10)',
  color: 'var(--cream)',
  border: '1px solid rgba(245,239,226,0.32)',
  borderRadius: 6, outline: 'none',
  fontFamily: 'var(--font-sans)', fontSize: 14,
  appearance: 'none', WebkitAppearance: 'none', MozAppearance: 'none',
};

const Field = ({ label, children }) => (
  <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
    <span style={{
      fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
      letterSpacing: '0.18em', textTransform: 'uppercase',
      color: 'rgba(245,239,226,0.66)',
    }}>{label}</span>
    {children}
  </label>
);

const DetailRow = ({ label, value }) => (
  <div className="slf-detailrow" style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 16, padding: '12px 0', borderBottom: '1px dashed rgba(245,239,226,0.18)' }}>
    <span style={{
      fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
      letterSpacing: '0.18em', textTransform: 'uppercase',
      color: 'rgba(245,239,226,0.62)',
    }}>{label}</span>
    <span style={{ fontFamily: 'var(--font-serif)', fontSize: 17, color: 'var(--cream)', lineHeight: 1.5 }}>{value}</span>
  </div>
);

window.Contact = Contact;