/* Fluffy Friends — shared shell: icons, header, footer, WhatsApp, helpers */
const { Button } = window.FluffyFriendsDesignSystem_a09c32;

/* ——— Brand constants ——— */
const FLF = {
  phone: '+971569969546',
  phoneDisplay: '+971 56 996 9546',
  tel: '+971569969546',
  wa: '971569969546',
  email: 'info@fluffyfriends.ae',
  ig: 'fluffyfriends.ae',
  igUrl: 'https://instagram.com/fluffyfriends.ae',
  site: 'fluffyfriends.ae',
  googleReview: 'https://g.page/r/CRxDSU_uEt4gEAE/review',
  L: 'assets/logos/',
  A: 'assets/imagery/',
};

function waLink(message) {
  const text = encodeURIComponent(message || "Hi Fluffy Friends! I'd love to book a groom for my pet. 🐾");
  return `https://wa.me/${FLF.wa}?text=${text}`;
}
function openWhatsApp(message) { window.open(waLink(message), '_blank', 'noopener'); }

/* ——— Lucide icon helper ——— */
function Icon({ name, size = 24, stroke = 'currentColor', strokeWidth = 2.2, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current || !window.lucide || !lucide.icons) return;
    const key = name.split('-').map(w => w[0].toUpperCase() + w.slice(1)).join('');
    const def = lucide.icons[key];
    if (!def) return;
    ref.current.innerHTML = '';
    const node = lucide.createElement(def);
    node.setAttribute('width', size);
    node.setAttribute('height', size);
    node.setAttribute('stroke', stroke);
    node.setAttribute('stroke-width', strokeWidth);
    ref.current.appendChild(node);
  }, [name, size, stroke, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', ...style }} />;
}

/* Inline WhatsApp glyph (brand mark, not a Lucide line icon) */
function WhatsAppGlyph({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.13h-.01a8.2 8.2 0 0 1-4.18-1.14l-.3-.18-3.11.82.83-3.04-.2-.31a8.22 8.22 0 0 1-1.26-4.37c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.23 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.78.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.43.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28Z" />
    </svg>
  );
}

/* Bunny silhouette stamp */
function Bunny({ src = 'flf-bunny-black.png', className, style }) {
  return <img className={className} style={style} src={FLF.L + src} alt="" aria-hidden="true" />;
}

/* ——— Scroll reveal ——— */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  });
}

/* ——— Header ——— */
function Header({ page, onNav, onBook, onStaff }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  // Lock body scroll while the mobile menu is open.
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const links = [['home', 'Home'], ['about', 'About'], ['contact', 'Contact']];
  const go = (id) => { setMenuOpen(false); onNav(id); };
  return (
    <header className="nav" style={scrolled ? { boxShadow: 'var(--shadow-sm)' } : null}>
      <div className="container nav__inner">
        <button className="nav__logo" onClick={() => go('home')} aria-label="Fluffy Friends home">
          <img src={FLF.L + 'flf-logo-black.png'} alt="Fluffy Friends" />
        </button>
        <nav className="nav__links">
          {links.map(([id, label]) => (
            <button key={id} className={'nav__link' + (page === id ? ' is-active' : '')} onClick={() => onNav(id)}>{label}</button>
          ))}
        </nav>
        <div className="nav__tools">
          <button className="nav__staff" onClick={onStaff}><Icon name="lock" size={16} /> Staff login</button>
          <Button variant="primary" size="sm" onClick={onBook}>Book a groom</Button>
          <button
            className="nav__burger"
            onClick={() => setMenuOpen(o => !o)}
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
          >
            <Icon name={menuOpen ? 'x' : 'menu'} size={26} />
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="nav__mobile">
          {links.map(([id, label]) => (
            <button key={id} className={'nav__mobile-link' + (page === id ? ' is-active' : '')} onClick={() => go(id)}>{label}</button>
          ))}
          <button className="nav__mobile-link nav__mobile-link--muted" onClick={() => { setMenuOpen(false); onStaff(); }}>
            <Icon name="lock" size={17} /> Staff login
          </button>
          <Button variant="primary" size="md" onClick={() => { setMenuOpen(false); onBook(); }} style={{ marginTop: 8, width: '100%' }}>Book a groom</Button>
        </div>
      )}
    </header>
  );
}

/* ——— Footer ——— */
function Footer({ onNav, onBook }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <img className="footer__logo" src={FLF.L + 'flf-logo-white.png'} alt="Fluffy Friends" />
            <p>Mobile pet grooming across Dubai. A fully-equipped pink salon-van that comes to your door — gentle, personalised care for dogs, cats, bunnies and birds.</p>
            <div className="footer__social">
              <a href={FLF.igUrl} target="_blank" rel="noopener" aria-label="Instagram"><Icon name="instagram" size={19} /></a>
              <a href={waLink()} target="_blank" rel="noopener" aria-label="WhatsApp"><WhatsAppGlyph size={19} /></a>
              <a href={`tel:${FLF.tel}`} aria-label="Call"><Icon name="phone" size={19} /></a>
              <a href={`mailto:${FLF.email}`} aria-label="Email"><Icon name="mail" size={19} /></a>
            </div>
          </div>
          <div>
            <h4>Explore</h4>
            <ul>
              <li><button onClick={() => onNav('home')}>Home</button></li>
              <li><button onClick={() => onNav('home', 'services')}>Services</button></li>
              <li><button onClick={() => onNav('home', 'prices')}>Prices</button></li>
              <li><button onClick={() => onNav('about')}>About us</button></li>
              <li><button onClick={() => onNav('contact')}>Contact</button></li>
            </ul>
          </div>
          <div>
            <h4>Pets we love</h4>
            <ul>
              <li><button onClick={() => onNav('home', 'prices')}>Dog grooming</button></li>
              <li><button onClick={() => onNav('home', 'prices')}>Cat grooming</button></li>
              <li><button onClick={() => onNav('home', 'prices')}>Bird grooming</button></li>
              <li><button onClick={() => onNav('home', 'prices')}>Rabbit care</button></li>
            </ul>
          </div>
          <div>
            <h4>Say hello</h4>
            <ul className="footer__contact">
              <li><Icon name="phone" size={17} /><a href={`tel:${FLF.tel}`}>{FLF.phoneDisplay}</a></li>
              <li><WhatsAppGlyph size={17} /><a href={waLink()} target="_blank" rel="noopener">WhatsApp us</a></li>
              <li><Icon name="mail" size={17} /><a href={`mailto:${FLF.email}`}>{FLF.email}</a></li>
              <li><Icon name="map-pin" size={17} /><span>Serving all of Dubai</span></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© {new Date().getFullYear()} Fluffy Friends Pet Grooming · {FLF.site}</span>
          <span>Grooming with love and care</span>
        </div>
      </div>
    </footer>
  );
}

/* ——— Floating WhatsApp button ——— */
function WhatsAppFab() {
  return (
    <button className="wa-fab" onClick={() => openWhatsApp()} aria-label="Book on WhatsApp">
      <span className="wa-fab__pulse" />
      <WhatsAppGlyph size={26} />
      <span>Book on WhatsApp</span>
    </button>
  );
}

Object.assign(window, { FLF, waLink, openWhatsApp, Icon, WhatsAppGlyph, Bunny, useReveal, Header, Footer, WhatsAppFab });