/* global React, ReactDOM */
const { useState, useEffect, useMemo, useRef } = React;

/* ============== HOURS DATA ============== */
const HOURS = [
  { day: "Mon", full: "Monday", open: "11:00", close: "16:00", label: "11 AM – 4 PM" },
  { day: "Tue", full: "Tuesday", open: "10:30", close: "16:00", label: "10:30 AM – 4 PM" },
  { day: "Wed", full: "Wednesday", open: "10:30", close: "16:00", label: "10:30 AM – 4 PM" },
  { day: "Thu", full: "Thursday", open: "10:30", close: "16:00", label: "10:30 AM – 4 PM" },
  { day: "Fri", full: "Friday", open: "10:30", close: "16:00", label: "10:30 AM – 4 PM" },
  { day: "Sat", full: "Saturday", open: "10:30", close: "12:00", label: "10:30 AM – 12 PM" },
  { day: "Sun", full: "Sunday", open: null, close: null, label: "Closed" },
];

const SERVICES = [
  { id: "haircut", name: "Haircut", desc: "Classic cut, shampoo, hot-towel finish", duration: 30, price: 30, priceCard: 32 },
  { id: "beard", name: "Beard Trim", desc: "Shaped, lined, and oiled", duration: 20, price: 25, priceCard: 27 },
  { id: "combo", name: "Hair & Beard", desc: "The full sit-down", duration: 45, price: 40, priceCard: 42 },
  { id: "neck", name: "Neck Cleanup", desc: "Quick line-up between cuts", duration: 15, price: 12, priceCard: 14 },
  { id: "kids", name: "Kids' Cut", desc: "12 and under", duration: 25, price: 20, priceCard: 20 },
];

/* ============== TICKER ============== */
function Ticker() {
  const items = ["A Century of Sharp Cuts", "★", "Walk-Ins Welcome", "★", "Open Since 1925", "★", "State College, PA", "★"];
  const content = [...items, ...items, ...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {content.map((t, i) => (
          <span key={i}>{t === "★" ? <span className="star">★</span> : t}</span>
        ))}
      </div>
    </div>
  );
}

/* ============== NAV ============== */
function Nav({ onBook }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="nav-logo">
          <img src="assets/logo-transparent.png" alt="Rinaldo's" />
          <div className="nav-logo-text">
            Rinaldo's
            <small>Since 1925</small>
          </div>
        </a>
        <ul className="nav-links">
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#membership">Membership</a></li>
          <li><a href="#kits">Travel Kits</a></li>
          <li><a href="#contact">Visit</a></li>
          <li className="nav-cta"><a href="#booking" className="btn btn-sm">Book a Chair</a></li>
        </ul>
        <a href="#booking" className="nav-mobile-cta">Book</a>
      </div>
    </nav>
  );
}

/* ============== STICKY BOOK BUTTON ============== */
// Always-visible booking shortcut so visitors book online instead of calling.
function StickyBook() {
  return (
    <a href="#booking" className="sticky-book" aria-label="Book an appointment online">
      <span aria-hidden="true">📅</span> Book Online
    </a>
  );
}

/* ============== HERO ============== */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg" />
      <div className="hero-halftone" />
      <div className="hero-halftone-2" />
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow-row">
              <span className="hero-badge"><span className="dot" /> Open Today · 10:30 – 4</span>
              <span className="eyebrow">Est. 1925 · State College, PA</span>
            </div>
            <h1>
              <span className="row1">A Century</span>
              <span className="script">of</span>
              <span className="row2">Sharp Cuts.</span>
            </h1>
            <p className="hero-sub">
              Four generations on South Allen Street. Real chairs, real clippers, real conversation. Sit down,
              look sharp, and step out the way men have walked out of Rinaldo's since the Coolidge administration.
            </p>
            <div className="hero-cta-row">
              <a href="#booking" className="btn">Book a Chair</a>
              <a href="#services" className="btn btn-cream">See the Menu</a>
            </div>
          </div>
          <div>
            <div className="hero-logo-card">
              <img src="assets/logo.webp" alt="Rinaldo's Barber Shop" />
              <div className="since">Since 1925</div>
              <div className="est">EST. STATE COLLEGE · PA</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== ABOUT ============== */
function About() {
  return (
    <section className="about" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="about-image">
            <img
              className="about-photo"
              src="assets/shop-front.png"
              alt="Rinaldo's Barber Shop storefront"
              onError={(event) => {
                event.currentTarget.style.display = "none";
              }}
            />
            <div className="placeholder">
              <div>
                <div className="ph-icon">✂</div>
                <div>VINTAGE PHOTO<br />OF THE SHOP<br /><small style={{opacity:0.6,letterSpacing:'0.16em'}}>(swap in your favorite)</small></div>
              </div>
            </div>
            <div className="stamp">EST. 1925</div>
          </div>
          <div className="about-content">
            <span className="eyebrow">Our Story</span>
            <h2>One Hundred</h2>
            <span className="script">years of</span>
            <h2 style={{color:'var(--red)'}}>Good Cuts.</h2>
            <p>
              Rinaldo opened the doors in 1925 with two chairs, a straight razor, and a Philadelphia accent
              you could cut glass with. A century later, the chairs are newer, the razor is sharper, and the
              accent — well, that hasn't changed much.
            </p>
            <p>
              We don't do trends. We do haircuts. The kind your grandfather got, the kind you'll get, the kind
              your kid is about to scream through. Walk-ins welcome, conversation included, and the price board
              still goes up by hand.
            </p>
            <div className="about-stats">
              <div className="about-stat">
                <div className="num">100</div>
                <div className="label">Years on Allen St.</div>
              </div>
              <div className="about-stat">
                <div className="num">4</div>
                <div className="label">Generations</div>
              </div>
              <div className="about-stat">
                <div className="num">∞</div>
                <div className="label">Stories Told</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== SERVICES ============== */
function Services() {
  return (
    <section className="services" id="services">
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">The Menu</span>
          <h2>Services & Prices</h2>
          <span className="script-sub">straight from the board</span>
          <div className="underline" />
        </div>
        <div className="services-board">
          <div className="services-board-header">
            <span className="script">Rinaldo's</span>
            <h3>BARBER SHOP</h3>
            <div className="since">Since 1925</div>
          </div>
          {SERVICES.map((s) => (
            <div className="service-row" key={s.id}>
              <div className="service-name">
                {s.name}
                <span className="desc">{s.desc} · ~{s.duration} min</span>
              </div>
              <div className="service-price">
                <div className="main">${s.price}</div>
                {s.priceCard !== s.price ? (
                  <div className="alt">${s.priceCard}<small>Card</small></div>
                ) : (
                  <div className="alt" style={{color:'rgba(244,234,213,0.7)'}}>flat<small>Cash or Card</small></div>
                )}
              </div>
            </div>
          ))}
          <div className="service-note">★ Cash preferred · Walk-ins welcome · or <a href="#booking" style={{color:'inherit', textDecoration:'underline', textUnderlineOffset:'3px'}}>book your time online</a> ★</div>
        </div>
      </div>
    </section>
  );
}

/* ============== MEMBERSHIP ============== */
function Membership() {
  return (
    <section className="membership" id="membership">
      <div className="container">
        <div className="mem-grid">
          <div>
            <span className="eyebrow">New for 2026</span>
            <h2>The Century</h2>
            <span className="script">Club</span>
            <p>
              A monthly membership for the men who know exactly when they need a cut — and don't want
              to think about the bill. One flat rate, two cuts a month, and a standing chair waiting.
            </p>
            <p style={{opacity:0.85, fontSize:15}}>
              Cancel anytime. No fine print. The way Rinaldo would've wanted it.
            </p>
          </div>
          <div className="mem-card">
            <div className="ribbon">MEMBER FAVORITE</div>
            <div className="mem-card-header">
              <span className="name">The Century Club</span>
              <div className="price">$49<small>/mo</small></div>
            </div>
            <ul>
              <li><span className="check">✓</span><div><b>2 haircuts every month</b> — a $60 cash value</div></li>
              <li><span className="check">✓</span><div><b>10% off</b> beard trims and travel kits</div></li>
              <li><span className="check">✓</span><div><b>Priority booking</b> — skip the wait</div></li>
              <li><span className="check">✓</span><div><b>Free birthday cut</b> — every year, on the house</div></li>
              <li><span className="check">✓</span><div>A real, framed <b>members card</b> for your wallet</div></li>
            </ul>
            <a href="#waitlist-membership" className="btn">Join the Club</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Ticker, Nav, StickyBook, Hero, About, Services, Membership, HOURS, SERVICES });