/* Fluffy Friends — Contact page */
const { Button, Input, Select } = window.FluffyFriendsDesignSystem_a09c32;

function ContactPage({ onBook }) {
  useReveal();
  const [name, setName] = React.useState('');
  const [pet, setPet] = React.useState('Dog');
  const [msg, setMsg] = React.useState('');
  const [sent, setSent] = React.useState(false);

  const sendWhatsApp = (e) => {
    e.preventDefault();
    const text = `Hi Fluffy Friends! 🐾\nMy name is ${name || '(your name)'}.\nPet: ${pet}.\n${msg || 'I\'d love to book a groom — could you help?'}`;
    openWhatsApp(text);
    setSent(true);
  };

  const cards = [
    { ic: 'phone', cls: '', sub: 'Call us', val: FLF.phoneDisplay, href: `tel:${FLF.tel}` },
    { ic: 'wa', cls: 'wa', sub: 'WhatsApp', val: 'Message us instantly', href: waLink() },
    { ic: 'mail', cls: '', sub: 'Email', val: FLF.email, href: `mailto:${FLF.email}` },
    { ic: 'instagram', cls: '', sub: 'Instagram', val: `@${FLF.ig}`, href: FLF.igUrl },
  ];
  const hours = [['Monday – Tuesday', '9:00 – 19:00'], ['Wednesday – Saturday', '9:00 – 21:00'], ['Sunday', 'Closed']];
  const areas = ['Jumeirah', 'Dubai Marina', 'Downtown', 'Arabian Ranches', 'Palm Jumeirah', 'JVC', 'Business Bay', 'Mirdif', 'Al Barsha', 'Springs & Meadows', '+ all of Dubai'];

  return (
    <main>
      <section className="page-hero">
        <Bunny className="page-hero__bunny l" />
        <Bunny className="page-hero__bunny r" />
        <div className="container">
          <div className="reveal in">
            <span className="eyebrow eyebrow--center">Say hello</span>
            <h1>Let&rsquo;s get in touch</h1>
            <p>Booking, a quick question, or just want grooming advice? We&rsquo;re always happy to help — WhatsApp is the fastest way to reach us.</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            {/* Left: details */}
            <div>
              <div className="contact-cards reveal">
                {cards.map(c => (
                  <a className="ccard" key={c.sub} href={c.href} target={c.href.startsWith('http') ? '_blank' : undefined} rel="noopener">
                    <span className={'ccard__ic ' + c.cls}>{c.ic === 'wa' ? <WhatsAppGlyph size={24} /> : <Icon name={c.ic} size={24} />}</span>
                    <span>
                      <span className="ccard__sub">{c.sub}</span>
                      <span className="ccard__val">{c.val}</span>
                    </span>
                  </a>
                ))}
              </div>
              <div className="hours-card reveal" style={{ marginTop: 16 }}>
                <h4><Icon name="clock" size={20} stroke="var(--pink-300)" /> Opening hours</h4>
                {hours.map(([d, t]) => (
                  <div className="hours-row" key={d}><span>{d}</span><b>{t}</b></div>
                ))}
              </div>
            </div>

            {/* Right: form */}
            <div className="form-card reveal">
              {!sent ? (
                <form onSubmit={sendWhatsApp}>
                  <h3>Send us a message</h3>
                  <p className="desc">Fill this in and we&rsquo;ll open WhatsApp with your details ready to send — or call us anytime.</p>
                  <div className="form-row">
                    <Input label="Your name" placeholder="e.g. Mariam" value={name} onChange={e => setName(e.target.value)} required />
                    <div>
                      <label className="fl-lab">Your pet</label>
                      <Select value={pet} onChange={e => setPet(e.target.value)}>
                        <option>Dog</option>
                        <option>Cat</option>
                        <option>Bird</option>
                        <option>Rabbit</option>
                        <option>Other</option>
                      </Select>
                    </div>
                  </div>
                  <div className="form-row">
                    <Input label="Mobile number" placeholder="+971 50 ..." />
                    <Input label="Area in Dubai" placeholder="e.g. Jumeirah" />
                  </div>
                  <div className="form-field">
                    <label className="fl-lab">How can we help?</label>
                    <textarea className="flf-textarea" placeholder="Tell us about your pet's breed, coat and what you'd like..." value={msg} onChange={e => setMsg(e.target.value)} />
                  </div>
                  <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
                    <Button variant="primary" size="lg" type="submit"><WhatsAppGlyph size={20} /> Send on WhatsApp</Button>
                    <Button variant="ghost" type="button" onClick={onBook}>Use the booking form</Button>
                  </div>
                </form>
              ) : (
                <div style={{ textAlign: 'center', padding: '24px 8px' }}>
                  <div className="success__ring" style={{ margin: '0 auto 20px' }}><Bunny src="flf-bunny-pink.png" style={{ width: 60 }} /></div>
                  <h3>Off to WhatsApp!</h3>
                  <p style={{ color: 'var(--text-secondary)', marginTop: 8 }}>We&rsquo;ve opened a chat with your details. If it didn&rsquo;t open, just message us at {FLF.phoneDisplay}.</p>
                  <div style={{ marginTop: 22 }}><Button variant="outline" onClick={() => setSent(false)}>Send another</Button></div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Areas */}
      <section className="section section--pink section--tight">
        <div className="container">
          <div className="sec-head reveal" style={{ marginBottom: 30 }}>
            <span className="eyebrow eyebrow--center"><Icon name="map-pin" size={15} /> Where we groom</span>
            <h2>We come to you, all over Dubai</h2>
          </div>
          <div className="areas reveal" style={{ justifyContent: 'center', maxWidth: 760, margin: '0 auto' }}>
            {areas.map(a => (
              <span key={a} style={{ background: 'var(--white)', borderRadius: 'var(--radius-pill)', padding: '10px 18px', fontWeight: 700, fontSize: 14.5, boxShadow: 'var(--shadow-xs)', color: 'var(--ink-700)' }}>{a}</span>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ContactPage });