/* ============================================================
   GALLERY + CONTACT
   ============================================================ */
const { useState } = React;

function Gallery({ go }) {
  useReveal();
  const items = [
    ['cocoa', 'The ritual room', 'tall'],
    ['clay', 'Herbal preparation', ''],
    ['olive', 'Botanical garden', ''],
    ['gold', 'Turmeric soap', ''],
    ['', 'Treatment space', 'wide'],
    ['clay', 'Coffee scrub', ''],
    ['olive', 'Herbal oils', 'tall'],
    ['cocoa', 'A moment of rest', ''],
    ['gold', 'The glow', ''],
  ];
  const [open, setOpen] = useState(null);
  return (
    <div className="page">
      <PageHeader
        eyebrow="Gallery"
        title={<>Moments of <span className="serif-it" style={{ color: 'var(--clay)' }}>warmth</span></>}
        sub="A glimpse into the sanctuary — the space, the rituals, and the craft behind every product."
      />
      <section className="wrap" style={{ paddingBottom: 120 }}>
        <div className="gal-grid">
          {items.map((it, i) => (
            <button key={i} className={`gal-item ${it[2]} reveal`} style={{ transitionDelay: `${(i % 4) * 70}ms` }} onClick={() => setOpen(it)}>
              <Placeholder tone={it[0]} label={it[1]} style={{ height: '100%' }} />
              <span className="gal-cap">{it[1]}</span>
            </button>
          ))}
        </div>
      </section>
      <CTABand go={go}
        eyebrow="See it in person"
        title={<>Come visit the <span className="serif-it">sanctuary</span></>}
        btn="Book a visit" target="book" secondary={['Contact us', 'contact']} />
      {open && (
        <div className="qv-overlay" onClick={() => setOpen(null)}>
          <div className="gal-light" onClick={e => e.stopPropagation()}>
            <button className="qv-close" onClick={() => setOpen(null)}>✕</button>
            <Placeholder tone={open[0]} label={open[1]} style={{ height: '100%', borderRadius: 'var(--r-md)' }} />
          </div>
        </div>
      )}
    </div>
  );
}

function Contact({ go }) {
  useReveal();
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState('');
  const [f, setF] = useState({ name: '', email: '', subject: 'General enquiry', message: '', company: '' });

  const submit = async (e) => {
    e.preventDefault();
    setSending(true); setError('');
    try {
      const r = await fetch(`${API_BASE}/api/contact`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(f),
      });
      const d = await r.json().catch(() => ({}));
      if (!r.ok || !d.ok) throw new Error(d.error || 'failed');
      setSent(true);
    } catch (err) {
      setError('Sorry — your message couldn’t be sent. Please email hello@eglowbeautyspa.com directly.');
    } finally { setSending(false); }
  };

  return (
    <div className="page">
      <PageHeader
        eyebrow="Contact"
        title={<>Say <span className="serif-it" style={{ color: 'var(--clay)' }}>hello</span></>}
        sub="Questions about a ritual, a product or a private session? We’d love to hear from you."
      />
      <section className="wrap contact-grid" style={{ paddingBottom: 120 }}>
        <div className="contact-info reveal">
          <div className="contact-info-block">
            <span className="eyebrow">Visit</span>
            <p>By appointment only<br />Address shared on booking</p>
          </div>
          <div className="contact-info-block">
            <span className="eyebrow">Hours</span>
            <p>Tuesday – Sunday<br />10:00am – 7:00pm<br />Closed Mondays</p>
          </div>
          <div className="contact-info-block">
            <span className="eyebrow">Reach us</span>
            <p><a href="mailto:hello@eglowbeautyspa.com">hello@eglowbeautyspa.com</a><br /><a href="tel:+10000000000">+1 (000) 000-0000</a></p>
          </div>
          <div className="contact-info-block">
            <span className="eyebrow">Follow</span>
            <div style={{ display: 'flex', gap: 12, marginTop: 6 }}>
              {['Instagram', 'TikTok', 'Pinterest'].map(s => (
                <a key={s} href="#" className="link-underline" style={{ fontSize: 12 }}>{s}</a>
              ))}
            </div>
          </div>
          <div className="contact-map">
            <Placeholder tone="olive" label="Map — by appointment" style={{ height: '100%', borderRadius: 'var(--r-md)' }} />
          </div>
        </div>

        <div className="contact-form-wrap reveal" style={{ transitionDelay: '120ms' }}>
          {!sent ? (
            <form className="contact-form" onSubmit={submit}>
              <h3 className="display">Send a message</h3>
              <input type="text" name="company" tabIndex="-1" autoComplete="off" aria-hidden="true"
                value={f.company} onChange={e => setF({ ...f, company: e.target.value })}
                style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
              <div className="field"><label>Name *</label>
                <input required value={f.name} onChange={e => setF({ ...f, name: e.target.value })} placeholder="Your name" /></div>
              <div className="field"><label>Email *</label>
                <input required type="email" value={f.email} onChange={e => setF({ ...f, email: e.target.value })} placeholder="you@email.com" /></div>
              <div className="field"><label>Subject</label>
                <select value={f.subject} onChange={e => setF({ ...f, subject: e.target.value })}>
                  <option>General enquiry</option>
                  <option>Booking a ritual</option>
                  <option>Products &amp; wholesale</option>
                  <option>Private / group session</option>
                  <option>Press &amp; collaboration</option>
                </select></div>
              <div className="field"><label>Message *</label>
                <textarea required rows="5" value={f.message} onChange={e => setF({ ...f, message: e.target.value })} placeholder="How can we help?" /></div>
              {error && <p style={{ color: 'var(--clay)', fontSize: 14, margin: 0 }}>{error}</p>}
              <button className="btn btn-clay" type="submit" disabled={sending}>
                {sending ? 'Sending…' : <>Send message <span className="arrow">→</span></>}
              </button>
            </form>
          ) : (
            <div className="contact-sent">
              <LogoMark size={56} />
              <h3 className="display">Thank you, {f.name.split(' ')[0] || 'friend'}</h3>
              <p>Your message is on its way. We’ll be in touch shortly — usually within one business day.</p>
              <button className="btn btn-ghost" onClick={() => go('home')}>Back to home</button>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Gallery, Contact });