// Facette — shared UI atoms

const { BRANCHES, WHATSAPP, BRAND_PARTNERS } = window.FacetteData;

// ──────────────────────────────────────────────────────────
// Logo
// ──────────────────────────────────────────────────────────
function FFMark({ size = 28, color = 'var(--gold)' }) {
  // Reproduces the FACETTE mark: two mirrored Fs sharing a top bar.
  return (
    <svg width={size} height={(size * 5) / 6} viewBox="0 0 60 50" fill={color} aria-hidden="true">
      {/* top bar */}
      <rect x="11" y="5" width="38" height="5" />
      {/* left vertical */}
      <rect x="23" y="5" width="5" height="40" />
      {/* right vertical */}
      <rect x="32" y="5" width="5" height="40" />
      {/* left arm */}
      <rect x="11" y="22" width="17" height="4" />
      {/* right arm */}
      <rect x="32" y="22" width="17" height="4" />
    </svg>
  );
}

function FacetteLogo({ size = 'md', wordmarkOnly = false, vertical = false }) {
  const compact = size === 'sm';
  if (vertical) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
        <FFMark size={compact ? 22 : 30} />
        <div className="fwm" style={compact ? { fontSize: 13 } : null}>Facette</div>
      </div>
    );
  }
  return (
    <div className="fnav-logo">
      {!wordmarkOnly && <FFMark size={compact ? 22 : 28} />}
      <div className="fwm" style={compact ? { fontSize: 14 } : null}>Facette</div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Nav / header
// ──────────────────────────────────────────────────────────
function Header({ page, setPage, branch, setBranch, openBook, isMobile }) {
  return (
    <header className="fnav">
      <div className="fnav-inner">
        <div className="fnav-left">
          <Pageset items={[
            ['home', 'Home'],
            ['treatments', 'Treatments'],
            ['memberships', 'Memberships'],
            ['locations', 'Locations'],
          ]} active={page} onChange={setPage} />
        </div>
        <button className="fnav-logo-wrap" onClick={() => setPage('home')} style={{ background: 'none', border: 0, cursor: 'pointer' }}>
          <FacetteLogo />
        </button>
        <div className="fnav-right">
          {!isMobile && <BranchToggle branch={branch} setBranch={setBranch} />}
          <button className="btn btn-primary btn-sm" onClick={openBook}>Book Now</button>
          {isMobile && (
            <button className="mob-menu-btn" aria-label="Menu">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M3 6h14M3 10h14M3 14h14" stroke="currentColor" strokeWidth="1.4" />
              </svg>
            </button>
          )}
        </div>
      </div>
    </header>
  );
}

function Pageset({ items, active, onChange }) {
  return (
    <nav style={{ display: 'flex', gap: 28 }}>
      {items.map(([id, label]) => (
        <button
          key={id}
          className={`fnav-link ${active === id ? 'active' : ''}`}
          onClick={() => onChange(id)}>
          {label}
        </button>
      ))}
    </nav>
  );
}

function BranchToggle({ branch, setBranch }) {
  return (
    <div className="branch-toggle" role="tablist" aria-label="Branch">
      {Object.values(BRANCHES).map((b) => (
        <button
          key={b.id}
          className={branch === b.id ? 'active' : ''}
          onClick={() => setBranch(b.id)}
          role="tab"
          aria-selected={branch === b.id}>
          {b.short}
        </button>
      ))}
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Trust strip — sits below nav
// ──────────────────────────────────────────────────────────
function TrustStrip({ branch }) {
  const b = BRANCHES[branch];
  return (
    <div className="trust-strip">
      <div className="trust-strip-inner">
        <div className="trust-item">
          <div className="ti-fig"><span className="ti-star">★</span> 4.9</div>
          <div className="ti-lab">Fresha · 794 reviews</div>
        </div>
        <div className="trust-item with-rule">
          <div className="ti-fig">2019</div>
          <div className="ti-lab">Dubai’s first facial bar</div>
        </div>
        <div className="trust-item with-rule">
          <div className="ti-fig">2 branches</div>
          <div className="ti-lab">Jumeirah · Business Bay</div>
        </div>
        <div className="trust-item with-rule">
          <div className="ti-fig">{b.short}</div>
          <div className="ti-lab">{b.hours}</div>
        </div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Brand row
// ──────────────────────────────────────────────────────────
function BrandRow() {
  return (
    <div className="brand-row">
      <div className="brand-row-inner">
        <div className="br-label">The premium brands<br/>behind every protocol</div>
        <div className="br-logos">
          {BRAND_PARTNERS.map((p, i) => (
            <div key={i} className="br-logo">
              {p.name}
              <span className="sub">{p.sub}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Footer
// ──────────────────────────────────────────────────────────
function Footer({ setPage, branch, setBranch }) {
  const b = BRANCHES[branch];
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="fb-logo">Facette</div>
            <div className="fb-tag">
              Dubai’s first facial bar. Bespoke, high-tech facials in Jumeirah and Business Bay since 2019.
            </div>
            <div style={{ marginTop: 22, display: 'flex', gap: 12 }}>
              <SocialIcon kind="ig" />
              <SocialIcon kind="tt" />
              <SocialIcon kind="wa" href={WHATSAPP} />
            </div>
          </div>
          <div>
            <h3>Visit</h3>
            <ul>
              <li><a onClick={() => { setBranch('jumeirah'); setPage('locations'); }}>Jumeirah</a></li>
              <li><a onClick={() => { setBranch('business_bay'); setPage('locations'); }}>Business Bay</a></li>
              <li><a href={b.fresha} target="_blank" rel="noopener">Book on Fresha</a></li>
              <li><a href={WHATSAPP} target="_blank" rel="noopener">WhatsApp</a></li>
            </ul>
          </div>
          <div>
            <h3>Explore</h3>
            <ul>
              <li><a onClick={() => setPage('treatments')}>Treatments</a></li>
              <li><a onClick={() => setPage('memberships')}>Memberships</a></li>
              <li><a>The Glow gallery</a></li>
              <li><a>Reviews</a></li>
              <li><a>About</a></li>
            </ul>
          </div>
          <div>
            <h3>Contact</h3>
            <ul>
              <li><a href="mailto:hello@facettefacialbar.com">hello@facettefacialbar.com</a></li>
              <li><a href={b.phoneHref}>{b.phone}</a></li>
              <li><a>Press · partnerships</a></li>
              <li><a>Gift cards</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© Facette Facial Bar · Dubai · Est. 2019</div>
          <div>Privacy · Terms · Sitemap</div>
        </div>
      </div>
    </footer>
  );
}

function SocialIcon({ kind, href }) {
  const inner = {
    ig: <path d="M5 2h10a3 3 0 013 3v10a3 3 0 01-3 3H5a3 3 0 01-3-3V5a3 3 0 013-3zm5 4.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7zm5-1.2a.8.8 0 11-1.6 0 .8.8 0 011.6 0z" fill="currentColor"/>,
    tt: <path d="M14 2h2.5a4.5 4.5 0 003.5 4.5V9a7 7 0 01-4-1.3v5.6a5.7 5.7 0 11-5.7-5.7v2.6a3.1 3.1 0 103.1 3.1V2z" fill="currentColor"/>,
    wa: <path d="M10 2a8 8 0 00-7 12L2 18l4-1a8 8 0 1010-15h-6 0zm3.7 9.4l-1.2.3a4 4 0 01-3.2-3.2l.3-1.2.8-.8h.8l.7 1.4-.6.6a3 3 0 002 2l.6-.6 1.4.7v.8l-.6.8z" fill="currentColor"/>,
  }[kind];
  const C = href ? 'a' : 'div';
  const props = href ? { href, target: '_blank', rel: 'noopener' } : {};
  return (
    <C {...props} style={{
      width: 36, height: 36, borderRadius: 999,
      background: 'rgba(239, 228, 214, 0.08)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#EFE4D6', cursor: 'pointer',
    }}>
      <svg width="18" height="18" viewBox="0 0 20 20">{inner}</svg>
    </C>
  );
}

// ──────────────────────────────────────────────────────────
// Flyout (WhatsApp + sticky book on desktop)
// ──────────────────────────────────────────────────────────
function Flyout({ openBook, showSticky, stickyTreatment }) {
  return (
    <React.Fragment>
      <div className="flyout">
        <a href={WHATSAPP} className="fab" target="_blank" rel="noopener" aria-label="WhatsApp">
          <svg width="26" height="26" viewBox="0 0 32 32" fill="currentColor">
            <path d="M16 3C9 3 3 9 3 16c0 2.4.7 4.7 1.9 6.7L3 29l6.4-1.8c1.9 1.1 4.2 1.8 6.6 1.8 7 0 13-6 13-13S23 3 16 3zm6.7 18.4c-.3.8-1.7 1.6-2.4 1.7-.6.1-1.4.1-2.2-.1-.5-.2-1.2-.4-2-.8-3.6-1.5-5.9-5.1-6.1-5.4-.2-.2-1.5-1.9-1.5-3.7s.9-2.6 1.3-3c.3-.3.7-.4 1-.4s.5 0 .7.1c.2 0 .5-.1.8.6.3.7.9 2.4 1 2.5.1.2.1.4 0 .6-.1.2-.2.4-.4.6-.2.2-.4.4-.5.6-.2.2-.4.4-.2.7.2.3 1 1.6 2.1 2.6 1.4 1.3 2.7 1.7 3 1.8.4.1.6.1.8-.1.2-.2.9-1.1 1.2-1.4.2-.4.5-.3.8-.2.3.1 2 1 2.4 1.1.3.2.6.2.7.4.2.1.2.7-.1 1.5z"/>
          </svg>
        </a>
      </div>
      <div className={`sticky-book-cta ${showSticky ? 'show' : ''}`}>
        <div>
          <div className="sb-eb">Ready when you are</div>
          <div className="sb-name">{stickyTreatment || 'Book your facial'}</div>
        </div>
        <button onClick={() => openBook(stickyTreatment ? { name: stickyTreatment } : null)}>Book →</button>
      </div>
    </React.Fragment>
  );
}

// ──────────────────────────────────────────────────────────
// Mobile bottom bar (inside iPhone frame)
// ──────────────────────────────────────────────────────────
function MobileBottomBar({ branch, openBook }) {
  const b = BRANCHES[branch];
  return (
    <div className="mob-bottom-bar">
      <div className="mbb-l">
        <div className="mbb-eb">Booking at</div>
        <div className="mbb-br">{b.short}</div>
      </div>
      <button className="mbb-cta" onClick={() => openBook()}>Book Now</button>
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Striped image with optional real img
// ──────────────────────────────────────────────────────────
function Img({ src, alt, label, style, className }) {
  if (src) {
    return <img src={src} alt={alt || ''} className={className} style={style} />;
  }
  return (
    <div className={`placeholder-img ${className || ''}`} style={style}>
      <span className="ph-label">{label || 'Photo TBC'}</span>
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Section head
// ──────────────────────────────────────────────────────────
function SectionHead({ eyebrow, title, lede, action, center }) {
  return (
    <div className={`section-head ${center ? 'center' : ''}`}>
      {eyebrow && <div className="eyebrow"><span className="dot"></span>{eyebrow}</div>}
      <div className="ks">
        <h2 dangerouslySetInnerHTML={{ __html: title }} />
        {(lede || action) && (
          <div className="ks-right" style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: center ? 'center' : 'flex-end' }}>
            {lede && <div className="lede">{lede}</div>}
            {action}
          </div>
        )}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Price formatter
// ──────────────────────────────────────────────────────────
function formatPrice(item) {
  if (item.tbc) {
    return <span className="txr-price tbc">Price on request</span>;
  }
  const value = item.price ?? item.priceFrom;
  const showFrom = item.priceFrom != null;
  return (
    <div className="txr-price">
      {showFrom && <span className="pre">From</span>}
      {' '}{value.toLocaleString()}<span className="aed">AED</span>
    </div>
  );
}

// Export everything
Object.assign(window, {
  FFMark, FacetteLogo, Header, BranchToggle, TrustStrip, BrandRow, Footer,
  Flyout, MobileBottomBar, Img, SectionHead, formatPrice,
});