const { useState: useStateS, useEffect: useEffectS } = React;

function Services() {
  const [active, setActive] = useStateS(0);
  const svc = window.ARI.services[active];
  return (
    <section className="section services" id="services">
      <div className="wrap">
        <div className="section-head">
          <div><div className="label">Our Treatments</div></div>
          <div className="head-right">
            <Reveal as="h2">Curated treatments for <span className="serif-i">every skin story.</span></Reveal>
            <Reveal className="lede" delay={100} style={{marginTop:16}}>
              Every service at Ari Aesthetics is designed to be non-invasive, clinically proven, and deeply personal.
            </Reveal>
          </div>
        </div>

        <Reveal className="service-tabs">
          {window.ARI.services.map((s, i) => (
            <button key={s.id} className={`service-tab ${i === active ? 'active' : ''}`} onClick={() => setActive(i)}>
              {s.name}
            </button>
          ))}
        </Reveal>

        <div className="service-panel" key={svc.id}>
          <Reveal className="service-meta">
            <div className="icon-wrap"><Icon name={window.SERVICE_ICON[svc.id]} /></div>
            <h3>{svc.name}</h3>
            <p>{svc.blurb}</p>
            <a href="#contact" className="cta-link">Book this treatment <Icon name="arrow" width={14} height={14} /></a>
          </Reveal>

          <div className="service-list">
            {svc.items.map((it, i) => (
              <Reveal key={it.t} className="service-item" delay={i * 70}>
                <div className="s-idx">{String(i + 1).padStart(2, '0')}</div>
                <div>
                  <h4>{it.t}</h4>
                  <p>{it.d}</p>
                </div>
                <div className="plus"><Icon name="plus" width={16} height={16} /></div>
              </Reveal>
            ))}
          </div>
        </div>

        <Reveal className="service-cta-strip">
          <div>
            <h3>Not sure which treatment is right for you?</h3>
            <p>Our specialists will recommend a personalised plan just for you — no pressure, ever.</p>
          </div>
          <a href="#contact" className="btn btn-outline-light">Book a Free Consultation <span className="arrow">→</span></a>
        </Reveal>
      </div>
    </section>
  );
}

function How() {
  return (
    <section className="section how">
      <div className="wrap inner">
        <div className="section-head">
          <div><div className="label">Your Journey</div></div>
          <div className="head-right">
            <Reveal as="h2">Your path to radiance <span className="serif-i" style={{color:'var(--gold)'}}>starts here.</span></Reveal>
          </div>
        </div>
        <div className="how-steps">
          {window.ARI.steps.map((s, i) => (
            <Reveal key={s.n} className="how-step" delay={i * 100}>
              <div className="step-n">{s.n}</div>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
            </Reveal>
          ))}
        </div>
        <Reveal className="how-cta">
          <div className="bigline">Begin your glow journey today.</div>
          <a href="#contact" className="btn btn-outline-light">Book Now <span className="arrow">→</span></a>
        </Reveal>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="section testimonials">
      <div className="wrap">
        <div className="section-head">
          <div><div className="label">Client Stories</div></div>
          <div className="head-right">
            <Reveal as="h2">Real glow. <span className="serif-i">Real results.</span></Reveal>
          </div>
        </div>
        <div className="t-grid">
          {window.ARI.testimonials.map((t, i) => (
            <Reveal key={t.name} className={`t-card ${t.featured ? 'featured' : ''}`} delay={i * 80}>
              <div className="stars">★★★★★</div>
              <div className="quote">"{t.quote}"</div>
              <div className="author">
                <div className="avatar">{t.initials}</div>
                <div className="meta">
                  <div className="name">{t.name}</div>
                  <div className="loc">{t.loc}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  return (
    <section className="section gallery" id="transformations">
      <div className="wrap">
        <div className="section-head">
          <div><div className="label">Aesthetic Transformations</div></div>
          <div className="head-right">
            <Reveal as="h2">Your transformation, <span className="serif-i">our pride.</span></Reveal>
            <Reveal className="lede" delay={100} style={{marginTop:16}}>
              Every result you see here is real — achieved through science, skill, and care. Individual results may vary.
            </Reveal>
          </div>
        </div>
        <Reveal className="g-grid">
          {window.ARI.gallery.map((g, i) => (
            <div key={i} className={`g-item ${g.cls}`}
              style={g.img ? { backgroundImage: `url(${g.img})`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}}>
              <span className="tag">{g.tag}</span>
            </div>
          ))}
        </Reveal>
        <div className="g-disclaim">Results shown are representative. Individual results may vary based on skin type and treatment plan.</div>
        <div style={{display:'flex', justifyContent:'center', marginTop: 32}}>
          <a href="https://www.instagram.com/ari_aesthetic_centre/" target="_blank" rel="noopener" className="btn btn-ghost">
            <Icon name="instagram" width={16} height={16} /> See more on Instagram
          </a>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  return (
    <section className="section faq" id="faqs">
      <div className="wrap">
        <div className="faq-grid">
          <div className="faq-side">
            <div className="label" style={{marginBottom: 24}}>Questions & Answers</div>
            <Reveal as="h2" style={{marginBottom: 24}}>Everything you'd <span className="serif-i">like to know.</span></Reveal>
            <p>We believe in clarity and honest conversations. Here's what our clients most often ask — and if you have more, we're always a call away.</p>
            <Reveal className="help-card" delay={120}>
              <h4>Still have questions?</h4>
              <p>Our specialists are happy to walk you through every detail of your treatment plan.</p>
              <a href="#contact" className="btn btn-primary">Talk to a Specialist <span className="arrow">→</span></a>
            </Reveal>
          </div>
          <div className="faq-list">
            {window.ARI.faqs.map((f, i) => (
              <Reveal as="details" key={i} className="faq-item" delay={i * 40}>
                <summary>
                  <span>{f.q}</span>
                  <span className="toggle"><Icon name="plus" width={14} height={14} /></span>
                </summary>
                <div className="answer">{f.a}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, How, Testimonials, Gallery, FAQ });