/* global React */
const { useState: useStateHome, useEffect: useEffectHome, useRef: useRefHome } = React;

// ── HERO ─────────────────────────────────────────
window.Hero = function Hero({ ctaText = 'Book Appointment' }) {
  return (
    <section className="hero">
      <div className="shell hero-inner">
        <div className="hero-copy" data-reveal>
          <div className="eyebrow">BENGALURU </div>
          <h1 className="display hero-title">
            Hands that<br />
            <span className="hero-script">deserve</span><br />
            a little luxury.
          </h1>
          <p className="hero-sub">
            A nail boutique where craft meets indulgence — gel polish, sculpted extensions,
            hand-painted art, and bespoke press-ons made for the way you live.
          </p>
          <div className="hero-actions">
            <a href="book.html" className="btn btn-primary">{ctaText}</a>
            <a href="shop.html" className="btn btn-ghost">Shop Press-Ons</a>
          </div>
          <div className="hero-meta">
            <div>
              <div className="hero-meta-num">1000+</div>
              <div className="hero-meta-lbl">Sets crafted</div>
            </div>
            <div className="hero-meta-divider" />
            <div>
              <div className="hero-meta-num">4.9★</div>
              <div className="hero-meta-lbl">Google rating</div>
            </div>
            <div className="hero-meta-divider" />
            <div>
              <div className="hero-meta-num">3 yrs</div>
              <div className="hero-meta-lbl">In Bengaluru</div>
            </div>
          </div>
        </div>

        <div className="hero-visual">
          <div className="hero-arc" aria-hidden="true"></div>
          <div className="hero-frame gold-frame">
            <div className="ph hero-photo" data-slot="hero-photo" data-label="Hero · Hand portrait with gel manicure"></div>
          </div>
          <div className="hero-badge">
            <div className="hero-badge-script">Lacquered</div>
            <div className="hero-badge-text">to perfection<br />since 2023</div>
          </div>
        </div>
      </div>
    </section>);

};

// ── SERVICES ─────────────────────────────────────
const SERVICES = [
{
  name: 'Gel Polish',
  duration: '45 min',
  from: '₹699',
  desc: 'High-shine, long-wear gel in 200+ shades. Lasts 3 weeks without a chip.',
  icon:
  <svg viewBox="0 0 48 48" fill="none">
        <path d="M18 8h12v6h-12z" stroke="currentColor" strokeWidth="1.5" />
        <path d="M16 14h16v26a4 4 0 0 1-4 4h-8a4 4 0 0 1-4-4z" stroke="currentColor" strokeWidth="1.5" />
        <path d="M16 22h16" stroke="currentColor" strokeWidth="1.5" />
        <circle cx="24" cy="32" r="3" fill="currentColor" opacity="0.4" />
      </svg>

},
{
  name: 'Nail Art',
  duration: '60–90 min',
  from: '₹1,099',
  desc: 'Hand-painted florals, chrome, French twists, 3D charms — anything you dream.',
  icon:
  <svg viewBox="0 0 48 48" fill="none">
        <path d="M24 6 L28 18 L40 20 L31 28 L34 40 L24 34 L14 40 L17 28 L8 20 L20 18 Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
        <circle cx="24" cy="24" r="3" fill="currentColor" opacity="0.4" />
      </svg>

},
{
  name: 'Nail Extensions',
  duration: '90 min',
  from: '₹1,499',
  desc: 'Acrylic-built lengths sculpted to your nail bed — almond, coffin, stiletto, square.',
  icon:
  <svg viewBox="0 0 48 48" fill="none">
        <path d="M24 4 C30 4 34 10 34 18 L34 38 C34 42 30 44 24 44 C18 44 14 42 14 38 L14 18 C14 10 18 4 24 4 Z" stroke="currentColor" strokeWidth="1.5" />
        <path d="M14 18 C14 18 18 22 24 22 C30 22 34 18 34 18" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
      </svg>

},
{
  name: 'Gel Extensions',
  duration: '90–120 min',
  from: '₹1,799',
  desc: 'Lightweight, flexible builder-gel extensions — strong, natural-looking, kind to your nails.',
  icon:
  <svg viewBox="0 0 48 48" fill="none">
        <path d="M14 22 L24 8 L34 22 L34 38 C34 41 31 44 28 44 L20 44 C17 44 14 41 14 38 Z" stroke="currentColor" strokeWidth="1.5" />
        <path d="M14 30 L34 30" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
        <path d="M19 36 H29" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
      </svg>

},
{
  name: 'Press-Ons',
  duration: 'Made to order',
  from: '₹899',
  desc: 'Reusable, salon-grade press-on sets. Pick a design or customise on WhatsApp.',
  icon:
  <svg viewBox="0 0 48 48" fill="none">
        <rect x="10" y="10" width="11" height="28" rx="5" stroke="currentColor" strokeWidth="1.5" />
        <rect x="27" y="10" width="11" height="28" rx="5" stroke="currentColor" strokeWidth="1.5" />
        <circle cx="15.5" cy="20" r="2" fill="currentColor" opacity="0.4" />
        <circle cx="32.5" cy="20" r="2" fill="currentColor" opacity="0.4" />
      </svg>

}];


window.Services = function Services() {
  return (
    <section className="section services" id="services">
      <div className="shell">
        <div className="section-head" data-reveal>
          <div className="eyebrow">The Menu</div>
          <h2 className="display">Five ways to <span className="script-inline">indulge</span></h2>
          <p>From a quick gel refresh to sculpted couture extensions — every service is finished by hand, never rushed.</p>
        </div>

        <div className="services-grid">
          {SERVICES.map((s, i) =>
          <div key={s.name} className="service-card" data-reveal data-reveal-delay={String(i % 5)}>
              <div className="service-card-icon">{s.icon}</div>
              <div className="service-card-num">0{i + 1}</div>
              <h3 className="display service-card-name">{s.name}</h3>
              <p className="service-card-desc">{s.desc}</p>
              <div className="service-card-meta">
                <span>{s.duration}</span>
              </div>
              <a href="book.html" className="service-card-link">
                Book this service
                <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" strokeWidth="1.4" /></svg>
              </a>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ── GALLERY ──────────────────────────────────────
const GALLERY_CATS = ['All', 'Chrome', 'Florals', 'French', 'Glitter', '3D Charms', 'Minimal'];
const GALLERY_ITEMS = [
{ slot: 'gallery-1',  cat: 'Chrome',    label: 'Aurora chrome · almond',     tone: 1 },
{ slot: 'gallery-2',  cat: 'Florals',   label: 'Hand-painted rose · coffin', tone: 2 },
{ slot: 'gallery-3',  cat: 'French',    label: 'Micro French · stiletto',    tone: 3 },
{ slot: 'gallery-4',  cat: '3D Charms', label: 'Pearl drop · square',        tone: 4 },
{ slot: 'gallery-5',  cat: 'Glitter',   label: 'Cat-eye glitter · almond',   tone: 1 },
{ slot: 'gallery-6',  cat: 'Minimal',   label: 'Butter nude · short square', tone: 2 },
{ slot: 'gallery-7',  cat: 'Florals',   label: 'Cherry blossom · oval',      tone: 3 },
{ slot: 'gallery-8',  cat: 'Chrome',    label: 'Mirror chrome · stiletto',   tone: 4 },
{ slot: 'gallery-9',  cat: 'French',    label: 'Coloured French · ballerina',tone: 1 },
{ slot: 'gallery-10', cat: '3D Charms', label: 'Bow charms · short oval',    tone: 2 }];


window.Gallery = function Gallery() {
  const [cat, setCat] = useStateHome('All');
  const items = cat === 'All' ? GALLERY_ITEMS : GALLERY_ITEMS.filter((i) => i.cat === cat);
  const trackRef = useRefHome(null);

  const scroll = (dir) => {
    if (!trackRef.current) return;
    trackRef.current.scrollBy({ left: dir * 320, behavior: 'smooth' });
  };

  return (
    <section className="section gallery" id="gallery">
      <div className="shell">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Lookbook</div>
          <h2 className="display">Explore our <span className="script-inline">nail art</span> gallery</h2>
          <p>A curated archive of recent sets — tap any look to recreate it on your next visit.</p>
        </div>

        <div className="gallery-cats">
          {GALLERY_CATS.map((c) =>
          <button
            key={c}
            className={`gallery-cat ${cat === c ? 'active' : ''}`}
            onClick={() => setCat(c)}>
            {c}</button>
          )}
        </div>
      </div>

      <div className="gallery-track-wrap">
        <button className="gallery-arrow gallery-arrow-l" onClick={() => scroll(-1)} aria-label="Previous">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 1 L3 7 L9 13" stroke="currentColor" strokeWidth="1.5" /></svg>
        </button>
        <button className="gallery-arrow gallery-arrow-r" onClick={() => scroll(1)} aria-label="Next">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 1 L11 7 L5 13" stroke="currentColor" strokeWidth="1.5" /></svg>
        </button>

        <div className="gallery-track no-scrollbar" ref={trackRef}>
          <div className="gallery-spacer-l" />
          {items.map((item, i) =>
          <figure key={`${cat}-${i}`} className="gallery-card">
              <div className="gold-frame">
                <div className={`ph gallery-photo tone-${item.tone}`} data-slot={item.slot} data-label={item.label}></div>
              </div>
              <figcaption className="gallery-cap">
                <span className="gallery-cap-cat">{item.cat}</span>
                <span className="gallery-cap-label">{item.label}</span>
              </figcaption>
            </figure>
          )}
          <div className="gallery-spacer-r" />
        </div>
      </div>
    </section>);

};

// ── TESTIMONIALS ─────────────────────────────────
const TESTIMONIALS = [
{
  name: 'Ananya R.',
  avatar: 'AR',
  when: '2 weeks ago',
  rating: 5,
  text: 'Honestly the best gel mani I\'ve had in Bengaluru. Three weeks in and not a single chip. The little salon is so calming, and they actually listen when you describe what you want.'
},
{
  name: 'Priya M.',
  avatar: 'PM',
  when: '1 month ago',
  rating: 5,
  text: 'I went in with a vague Pinterest idea and walked out with the exact set. Hand-painted florals on a milky base — got compliments for two weeks straight.'
},
{
  name: 'Sneha V.',
  avatar: 'SV',
  when: '3 weeks ago',
  rating: 5,
  text: 'Got the gel extensions for my engagement and I cannot stop staring at my hands. Lightweight, gorgeous shape, and they added the tiniest pearl charms. Worth every rupee.'
},
{
  name: 'Divya K.',
  avatar: 'DK',
  when: '2 months ago',
  rating: 5,
  text: 'Booked a press-on set on WhatsApp — chrome French with a tiny bow. Showed up next morning, fit perfectly. Reusing them for my second wedding event already.'
}];


window.Testimonials = function Testimonials() {
  return (
    <section className="section testimonials">
      <div className="shell">
        <div className="section-head" data-reveal>
          <div className="eyebrow">From our chair</div>
          <h2 className="display">What our <span className="script-inline">clients</span> say</h2>
          <div className="testimonials-source">
            <svg width="16" height="16" viewBox="0 0 48 48" fill="none">
              <path d="M44.5 20H24v8.5h11.8C34.7 33 30.1 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l6-6C34.5 6.5 29.5 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20c11.5 0 19.5-8.1 19.5-19.5 0-1.5-.2-3-.5-4.5z" fill="#4285F4" />
            </svg>
            <span>Verified reviews from Google</span>
            <span className="testimonials-rating">4.9 ★ · 287 reviews</span>
          </div>
        </div>

        <div className="testimonials-grid">
          {TESTIMONIALS.map((t, i) =>
          <article key={i} className="testimonial-card">
              <div className="testimonial-stars">
                {Array.from({ length: t.rating }).map((_, j) =>
              <svg key={j} width="14" height="14" viewBox="0 0 24 24" fill="#FBBC04"><path d="M12 2 L15 9 L22 10 L17 15 L18.5 22 L12 18.5 L5.5 22 L7 15 L2 10 L9 9 Z" /></svg>
              )}
                <svg className="testimonial-google" width="14" height="14" viewBox="0 0 48 48" fill="none">
                  <path d="M44.5 20H24v8.5h11.8C34.7 33 30.1 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l6-6C34.5 6.5 29.5 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20c11.5 0 19.5-8.1 19.5-19.5 0-1.5-.2-3-.5-4.5z" fill="#4285F4" />
                </svg>
              </div>
              <p className="testimonial-text">"{t.text}"</p>
              <div className="testimonial-meta">
                <div className="testimonial-avatar">{t.avatar}</div>
                <div>
                  <div className="testimonial-name">{t.name}</div>
                  <div className="testimonial-when">{t.when}</div>
                </div>
              </div>
            </article>
          )}
        </div>

        <div className="testimonials-foot">
          <a href="#" className="btn btn-ghost">Read all 287 reviews on Google</a>
        </div>
      </div>
    </section>);

};

// ── PRESS-ON TEASER ──────────────────────────────
window.PressOnTeaser = function PressOnTeaser() {
  const waNum = (window.LQ_PUB && window.LQ_PUB.waNumber()) || '918317451779';
  return (
    <section className="presson-teaser">
      <div className="shell presson-teaser-inner">
        <div className="presson-teaser-copy" data-reveal>
          <div className="eyebrow">New · Press-On Atelier</div>
          <h2 className="display">
            Salon nails,<br />
            <span className="script-inline">delivered</span> to your door.
          </h2>
          <p>20 ready-made designs. Or send us your vision on WhatsApp and we'll hand-craft a one-of-one set just for you.</p>
          <div className="presson-teaser-actions">
            <a href="shop.html" className="btn btn-gold">Shop the collection</a>
            <a href={`https://wa.me/${waNum}`} className="btn btn-ghost">Customise on WhatsApp</a>
          </div>
        </div>
        <div className="presson-teaser-visual" data-reveal data-reveal-delay="1">
          <div className="presson-teaser-card gold-frame">
            <div className="ph" data-slot="press-on-set-01" data-label="Press-on set · 01"></div>
          </div>
          <div className="presson-teaser-card gold-frame offset">
            <div className="ph" data-slot="press-on-set-02" data-label="Press-on set · 02"></div>
          </div>
        </div>
      </div>
    </section>);

};