// Header / nav
const { useState, useEffect, useRef, useMemo } = React;

function Logo({size=46, mark=true, iconOnly=false, badge=false, home=false}){
  // Double-ring badge with the Ampersand Peach mark — matches the Logo Asset Pack.
  return (
    <a href={home ? 'P%26L%20England%20Homepage.html#top' : '#top'} style={{display:'flex', alignItems:'center', gap:14}}>
      <span style={{
        width:size, height:size, borderRadius:'50%',
        background:'var(--cream)',
        border:`1.5px solid var(--tomato)`,
        position:'relative',
        flexShrink:0,
        display:'grid', placeItems:'center'
      }}>
        {badge && <span style={{position:'absolute', bottom:-2, right:-2, width:9, height:9, borderRadius:'50%', background:'#2ECC71', border:'2px solid var(--paper-2)', zIndex:1}}/>}
        <span style={{
          position:'absolute', inset:'10%', borderRadius:'50%',
          border:'1.2px solid var(--tomato)'
        }}/>
        <svg width={size*0.58} height={size*0.62} viewBox="0 0 60 64" aria-hidden style={{position:'relative'}}>
          {/* stem */}
          <path d="M30 22 C 30 14, 30 10, 30 6" stroke="#1A2418" strokeWidth="1.6" strokeLinecap="round" fill="none"/>
          {/* leaf — single, to the right */}
          <path d="M30 12 C 36 8, 44 8, 46 14 C 42 18, 34 18, 30 12 Z" fill="#1F3D2E"/>
          {/* fruit body — round plum/cherry */}
          <ellipse cx="30" cy="40" rx="18" ry="19" fill="#D63B27"/>
          {/* center dimple */}
          <path d="M30 23 C 28 36, 28 52, 30 58" stroke="#1A2418" strokeOpacity="0.22" strokeWidth="1.4" fill="none"/>
          {/* highlight */}
          <ellipse cx="22" cy="32" rx="3.6" ry="6" fill="#FAF6EC" opacity="0.34" transform="rotate(-22 22 32)"/>
        </svg>
      </span>
      <span style={{
        display:'flex', flexDirection:'column', lineHeight:1,
        maxWidth: iconOnly ? 0 : 160, opacity: iconOnly ? 0 : 1,
        overflow:'hidden', whiteSpace:'nowrap',
        transition:'max-width 0.45s ease, opacity 0.3s ease'
      }}>
        <span style={{fontFamily:"'NormalAmp', 'Archivo', 'Arial Black', sans-serif", fontWeight:800, color:'var(--tomato)', fontSize:20, letterSpacing:'-0.02em'}}>P&amp;L England</span>
        <span className="brand-tagline" style={{fontSize:9.5, fontWeight:600, color:'var(--ink-3)', letterSpacing:'0.32em', textTransform:'uppercase', marginTop:5}}>Simply Fresh</span>
      </span>
    </a>
  );
}

function Nav({ home }){
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(()=>{
    const onScroll = ()=> setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return ()=> window.removeEventListener('scroll', onScroll);
  },[]);
  const prefix = home ? 'P%26L%20England%20Homepage.html' : '';
  const links = [
    ['About', prefix + '#about'],
    ['Pricing', prefix + '#pricing'],
    ['Routes', prefix + '#routes'],
    ['Documentation', prefix + '#documentation'],
    ['Contact', prefix + '#quote'],
  ];
  return (
    <header style={{
      position:'sticky', top:0, zIndex:50,
      display:'flex', flexDirection:'column', alignItems:'center',
      padding: scrolled ? '14px 20px' : '0',
      transition:'padding 0.45s ease'
    }}>
      <div className="container" style={{
        display:'flex', alignItems:'center', justifyContent:'space-between', gap: scrolled ? 30 : 24,
        maxWidth: scrolled ? 720 : 1240,
        width:'100%',
        padding: scrolled ? '10px 12px 10px 20px' : '18px 16px',
        borderRadius: scrolled ? 999 : 0,
        background: scrolled ? 'rgba(255,255,255,0.97)' : 'transparent',
        backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
        boxShadow: scrolled ? '0 12px 32px -12px rgba(0,0,0,0.18)' : 'none',
        border: scrolled ? '1px solid var(--line-soft)' : '1px solid transparent',
        transition:'max-width 0.45s ease, padding 0.45s ease, border-radius 0.45s ease, background 0.4s ease, box-shadow 0.45s ease, gap 0.45s ease, border-color 0.4s ease'
      }}>
        <Logo size={scrolled ? 38 : 46} iconOnly={scrolled} home={home}/>
        <nav className="nav-links" style={{display:'flex', gap: scrolled ? 22 : 32, alignItems:'center', transition:'gap 0.45s ease'}}>
          {links.map(([l,h])=>(
            <a key={h} href={h} style={{fontSize: scrolled ? 13.5 : 14.5, fontWeight:500, color:'var(--ink-2)', transition:'color .15s, font-size 0.45s ease'}}
               onMouseEnter={e=>e.currentTarget.style.color='var(--ink)'}
               onMouseLeave={e=>e.currentTarget.style.color='var(--ink-2)'}>
              {l}
            </a>
          ))}
        </nav>
        <div className="nav-cta-group" style={{display:'flex', gap:10, alignItems:'center'}}>
          <a href="/customerportal/" className="btn btn-ghost nav-portal-btn" style={{
            padding:'10px 14px', fontSize:13,
            maxWidth: scrolled ? 0 : 170, opacity: scrolled ? 0 : 1,
            overflow:'hidden', whiteSpace:'nowrap',
            marginRight: scrolled ? -10 : 0,
            transition:'max-width 0.45s ease, opacity 0.3s ease, margin-right 0.45s ease'
          }}>
            Customer Portal
          </a>
          <a href="/trackyourcargo/" className="btn btn-ghost" style={{
            padding:'10px 14px', fontSize:13,
            maxWidth: scrolled ? 0 : 200, opacity: scrolled ? 0 : 1,
            overflow:'hidden', whiteSpace:'nowrap',
            marginRight: scrolled ? -10 : 0,
            transition:'max-width 0.45s ease, opacity 0.3s ease, margin-right 0.45s ease'
          }}>
            <span className="live-dot"/>
            <span className="wa-label">Track Your Cargo</span>
          </a>
          <a href={prefix + '#produce'} className="btn btn-primary" style={{padding: scrolled ? '10px 16px' : '12px 18px', fontSize: scrolled ? 13 : 13.5, transition:'padding 0.45s ease, font-size 0.45s ease'}}>
            View Produce <Icon.Arrow size={14}/>
          </a>
          <button className="menu-btn" onClick={()=>setOpen(!open)} style={{display:'none'}}>
            <Icon.Menu/>
          </button>
        </div>
      </div>
      {open && (
        <div className="mobile-menu" style={{margin:'10px 20px 0', borderRadius:'var(--radius-lg)', width:'calc(100% - 40px)', background:'var(--paper)', boxShadow:'0 20px 48px -16px rgba(0,0,0,0.25)', border:'1px solid var(--line-soft)', overflow:'hidden'}}>
          <div style={{display:'flex', flexDirection:'column'}}>
            {links.map(([l,h])=>(<a key={h} href={h} onClick={()=>setOpen(false)} style={{fontSize:16.5, fontFamily:'var(--sans)', fontWeight:500, padding:'16px 24px', borderBottom:'1px solid var(--line-soft)', color:'var(--ink)'}}>{l}</a>))}
            <a href="/customerportal/" onClick={()=>setOpen(false)} style={{fontSize:16.5, fontFamily:'var(--sans)', fontWeight:500, padding:'16px 24px', borderBottom:'1px solid var(--line-soft)', color:'var(--ink)'}}>Customer Portal</a>
            <a href="/vendorportal/" onClick={()=>setOpen(false)} style={{fontSize:16.5, fontFamily:'var(--sans)', fontWeight:500, padding:'16px 24px', borderBottom:'1px solid var(--line-soft)', color:'var(--ink)'}}>Vendor Portal</a>
            <a href="/trackyourcargo/" onClick={()=>setOpen(false)} style={{fontSize:16.5, fontFamily:'var(--sans)', fontWeight:500, padding:'16px 24px', color:'var(--ink)', display:'flex', alignItems:'center', gap:10}}><span className="live-dot"/> Track Your Cargo</a>
          </div>
        </div>
      )}
      <style>{`
@media (max-width: 1160px) {
          .nav-portal-btn { display: none !important; }
          .nav-cta-group .btn-ghost { display: none !important; }
        }
@media (max-width: 1024px) {
          .nav-links { display: none !important; }
          .menu-btn { display: flex !important; }
        }
@media (max-width: 900px) {
          .wa-label { display: none; }
        }
      `}</style>
    </header>
  );
}

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