/* VERNIS — page sections */

function Hero({ onBook, layout }) {
  const D = window.VERNIS;
  return (
    <header className="hero" id="top" data-layout={layout}>
      <div className="wrap hero-grid">
        <div className="hero-copy reveal">
          <span className="eyebrow">{D.studio.city} · Est. {D.studio.est}</span>
          <h1 className="display">
            Nails, <span className="italic accent-text">polished.</span>
            <span className="line2">Beauty made easy.</span>
          </h1>
          <p className="hero-sub">
            A Winston-Salem nail salon for manicures, pedicures, acrylics, gel and
            nail art — with quick ways to call, visit and book.
          </p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={onBook}>Book appointment <span className="arrow">→</span></button>
            <a className="btn btn-ghost" href="#services">View the menu</a>
          </div>
          <div className="hero-meta">
            <div>
              <div className="m-num">{D.studio.rating}</div>
              <div className="stars">★★★★★</div>
              <div className="m-lbl">{D.studio.reviewCount} reviews</div>
            </div>
            <div>
              <div className="m-num">12k+</div>
              <div className="m-lbl">sets painted</div>
            </div>
            <div>
              <div className="m-num">4</div>
              <div className="m-lbl">senior artists</div>
            </div>
          </div>
        </div>
        <div className="hero-art reveal">
          <div className="slot-tall">
            <image-slot src="assets/nail-studio-generated-1.webp" id="hero-tall" shape="rounded" radius="20"
              placeholder="Drop a hero photo — a styled hand or studio shot"></image-slot>
          </div>
          <div className="slot-sm">
            <image-slot src="assets/nail-studio-generated-2.webp" id="hero-sm" shape="rounded" radius="10"
              placeholder="Detail shot"></image-slot>
          </div>
          <div className="badge"><span className="pulse"></span> Taking bookings this week</div>
        </div>
      </div>
    </header>
  );
}

function Strip() {
  const words = ["Gel manicures", "Spa pedicures", "Builder gel", "Acrylic sets", "Hand-painted art", "Dip powder", "Chrome & cat-eye", "Walk-in friendly"];
  const loop = [...words, ...words];
  return (
    <div className="strip" aria-hidden="true">
      <div className="strip-track">
        {loop.map((w, i) => <span key={i}>{w}</span>)}
      </div>
    </div>
  );
}

function Services({ onBookService }) {
  const D = window.VERNIS;
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="svc-layout">
          <div>
            <div className="section-head reveal">
              <span className="eyebrow">The menu</span>
              <h2 className="display">Every service,<br />honestly priced.</h2>
              <p>Prices are starting points — your artist will confirm before any work begins. Tap a service to book it.</p>
            </div>
            <div className="svc-groups" style={{ marginTop: "44px" }}>
              {D.services.map((g) => (
                <div className="svc-group reveal" key={g.cat}>
                  <h3>{g.cat}</h3>
                  {g.items.map((it) => (
                    <div className="svc-item" key={it.name}
                         onClick={() => onBookService({ ...it, cat: g.cat })}>
                      <span className="svc-name">{it.name}</span>
                      <span className="svc-dur">{it.dur}</span>
                      <span className="svc-lead"></span>
                      <span className="svc-price">${it.price}{it.plus ? "+" : ""}</span>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
          <aside className="svc-aside reveal">
            <div className="slot">
              <image-slot src="assets/nail-studio-generated-2.webp" id="svc-aside" shape="rounded" radius="14"
                placeholder="Drop a signature look"></image-slot>
            </div>
            <h4 className="display">Not sure what to pick?</h4>
            <p>Tell us the vibe and how long you want it to last — we'll build the right service around it.</p>
            <button className="btn btn-primary btn-sm" onClick={() => onBookService(null)}>Book a consult <span className="arrow">→</span></button>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Specials({ onBook }) {
  const D = window.VERNIS;
  return (
    <section className="section specials" id="specials">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Specials</span>
          <h2 className="display">A little something extra.</h2>
        </div>
        <div className="specials-grid">
          {D.specials.map((s) => (
            <div className="special-card reveal" key={s.title} onClick={onBook}>
              <span className="tag">{s.tag}</span>
              <h3 className="display">{s.title}</h3>
              <p>{s.desc}</p>
              <div className="fine">{s.fine}</div>
              <div className="glyph">{s.glyph}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  const D = window.VERNIS;
  const cats = ["All", "Art", "Gel", "Natural", "Seasonal"];
  const [active, setActive] = React.useState("All");
  return (
    <section className="section" id="gallery">
      <div className="wrap">
        <div className="gallery-top">
          <div className="section-head reveal">
            <span className="eyebrow">The work</span>
            <h2 className="display">Lookbook</h2>
          </div>
          <div className="filters reveal">
            {cats.map((c) => (
              <button key={c} className={"filter" + (active === c ? " active" : "")}
                      onClick={() => setActive(c)}>{c}</button>
            ))}
          </div>
        </div>
        <div className="gallery-grid">
          {D.gallery.map((g, i) => {
            const show = active === "All" || g.cat === active;
            return (
              <div key={i}
                   className={"gallery-cell reveal" + (g.size === "tall" ? " tall" : g.size === "wide" ? " wide" : "")}
                   style={{ display: show ? "" : "none" }}>
                <image-slot src={i % 2 === 0 ? "assets/nail-studio-generated-1.webp" : "assets/nail-studio-generated-2.webp"} id={"gal-" + i} shape="rounded" radius="14"
                  placeholder={g.label}></image-slot>
                <div className="cap">{g.label}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Team() {
  const D = window.VERNIS;
  return (
    <section className="section" id="team" style={{ background: "var(--bg-warm)" }}>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">The hands</span>
          <h2 className="display">Meet your artists.</h2>
          <p>Senior technicians, each with a specialty. Request anyone by name when you book.</p>
        </div>
        <div className="team-grid">
          {D.team.map((t, i) => (
            <div className="team-card reveal" key={t.name}>
              <div className="slot">
                <image-slot src={i % 2 === 0 ? "assets/nail-studio-generated-1.webp" : "assets/nail-studio-generated-2.webp"} id={"team-" + i} shape="rounded" radius="14"
                  placeholder={"Photo of " + t.name}></image-slot>
              </div>
              <h3 className="display">{t.name}</h3>
              <div className="role">{t.role}</div>
              <div className="spec">{t.spec}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Reviews() {
  const D = window.VERNIS;
  return (
    <section className="section reviews" id="reviews">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Kind words</span>
          <h2 className="display">Loved by {D.studio.reviewCount} guests.</h2>
        </div>
        <div className="reviews-grid">
          {D.reviews.map((r, i) => (
            <div className="review-card reveal" key={i}>
              <div className="stars">{"★".repeat(r.stars)}</div>
              <p className="quote display">“{r.quote}”</p>
              <div className="who">
                <div className="av">{r.name[0]}</div>
                <div>
                  <div className="n">{r.name}</div>
                  <div className="meta">{r.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Visit({ onBook }) {
  const D = window.VERNIS;
  const todayIdx = new Date().getDay(); // 0 Sun .. 6 Sat
  const order = [1, 2, 3, 4, 5, 6, 0]; // Mon..Sun matching data order
  return (
    <section className="section" id="visit">
      <div className="wrap">
        <div className="visit-grid">
          <div className="reveal">
            <div className="section-head">
              <span className="eyebrow">Visit us</span>
              <h2 className="display">Hours &amp;<br />location.</h2>
            </div>
            <div className="hours-list">
              {D.hours.map((row, i) => {
                const isToday = order[i] === todayIdx;
                return (
                  <div key={row.d} className={"hours-row" + (row.closed ? " closed" : "") + (isToday ? " today" : "")}>
                    <span className="d">{row.d}{isToday ? " · Today" : ""}</span>
                    <span className="h">{row.h}</span>
                  </div>
                );
              })}
            </div>
            <div className="visit-info">
              <div className="row">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                <div><b>{D.studio.address[0]}</b><br />{D.studio.address[1]}</div>
              </div>
              <div className="row">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0122 16.92z"/></svg>
                <div><b>{D.studio.phone}</b> · {D.studio.email}</div>
              </div>
              <button className="btn btn-primary" style={{ alignSelf: "flex-start", marginTop: "8px" }} onClick={onBook}>Book your seat <span className="arrow">→</span></button>
            </div>
          </div>

          <div className="map-card reveal">
            <svg viewBox="0 0 400 380" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
              <g stroke="#cdbfae" strokeWidth="2" fill="none" opacity="0.7">
                <path d="M-20 90 H420" />
                <path d="M-20 210 H420" />
                <path d="M-20 320 H420" />
                <path d="M70 -20 V400" />
                <path d="M210 -20 V400" />
                <path d="M320 -20 V400" />
              </g>
              <g stroke="#c0d0b8" strokeWidth="8" fill="none" opacity="0.8">
                <path d="M-20 150 C 120 150, 160 260, 420 250" />
              </g>
              <rect x="86" y="106" width="108" height="86" fill="#e7ddcd" opacity="0.7" rx="3" />
              <rect x="232" y="226" width="74" height="74" fill="#e7ddcd" opacity="0.6" rx="3" />
            </svg>
            <div className="map-pin">
              <span className="head">{D.studio.name}</span>
              <span className="needle"></span>
            </div>
            <a className="btn btn-light btn-sm map-cta" href="#" onClick={(e) => e.preventDefault()}>Get directions ↗</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Strip, Services, Specials, Gallery, Team, Reviews, Visit });