// contact.jsx — Contact & Booking page

function ContactPage() {
  return (
    <div>
      <Header active="Contact" />
      <PageHeader
        eyebrow="Get In Touch"
        title="We'd love to"
        accent="meet you."
        body="Book a consultation, ask a question, or stop by the clinic. Every new patient begins with a relaxed, no-pressure conversation about your goals."
      />
      <BookingSection />
      <ContactInfo />
      <LocationMap />
      <Footer />
    </div>
  );
}

const GHL_WEBHOOK = 'https://services.leadconnectorhq.com/hooks/xyg0VAQJ4sbZLPLRdnpj/webhook-trigger/7e70749d-2cf4-456e-85a2-1b7f14944d04';

function BookingSection() {
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(false);
  async function handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    const fd = new FormData(form);
    if (fd.get('company')) return; // honeypot — silently ignore bots
    const data = Object.fromEntries(fd.entries());
    delete data.company;
    data.full_name = ((data.first_name || '') + ' ' + (data.last_name || '')).trim();
    data.source = 'Website contact form';
    data.page = window.location.href;
    setSending(true);
    setError(false);
    let ok = false;
    try {
      const res = await fetch(GHL_WEBHOOK, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      ok = res.ok;
    } catch (err) { ok = false; }
    setSending(false);
    if (ok) setSent(true); else setError(true);
  }
  return (
    <section id="book-now" style={{ padding: '120px 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
      <div className="container">
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 70, alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <Eyebrow>Book Online</Eyebrow>
            <h2 className="h-section">Schedule your <Accent>visit.</Accent></h2>
            <BurgRule />
            <p className="body-md" style={{ color: 'var(--color-taupe)' }}>
              Online booking is the fastest way to secure your appointment. Choose your provider and treatment, see real-time availability, and confirm in under a minute.
            </p>
            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
              <Button variant="primary" href="#book-now">Book Online</Button>
              <Button variant="ghost" href="tel:6122943749">Call · 612 · 294 · 3749</Button>
            </div>
            <p className="body-sm" style={{ marginTop: 8 }}>
              New patients welcome. A complimentary consultation is included with every first appointment.
            </p>
          </div>

          {sent ? (
            <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: 44, alignItems: 'flex-start' }}>
              <Eyebrow>Message Sent</Eyebrow>
              <h3 className="h-sub">Thank you — we'll be in touch.</h3>
              <p className="body-md" style={{ color: 'var(--color-taupe)' }}>
                Your message has been received. We typically reply within one business day. For anything urgent, call <a href="tel:6122943749" style={{ color: 'var(--color-deep-brown)', textDecoration: 'underline', textUnderlineOffset: 3 }}>612 · 294 · 3749</a>.
              </p>
            </div>
          ) : (
          <form className="card" style={{ display: 'flex', flexDirection: 'column', gap: 18, padding: 44 }} onSubmit={handleSubmit}>
            <Eyebrow>Send a Message</Eyebrow>
            <h3 className="h-sub">Or write us directly.</h3>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <Field label="First Name" name="first_name" required={true} />
              <Field label="Last Name" name="last_name" required={true} />
            </div>
            <Field label="Email" name="email" inputType="email" required={true} />
            <Field label="Phone" name="phone" inputType="tel" />
            <SelectField label="What can we help with?" name="topic" options={['General question', 'Booking inquiry', 'New patient consultation', 'Treatment question', 'Pricing question', 'Other']} />
            <div>
              <FieldLabel>Message</FieldLabel>
              <textarea name="message" rows={5} className="input" style={{ resize: 'vertical', fontFamily: 'inherit' }} />
            </div>
            {/* honeypot — hidden from humans, catches bots */}
            <input type="text" name="company" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
            <button type="submit" className="btn btn-primary" style={{ marginTop: 8 }} disabled={sending}>{sending ? 'Sending…' : 'Send Message'}</button>
            {error && (
              <p className="body-sm" style={{ textAlign: 'center', marginTop: 4, color: 'var(--color-burgundy)' }}>
                Sorry — something went wrong sending your message. Please email or call us directly.
              </p>
            )}
            <p className="body-sm" style={{ textAlign: 'center', marginTop: 4 }}>
              Or email <a href="mailto:hello@racheldahlen.com" style={{ color: 'var(--color-deep-brown)', textDecoration: 'underline', textUnderlineOffset: 3 }}>hello@racheldahlen.com</a>
            </p>
          </form>
          )}
        </div>
      </div>
    </section>
  );
}

function FieldLabel({ children, required }) {
  return (
    <label style={{ display: 'block', fontSize: 11, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-taupe)', marginBottom: 8 }}>
      {children}
      {required ? <span style={{ color: 'var(--color-burgundy)' }}> *</span> : null}
    </label>
  );
}

function Field({ label, name, inputType, required }) {
  return (
    <div>
      <FieldLabel required={required}>{label}</FieldLabel>
      <input type={inputType || 'text'} name={name} required={required} className="input" />
    </div>
  );
}

function SelectField({ label, name, options, required }) {
  return (
    <div>
      <FieldLabel required={required}>{label}</FieldLabel>
      <select name={name} className="input" required={required} defaultValue="">
        <option value="" disabled>Select…</option>
        {options.map(function (o) { return <option key={o} value={o}>{o}</option>; })}
      </select>
    </div>
  );
}

function ContactInfo() {
  const cards = [
    {
      eyebrow: 'Visit',
      title: 'The Clinic',
      lines: ['7701 York Ave S', 'Suite 100', 'Edina, MN 55435'],
      actionLabel: 'Get Directions',
      actionHref: 'https://maps.google.com/?q=7701+York+Ave+S+Edina+MN+55435',
    },
    {
      eyebrow: 'Hours',
      title: "When We're Open",
      lines: ['Monday · 7 AM – 5 PM', 'Tuesday · 7 AM – 5 PM', 'Wednesday · 8 AM – 12 PM', 'Thursday · 7 AM – 5 PM', 'Friday · 7 AM – 1 PM', 'Sat–Sun · Closed'],
    },
    {
      eyebrow: 'Connect',
      title: 'Reach Out',
      lines: ['612 · 294 · 3749', 'hello@racheldahlen.com', '@r.d.aesthetics'],
      actionLabel: 'Follow on Instagram',
      actionHref: 'https://www.instagram.com/r.d.aesthetics/',
    },
  ];
  return (
    <section className="bg-surface" style={{ padding: '120px 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 64, display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center' }}>
          <Eyebrow>Information</Eyebrow>
          <h2 className="h-section">Visit · Hours · <Accent>Connect.</Accent></h2>
          <FadeRule style={{ margin: '6px auto' }} />
        </div>
        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
          {cards.map(function (c) {
            return (
              <div key={c.title} className="card" style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: 40 }}>
                <Eyebrow>{c.eyebrow}</Eyebrow>
                <h3 className="h-sub" style={{ fontSize: 26 }}>{c.title}</h3>
                <BrownRule />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {c.lines.map(function (l) {
                    return <span key={l} className="body-md" style={{ color: 'var(--color-deep-brown)' }}>{l}</span>;
                  })}
                </div>
                {c.actionHref ? (
                  <a href={c.actionHref} target="_blank" rel="noopener noreferrer" className="link-arrow" style={{ marginTop: 8 }}>{c.actionLabel} →</a>
                ) : null}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function LocationMap() {
  return (
    <section style={{ padding: 0, background: 'var(--color-tan)' }}>
      <a href="https://maps.google.com/?q=7701+York+Ave+S+Edina+MN+55435" target="_blank" rel="noopener noreferrer" style={{ display: 'block', height: 420, position: 'relative', overflow: 'hidden' }}>
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2823.5!2d-93.3215!3d44.8625!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNzcwMSBZb3JrIEF2ZSBT!5e0!3m2!1sen!2sus!4v1700000000000"
          style={{ border: 0, width: '100%', height: '100%' }}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          title="Rachel Dahlen Aesthetics location"
        ></iframe>
        <div style={{ position: 'absolute', bottom: 32, left: 32, background: 'var(--color-ivory)', padding: '22px 28px', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)', maxWidth: 280, pointerEvents: 'none' }}>
          <div className="eyebrow">Visit</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, color: 'var(--color-deep-brown)', marginTop: 8, lineHeight: 1.3 }}>
            7701 York Ave S<br/>Suite 100, Edina MN
          </div>
        </div>
      </a>
    </section>
  );
}

Object.assign(window, { ContactPage });