// Shared components — mobile-responsive

const { useState, useEffect } = React;

const GOOGLE_REVIEW_URL = 'https://www.google.com/maps/place/Davie+Veterinary+Center/@26.0467766,-80.2311024,17z/data=!4m15!1m8!3m7!1s0x88d9a9aca6b438c5:0xf86ab9a6696c18f3!2s5930+SW+64th+Ave,+Davie,+FL+33314!3b1!8m2!3d26.0467766!4d-80.2311024!16s%2Fg%2F11c258fjfv!3m5!1s0x88d9a83511214cf9:0x417e539db7fc7a5!8m2!3d26.0467936!4d-80.2311219!16s%2Fg%2F1tfr16x2';

function useIsMobile() {
  const [mob, setMob] = useState(window.innerWidth < 768);
  useEffect(() => {
    const fn = () => setMob(window.innerWidth < 768);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, []);
  return mob;
}

function Logo({ inverse, size = 22 }) {
  return (
    <div style={{
      fontFamily: 'var(--font-display)', fontSize: size,
      color: inverse ? 'var(--cream-50)' : 'var(--ink-900)',
      display: 'flex', alignItems: 'center', gap: 10, letterSpacing: '0.02em'
    }}>
      <span style={{ width: size * 0.5, height: size * 0.5, background: 'var(--orange-500)', borderRadius: 999, display: 'inline-block' }} />
      DAVIE VET
    </div>
  );
}

function NavBar({ active, onNav }) {
  const mob = useIsMobile();
  const [open, setOpen] = useState(false);
  const links = ['Home', 'Services', 'Team', 'Visit'];
  const go = (l) => { setOpen(false); onNav && onNav(l); };

  return (
    <div style={{ background: '#fff', borderBottom: '1px solid var(--border)', position: 'sticky', top: 0, zIndex: 20 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: mob ? '14px 20px' : '18px 40px' }}>
        <Logo />
        {mob ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <a href="https://www.facebook.com/davievet/about_work_and_education" target="_blank" rel="noopener" aria-label="Davie Vet on Facebook" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--navy-600)', padding: 8 }}>
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.235 2.686.235v2.97h-1.513c-1.491 0-1.956.93-1.956 1.885v2.27h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
              </svg>
            </a>
            <button onClick={() => setOpen(o => !o)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 8 }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--ink-900)" strokeWidth="2" strokeLinecap="round">
                {open ? <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></> : <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>}
              </svg>
            </button>
          </div>
        ) : (
          <>
            <div style={{ display: 'flex', gap: 28, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14 }}>
              {links.map(l => (
                <a key={l} onClick={() => go(l)} style={{
                  color: active === l ? 'var(--navy-600)' : 'var(--fg1)',
                  borderBottom: active === l ? '2px solid var(--orange-500)' : '2px solid transparent',
                  paddingBottom: 2, cursor: 'pointer', textDecoration: 'none'
                }}>{l}</a>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <a href="https://www.facebook.com/davievet/about_work_and_education" target="_blank" rel="noopener" aria-label="Davie Vet on Facebook" style={{ display: 'flex', alignItems: 'center', color: 'var(--navy-600)' }}>
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.235 2.686.235v2.97h-1.513c-1.491 0-1.956.93-1.956 1.885v2.27h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
                </svg>
              </a>
              <a href="tel:9545814971" style={{ background: 'var(--navy-600)', color: '#fff', padding: '10px 18px', borderRadius: 8, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13, border: 'none', cursor: 'pointer', letterSpacing: '0.02em', textDecoration: 'none' }}>
                Book · (954) 581-4971
              </a>
            </div>
          </>
        )}
      </div>
      {mob && open && (
        <div style={{ borderTop: '1px solid var(--border)', padding: '12px 20px 20px', display: 'flex', flexDirection: 'column', gap: 2 }}>
          {links.map(l => (
            <button key={l} onClick={() => go(l)} style={{
              fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 16,
              padding: '14px 0', background: 'none', border: 'none',
              color: active === l ? 'var(--navy-600)' : 'var(--fg1)',
              textAlign: 'left', cursor: 'pointer',
              borderBottom: '1px solid var(--border)'
            }}>{l}</button>
          ))}
          <a href="tel:9545814971" style={{ display: 'block', marginTop: 14, background: 'var(--orange-500)', color: '#fff', padding: '14px 20px', borderRadius: 8, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, textAlign: 'center', textDecoration: 'none', border: '2px solid var(--ink-900)' }}>
            Call · (954) 581-4971
          </a>
        </div>
      )}
    </div>
  );
}

function Button({ children, variant = 'primary', onClick, style }) {
  const base = { fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, padding: '14px 26px', borderRadius: 8, border: 'none', cursor: 'pointer', letterSpacing: '0.02em', transition: 'all 140ms' };
  const variants = {
    primary: { background: 'var(--navy-600)', color: '#fff' },
    accent: { background: 'var(--orange-500)', color: '#fff', border: '2px solid var(--ink-900)', boxShadow: '3px 3px 0 var(--ink-900)', borderRadius: 6 },
    ghost: { background: 'transparent', color: 'var(--navy-600)', border: '2px solid var(--navy-600)', padding: '12px 24px' }
  };
  return <button onClick={onClick} style={{ ...base, ...variants[variant], ...style }}>{children}</button>;
}

function StarRule({ color = 'var(--ink-900)', width = 240 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, width, margin: '0 auto' }}>
      <div style={{ flex: 1, height: 1.5, background: color }} />
      <svg viewBox="0 0 24 24" style={{ width: 22, height: 22 }}>
        <polygon fill={color} points="12,1 15,9 23,9 16.5,14 19,22 12,17 5,22 7.5,14 1,9 9,9"/>
      </svg>
      <div style={{ flex: 1, height: 1.5, background: color }} />
    </div>
  );
}

function Eyebrow({ children, color = 'var(--accent)' }) {
  return <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.22em', color }}>{children}</div>;
}

function Footer() {
  const mob = useIsMobile();
  return (
    <div style={{ background: 'var(--ink-900)', color: 'var(--cream-100)', padding: mob ? '40px 20px 28px' : '48px 40px 32px', marginTop: 80 }}>
      <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr 1fr' : '2fr 1fr 1fr 1fr', gap: mob ? 28 : 40, maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ gridColumn: mob ? '1 / -1' : 'auto' }}>
          <Logo inverse size={24} />
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: 'var(--cream-200)', marginTop: 14, maxWidth: 320 }}>
            Nearly 50 years of trusted care in Davie. New space since 2021, but still the same familiar faces and dedication.
          </p>
        </div>
        {[
          { label: 'Visit', lines: ['5930 SW 64th Ave', 'Davie, FL 33314', '(954) 581-4971'] },
          { label: 'Hours', lines: ['Mon–Fri · 9–5', 'Sat · closed', 'Sun · closed'] },
          { label: 'Menu', lines: ['Services', 'Team', 'New Patients'], reviewLink: true },
        ].map(col => (
          <div key={col.label}>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--orange-300)', marginBottom: 12 }}>{col.label}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.8 }}>
              {col.lines.map((l, i) => <div key={i}>{l}</div>)}
              {col.reviewLink && (
                <div><a href={GOOGLE_REVIEW_URL} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--cream-200)', textDecoration: 'none' }}>Leave a review ↗</a></div>
              )}
            </div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1200, margin: '24px auto 0', paddingTop: 16, borderTop: '1px solid var(--stone-600)', fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--stone-400)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
        <div>© 2026 Davie Vet Center</div>
        <div style={{ fontFamily: 'var(--font-hand)', fontSize: 18, color: 'var(--orange-300)' }}>made with treats</div>
      </div>
    </div>
  );
}

Object.assign(window, { Logo, NavBar, Button, StarRule, Eyebrow, Footer, useIsMobile });