/* eslint-disable */
// Shared components — Wordmark, Nav, Footer, FloatActions, helpers.

const PB = window.PB_DATA;

function Wordmark({ size = 'md', mono = true }) {
  const sizes = { sm: 16, md: 19, lg: 28 };
  return (
    <a href="#/" className="wordmark" aria-label="Platinum Black home">
      {mono ? (
        <span className="wordmark-mono" aria-hidden="true">P</span>
      ) : null}
      <span className="wordmark-text">
        <span className="a" style={{ fontSize: sizes[size] }}>
          {'PLATINUM '}<em style={{ fontStyle: 'italic' }}>black</em>
        </span>
        <span className="b">DIFC · Ladies Salon</span>
      </span>
    </a>
  );
}

const NAV_LINKS = [
  { href: '#/', label: 'Home', key: 'home' },
  { href: '#/services', label: 'Services', key: 'services' },
  { href: '#/memberships', label: 'Memberships', key: 'memberships' },
  { href: '#/about', label: 'About', key: 'about' },
  { href: '#/reviews', label: 'Reviews', key: 'reviews' },
  { href: '#/contact', label: 'Contact', key: 'contact' },
];

function TopNav({ route }) {
  return (
    <header className="topnav">
      <div className="announce">
        <span>Emirates Platinum offer — 30% off, to 31 May 2026</span>
        <span className="sep">●</span>
        <span>Rated 4.9 on Fresha · 249 reviews</span>
      </div>
      <div className="shell-wide">
        <div className="topnav-bar">
          <Wordmark size="md" mono={true} />
          <nav className="topnav-links" aria-label="Main">
            {NAV_LINKS.map((l) => (
              <a
                key={l.key}
                href={l.href}
                className={'topnav-link' + (route === l.key ? ' is-active' : '')}
              >
                {l.label}
              </a>
            ))}
          </nav>
          <div className="topnav-cta">
            <span className="pill" title="Verified May 2026">
              <span className="star">★</span> 4.9 · Fresha
            </span>
            <a href="#/book" className="btn btn-primary">Book Now</a>
          </div>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  const lblStyle = { fontSize: 11, color: 'rgba(246,244,239,0.5)', letterSpacing: '0.14em', textTransform: 'uppercase' };
  return (
    <footer className="footer">
      <div className="shell-wide">
        <div className="footer-grid">
          <div className="col brand">
            <div className="word">PLATINUM <em>black</em></div>
            <div className="addr">
              {PB.brand.addressLines.map((l, i) => <div key={i}>{l}</div>)}
              <div style={{ marginTop: 16 }}>{PB.brand.hours}</div>
            </div>
          </div>
          <div className="col">
            <h4>Visit</h4>
            <ul>
              <li><a href="#/contact">Find us</a></li>
              <li><a href="#/book">Book now</a></li>
              <li><a href={PB.brand.fresha} target="_blank" rel="noopener">Fresha profile ↗</a></li>
              <li><a href="https://maps.app.goo.gl/d3qBmBAw55ZK5KEL8" target="_blank" rel="noopener">Open in maps ↗</a></li>
            </ul>
          </div>
          <div className="col">
            <h4>Services</h4>
            <ul>
              <li><a href="#/services">Hair colour</a></li>
              <li><a href="#/services">Skin & cosmetology</a></li>
              <li><a href="#/services">Nails</a></li>
              <li><a href="#/services">Body & slimming</a></li>
              <li><a href="#/services">Beauty & lashes</a></li>
            </ul>
          </div>
          <div className="col">
            <h4>Contact</h4>
            <ul>
              <li><a href={PB.brand.phoneCallHref}>{PB.brand.phoneCall}</a><br/><span style={lblStyle}>Call</span></li>
              <li><a href={PB.brand.whatsappHref} target="_blank" rel="noopener">{PB.brand.whatsapp}</a><br/><span style={lblStyle}>WhatsApp</span></li>
              <li><a href={PB.brand.emailHref}>{PB.brand.email}</a></li>
            </ul>
          </div>
          <div className="col">
            <h4>Follow</h4>
            <ul>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Instagram ↗</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Facebook ↗</a></li>
              <li><a href={PB.brand.fresha} target="_blank" rel="noopener">Fresha ↗</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-base">
          <span>© 2026 Platinum Black Ladies Salon · DIFC, Dubai</span>
          <span>Crafted with care</span>
        </div>
      </div>
    </footer>
  );
}

function FloatActions() {
  return (
    <div className="float-actions">
      <a className="fab wa" href={PB.brand.whatsappHref} target="_blank" rel="noopener" title="WhatsApp a stylist">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.4-.1-.6.1s-.7.9-.8 1c-.1.1-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.8-.7-1.4-1.7-1.5-1.9-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.1.2-.3.3-.4.1-.2 0-.3 0-.5 0-.1-.6-1.5-.8-2-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2 0 1.3.9 2.5 1.1 2.7.1.2 1.8 2.8 4.4 3.9.6.3 1.1.4 1.5.5.6.2 1.2.2 1.6.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.3c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.2.8.9-3.1-.2-.3c-.8-1.3-1.3-2.9-1.3-4.5 0-4.6 3.7-8.3 8.3-8.3s8.3 3.7 8.3 8.3-3.7 8.3-8.3 8.3z"/>
        </svg>
      </a>
      <a className="fab" href="#/book" title="Book now">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
          <rect x="3" y="5" width="18" height="16"/>
          <path d="M3 9h18M8 3v4M16 3v4"/>
        </svg>
      </a>
    </div>
  );
}

function Eyebrow({ children }) {
  return <div className="eyebrow"><span className="dot" />{children}</div>;
}

function formatPrice(s) {
  if (s.complimentary) return { label: 'Complimentary', from: false };
  if (s.consult) return { label: 'on consultation', consult: true };
  if (typeof s.price === 'number') {
    return {
      label: 'AED ' + s.price.toLocaleString('en-US'),
      from: !!s.from,
    };
  }
  return { label: '—' };
}

Object.assign(window, {
  Wordmark, TopNav, Footer, FloatActions, Eyebrow, formatPrice, NAV_LINKS,
});