const { NavBar, Button, Icon, Logo, ContactBlock, IconButton, Tooltip } = window.VeterinariaSanPatricioDesignSystem_c9a149;

const WA_URL = 'https://wa.me/5492613737341';
const IG_URL = 'https://www.instagram.com/veterinaria.sanpatricio/';
const FB_URL = 'https://www.facebook.com/p/Veterinaria-San-Patricio-61560141844781/';
window.VSP_WA_URL = WA_URL;

function WhatsFab() {
  const [show, setShow] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 420);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div style={{
      position: 'fixed', right: 26, bottom: 26, zIndex: 60,
      display: 'flex', alignItems: 'center', gap: 'var(--space-3)',
      opacity: show ? 1 : 0, transform: show ? 'none' : 'translateY(18px) scale(.9)',
      transition: 'opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-spring)',
      pointerEvents: show ? 'auto' : 'none',
    }}>
      <span style={{
        background: '#fff', boxShadow: 'var(--shadow-md)', borderRadius: 'var(--radius-pill)',
        padding: '9px 15px', fontFamily: 'var(--font-ui)', fontSize: 'var(--text-sm)', fontWeight: 700,
        color: 'var(--text-strong)', whiteSpace: 'nowrap',
        opacity: hover ? 1 : 0, transform: hover ? 'none' : 'translateX(10px)',
        transition: 'opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)',
      }}>Escribinos por WhatsApp</span>
      <button
        aria-label="Escribinos por WhatsApp"
        onClick={() => window.open(WA_URL, '_blank', 'noopener')}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          position: 'relative', width: 56, height: 56, borderRadius: 'var(--radius-circle)',
          border: 'none', cursor: 'pointer', background: 'var(--teal-500)', color: '#fff',
          display: 'grid', placeItems: 'center', boxShadow: 'var(--shadow-lg)',
          transform: hover ? 'scale(1.08)' : 'none', transition: 'transform var(--dur-base) var(--ease-spring)',
        }}>
        <PulseRing color="var(--teal-500)" size={56} />
        <span style={{ position: 'relative', display: 'flex' }}><Icon name="whatsapp" strokeSet="simple" size={26} /></span>
      </button>
    </div>
  );
}
const NAV = [
  { value: 'home', label: 'Inicio' },
  { value: 'servicios', label: 'Servicios' },
  { value: 'turnos', label: 'Turnos' },
  { value: 'contacto', label: 'Contacto' },
];
const FOOT_SERVICES = ['Vacunatorio', 'Cirugías', 'Estudios complementarios', 'Pet-shop', 'Farmacia', 'Peluquería'];

function FootTitle({ children }) {
  return <div style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--text-xs)', fontWeight: 700, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--green-300)', marginBottom: 'var(--space-4)' }}>{children}</div>;
}

function Footer({ go }) {
  return (
    <footer style={{ background: 'var(--surface-ink)', color: '#fff', padding: '56px var(--space-8) 40px' }}>
      <div className="vsp-foot" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: '1.3fr .8fr .9fr 1.1fr', gap: 'var(--space-10)' }}>
        <div>
          <Logo variant="wordmark-white" height={40} assetBase="../../assets/" />
          <p style={{ fontFamily: 'var(--font-body)', color: 'var(--gray-300)', maxWidth: 300, marginTop: 'var(--space-5)' }}>
            Atención integral para mascotas en Las Heras, Mendoza.
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-2)', marginTop: 'var(--space-6)' }}>
            <Tooltip label="WhatsApp"><IconButton size="sm" label="WhatsApp" onClick={() => window.open(WA_URL, '_blank', 'noopener')} style={{ color: '#fff', border: '2px solid rgba(255,255,255,.28)' }}><Icon name="whatsapp" strokeSet="simple" size={16} /></IconButton></Tooltip>
            <Tooltip label="@veterinaria.sanpatricio"><IconButton size="sm" label="Instagram" onClick={() => window.open(IG_URL, '_blank', 'noopener')} style={{ color: '#fff', border: '2px solid rgba(255,255,255,.28)' }}><Icon name="instagram" strokeSet="simple" size={16} /></IconButton></Tooltip>
            <Tooltip label="Veterinaria San Patricio"><IconButton size="sm" label="Facebook" onClick={() => window.open(FB_URL, '_blank', 'noopener')} style={{ color: '#fff', border: '2px solid rgba(255,255,255,.28)' }}><Icon name="facebook" strokeSet="simple" size={16} /></IconButton></Tooltip>          </div>
        </div>
        <div>
          <FootTitle>Secciones</FootTitle>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)', alignItems: 'flex-start' }}>
            {NAV.map((n) => (
              <button key={n.value} onClick={() => go(n.value)} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', color: '#fff', textAlign: 'left' }}>{n.label}</button>
            ))}
          </div>
        </div>
        <div>
          <FootTitle>Servicios</FootTitle>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)', alignItems: 'flex-start' }}>
            {FOOT_SERVICES.map((s) => (
              <button key={s} onClick={() => go('servicios')} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', color: 'var(--gray-300)', textAlign: 'left' }}>{s}</button>
            ))}
          </div>
        </div>
        <div>
          <FootTitle>Contacto</FootTitle>
          <ContactBlock tone="inverse" />
        </div>
      </div>
      <div style={{ maxWidth: 'var(--container-max)', margin: '40px auto 0', paddingTop: 'var(--space-5)', borderTop: '1px solid rgba(255,255,255,.14)', fontFamily: 'var(--font-ui)', fontSize: 'var(--text-xs)', color: 'var(--gray-400)', display: 'flex', justifyContent: 'space-between', gap: 'var(--space-6)', flexWrap: 'wrap' }}>
        <span>© 2026 Veterinaria San Patricio · Las Heras, Mendoza</span>
        <button onClick={() => go('legales')} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'var(--font-ui)', fontSize: 'var(--text-xs)', color: 'var(--gray-400)', textDecoration: 'underline' }}>Términos, condiciones y privacidad</button>
      </div>
    </footer>
  );
}

function App() {
  const [screen, setScreen] = React.useState('home');
  const [booking, setBooking] = React.useState(null);
  const [stuck, setStuck] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const go = (v) => { setScreen(v); window.scrollTo(0, 0); };
  return (
    <div className="vsp-shell">
      <NavBar items={NAV} active={screen} onNavigate={go} assetBase="../../assets/"
        style={{ boxShadow: stuck ? 'var(--shadow-md)' : 'none', transition: 'box-shadow var(--dur-slow) var(--ease-out)' }}
        cta={<Button size="sm" iconLeft={<Icon name="calendar-days" size={16} />} onClick={() => go('turnos')}>Pedir turno</Button>} />
      {screen === 'home' && <HomeScreen go={go} />}
      {screen === 'servicios' && <ServicesScreen go={go} />}
      {screen === 'turnos' && <BookingScreen booking={booking} setBooking={setBooking} go={go} />}
      {screen === 'contacto' && <ContactScreen />}
      {screen === 'legales' && <LegalScreen />}
      <Footer go={go} />
      <WhatsFab />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);