(function(){
/* global React, Link, useRouter, Logo, Icon */
const { useState, useEffect } = React;

function TopNav() {
  const { path, nav } = useRouter();
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll); onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    { to: '/services', label: 'Services' },
    { to: '/products', label: 'Products' },
    { to: '/gutter-guide', label: 'Gutter Guide' },
    { to: '/blog', label: 'Blog' },
    { to: '/about', label: 'About' },
    { to: '/contact', label: 'Contact' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(248,244,236,0.92)' : 'var(--color-bg)',
      backdropFilter: scrolled ? 'blur(10px) saturate(1.1)' : 'none',
      borderBottom: scrolled ? '1px solid var(--color-border)' : '1px solid transparent',
      transition: 'background .2s ease, border-color .2s ease',
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 24px' }}>
        <Link to="/" style={{ display: 'flex', alignItems: 'center' }}>
          <Logo height={34} />
        </Link>
        <nav className="hide-m" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {items.map((it) => {
            const active = path === it.to || (it.to !== '/' && path.startsWith(it.to));
            return (
              <Link key={it.to} to={it.to}
                style={{
                  padding: '9px 14px', fontSize: 14, fontWeight: 500,
                  color: active ? 'var(--color-primary)' : 'var(--color-text-muted)',
                  borderRadius: 8, transition: 'color .15s, background .15s',
                  background: active ? 'var(--color-accent-soft)' : 'transparent',
                }}
              >{it.label}</Link>
            );
          })}
        </nav>
        <div className="hide-m" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="tel:+13234521809" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 600, color: 'var(--color-primary)' }}>
            <Icon name="phone" size={15} /> (323) 452-1809
          </a>
          <Link to="/gutter-guide" className="btn btn-primary btn-sm">Free Quote</Link>
        </div>
        <button className="btn-ghost" onClick={() => setOpen(!open)} style={{ display: 'none' }} id="mnav">
          <Icon name={open ? 'close' : 'menu'} />
        </button>
      </div>
      <style>{`
        @media (max-width: 860px) {
          #mnav { display: inline-flex !important; padding: 8px; }
        }
      `}</style>
      {open && (
        <div style={{ padding: '8px 20px 20px', borderTop: '1px solid var(--color-border)', background: 'var(--color-bg)' }}>
          {items.map((it) => (
            <Link key={it.to} to={it.to} onClick={() => setOpen(false)}
              style={{ display: 'block', padding: '12px 4px', fontWeight: 500, color: 'var(--color-primary)', borderBottom: '1px solid var(--color-border)' }}>
              {it.label}
            </Link>
          ))}
          <a href="tel:+13234521809" style={{ display: 'block', padding: '14px 4px', fontWeight: 600, color: 'var(--color-primary)' }}>
            <Icon name="phone" size={14} /> (323) 452-1809
          </a>
          <Link to="/gutter-guide" className="btn btn-primary" style={{ width: '100%', marginTop: 8 }}>Get a Free Quote</Link>
        </div>
      )}
    </header>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--color-primary)', color: '#E4DECE', marginTop: 40 }}>
      <div className="wrap" style={{ padding: '72px 24px 28px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48 }}>
          <div>
            <img src="assets/logo.png" alt="Coastline Gutter Pros"
                 style={{ height: 44, filter: 'brightness(0) invert(1) sepia(.1)', opacity: 0.95, marginBottom: 18 }} />
            <p style={{ color: '#B8BDB0', fontSize: 14, maxWidth: 320 }}>
              Seamless gutter installation, repair, cleaning & guards for Los Angeles homes and businesses. Licensed, insured, and warrantied.
            </p>
            <div className="stars mt-16" style={{ color: 'var(--color-star)' }}>
              {[...Array(5)].map((_, i) => <Icon key={i} name="star" size={14} />)}
              <span style={{ marginLeft: 8, color: '#E4DECE', fontSize: 13 }}>5.0 · 72+ Google reviews</span>
            </div>
          </div>
          <FooterCol title="Services" items={[
            ['Gutter Installation', '/services/gutter-installation'],
            ['Gutter Repair', '/services/gutter-repair'],
            ['Gutter Cleaning', '/services/gutter-cleaning'],
            ['Gutter Guards', '/services/gutter-guards'],
            ['Downspouts', '/services/downspout-installation'],
            ['Commercial', '/services/commercial-gutters'],
          ]}/>
          <FooterCol title="Company" items={[
            ['About', '/about'],
            ['Service Areas', '/service-areas'],
            ['Blog', '/blog'],
            ['Gutter Guide', '/gutter-guide'],
            ['Contact', '/contact'],
          ]}/>
          <div>
            <h4 style={{ color: '#F8F4EC', marginBottom: 14, fontFamily: 'var(--font-body)', fontSize: 13, letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 600 }}>Get in touch</h4>
            <div style={{ fontSize: 14, color: '#D5D8CF', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <a href="tel:+13234521809" style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
                <Icon name="phone" size={14}/> (323) 452-1809
              </a>
              <a href="mailto:admin@coastlinegutterpros.com" style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
                <Icon name="mail" size={14}/> admin@coastlinegutterpros.com
              </a>
              <span style={{ display: 'inline-flex', gap: 8, alignItems: 'flex-start' }}>
                <Icon name="pin" size={14}/> <span>2640 N San Fernando Rd B5<br/>Los Angeles, CA 90065</span>
              </span>
              <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
                <Icon name="clock" size={14}/> Mon–Sat · 7 AM – 6 PM
              </span>
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', marginTop: 56, paddingTop: 24, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, color: '#98A29A', fontSize: 12 }}>
          <span>© 2026 Coastline Gutter Pros · Licensed & Insured · CA Lic. #—</span>
          <span>Proudly serving Los Angeles County, Orange County & the Inland Empire.</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <h4 style={{ color: '#F8F4EC', marginBottom: 14, fontFamily: 'var(--font-body)', fontSize: 13, letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 600 }}>{title}</h4>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
        {items.map(([label, to]) => (
          <li key={to}><Link to={to} style={{ fontSize: 14, color: '#D5D8CF' }}>{label}</Link></li>
        ))}
      </ul>
    </div>
  );
}

function TrustBar() {
  return (
    <div className="trust-bar">
      <div className="wrap items">
        <span className="item"><Icon name="shield" size={17}/> Fully Licensed & Insured</span>
        <span className="item"><Icon name="check" size={17}/> 5-Year Workmanship Warranty</span>
        <span className="item"><Icon name="star" size={17}/> Lifetime Material Warranty</span>
        <span className="item"><Icon name="clock" size={17}/> Same-Day Free Estimates</span>
      </div>
    </div>
  );
}

function Breadcrumbs({ items }) {
  return (
    <nav aria-label="Breadcrumb" style={{ padding: '18px 0', fontSize: 13, color: 'var(--color-text-muted)' }}>
      {items.map((it, i) => (
        <span key={i}>
          {i > 0 && <span style={{ margin: '0 8px', opacity: .5 }}>/</span>}
          {it.to ? <Link to={it.to} style={{ color: 'var(--color-text-muted)' }}>{it.label}</Link> : <span style={{ color: 'var(--color-primary)' }}>{it.label}</span>}
        </span>
      ))}
    </nav>
  );
}

Object.assign(window, { TopNav, Footer, TrustBar, Breadcrumbs });

})();