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

/* ============== TRAVEL KITS ============== */
const KITS = [
  {
    id: "essentials",
    tier: "Essentials",
    name: "The Carry-On",
    price: 39,
    badge: null,
    blurb: "The basics, properly done.",
    items: [
      "Travel-size eau de toilette (15ml)",
      "Aluminum-free deodorant stick",
      "Travel comb with case",
      "Soft-bristle travel toothbrush",
      "Pack of 6 washable wipes",
    ],
    tin: "bronze",
  },
  {
    id: "deluxe",
    tier: "Deluxe",
    name: "The Weekender",
    price: 69,
    badge: "MOST POPULAR",
    blurb: "Two nights, no excuses.",
    items: [
      "Signature eau de toilette (30ml)",
      "Aluminum-free deodorant stick",
      "Hand-crafted folding comb",
      "Travel toothbrush + 50ml toothpaste",
      "12-pack washable wipes",
      "Rinaldo's classic pomade (1oz tin)",
      "Pack of 3 condoms",
    ],
    tin: "gold",
  },
  {
    id: "works",
    tier: "The Works",
    name: "The Gentleman",
    price: 129,
    badge: null,
    blurb: "Everything. Properly packed.",
    items: [
      "Full-size eau de toilette (50ml)",
      "Premium aluminum-free deodorant",
      "Real horn folding comb",
      "Bamboo toothbrush + travel toothpaste",
      "20-pack washable wipes",
      "Classic pomade (2oz tin) + matte clay",
      "Pack of 6 condoms",
      "Cedar travel case with leather strap",
      "Free monogramming",
    ],
    tin: "blue",
  },
];

function TravelKits({ onAdd }) {
  return (
    <section className="kits" id="kits">
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">The Shop · Coming Soon</span>
          <h2>Travel Kits</h2>
          <span className="script-sub">packed for the road</span>
          <div className="underline" />
        </div>
        <p className="kits-intro">
          Built for the man who's catching a flight, a wedding, or the last train home. Three tiers,
          one mission: arrive looking like you didn't.<br/>
          <b style={{color:'var(--cream)', display:'inline-block', marginTop:8}}>Launching soon — join the waitlist below to be the first to grab one.</b>
        </p>
        <div className="kit-grid">
          {KITS.map((k) => (
            <div key={k.id} className={`kit-card ${k.id === "deluxe" ? "featured" : ""}`}>
              {k.badge && <div className="badge">{k.badge}</div>}
              <div className="kit-illus">
                <div className={`tin ${k.tin}`}>
                  <div className="label">Rinaldo's</div>
                  <div className="tier-label">{k.tier.toUpperCase()}</div>
                </div>
              </div>
              <div className="kit-name">{k.name}</div>
              <div className="kit-tier">{k.tier}</div>
              <div className="kit-price">
                <div className="num">${k.price}</div>
                <small>{k.blurb}</small>
              </div>
              <ul className="kit-list">
                {k.items.map((it, i) => <li key={i}><span>{it}</span></li>)}
              </ul>
              <button className="btn" onClick={() => onAdd(k)}>Reserve Mine</button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== REVIEWS ============== */
const REVIEWS = [
  {
    text: "Jeff cut my dad's hair, and now he cuts mine. Three generations through the same door. Best $30 in town.",
    name: "Michael C.",
    where: "Penn State alum '08",
  },
  {
    text: "Walked in on a Tuesday with no appointment, walked out twenty minutes later looking ten years younger. The way it should be.",
    name: "Tom R.",
    where: "Boalsburg",
  },
  {
    text: "My six-year-old is terrified of haircuts. He's not terrified of Jeff. That's worth the trip alone.",
    name: "Sarah & Max",
    where: "State College",
  },
];

function Reviews() {
  return (
    <section className="reviews" id="reviews">
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">From the Chair</span>
          <h2>Word on the Street</h2>
          <span className="script-sub">don't take our word for it</span>
          <div className="underline" />
        </div>
        <div className="reviews-grid">
          {REVIEWS.map((r, i) => (
            <div className="review-card" key={i}>
              <div className="review-stars">★★★★★</div>
              <p className="review-text">"{r.text}"</p>
              <div className="review-meta">
                <div className="review-avatar">{r.name.charAt(0)}</div>
                <div className="review-name">
                  {r.name}
                  <small>{r.where}</small>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== CONTACT ============== */
function Contact() {
  const todayIdx = (new Date().getDay() + 6) % 7; // Mon=0..Sun=6
  return (
    <section className="contact" id="contact">
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">Find the Shop</span>
          <h2>Visit Rinaldo's</h2>
          <span className="script-sub">we're easy to find</span>
          <div className="underline" />
        </div>
        <div className="contact-grid">
          <div className="contact-info-card">
            <h3>HELLO,</h3>
            <span className="script">stop on by</span>
            <div style={{margin:"14px 0 4px"}}>
              <a href="#booking" className="btn">📅 Book Online · 24/7</a>
              <p style={{fontSize:13, lineHeight:1.55, opacity:0.8, margin:"10px 0 0"}}>
                Quickest way to grab a chair — pick your time online and it's locked in. No need to call.
              </p>
            </div>
            <div className="contact-info-row">
              <div className="label">ADDRESS</div>
              <div>
                <a href="https://maps.google.com/?q=107+S+Allen+St+State+College+PA" target="_blank" rel="noopener">
                  107 S. Allen St.<br />State College, PA 16801
                </a>
              </div>
            </div>
            <div className="contact-info-row">
              <div className="label">PHONE</div>
              <div>
                <a href="tel:8144701568">(814) 470-1568</a>
                <div style={{fontSize:12, opacity:0.7, marginTop:4}}>If we're with a client we might not pick up — booking online never misses.</div>
              </div>
            </div>
            <div className="contact-info-row">
              <div className="label">EMAIL</div>
              <div><a href="mailto:centurybarberpartners@gmail.com">centurybarberpartners@gmail.com</a></div>
            </div>
            <div className="contact-info-row">
              <div className="label">HOURS</div>
              <div className="hours-table">
                {HOURS.map((h, i) => (
                  <div className={`hours-row ${i === todayIdx ? "today" : ""} ${!h.open ? "closed" : ""}`} key={i}>
                    <div className="day">
                      <span>{h.full}</span>
                      {i === todayIdx && <span className="today-badge">Today</span>}
                    </div>
                    <div className="time">{h.label}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="contact-info-row">
              <div className="label">WALK-INS</div>
              <div><b>Always welcome.</b> Booking just guarantees your spot.</div>
            </div>
          </div>
          <div className="map-card">
            <a href="https://maps.google.com/?q=107+S+Allen+St+State+College+PA+16801" target="_blank" rel="noopener" style={{display:'block', position:'relative', height:'100%'}}>
            <svg className="map-svg" viewBox="0 0 500 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
              <defs>
                <pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse">
                  <circle cx="2" cy="2" r="0.6" fill="#1a1410" opacity="0.18"/>
                </pattern>
                <pattern id="grass" width="14" height="14" patternUnits="userSpaceOnUse">
                  <rect width="14" height="14" fill="#c8d6b8"/>
                  <circle cx="3" cy="3" r="0.8" fill="#9bb084"/>
                  <circle cx="9" cy="9" r="0.8" fill="#9bb084"/>
                </pattern>
              </defs>
              <rect width="500" height="600" fill="#ecdcb8"/>
              <rect width="500" height="600" fill="url(#dots)"/>

              {/* Streets — real downtown State College grid, oriented to match Google Maps screenshot
                  Diagonal grid: streets run NW-SE and NE-SW at ~45°.
                  We tilt the whole grid by rotating around the pin location. */}
              <g transform="rotate(-12 250 300)">
                {/* College Ave (top, runs E-W) — boundary of campus */}
                <rect x="-50" y="100" width="600" height="34" fill="#f4ead5" stroke="#1a1410" strokeWidth="2"/>
                {/* Beaver Ave (bottom, parallel) */}
                <rect x="-50" y="430" width="600" height="32" fill="#f4ead5" stroke="#1a1410" strokeWidth="2"/>
                {/* Calder Way (mid alley, between) */}
                <rect x="-50" y="270" width="600" height="18" fill="#f4ead5" stroke="#1a1410" strokeWidth="1.5" strokeDasharray="6 4"/>

                {/* S. Allen St — main vertical, our street */}
                <rect x="225" y="-50" width="40" height="700" fill="#f4ead5" stroke="#1a1410" strokeWidth="2.5"/>
                {/* S. Pugh St (right) */}
                <rect x="395" y="-50" width="34" height="700" fill="#f4ead5" stroke="#1a1410" strokeWidth="2"/>
                {/* W. Fraser/Hetzel area (left) */}
                <rect x="55" y="-50" width="32" height="700" fill="#f4ead5" stroke="#1a1410" strokeWidth="2"/>

                {/* Old Main Lawn — top-left greenspace */}
                <polygon points="-20,-20 200,-20 130,90 -20,90" fill="url(#grass)" stroke="#1a1410" strokeWidth="1.5"/>
                <text x="40" y="40" fontFamily="Bebas Neue, sans-serif" fontSize="11" letterSpacing="1.5" fill="#5a6b48">OLD MAIN</text>
                <text x="40" y="55" fontFamily="Bebas Neue, sans-serif" fontSize="11" letterSpacing="1.5" fill="#5a6b48">LAWN</text>

                {/* Buildings — Allen St block (where Rinaldo's lives) */}
                {/* Rinaldo's block (107 S. Allen, NW corner of Allen + Calder) */}
                <rect x="148" y="138" width="73" height="128" fill="#c8102e" stroke="#1a1410" strokeWidth="2" opacity="0.85"/>
                {/* Across the street from Rinaldo's */}
                <rect x="269" y="138" width="120" height="128" fill="#1d3a8a" stroke="#1a1410" strokeWidth="2" opacity="0.55"/>
                {/* North block above College */}
                <rect x="148" y="0" width="73" height="96" fill="#1d3a8a" stroke="#1a1410" strokeWidth="2" opacity="0.4"/>
                <rect x="269" y="0" width="120" height="96" fill="#c8102e" stroke="#1a1410" strokeWidth="2" opacity="0.4"/>
                {/* Below Calder, above Beaver */}
                <rect x="148" y="292" width="73" height="134" fill="#1d3a8a" stroke="#1a1410" strokeWidth="2" opacity="0.5"/>
                <rect x="269" y="292" width="120" height="134" fill="#c8102e" stroke="#1a1410" strokeWidth="2" opacity="0.45"/>
                {/* Below Beaver */}
                <rect x="148" y="466" width="73" height="120" fill="#c8102e" stroke="#1a1410" strokeWidth="2" opacity="0.4"/>
                <rect x="269" y="466" width="120" height="120" fill="#1d3a8a" stroke="#1a1410" strokeWidth="2" opacity="0.4"/>
                {/* Far-left blocks */}
                <rect x="91" y="138" width="53" height="128" fill="#1d3a8a" stroke="#1a1410" strokeWidth="1.5" opacity="0.4"/>
                <rect x="91" y="292" width="53" height="134" fill="#c8102e" stroke="#1a1410" strokeWidth="1.5" opacity="0.4"/>

                {/* Street labels */}
                <text x="-30" y="124" fontFamily="Bebas Neue, sans-serif" fontSize="13" letterSpacing="2" fill="#1a1410">E. COLLEGE AVE.</text>
                <text x="-30" y="453" fontFamily="Bebas Neue, sans-serif" fontSize="13" letterSpacing="2" fill="#1a1410">E. BEAVER AVE.</text>
                <text x="-30" y="285" fontFamily="Bebas Neue, sans-serif" fontSize="10" letterSpacing="1.5" fill="#1a1410" opacity="0.6">CALDER WAY</text>
                <text x="232" y="-10" fontFamily="Bebas Neue, sans-serif" fontSize="13" letterSpacing="2" fill="#1a1410" transform="rotate(90 232 -10) translate(0 -8)">S. ALLEN ST.</text>
                <text x="402" y="-10" fontFamily="Bebas Neue, sans-serif" fontSize="13" letterSpacing="2" fill="#1a1410" transform="rotate(90 402 -10) translate(0 -8)" opacity="0.7">S. PUGH ST.</text>
              </g>

              {/* Pin — placed at the actual Rinaldo's location (NW of Allen + Calder intersection) */}
              <g transform="translate(218, 218)">
                <ellipse cx="0" cy="36" rx="14" ry="4" fill="#1a1410" opacity="0.3"/>
                <path d="M 0,-30 C -18,-30 -28,-16 -28,-2 C -28,16 0,38 0,38 C 0,38 28,16 28,-2 C 28,-16 18,-30 0,-30 Z" fill="#c8102e" stroke="#1a1410" strokeWidth="3"/>
                <circle cx="0" cy="-2" r="9" fill="#f4ead5" stroke="#1a1410" strokeWidth="2"/>
                <text textAnchor="middle" y="3" fontFamily="Alfa Slab One, serif" fontSize="11" fill="#c8102e">R</text>
              </g>
            </svg>
            </a>
            <div className="map-pin-overlay">
              <b>RINALDO'S</b>
              107 S. Allen St.<br />
              ↳ Click to open in Maps
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== FOOTER ============== */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/logo-transparent.png" alt="Rinaldo's" />
            <p>A century of sharp cuts in downtown State College. Open six days, walk-ins welcome, conversation included.</p>
          </div>
          <div>
            <h4>SHOP</h4>
            <ul>
              <li><a href="#services">Services & Prices</a></li>
              <li><a href="#booking">Book a Chair</a></li>
              <li><a href="#membership">The Century Club</a></li>
              <li><a href="#kits">Travel Kits</a></li>
            </ul>
          </div>
          <div>
            <h4>VISIT</h4>
            <ul>
              <li><span>107 S. Allen St.</span></li>
              <li><span>State College, PA 16801</span></li>
              <li><a href="tel:8144701568">(814) 470-1568</a></li>
              <li><a href="mailto:centurybarberpartners@gmail.com">Email us</a></li>
            </ul>
          </div>
          <div>
            <h4>HOURS</h4>
            <ul>
              <li><span>Mon · 11–4</span></li>
              <li><span>Tue–Fri · 10:30–4</span></li>
              <li><span>Sat · 10:30–12</span></li>
              <li><span style={{color:'#c8102e'}}>Sun · Closed</span></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 1925–2026 RINALDO'S BARBER SHOP · A CENTURY OF SHARP CUTS</div>
          <div className="footer-social">
            <a href="https://www.instagram.com/rinaldosbarbershop/" target="_blank" rel="noopener" title="Instagram">IG</a>
            <a href="https://maps.google.com/?q=107+S+Allen+St+State+College+PA" target="_blank" rel="noopener" title="Map">📍</a>
            <a href="tel:8144701568" title="Phone">☎</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { TravelKits, Reviews, Contact, Footer, KITS });