const { useState: useStateC } = React;

function Contact() {
  const [form, setForm] = useStateC({ name: '', phone: '', email: '', treatment: '', datetime: '', notes: '' });
  const [errors, setErrors] = useStateC({});
  const [done, setDone] = useStateC(false);

  const upd = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Please enter your name';
    if (!form.phone.trim() || form.phone.replace(/\D/g, '').length < 7) errs.phone = 'Please enter a valid phone';
    if (form.email && !/^\S+@\S+\.\S+$/.test(form.email)) errs.email = 'Invalid email';
    setErrors(errs);
    if (Object.keys(errs).length === 0) setDone(true);
  };

  return (
    <section className="section contact" id="contact">
      <div className="wrap">
        <div className="contact-grid">
          <div className="contact-info">
            <div className="label" style={{marginBottom: 24}}>Get in Touch</div>
            <Reveal as="h2">Let's begin your <span className="serif-i">glow journey.</span></Reveal>
            <Reveal as="p" className="lede" delay={100}>
              Book a consultation, ask us a question, or simply say hello. We'd love to hear from you.
            </Reveal>

            <div className="info-rows">
              <Reveal className="info-row" delay={120}>
                <div className="ic"><Icon name="phone" /></div>
                <div>
                  <div className="lbl">Phone / WhatsApp</div>
                  <div className="val"><a href="tel:+919909904067">990 990 4067</a></div>
                </div>
              </Reveal>
              <Reveal className="info-row" delay={180}>
                <div className="ic"><Icon name="pin" /></div>
                <div>
                  <div className="lbl">Address</div>
                  <div className="val">393/10, Indiranagar Main Road,<br/>Nookampalayam Road, Perumbakkam,<br/>Chennai – 600100, Tamil Nadu</div>
                </div>
              </Reveal>
              <Reveal className="info-row" delay={240}>
                <div className="ic"><Icon name="clock" /></div>
                <div>
                  <div className="lbl">Clinic Hours</div>
                  <div className="val">Monday – Saturday: 10:00 AM – 7:00 PM<br/>Sunday: By appointment only</div>
                </div>
              </Reveal>
              <Reveal className="info-row" delay={300}>
                <div className="ic"><Icon name="instagram" /></div>
                <div>
                  <div className="lbl">Instagram</div>
                  <div className="val"><a href="https://www.instagram.com/ari_aesthetic_centre/" target="_blank" rel="noopener">@ari_aesthetic_centre</a></div>
                </div>
              </Reveal>
            </div>

            <Reveal className="map-wrap" delay={200}>
              <iframe
                title="Ari Aesthetics Location"
                src="https://www.google.com/maps?q=12.8898546,80.1968898&hl=en&z=17&output=embed"
                width="100%" height="100%"
                style={{border:0, display:'block'}}
                allowFullScreen=""
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade">
              </iframe>
            </Reveal>
          </div>

          <Reveal className="form-card" delay={120}>
            {done ? (
              <div className="form-success">
                <div className="check"><Icon name="check" /></div>
                <h4>Thank you, {form.name.split(' ')[0] || 'friend'}.</h4>
                <p>We've received your request and will confirm your appointment within 2 hours.</p>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <h3>Book your consultation</h3>
                <p className="lede">Tell us a little about yourself. Your glow plan starts with a conversation.</p>
                <div className="form-grid">
                  <div className="field">
                    <label>Full Name *</label>
                    <input value={form.name} onChange={upd('name')} placeholder="Your name" />
                    {errors.name && <div className="err">{errors.name}</div>}
                  </div>
                  <div className="field">
                    <label>Phone *</label>
                    <input value={form.phone} onChange={upd('phone')} placeholder="+91 99 9999 9999" />
                    {errors.phone && <div className="err">{errors.phone}</div>}
                  </div>
                  <div className="field full">
                    <label>Email</label>
                    <input value={form.email} onChange={upd('email')} placeholder="you@example.com" />
                    {errors.email && <div className="err">{errors.email}</div>}
                  </div>
                  <div className="field">
                    <label>Treatment of Interest</label>
                    <select value={form.treatment} onChange={upd('treatment')}>
                      <option value="">Select one…</option>
                      <option>Skin Care</option>
                      <option>Laser</option>
                      <option>Anti-Ageing</option>
                      <option>Body Contouring</option>
                      <option>Hair & Scalp</option>
                      <option>Pigmentation & Glow</option>
                      <option>Not sure — advise me</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Preferred Date & Time</label>
                    <input type="datetime-local" value={form.datetime} onChange={upd('datetime')} />
                  </div>
                  <div className="field full">
                    <label>Message / Additional Notes</label>
                    <textarea value={form.notes} onChange={upd('notes')} placeholder="Any specific concerns or questions?"></textarea>
                  </div>
                </div>
                <div className="form-foot">
                  <button type="submit" className="btn btn-primary">Book My Consultation <span className="arrow">→</span></button>
                  <div className="note">We typically confirm within 2 hours. Your information is kept strictly confidential.</div>
                </div>
              </form>
            )}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap f-inner">
        <div className="f-top">
          <div className="brand-block">
            <img src="assets/logo.jpg" alt="Ari Aesthetics" />
            <div className="tag">Elevate Your Glow</div>
            <p>Ari Aesthetics is Chennai's premium non-invasive aesthetic clinic, dedicated to delivering radiant, personalised results through advanced science and compassionate care.</p>
          </div>
          <div>
            <h5>Quick Links</h5>
            <ul>
              <li><a href="#home">Home</a></li>
              <li><a href="#about">About Us</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#transformations">Transformations</a></li>
              <li><a href="#faqs">FAQs</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Services</h5>
            <ul>
              <li><a href="#services">Skin Care</a></li>
              <li><a href="#services">Laser</a></li>
              <li><a href="#services">Anti-Ageing</a></li>
              <li><a href="#services">Body Contouring</a></li>
              <li><a href="#services">Hair & Scalp</a></li>
              <li><a href="#services">Pigmentation & Glow</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="tel:+919909904067">990 990 4067</a></li>
              <li style={{maxWidth: 220, lineHeight: 1.5, color: 'rgba(255,255,255,0.6)'}}>393/10, Indiranagar Main Road,<br/>Nookampalayam Rd, Perumbakkam,<br/>Chennai – 600100</li>
              <li><a href="https://www.instagram.com/ari_aesthetic_centre/" target="_blank" rel="noopener">@ari_aesthetic_centre</a></li>
            </ul>
          </div>
        </div>
        <div className="f-bottom">
          <div>© 2025 Ari Aesthetics. All Rights Reserved. · Perumbakkam, Chennai</div>
          <div className="disc">Results may vary. All treatments are performed by certified professionals. Not a substitute for medical advice.</div>
        </div>
      </div>
    </footer>
  );
}

function Tweaks({ tweaks, setTweak, visible }) {
  if (!visible) return null;
  const accents = [
    { id: 'gold', color: '#C9A84C' },
    { id: 'rose', color: '#D97B8E' },
    { id: 'lavender', color: '#9B7BCB' },
    { id: 'emerald', color: '#5E8F7D' },
  ];
  return (
    <div className="tweaks-panel">
      <h6>Tweaks <span style={{color:'var(--gold)'}}>◆</span></h6>
      <div className="tw-row">
        <label>Accent</label>
        <div className="swatches">
          {accents.map(a => (
            <div key={a.id}
              className={`sw ${tweaks.accent === a.id ? 'active' : ''}`}
              style={{background: a.color}}
              onClick={() => setTweak('accent', a.id)} />
          ))}
        </div>
      </div>
      <div className="tw-row">
        <label>Heading style</label>
        <div className="seg">
          <button className={tweaks.heading === 'serif' ? 'active' : ''} onClick={() => setTweak('heading', 'serif')}>Serif</button>
          <button className={tweaks.heading === 'sans' ? 'active' : ''} onClick={() => setTweak('heading', 'sans')}>Sans</button>
        </div>
      </div>
      <div className="tw-row">
        <label>Background</label>
        <div className="seg">
          <button className={tweaks.bg === 'ivory' ? 'active' : ''} onClick={() => setTweak('bg', 'ivory')}>Ivory</button>
          <button className={tweaks.bg === 'warm' ? 'active' : ''} onClick={() => setTweak('bg', 'warm')}>Warm</button>
          <button className={tweaks.bg === 'cool' ? 'active' : ''} onClick={() => setTweak('bg', 'cool')}>Cool</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Contact, Footer, Tweaks });