// Nav + Footer

const { Link: RLink, useLocation: useLoc } = ReactRouterDOM;

function Nav() {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const loc = useLoc();
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', h); return () => window.removeEventListener('scroll', h);
  }, []);
  React.useEffect(() => { setOpen(false); window.scrollTo(0,0); }, [loc.pathname]);

  const link = (to, label) => {
    const active = loc.pathname === to || (to !== '/' && loc.pathname.startsWith(to));
    return <RLink to={to} style={{
      fontFamily:'var(--font-body)', fontSize:15, color: active ? 'var(--text-charcoal)' : 'var(--text-muted)',
      textDecoration:'none', padding:'6px 0', fontWeight: active?500:400,
      transition:'color 200ms',
    }}>{label}</RLink>;
  };

  return (
    <header style={{
      position:'sticky', top:0, zIndex:50, background:'var(--bg-cream)',
      borderBottom: scrolled ? '1px solid var(--border-hair)' : '1px solid transparent',
      transition:'border-color 200ms, background 200ms',
    }}>
      <div style={{
        maxWidth:'var(--container-max)', margin:'0 auto',
        padding:'18px var(--container-pad)',
        display:'flex', alignItems:'center', gap:40,
      }}>
        <RLink to="/" style={{
          fontFamily:'var(--font-display)', fontSize:22, fontWeight:500,
          letterSpacing:'-0.015em', color:'var(--text-charcoal)', textDecoration:'none',
        }}>BJO Automation</RLink>
        <nav className="desktop-nav" style={{ display:'flex', gap:32, marginLeft:'auto', marginRight:24 }}>
          {link('/', 'Home')}
          {link('/services', 'Services')}
          {link('/about', 'About')}
          {link('/contact', 'Contact')}
        </nav>
        <Button to="/book" variant="primary" style={{padding:'12px 22px', fontSize:15}}>
          Book a call
        </Button>
        <button className="mobile-burger" onClick={() => setOpen(!open)}
          style={{display:'none',background:'none',border:0,cursor:'pointer',color:'var(--text-charcoal)'}}>
          <i data-lucide={open?'x':'menu'} style={{width:24,height:24}}></i>
        </button>
      </div>
      {open && <div style={{borderTop:'1px solid var(--border-hair)',padding:'16px var(--container-pad)',display:'flex',flexDirection:'column',gap:14,background:'var(--bg-cream)'}}>
        {[['/','Home'],['/services','Services'],['/about','About'],['/contact','Contact'],['/book','Book a call']].map(([t,l]) =>
          <RLink key={t} to={t} style={{fontFamily:'var(--font-body)',fontSize:17,color:'var(--text-charcoal)',textDecoration:'none',padding:'8px 0'}}>{l}</RLink>
        )}
      </div>}
    </header>
  );
}

function Footer() {
  const services = [
    ['lead-response-followup','Lead Response & Follow-Up'],
    ['missed-call-textback','Missed Call Text-Back'],
    ['reviews-reputation','Reviews & Reputation'],
    ['internal-reporting','Internal Reporting'],
    ['document-processing','Document Processing'],
  ];
  // Legal / SMS-program pages are hosted as static HTML alongside this React app.
  // Use regular <a> tags (NOT RLink) so they resolve to clean top-level URLs like
  // bjoventuresllc.com/privacy.html — required for A2P 10DLC reviewer discoverability.
  const legalLinks = [
    ['/privacy.html', 'Privacy Policy'],
    ['/terms.html', 'SMS Terms & Conditions'],
    ['/sms-programs.html', 'SMS Messaging Programs'],
    ['/verbal-opt-in-script.html', 'Verbal Opt-In Script'],
  ];
  const textCream = 'var(--text-cream)';
  const textCreamMuted = 'var(--text-cream-muted)';
  const colHeader = {fontFamily:'var(--font-body)',fontSize:11,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--accent-clay)',fontWeight:500,marginBottom:14};
  const linkStyle = {display:'block',fontFamily:'var(--font-body)',fontSize:15,color:textCream,textDecoration:'none',padding:'5px 0'};
  return (
    <footer style={{ background:'var(--bg-forest-ink)', color:textCream, marginTop:0 }}>
      <div style={{
        maxWidth:'var(--container-max)', margin:'0 auto',
        padding:'80px var(--container-pad) 24px',
        display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1.2fr', gap:48,
      }} className="footer-grid">
        <div>
          <div style={{fontFamily:'var(--font-display)',fontSize:28,fontWeight:500,letterSpacing:'-0.015em'}}>BJO Automation</div>
          <div style={{fontFamily:'var(--font-body)',fontSize:15,color:textCreamMuted,marginTop:12,maxWidth:280,lineHeight:1.55}}>AI automations for Central Coast businesses.</div>
          <div style={{fontFamily:'var(--font-body)',fontSize:13,color:textCreamMuted,marginTop:20,letterSpacing:'0.04em'}}>Built for the 805 / 831.</div>
          <div style={{fontFamily:'var(--font-body)',fontSize:13,color:textCreamMuted,marginTop:24,lineHeight:1.55}}>
            BJO Ventures LLC<br/>
            67225 Sargents Road<br/>
            San Ardo, CA 93450<br/>
            <a href="mailto:bennett@bjoventuresllc.com" style={{color:textCreamMuted}}>bennett@bjoventuresllc.com</a>
          </div>
        </div>
        <div>
          <div style={colHeader}>Company</div>
          {[['/','Home'],['/services','Services'],['/about','About'],['/contact','Contact'],['/book','Book a call']].map(([t,l])=>
            <RLink key={t} to={t} style={linkStyle}>{l}</RLink>
          )}
        </div>
        <div>
          <div style={colHeader}>Services</div>
          {services.map(([slug,name])=>
            <RLink key={slug} to={`/services/${slug}`} style={linkStyle}>{name}</RLink>
          )}
        </div>
        <div>
          <div style={colHeader}>Legal &amp; SMS</div>
          {legalLinks.map(([href,label])=>
            <a key={href} href={href} style={linkStyle}>{label}</a>
          )}
        </div>
      </div>
      <div style={{
        borderTop:'1px solid rgba(196,154,108,0.35)',
        margin:'0 var(--container-pad)',
        padding:'20px 0',
        fontFamily:'var(--font-body)', fontSize:12, color:textCreamMuted,
        maxWidth:'var(--container-max)',
        display:'flex', flexWrap:'wrap', gap:18, alignItems:'center', justifyContent:'space-between',
      }}>
        <div>© 2026 BJO Ventures LLC. All rights reserved.</div>
        <div style={{display:'flex',gap:18,flexWrap:'wrap'}}>
          <a href="/privacy.html" style={{color:textCreamMuted,textDecoration:'none'}}>Privacy</a>
          <a href="/terms.html" style={{color:textCreamMuted,textDecoration:'none'}}>SMS Terms</a>
          <a href="/sms-programs.html" style={{color:textCreamMuted,textDecoration:'none'}}>SMS Programs</a>
        </div>
      </div>
    </footer>
  );
}

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