/* global React */
const { useState } = React;

// ----- Promo bar -----
function PromoBar() {
  const items = [
    "$25 Walk-Ins · First-Time Clients",
    "Walk-Ins Accepted 10AM–5PM",
    "No Wait Times",
    "Fresno · Clovis",
    "Mon–Sat · 10–6",
  ];
  const stream = [...items, ...items, ...items];
  return (
    <div className="promo-bar">
      <div className="marquee">{stream.map((t, i) => <span key={i}>{t}</span>)}</div>
    </div>
  );
}

// ----- Header -----
function Header({ onNav }) {
  return (
    <header className="header">
      <div className="inner">
        <a className="brand" href="#" onClick={(e) => { e.preventDefault(); onNav("home"); }}>
          <img src="assets/logo-emblem.png" alt="Next Level Barber Studio" />
          <span className="word">Next Level Barber Studio</span>
        </a>
        <nav>
          <a onClick={() => onNav("home")}>Home</a>
          <a onClick={() => onNav("barbers")}>Barbers</a>
          <a onClick={() => onNav("locations")}>Locations</a>
          <a onClick={() => onNav("faq")}>FAQ</a>
          <a className="btn btn--primary btn--sm" href="tel:+15597953818">☎ Call Now · (559) 795-3818</a>
        </nav>
      </div>
    </header>
  );
}

// ----- Hero -----
function Hero() {
  return (
    <section className="hero">
      <div className="stack">
        <p className="eyebrow reveal" style={{['--d']:'0ms'}}>— Next Level Barber Studio —</p>
        <h1 className="reveal" style={{['--d']:'120ms'}}>
          Sit Down.<br />Walk Out Sharp.
        </h1>
        <div className="hero-video reveal" style={{['--d']:'320ms'}}>
          <span className="corner tl" aria-hidden="true"></span>
          <span className="corner tr" aria-hidden="true"></span>
          <span className="corner bl" aria-hidden="true"></span>
          <span className="corner br" aria-hidden="true"></span>
          <wistia-player media-id="onjqp5sded" aspect="1.7777777777777777"></wistia-player>
        </div>
        <p className="script-line reveal" style={{['--d']:'520ms'}}>
          <span className="rule"></span>
          <span className="script">since day one</span>
          <span className="rule"></span>
        </p>
        <p className="lead reveal" style={{['--d']:'640ms'}}>
          Central Valley's #1 barbershop. Highly skilled barbers, a clean shop,
          and a double shot of aftershave. Skip the wait — give us a call.
        </p>
        <div className="actions reveal" style={{['--d']:'760ms'}}>
          <a className="btn btn--primary btn--lg" href="tel:+15597953818">☎ Call Now · (559) 795-3818</a>
          <a className="btn btn--ghost btn--lg" href="#barbers">Meet The Barbers</a>
        </div>
      </div>
    </section>
  );
}

// ----- Promise (3 image cards on the live site) -----
function PromiseGrid() {
  const cards = [
    { img: "assets/cut-pompadour-fade.jpg", title: "No Wait Times", body: "Skip the wait by checking in online before you arrive. We'll be ready for you." },
    { img: "assets/cut-textured-crop.jpg", title: "The Full Experience", body: "Sit down and experience a next-level cut, and a double shot of aftershave." },
    { img: "assets/cut-curly-fade.jpg", title: "Highly Skilled Barbers", body: "Be confident in knowing you're getting a cut from highly skilled barbers." },
  ];
  return (
    <section className="section dark">
      <div className="head">
        <p className="eyebrow">Our Promise</p>
        <h2>Next Level Haircut<br />At Your Convenience</h2>
        <div className="gold-rule"><span>since day one</span></div>
      </div>
      <div className="promise-grid">
        {cards.map((c) => (
          <article className="promise" key={c.title}>
            <img src={c.img} alt={c.title} />
            <div className="body">
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ----- Barbers -----
function Barbers() {
  const list = [
    { name: "Robert", img: "assets/barber-robert.jpg", specs: "Fades · Line-ups · Beards",
      book: "https://square.site/book/S88SJCRVM4ER4/robertcuts-fresno-ca",
      ig: "https://www.instagram.com/robertcutss/" },
    { name: "Eric", img: "assets/barber-eric.jpg", specs: "Tapers · Designs",
      book: "https://booksy.com/en-us/instant-experiences/widget/625709?instant_experiences_enabled=true&ig_ix=true&is_fb=1",
      ig: "https://www.instagram.com/elokz_04/" },
    { name: "Edsel", img: "assets/barber-edsel.jpg", specs: "Classic · Scissor work",
      book: "https://square.site/book/D3MSH0AH58MZX/ehussle-fresno-ca",
      ig: "https://www.instagram.com/e_hussle24/" },
    { name: "Mari", img: "assets/barber-mari.jpg", specs: "Braids · Locs · Esthetics",
      book: "https://booksy.com/en-us/833038_medusa-esthetics_braids-locs_134639_fresno",
      ig: "https://www.instagram.com/medu.saesthetics/" },
  ];
  return (
    <section className="section dark" id="barbers">
      <div className="head">
        <p className="eyebrow">The Lineup</p>
        <h2>Our Barbers</h2>
        <div className="gold-rule"><span>fresno · clovis</span></div>
      </div>
      <div className="barbers">
        {list.map((b) => (
          <article className="barber" key={b.name}>
            <div className="photo"><img src={b.img} alt={b.name} /></div>
            <div className="body">
              <h3>{b.name}</h3>
              <div className="row">
                <a className="btn btn--primary btn--block" href={b.book} target="_blank" rel="noreferrer">Book Now</a>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ----- Testimonials -----
function Testimonials() {
  const items = [
    { stars: 5, q: "Hands down one of the best barbershops in town. They aren't going to rush you out of their chair because they take care of you.", who: "Jose Ramirez", meta: "Fresno · Google Review", avatar: "assets/cut-pompadour-fade.jpg" },
    { stars: 5, q: "I've been going here for a few months now and I couldn't be happier. The shop is clean, the staff is professional, and they do awesome work.", who: "Chris Romero", meta: "Clovis · Google Review", avatar: "assets/cut-curly-fade.jpg" },
    { stars: 5, q: "This is where you want to go for a professional cut. I came to this one blind and left happy. Trust the reviews. This place is good.", who: "Jamaal Bryson", meta: "Fresno · Google Review", avatar: "assets/cut-classic-taper.jpg" },
  ];
  return (
    <section className="section dark">
      <div className="head">
        <p className="eyebrow">From The Chair</p>
        <h2>Customer Testimonials</h2>
        <div className="gold-rule"><span>★ ★ ★ ★ ★</span></div>
      </div>
      <div className="testimonials">
        {items.map((t, i) => (
          <article className="tcard" key={i}>
            <div className="stars">{"★ ".repeat(t.stars).trim()}</div>
            <p>"{t.q}"</p>
            <div className="who">
              <img src={t.avatar} alt="" />
              <div><div className="n">{t.who}</div><div className="meta">{t.meta}</div></div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ----- Locations -----
function Locations() {
  const locs = [
    {
      city: "Fresno",
      line1: "1707 Fulton St",
      line2: "Fresno, CA 93721",
      mapSrc: "https://www.google.com/maps?q=1707+Fulton+St,+Fresno,+CA+93721&z=15&output=embed",
      directions: "https://www.google.com/maps/dir/?api=1&destination=1707+Fulton+St,+Fresno,+CA+93721",
    },
    {
      city: "Clovis",
      line1: "1401 N Clovis Ave Suite 109",
      line2: "Clovis, CA 93727",
      mapSrc: "https://www.google.com/maps?q=1401+N+Clovis+Ave+Suite+109,+Clovis,+CA+93727&z=15&output=embed",
      directions: "https://www.google.com/maps/dir/?api=1&destination=1401+N+Clovis+Ave+Suite+109,+Clovis,+CA+93727",
    },
  ];
  return (
    <section className="section dark" id="locations">
      <div className="head">
        <p className="eyebrow">— Find Us —</p>
        <h2>Locations</h2>
      </div>
      <div className="locs">
        {locs.map((l) => (
          <article className="loc" key={l.city}>
            <div className="info">
              <h3>{l.city}</h3>
              <address>{l.line1}<br />{l.line2}<br />(559) 795-3818</address>
              <div className="hours">Mon–Sat · 10AM–6PM</div>
              <a className="btn btn--ghost" href={l.directions} target="_blank" rel="noopener noreferrer" style={{marginTop:'12px',alignSelf:'flex-start'}}>Get Directions</a>
            </div>
            <div className="map">
              <iframe
                src={l.mapSrc}
                title={`Map of Next Level Barber Studio — ${l.city}`}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
              />
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ----- Booking modal -----
function BookingModal({ open, barber, onClose, onConfirm }) {
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [service, setService] = useState("Haircut + Beard — $35");
  const [date, setDate] = useState("Sat, May 2");
  const [time, setTime] = useState("11:30 AM");
  if (!open) return null;
  return (
    <div className="modal-scrim open" onClick={onClose}>
      <div className="modal" onClick={(e)=>e.stopPropagation()} style={{position:'relative'}}>
        <button className="close" onClick={onClose}>×</button>
        <h3>Book {barber || "An Appointment"}</h3>
        <p className="sub">Walk-ins welcome 10AM–5PM. No wait times if you book ahead.</p>
        <div className="field"><label>Full name</label><input value={name} onChange={(e)=>setName(e.target.value)} placeholder="Your name" /></div>
        <div className="field"><label>Phone</label><input value={phone} onChange={(e)=>setPhone(e.target.value)} placeholder="(559) 555-0000" /></div>
        <div className="field"><label>Service</label>
          <select value={service} onChange={(e)=>setService(e.target.value)}>
            <option>Haircut — $30</option>
            <option>Haircut + Beard — $35</option>
            <option>Beard Only — $20</option>
            <option>$25 First-Time Walk-In</option>
          </select>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px'}}>
          <div className="field"><label>Date</label>
            <select value={date} onChange={(e)=>setDate(e.target.value)}>
              <option>Sat, May 2</option><option>Sun — Closed</option><option>Mon, May 4</option><option>Tue, May 5</option>
            </select>
          </div>
          <div className="field"><label>Time</label>
            <select value={time} onChange={(e)=>setTime(e.target.value)}>
              <option>10:30 AM</option><option>11:00 AM</option><option>11:30 AM</option><option>1:00 PM</option><option>3:30 PM</option>
            </select>
          </div>
        </div>
        <div className="actions">
          <button className="btn btn--ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn--primary" onClick={()=>onConfirm({name,service,date,time,barber})}>Confirm Booking</button>
        </div>
      </div>
    </div>
  );
}

// ----- Confirmation card -----
function Confirmation({ booking, onClose }) {
  if (!booking) return null;
  return (
    <div className="modal-scrim open" onClick={onClose}>
      <div className="modal" onClick={(e)=>e.stopPropagation()} style={{position:'relative',background:'var(--bg-inverse)',color:'var(--fg-on-cream)',border:'2px solid var(--accent)'}}>
        <button className="close" onClick={onClose} style={{color:'#0E0E0E'}}>×</button>
        <div className="confirm">
          <div className="check">✓</div>
          <h3>You're Booked</h3>
          <p><strong>{booking.name || "Guest"}</strong></p>
          <p>{booking.service}</p>
          <p>{booking.date} · {booking.time}</p>
          {booking.barber && <p>With <strong>{booking.barber}</strong></p>}
          <p style={{marginTop:'14px',fontFamily:'var(--font-sans)',fontWeight:700,letterSpacing:'.18em',textTransform:'uppercase',fontSize:'11px',color:'#8E660F'}}>See you soon · Next Level Barber Studio</p>
        </div>
      </div>
    </div>
  );
}

// ----- Footer -----
function Footer() {
  return (
    <footer className="footer">
      <div className="inner">
        <div className="brand">
          <img src="assets/logo-emblem.png" alt="" />
          <p>Central Valley's #1 barbershop. Walk out sharp. Walk out confident.</p>
        </div>
        <div>
          <h5>Visit</h5>
          <a>1707 Fulton St, Fresno</a>
          <a>1401 N Clovis Ave, Clovis</a>
          <a>(559) 795-3818</a>
        </div>
        <div>
          <h5>Hours</h5>
          <p>Mon–Sat · 10AM–6PM</p>
          <p>Sunday · Closed</p>
        </div>
        <div>
          <h5>Follow</h5>
          <a href="https://www.instagram.com/nextlevelbarberstudio/" target="_blank" rel="noopener noreferrer">Instagram</a>
          <a href="https://www.facebook.com/p/Next-Level-Barber-Studio-100023990183749/" target="_blank" rel="noopener noreferrer">Facebook</a>
          <a href="https://www.google.com/maps/search/Next+Level+Barber+Studio+Fresno" target="_blank" rel="noopener noreferrer">Google Reviews</a>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 Next Level Barber Studio</span>
        <span>Designed sharp.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { PromoBar, Header, Hero, PromiseGrid, Barbers, Testimonials, Locations, BookingModal, Confirmation, Footer });