/* eslint-disable */
/* PERSONAL TRAINER MORUMBI — Shared components & primitives */

const { useState, useEffect, useRef } = React;

// ---------- Icons (line-style, minimal) ----------
const Icon = {
  Arrow: ({ size = 16 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>,

  ArrowDown: ({ size = 16 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 5v14M6 13l6 6 6-6" />
    </svg>,

  ArrowLeft: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19 12H5M11 6l-6 6 6 6" />
    </svg>,

  Whats: ({ size = 16 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.93.55 3.74 1.5 5.28L2 22l4.97-1.6a9.84 9.84 0 0 0 5.07 1.4h.01c5.45 0 9.89-4.45 9.89-9.9 0-2.65-1.03-5.13-2.9-7-1.86-1.87-4.34-2.9-7-2.9zM12.05 20.13h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12 1.01 1.03-3.05-.2-.31a8.27 8.27 0 0 1-1.26-4.36c0-4.55 3.7-8.25 8.26-8.25 2.2 0 4.27.86 5.83 2.42a8.2 8.2 0 0 1 2.41 5.83c0 4.55-3.7 8.25-8.25 8.25zm4.51-6.18c-.24-.12-1.46-.72-1.69-.8-.22-.08-.39-.12-.55.12-.16.24-.62.8-.77.97-.14.16-.28.18-.52.06-.24-.12-1.04-.39-1.98-1.22-.73-.65-1.23-1.46-1.37-1.7-.14-.24-.02-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.55-1.33-.76-1.81-.2-.48-.4-.41-.55-.42-.14 0-.3-.02-.46-.02-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2 0 1.18.86 2.32.98 2.48.12.16 1.69 2.58 4.1 3.62.57.25 1.02.4 1.37.51.58.18 1.1.16 1.52.1.46-.07 1.46-.6 1.66-1.18.2-.58.2-1.07.14-1.18-.06-.1-.22-.16-.46-.28z" />
    </svg>,

  Instagram: ({ size = 16 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="0.5" fill="currentColor" />
    </svg>,

  Building: ({ size = 18 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
      <path d="M4 21h16M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16M10 7h.01M14 7h.01M10 11h.01M14 11h.01M10 15h.01M14 15h.01" />
    </svg>,

  Home: ({ size = 18 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 10l9-7 9 7v10a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2V10z" />
    </svg>,

  Dumbbell: ({ size = 18 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 12h2M20 12h2M6 7v10M18 7v10M10 5v14M14 5v14M6 12h12" />
    </svg>,

  Tree: ({ size = 18 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2l-5 8h3l-4 6h4l-3 5h10l-3-5h4l-4-6h3z" />
    </svg>

};

// ---------- Placeholder image ----------
function Placeholder({ label, corner, src, alt, children }) {
  if (src) {
    return (
      <div className="ph ph-img">
        <img src={src} alt={alt || label} />
        {children}
      </div>);

  }
  return (
    <div className="ph">
      {corner && <span className="ph-corner">{corner}</span>}
      <span className="ph-label">{label}</span>
      {children}
    </div>);

}

// ---------- Buttons ----------
function Btn({ variant = 'primary', children, onClick, href, icon }) {
  const cls = `btn btn-${variant}`;
  const inner =
  <>
      {variant === 'whats' && <Icon.Whats />}
      {children}
      {icon !== false && variant !== 'whats' && <span className="arrow"><Icon.Arrow size={14} /></span>}
    </>;

  if (href) return <a className={cls} href={href} onClick={onClick}>{inner}</a>;
  return <button className={cls} onClick={onClick}>{inner}</button>;
}

// ---------- Nav ----------
function Nav({ onNav, route }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const go = (target) => (e) => {
    e.preventDefault();
    if (target === 'home') {onNav('home');window.scrollTo({ top: 0, behavior: 'smooth' });return;}
    if (target.startsWith('#')) {
      if (route !== 'home') {onNav('home');setTimeout(() => scrollToId(target.slice(1)), 80);} else
      scrollToId(target.slice(1));
      return;
    }
    onNav(target);
    window.scrollTo({ top: 0 });
  };

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="brand" onClick={go('home')}>
        <img className="brand-logo" src="images/logo.png" alt="Personal Trainer no Morumbi" style={{ width: "195px", height: "63px" }} />
      </div>
      <div className="nav-links">
        <button onClick={go('#sobre')}>Sobre</button>
        <button onClick={go('#formas')}>Atendimento</button>
        <button onClick={go('#bairros')}>Bairros</button>
        <button onClick={go('professores')}>Professores</button>
        <button onClick={go('#diferenciais')}>Diferenciais</button>
      </div>
    </nav>);

}

function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) {
    const y = el.getBoundingClientRect().top + window.scrollY - 70;
    window.scrollTo({ top: y, behavior: 'smooth' });
  }
}

// ---------- Floating Whats ----------
function FloatWhats() {
  return (
    <a className="float-whats" href="#" onClick={(e) => e.preventDefault()}>
      <span className="icn"><Icon.Whats size={16} /></span>
      <span className="lbl">Falar no WhatsApp</span>
    </a>);

}

// ---------- Footer ----------
function Footer({ onNav }) {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-top">
          <div className="foot-col foot-brand">
            <img className="foot-logo" src="images/logo.png" alt="Personal Trainer no Morumbi" />
            <p>Atendimento premium e personalizado de personal trainer no Morumbi e bairros vizinhos. Saúde, performance e qualidade de vida.</p>
          </div>
          <div className="foot-col">
            <h4>Navegar</h4>
            <ul>
              <li><a href="#" onClick={(e) => {e.preventDefault();onNav('home');}}>Home</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();onNav('professores');}}>Professores</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();onNav('home');setTimeout(() => scrollToId('formas'), 80);}}>Atendimento</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();onNav('home');setTimeout(() => scrollToId('bairros'), 80);}}>Bairros</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Atendimento</h4>
            <ul>
              <li>Morumbi, Panamby,Vila Andrade
Vila Suzana, Portal do Morumbi
Jardim Guedala, Real Parque
Vila Sônia, Butantã, Caxingui
Jardim Leonor, Jardim Londrina</li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4></h4>
            <ul>
              <li><a href="#" onClick={(e) => {e.preventDefault();onNav('home');setTimeout(() => scrollToId('contato'), 80);}}></a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}></a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}></a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span className="copy">© {new Date().getFullYear()} · Personal Trainer Morumbi · Todos os direitos reservados</span>
          <div className="social">
            <a href="#" onClick={(e) => e.preventDefault()} aria-label="Instagram"><Icon.Instagram size={15} /></a>
          </div>
        </div>
      </div>
    </footer>);} // Expose
Object.assign(window, { Icon, Placeholder, Btn, Nav, FloatWhats, Footer, scrollToId });