/* global React, ReactDOM, Nav, Hero, About, Services, Icons, useReveal, LINKS */
const { useEffect, useRef, useState } = React;

/* ---------- Work (Gallery + IG CTA) ---------- */
const GAL = [
  { col: "span 4", row: "span 3", label: "FADE · 01",     tag: null,             img: "assets/gallery/01-fade.jpg" },
  { col: "span 4", row: "span 2", label: "LINEUP · 02",   tag: "FEATURED",       img: "assets/gallery/02-lineup.jpg" },
  { col: "span 4", row: "span 3", label: "CUSTOM · 03",   tag: null,             img: "assets/gallery/03-custom.jpg" },
  { col: "span 4", row: "span 2", label: "TEXTURED CUT",  tag: "TRANSFORMATION", img: "assets/gallery/04-textured.jpg" },
  { col: "span 3", row: "span 2", label: "BEARD · 04",    tag: null,             img: "assets/gallery/05-beard.jpg" },
  { col: "span 5", row: "span 2", label: "LOC TAPER",     tag: "SIGNATURE",      img: "assets/gallery/06-locs.jpg" },
  { col: "span 4", row: "span 2", label: "DETAIL · 05",   tag: null,             img: "assets/gallery/07-detail.jpg" },
  { col: "span 8", row: "span 2", label: "STUDIO B-ROLL", tag: "WIDE",           img: "assets/gallery/08-wide.jpg" },
];

function Work() {
  const [open, setOpen] = useState(null);
  useEffect(() => {
    if (open === null) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(null); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <section id="work" className="gallery">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="left">
            <span className="eyebrow"><span className="dot" />03 / Recent Work</span>
            <h2 className="chrome chrome-shine" data-text="The Work">The Work</h2>
          </div>
          <p>Real cuts from the chair. Tap to expand. More on Instagram.</p>
        </div>

        <div className="gallery-grid">
          {GAL.map((g, i) => (
            <div
              key={i}
              className={`gal reveal delay-${(i % 5) + 1}`}
              style={{ gridColumn: g.col, gridRow: g.row }}
              onClick={() => setOpen(i)}
            >
              <img className="gal-img" src={g.img} alt={g.label} loading="lazy" />
              {g.tag && <span className="tag">{g.tag}</span>}
              <span className="label">{g.label}</span>
            </div>
          ))}
        </div>

        <div className="work-follow reveal">
          <a className="btn btn-ghost" href={LINKS.ig} target="_blank" rel="noreferrer">
            {Icons.ig} Follow @jcutzz on Instagram {Icons.arrow}
          </a>
        </div>
      </div>

      {open !== null && (
        <div className="lightbox" onClick={() => setOpen(null)}>
          <div className="lightbox-inner" onClick={(e) => e.stopPropagation()}>
            <button className="lightbox-close" onClick={() => setOpen(null)}>✕</button>
            <img className="lightbox-img" src={GAL[open].img} alt={GAL[open].label} />
            <span className="lightbox-caption">{GAL[open].label}</span>
          </div>
        </div>
      )}
    </section>
  );
}

/* ---------- Visit & Book (merged) ---------- */
const HOURS = [
  { day: "Sun", time: "Closed",       closed: true },
  { day: "Mon", time: "Closed",       closed: true },
  { day: "Tue", time: "Closed",       closed: true },
  { day: "Wed", time: "9 AM to 7 PM", closed: false },
  { day: "Thu", time: "9 AM to 7 PM", closed: false },
  { day: "Fri", time: "9 AM to 7 PM", closed: false },
  { day: "Sat", time: "9 AM to 7 PM", closed: false },
];

function Visit() {
  return (
    <section id="visit" className="visit">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="left">
            <span className="eyebrow"><span className="dot" />04 / Visit & Book</span>
            <h2 className="chrome chrome-shine" data-text="Visit & Book">Visit &amp; Book</h2>
          </div>
          <p>Studio is on Indian School Rd. Mobile? DM me.</p>
        </div>

        <div className="visit-grid">
          <div className="visit-info reveal">
            <div className="visit-block">
              <div className="visit-label">{Icons.pin} <span>Location</span></div>
              <p className="visit-address">3122 W Indian School Rd<br />Phoenix, AZ 85017</p>
              <a className="btn btn-ghost" href={LINKS.maps} target="_blank" rel="noreferrer">
                Get Directions {Icons.arrow}
              </a>
            </div>

            <div className="visit-block">
              <div className="visit-label">{Icons.clock} <span>Hours</span></div>
              <ul className="hours-list">
                {HOURS.map((h) => (
                  <li key={h.day} className={h.closed ? "closed" : ""}>
                    <span className="hday">{h.day}</span>
                    <span className="htime">{h.time}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div className="visit-map reveal delay-2">
            <iframe
              title="JCUTZZ studio location"
              src="https://www.google.com/maps?q=3122+W+Indian+School+Rd,+Phoenix,+AZ+85017&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
          </div>
        </div>

        <div id="book" className="visit-close reveal">
          <div className="booking-bg" />
          <h3 className="chrome chrome-shine" data-text="Ready For Your Next Cut?">Ready For Your<br/>Next Cut?</h3>
          <p className="booking-sub">Book on Booksy. Or DM me for mobile service.</p>
          <div className="booking-cta">
            <a href={LINKS.booksy} target="_blank" rel="noreferrer" className="btn btn-red pulse">
              Book on Booksy {Icons.arrow}
            </a>
            <a href={LINKS.ig} target="_blank" rel="noreferrer" className="btn btn-chrome">
              {Icons.ig} DM for Mobile
            </a>
          </div>
          <div className="booking-poles">
            <div className="booking-pole"><div className="pole-cap" /><div className="pole" /><div className="pole-cap" /></div>
            <div className="booking-pole"><div className="pole-cap" /><div className="pole" /><div className="pole-cap" /></div>
            <div className="booking-pole"><div className="pole-cap" /><div className="pole" /><div className="pole-cap" /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <div className="footer-logo chrome chrome-shine" data-text="JCUTZZ">JCUTZZ</div>
            <p>Private barber studio.</p>
            <p>3122 W Indian School Rd, Phoenix, AZ 85017</p>
            <p style={{ marginTop: 14, color: "#5a5a62", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>
              Wed to Sat · 9 to 7 · Closed Sun/Mon/Tue
            </p>
          </div>
          <div>
            <h5>Navigate</h5>
            <a href="#services">Services</a>
            <a href="#work">Work</a>
            <a href="#visit">Visit</a>
          </div>
          <div>
            <h5>Book</h5>
            <a href={LINKS.booksy} target="_blank" rel="noreferrer">Book on Booksy ↗</a>
            <a href={LINKS.ig} target="_blank" rel="noreferrer">DM for Mobile ↗</a>
            <a href={LINKS.maps} target="_blank" rel="noreferrer">Get Directions ↗</a>
          </div>
          <div>
            <h5>Social</h5>
            <a href={LINKS.ig} target="_blank" rel="noreferrer">Instagram ↗</a>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} JCUTZZ · Phoenix, AZ</span>
          <span>Cut. Sharp. Repeat.</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- App ---------- */
function App() {
  useReveal();
  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <About />
      <Services />
      <Work />
      <Visit />
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);