/* global React */
const { useState: useStateNav } = React;

function Icon({ name, size = 20, color = 'currentColor', stroke = 2 }) {
  const paths = {
    menu: <><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"/></>,
    close: <><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></>,
    check: <polyline points="20 6 9 17 4 12"/>,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    chevronDown: <polyline points="6 9 12 15 18 9"/>,
    phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>,
    mail: <><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22,6 12,13 2,6"/></>,
    mapPin: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></>,
    instagram: <><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></>,
    facebook: <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>,
    tiktok: <path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
         strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name]}
    </svg>
  );
}

function CheckBox({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true" style={{ flexShrink: 0 }}>
      <rect width="48" height="48" rx="10" fill="#2e8b57"/>
      <path d="M13 24l7 7 15-15" fill="none" stroke="#fff" strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function Navbar() {
  const [openSvc, setOpenSvc] = useStateNav(false);
  const [openLoc, setOpenLoc] = useStateNav(false);
  const [mobileOpen, setMobileOpen] = useStateNav(false);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    }
    setMobileOpen(false);
  };

  return (
    <header style={navStyles.wrap}>
      <div style={navStyles.inner}>
        <a href="#" style={navStyles.brand}>
          <img src="assets/logo-green.png" alt="Deck Restore+" style={{ height: 36 }} />
        </a>

        <nav style={navStyles.nav}>
          <div style={{ position: 'relative' }}
               onMouseEnter={() => setOpenSvc(true)}
               onMouseLeave={() => setOpenSvc(false)}>
            <a href="#" style={navStyles.linkRow}>
              Services <Icon name="chevronDown" size={14} stroke={2.5} />
            </a>
            {openSvc && (
              <div style={{ ...navStyles.dropdown, minWidth: 320 }}>
                <div style={navStyles.dropCat}>OUTDOOR — STAINING &amp; CLEANING</div>
                <a href="deck-staining.html" style={navStyles.dropItem}>Deck Staining</a>
                <a href="fence-staining.html" style={navStyles.dropItem}>Fence Staining</a>
                <a href="deck-cleaning.html" style={navStyles.dropItem}>Deck Cleaning</a>
                <a href="fence-cleaning.html" style={navStyles.dropItem}>Fence Cleaning</a>
                <a href="paint-stripping.html" style={navStyles.dropItem}>Paint &amp; Stain Stripping</a>
                <a href="deck-sanding-prep.html" style={navStyles.dropItem}>Deck Sanding &amp; Prep</a>
                <div style={{ ...navStyles.dropCat, marginTop: 6 }}>OUTDOOR — REPAIRS &amp; RESTORATION</div>
                <a href="minor-repairs.html" style={navStyles.dropItem}>Minor Repairs</a>
                <a href="deck-resurfacing.html" style={navStyles.dropItem}>Deck Resurfacing</a>
                <div style={{ ...navStyles.dropCat, marginTop: 6 }}>SIDING &amp; SHAKE</div>
                <a href="wood-siding-restoration.html" style={navStyles.dropItem}>Cedar Shake &amp; Siding Restoration</a>
                <div style={{ ...navStyles.dropCat, marginTop: 6 }}>INDOOR</div>
                <a href="hardwood-floor-refinishing.html" style={navStyles.dropItem}>Hardwood Floor Refinishing</a>
              </div>
            )}
          </div>
          <a href="gallery.html" style={navStyles.link}>Gallery</a>
          <a href="process.html" style={navStyles.link}>Our Process</a>
          <a href="about.html" style={navStyles.link}>About</a>
          <a href="testimonials.html" style={navStyles.link}>Testimonials</a>
          <a href="get-quote.html" style={navStyles.link}>Get Quote</a>

          {/* Locations dropdown */}
          <div style={{ position: 'relative' }}
               onMouseEnter={() => setOpenLoc(true)}
               onMouseLeave={() => setOpenLoc(false)}>
            <a href="#" style={navStyles.linkRow}>
              Locations <Icon name="chevronDown" size={14} stroke={2.5} />
            </a>
            {openLoc && (
              <div style={{ ...navStyles.dropdown, minWidth: 460, flexDirection: 'row', gap: 0 }}>
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <div style={navStyles.dropCat}>NIAGARA REGION</div>
                  {[
                    { city: 'St. Catharines',      slug: 'st-catharines' },
                    { city: 'Niagara Falls',        slug: 'niagara-falls' },
                    { city: 'Welland',              slug: 'welland' },
                    { city: 'Niagara-on-the-Lake',  slug: 'niagara-on-the-lake' },
                    { city: 'Pelham',               slug: 'pelham' },
                    { city: 'Fort Erie',            slug: 'fort-erie' },
                    { city: 'Thorold',              slug: 'thorold' },
                    { city: 'Fonthill',             slug: 'fonthill' },
                    { city: 'Port Colborne',        slug: 'port-colborne' },
                  ].map(loc => (
                    <a key={loc.slug} href={loc.slug + '.html'} style={navStyles.dropItem}>{loc.city}</a>
                  ))}
                </div>
                <div style={{ width: 1, background: 'var(--border)', margin: '8px 4px' }} />
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <div style={navStyles.dropCat}>EXTENDED AREA</div>
                  {[
                    { city: 'Burlington',    slug: 'burlington' },
                    { city: 'Hamilton',      slug: 'hamilton' },
                    { city: 'Stoney Creek',  slug: 'stoney-creek' },
                    { city: 'Grimsby',       slug: 'grimsby' },
                    { city: 'Beamsville',    slug: 'beamsville' },
                    { city: 'Vineland',      slug: 'vineland' },
                    { city: 'Smithville',    slug: 'smithville' },
                    { city: 'Oakville',      slug: 'oakville' },
                  ].map(loc => (
                    <a key={loc.slug} href={loc.slug + '.html'} style={navStyles.dropItem}>{loc.city}</a>
                  ))}
                </div>
              </div>
            )}
          </div>
        </nav>

        <div style={navStyles.actions}>
          <a href="get-quote.html" style={{ ...navStyles.cta, textDecoration: 'none' }}>Get Free Quote</a>
          <button style={navStyles.mobileMenuBtn} onClick={() => setMobileOpen(!mobileOpen)}>
            <Icon name={mobileOpen ? 'close' : 'menu'} size={22} color="var(--ink-900)" />
          </button>
        </div>
      </div>

      {mobileOpen && (
        <div style={navStyles.mobileMenu}>
          <a href="deck-staining.html" style={navStyles.mobileLinkA}>Deck Staining</a>
          <a href="fence-staining.html" style={navStyles.mobileLinkA}>Fence Staining</a>
          <a href="deck-cleaning.html" style={navStyles.mobileLinkA}>Deck Cleaning</a>
          <a href="fence-cleaning.html" style={navStyles.mobileLinkA}>Fence Cleaning</a>
          <a href="paint-stripping.html" style={navStyles.mobileLinkA}>Paint &amp; Stain Stripping</a>
          <a href="deck-sanding-prep.html" style={navStyles.mobileLinkA}>Deck Sanding &amp; Prep</a>
          <a href="minor-repairs.html" style={navStyles.mobileLinkA}>Minor Repairs</a>
          <a href="deck-resurfacing.html" style={navStyles.mobileLinkA}>Deck Resurfacing</a>
          <a href="wood-siding-restoration.html" style={navStyles.mobileLinkA}>Cedar Shake &amp; Siding Restoration</a>
          <a href="hardwood-floor-refinishing.html" style={navStyles.mobileLinkA}>Hardwood Floor Refinishing</a>
          <a href="gallery.html" style={navStyles.mobileLinkA}>Gallery</a>
          <a href="process.html" style={navStyles.mobileLinkA}>Our Process</a>
          <a href="about.html" style={navStyles.mobileLinkA}>About</a>
          <a href="testimonials.html" style={navStyles.mobileLinkA}>Testimonials</a>
          <a href="contact.html" style={navStyles.mobileLinkA}>Contact</a>
          <a href="get-quote.html" style={navStyles.mobileLinkA}>Get Quote</a>
          <button onClick={() => { window.location.href = 'get-quote.html'; }} style={{ ...navStyles.mobileLink, ...navStyles.mobileCta }}>Get Free Quote</button>
        </div>
      )}
    </header>
  );
}

const navStyles = {
  wrap: {
    position: 'sticky', top: 0, zIndex: 50,
    background: 'rgba(250,247,240,0.96)',
    backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
    borderBottom: '1px solid var(--border)',
  },
  inner: {
    maxWidth: 'var(--container)', margin: '0 auto',
    padding: '14px 32px', display: 'flex', alignItems: 'center', gap: 36,
  },
  brand: { textDecoration: 'none', flexShrink: 0 },
  nav: { display: 'flex', gap: 4 },
  link: {
    fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: 500,
    color: 'var(--ink-800)', textDecoration: 'none', background: 'none',
    border: 'none', cursor: 'pointer', padding: '6px 12px', borderRadius: 8,
    transition: 'color var(--transition-fast)',
  },
  linkRow: {
    display: 'inline-flex', alignItems: 'center', gap: 4,
    fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: 500,
    color: 'var(--ink-800)', textDecoration: 'none', cursor: 'pointer',
    padding: '6px 12px',
  },
  dropdown: {
    position: 'absolute', top: '100%', left: -16, marginTop: 8,
    background: 'var(--paper)', border: '1px solid var(--border)',
    borderRadius: 12, boxShadow: 'var(--shadow-md)',
    padding: 8, minWidth: 240, display: 'flex', flexDirection: 'column', gap: 2, zIndex: 60,
  },
  dropItem: {
    padding: '10px 14px', borderRadius: 8,
    fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500,
    color: 'var(--ink-800)', textDecoration: 'none', display: 'block',
  },
  actions: { marginLeft: 'auto', display: 'flex', gap: 12, alignItems: 'center' },
  cta: {
    background: 'var(--forest-700)', color: '#fff', border: 'none',
    padding: '11px 22px', borderRadius: 10,
    fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14,
    cursor: 'pointer', boxShadow: 'var(--shadow-brand)',
  },
  mobileMenuBtn: {
    display: 'none', background: 'none', border: 'none', cursor: 'pointer', padding: 6,
  },
  dropCat: { padding: '6px 14px 4px', fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-500)' },
  mobileLinkA: { fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 500, color: 'var(--ink-800)', textDecoration: 'none', padding: '11px 8px', borderBottom: '1px solid var(--border)', display: 'block' },
  mobileMenu: {
    display: 'flex', flexDirection: 'column', gap: 2,
    padding: '12px 20px 20px', borderTop: '1px solid var(--border)',
    background: 'var(--cream)',
  },
  mobileLink: {
    fontFamily: 'var(--font-body)', fontSize: 16, fontWeight: 500,
    color: 'var(--ink-800)', background: 'none', border: 'none',
    cursor: 'pointer', padding: '12px 8px', textAlign: 'left',
    borderBottom: '1px solid var(--border)',
  },
  mobileCta: {
    background: 'var(--forest-700)', color: '#fff',
    borderRadius: 10, marginTop: 10, textAlign: 'center',
    borderBottom: 'none', fontWeight: 700,
  },
};

function Hero({ onQuoteClick }) {
  return (
    <section style={heroStyles.wrap}>
      <div style={heroStyles.imageBleed}>
        <img src="uploads/IMG_4308.png" alt="" style={heroStyles.bleedImg} />
        <div style={heroStyles.bleedOverlay} />
      </div>
      <div style={heroStyles.inner}>
        <div style={heroStyles.copy}>
          <img src="assets/logo-white.png" alt="Deck Restore+" style={heroStyles.heroLogo} />
          <h1 style={heroStyles.h1}>We Restore Wood.</h1>
          <p style={heroStyles.lead}>
            Deck, fence, and hardwood floor refinishing from Niagara to Oakville.
            Specialists in one thing — done properly.
          </p>
          <div style={heroStyles.cta}>
            <button onClick={onQuoteClick} style={heroStyles.primaryBtn}>
              Get Free Quote
              <Icon name="arrowRight" size={18} stroke={2.5} color="var(--forest-900)" />
            </button>
            <a href="#work" style={heroStyles.secondaryLink}>See our gallery →</a>
          </div>
        </div>
      </div>
      <div style={heroStyles.cityStrip}>
        <Icon name="mapPin" size={14} color="var(--forest-700)" />
        <span style={heroStyles.cityText}>
          St. Catharines · Welland · Niagara Falls · Niagara-on-the-Lake · Pelham · Fort Erie · Port Colborne · Thorold · Fonthill
        </span>
      </div>
    </section>
  );
}

const heroStyles = {
  wrap: { position: 'relative', background: 'var(--forest-900)', overflow: 'hidden' },
  imageBleed: { position: 'absolute', inset: 0, zIndex: 0 },
  bleedImg: { width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.45) saturate(0.75)' },
  bleedOverlay: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(160deg, rgba(0,36,23,0.88) 0%, rgba(0,36,23,0.55) 55%, rgba(0,36,23,0.92) 100%)',
  },
  inner: {
    position: 'relative', zIndex: 1,
    maxWidth: 'var(--container)', margin: '0 auto',
    padding: '120px 32px 120px',
    minHeight: 540, display: 'flex', alignItems: 'center',
  },
  copy: { maxWidth: 680 },
  heroLogo: { height: 52, marginBottom: 28, opacity: 0.95 },
  h1: {
    fontFamily: 'var(--font-display)', fontWeight: 800,
    fontSize: 'clamp(3rem, 6vw, 5.5rem)', lineHeight: 1.0,
    letterSpacing: '-0.03em', color: '#fff', margin: 0,
  },
  lead: {
    fontFamily: 'var(--font-body)', fontSize: 19, lineHeight: 1.55,
    color: 'rgba(255,255,255,0.82)', marginTop: 20, maxWidth: 540,
  },
  cta: { marginTop: 36, display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' },
  primaryBtn: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    background: 'var(--mint-500)', color: 'var(--forest-900)', border: 'none',
    padding: '16px 28px', borderRadius: 14,
    fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 16,
    cursor: 'pointer', boxShadow: '0 12px 30px -8px rgba(80,200,120,0.45)',
  },
  secondaryLink: {
    fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600,
    color: '#fff', textDecoration: 'none', opacity: 0.9,
  },
  cityStrip: {
    position: 'relative', zIndex: 1,
    background: 'var(--cream)',
    padding: '14px 32px',
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    borderTop: '1px solid var(--border)',
  },
  cityText: {
    fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 500,
    color: 'var(--ink-700)', letterSpacing: '0.02em', textAlign: 'center',
  },
};

window.Icon = Icon;
window.CheckBox = CheckBox;
window.Navbar = Navbar;
window.Hero = Hero;