const { Button, Icon, Badge } = window.RinseNRepeatDesignSystem_9f80bd;

function Nav({ current, go }) {
  const D = window.RNR_DATA;
  const isMobile = window.RNRUseIsMobile();
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { if (!isMobile) setOpen(false); }, [isMobile]);
  const navTo = (item) => { setOpen(false); go(item); };
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 30, background: 'var(--black-950)', borderBottom: '1px solid var(--border-on-dark)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '14px var(--gutter-x)', display: 'flex', alignItems: 'center', gap: isMobile ? 12 : 28 }}>
        <img src="assets/logo-dark.png" alt="Rinse n Repeat" onClick={() => navTo('Home')}
          style={{ height: isMobile ? 38 : 44, cursor: 'pointer' }} />
        {!isMobile ? (
          <nav style={{ display: 'flex', gap: 6, marginLeft: 'auto' }}>
            {D.nav.map((item) => {
              const active = current === item;
              return (
                <button key={item} onClick={() => go(item)}
                  style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '9px 14px', borderRadius: 'var(--radius-pill)', fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600, color: active ? 'var(--orange-500)' : 'rgba(255,255,255,.82)', transition: 'var(--t-colors)' }}
                  onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = '#fff'; }}
                  onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = 'rgba(255,255,255,.82)'; }}>
                  {item}
                </button>
              );
            })}
          </nav>
        ) : null}
        <span style={{ marginLeft: isMobile ? 'auto' : 0, display: 'flex', gap: 10, alignItems: 'center' }}>
          <Button variant="primary" size="sm" iconLeft={<Icon name="calendar" size={16} />} onClick={() => navTo('Book')}>Book Now</Button>
          {isMobile ? (
            <button onClick={() => setOpen((o) => !o)} aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open}
              style={{ background: 'none', border: '1px solid var(--border-on-dark-strong)', borderRadius: 'var(--radius-sm)', cursor: 'pointer', color: '#fff', padding: 9, display: 'inline-flex' }}>
              <Icon name={open ? 'x' : 'menu'} size={22} />
            </button>
          ) : null}
        </span>
      </div>
      {isMobile && open ? (
        <nav style={{ display: 'flex', flexDirection: 'column', padding: '6px var(--gutter-x) 14px', borderTop: '1px solid var(--border-on-dark)' }}>
          {D.nav.map((item) => {
            const active = current === item;
            return (
              <button key={item} onClick={() => navTo(item)}
                style={{ background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', padding: '13px 6px', borderBottom: '1px solid var(--border-on-dark)', fontFamily: 'var(--font-body)', fontSize: 16, fontWeight: 600, color: active ? 'var(--orange-500)' : 'rgba(255,255,255,.85)' }}>
                {item}
              </button>
            );
          })}
        </nav>
      ) : null}
    </header>
  );
}

function Footer({ go }) {
  const D = window.RNR_DATA;
  const col = (title, items) => (
    <div>
      <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 800, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--orange-500)', margin: '0 0 18px' }}>{title}</h4>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map((i) => <li key={i.label}><a onClick={() => go(i.go)} style={{ color: 'rgba(255,255,255,.7)', fontSize: 14.5, cursor: 'pointer' }}>{i.label}</a></li>)}
      </ul>
    </div>
  );
  return (
    <footer style={{ background: 'var(--black-950)', borderTop: '1px solid var(--border-on-dark)', paddingTop: 64 }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter-x) 40px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(220px,100%),1fr))', gap: 40 }}>
        <div>
          <img src="assets/logo-dark.png" alt="Rinse n Repeat" style={{ height: 58 }} />
          <p style={{ color: 'rgba(255,255,255,.6)', fontSize: 14.5, lineHeight: 1.6, margin: '18px 0 0', maxWidth: 260 }}>Residential & commercial exterior cleaning across {D.brand.area}. {D.brand.est}.</p>
        </div>
        {col('Company', [{ label: 'Home', go: 'Home' }, { label: 'Services', go: 'Services' }, { label: 'Projects', go: 'Projects' }, { label: 'Reviews', go: 'Reviews' }])}
        {col('Services', D.serviceOptions.slice(0, 5).map((s) => ({ label: s, go: 'Services' })))}
        <div>
          <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 800, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--orange-500)', margin: '0 0 18px' }}>Contact</h4>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <span style={{ display: 'flex', gap: 10, alignItems: 'center', color: 'rgba(255,255,255,.8)', fontSize: 14.5 }}><Icon name="phone" size={17} color="var(--orange-500)" />{D.brand.phone}</span>
            <span style={{ display: 'flex', gap: 10, alignItems: 'center', color: 'rgba(255,255,255,.8)', fontSize: 14.5 }}><Icon name="mail" size={17} color="var(--orange-500)" />{D.brand.email}</span>
            <span style={{ display: 'flex', gap: 10, alignItems: 'center', color: 'rgba(255,255,255,.8)', fontSize: 14.5 }}><Icon name="clock" size={17} color="var(--orange-500)" />{D.brand.hours}</span>
            <div style={{ display: 'flex', gap: 12, marginTop: 4 }}>
              {['instagram', 'facebook', 'star', 'map-pin'].map((n) => (
                <span key={n} style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--charcoal-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', cursor: 'pointer' }}><Icon name={n} size={18} /></span>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div style={{ borderTop: '1px solid var(--border-on-dark)', padding: '20px var(--gutter-x)', maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap', color: 'rgba(255,255,255,.45)', fontSize: 13 }}>
        <span>© {new Date().getFullYear()} Rinse n Repeat · {D.brand.area}</span>
        <span style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
          <a href="admin.html" style={{ color: 'rgba(255,255,255,.55)', cursor: 'pointer' }}>Owner login</a>
          <span>Privacy Policy</span>
          <span>Built by <a href="https://bootsagentai.com" target="_blank" rel="noopener" style={{ color: 'var(--orange-500)', fontWeight: 600 }}>Boots On The Ground AI</a></span>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { RNRNav: Nav, RNRFooter: Footer });