`public/index.html`

164 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ROBERT · Barber</title>
  <meta name="description" content="Book a cut with Robert — barber. Pick a time, pick your cut, walk in sharp." />
  <link rel="canonical" href="https://robert.agentabrams.com/" />
  <meta name="theme-color" content="#0a0a0a" />
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="ROBERT" />
  <meta property="og:title" content="ROBERT · Barber" />
  <meta property="og:description" content="Walk in sharp. Pick a time, pick your cut — in and out." />
  <meta property="og:url" content="https://robert.agentabrams.com/" />
  <meta property="og:image" content="https://robert.agentabrams.com/og.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="ROBERT · Barber" />
  <meta name="twitter:description" content="Walk in sharp. Pick a time, pick your cut." />
  <meta name="twitter:image" content="https://robert.agentabrams.com/og.png" />

  <!-- structured data (data block; not executed → exempt from CSP script-src) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "HairSalon",
    "name": "Robert",
    "url": "https://robert.agentabrams.com/",
    "image": "https://robert.agentabrams.com/og.png",
    "email": "robert@agentabrams.com",
    "description": "Robert — barber. Cuts, fades, beard line-ups and hot-towel shaves. Book a chair online.",
    "priceRange": "$$",
    "potentialAction": {
      "@type": "ScheduleAction",
      "name": "Book a cut",
      "target": {
        "@type": "EntryPoint",
        "urlTemplate": "https://robert.agentabrams.com/#booking",
        "actionPlatform": [
          "https://schema.org/DesktopWebPlatform",
          "https://schema.org/MobileWebPlatform"
        ]
      }
    }
  }
  </script>

  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <a class="skip" href="#top">Skip to content</a>
  <!-- top bar: logo UL · hamburger UR -->
  <header class="topbar">
    <a class="logo" id="logo" href="#top">ROBERT</a>
    <button class="hamburger" id="hamburger" aria-label="Open menu" aria-expanded="false" aria-controls="navpanel" aria-haspopup="dialog">
      <span></span><span></span><span></span>
    </button>
  </header>

  <!-- nav overlay -->
  <div class="navpanel" id="navpanel" role="dialog" aria-modal="true">
    <button class="close" id="navclose" aria-label="Close menu">×</button>
    <nav>
      <a href="#top">Home</a>
      <a href="#work">Services</a>
      <a href="#booking">Book</a>
      <a href="#gallery">Gallery</a>
      <a href="#reviews">Reviews</a>
      <a href="#contact">Contact</a>
      <a href="/admin">Admin</a>
    </nav>
  </div>

  <main id="top" tabindex="-1">
    <!-- HUGE hero -->
    <section class="hero" style="padding:0;border-bottom:5px solid #0a0a0a">
      <div class="hero-img" id="heroImg"></div>
      <div class="hero-inner">
        <h1 id="heroHeadline">BOOK
A
CUT.</h1>
        <p id="heroSub">Walk in sharp. Pick a time, pick your cut — in and out, no waiting around.</p>
        <a class="cta" href="#booking">Book a chair →</a>
      </div>
    </section>

    <!-- work / services -->
    <section id="work">
      <span class="kicker">/ the work</span>
      <h2 class="sec-h">Sharp every time.</h2>
      <div class="grid3">
        <div class="cell"><h3>Cut</h3><p>Scissor or clipper, tailored to your head — not a template. Wash and style included.</p></div>
        <div class="cell"><h3>Fade</h3><p>Skin, low, mid, or high. Clean lines, blended right, no harsh edges.</p></div>
        <div class="cell"><h3>Beard &amp; Shave</h3><p>Line-up, trim, or a hot-towel straight-razor shave. Sharp and close.</p></div>
      </div>
    </section>

    <!-- booking: Smart Scheduling (link-first → real live availability) -->
    <section id="booking">
      <span class="kicker">/ book a chair</span>
      <h2 class="sec-h">Pick a time.</h2>
      <p class="mono" style="font-size:18px; max-width:560px; margin-bottom:24px; font-weight:600;">
        Book your next cut — grab a slot online, or reach out and I'll fit you in.
      </p>
      <a class="cta" id="bookPrimary" href="#" target="_blank" rel="noopener noreferrer"
         style="font-size:28px; padding:20px 40px;">Book your cut →</a>
    </section>

    <!-- gallery: real photos drop into public/photos -->
    <section id="gallery">
      <span class="kicker">/ the cuts</span>
      <h2 class="sec-h">The work.</h2>
      <div class="gallery-grid" id="galleryGrid"></div>
    </section>

    <!-- reviews (from Booksy) -->
    <section id="reviews">
      <span class="kicker">/ reviews</span>
      <h2 class="sec-h">5.0 on Booksy.</h2>
      <div class="reviews-grid" id="reviewsGrid"></div>
      <p class="mono" style="margin-top:18px"><a id="reviewsLink" href="#" target="_blank" rel="noopener noreferrer">Read all reviews on Booksy →</a></p>
    </section>

    <!-- contact -->
    <section id="contact">
      <span class="kicker">/ contact</span>
      <h2 class="sec-h">Talk to me.</h2>
      <div class="contact-wrap">
        <dl class="contact-info" id="contactInfo"></dl>
        <form class="contact-form" id="contactForm">
          <input type="text" name="website" id="hp_website" class="hp" tabindex="-1" autocomplete="off" aria-hidden="true" />
          <label for="cName">Name</label>
          <input id="cName" name="name" autocomplete="name" />
          <label for="cEmail">Email *</label>
          <input id="cEmail" name="email" type="email" required autocomplete="email" />
          <label for="cMsg">Message *</label>
          <textarea id="cMsg" name="message" rows="4" required></textarea>
          <button type="submit">Send →</button>
          <div class="formmsg" id="formMsg" role="status" aria-live="polite" aria-atomic="true"></div>
        </form>
      </div>
    </section>
  </main>

  <footer>
    <span class="mono">© <span id="year"></span> <span id="footBrand">Robert</span></span>
    <span class="mono">No cookies. No tracking. No analytics.</span>
    <span class="mono">Booking by Smart Scheduling · <a href="/admin">Admin</a></span>
  </footer>

  <a class="credit" href="https://agentabrams.com" target="_blank" rel="noopener noreferrer">Designed by <b>AgentAbrams</b></a>

  <script src="/app.js"></script>
</body>
</html>