// Top nav — Apple-store-ish: thin sticky bar, translucent blur, inline links.
// Plus a slim "alert bar" above it for 24/7 emergency contact.

function AlertBar({ show }) {
  if (!show) return null;
  return (
    <div style={{
      background: 'var(--ink)',
      color: '#fff',
      fontSize: 13,
      letterSpacing: '-0.005em',
      textAlign: 'center',
      padding: '9px 16px',
      position: 'sticky', top: 0, zIndex: 60,
    }}>
      <span style={{
        display:'inline-block', width:7, height:7, borderRadius:'50%',
        background:'#ff453a', marginRight:8, verticalAlign:'middle',
      }} className="anim-pulse" />
      <span style={{ opacity: 0.75 }}>24/7 water damage response —</span>{' '}
      <a href="tel:+19546358521" style={{ color:'#fff', textDecoration:'underline', textUnderlineOffset: 3 }}>
        Call (954) 635-8521
      </a>
    </div>
  );
}

function Nav({ showAlert }) {
  const [open, setOpen] = useState(false);
  const links = [
    { label: 'Services',   href: 'Services.html' },
    { label: 'Water damage', href: 'Services.html#water' },
    { label: 'Pricing',    href: '#pricing'    },
    { label: 'Partners',   href: '#properties' },
    { label: 'Process',    href: '#process'    },
    { label: 'FAQ',        href: '#faq'        },
  ];

  return (
    <nav
      className="navblur"
      style={{
        position: 'sticky',
        top: showAlert ? 34 : 0,
        zIndex: 50,
        borderBottom: '1px solid var(--line-soft)',
      }}
    >
      <div className="wrap-wide" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 48,
      }}>
        {/* Wordmark — original typographic mark, not a brand logo */}
        <a href="#top" style={{
          color: 'var(--ink)', textDecoration: 'none',
          fontSize: 15, fontWeight: 600, letterSpacing: '-0.02em',
          display: 'inline-flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{
            display:'inline-grid', placeItems:'center',
            width: 22, height: 22, borderRadius: 6,
            background: 'var(--ink)', color: '#fff',
            fontSize: 11, fontWeight: 700, letterSpacing: 0,
          }}>HA</span>
          <span>Carpet Cleaning</span>
        </a>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 26,
        }} className="nav-links">
          {links.map(l => (
            <a key={l.href} href={l.href} className="nav-link" style={{
              color: 'var(--ink)', fontSize: 14, fontWeight: 400,
              textDecoration: 'none', padding: '6px 10px',
            }}>
              {l.label}
            </a>
          ))}
        </div>

        <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
          <a href="tel:+19546358521" className="btn btn-ghost btn-sm" style={{ height: 32 }}>
            <Icon.Phone size={14} /> (954) 635-8521
          </a>
          <a href="#quote" className="btn btn-primary btn-sm" style={{ height: 32 }}>Request a quote</a>
        </div>
      </div>

      <style>{`
        @media (max-width: 960px) {
          .nav-links { display: none !important; }
        }
      `}</style>
    </nav>
  );
}

Object.assign(window, { Nav, AlertBar });