// Header + Footer + Tweaks panel
const { useState, useEffect } = React;

function Header({ route, setRoute, onApply }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const nav = [
    { id: 'home', label: 'Home' },
    { id: 'services', label: 'Services' },
    { id: 'fleet', label: 'Fleet' },
    { id: 'about', label: 'About' },
    { id: 'safety', label: 'Safety' },
    { id: 'contact', label: 'Contact' },
  ];

  return (
    <header className={`site-header ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="header-inner">
        <a href="#" onClick={(e) => { e.preventDefault(); setRoute('home'); }} className="brand">
          <img src="assets/logo-b.png" alt="Babiline LLC" />
          <span className="brand-text">
            <span className="brand-name">BABILINE LLC</span>
            <span className="brand-tag">EXPEDITED LOGISTICS</span>
          </span>
        </a>
        <nav className="desktop-nav">
          {nav.map(n => (
            <a key={n.id} href="#" onClick={(e) => { e.preventDefault(); setRoute(n.id); }} className={route === n.id ? 'active' : ''}>
              {n.label}
            </a>
          ))}
        </nav>
        <div className="header-cta">
          <a href="tel:+14842355888" className="phone-link">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><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"/></svg>
            <span>+1 484 235 5888</span>
          </a>
          <button className="btn btn-primary" onClick={() => setRoute('careers')}>
            Join Our Fleet
          </button>
          <button className="mobile-toggle" onClick={() => setMobileOpen(!mobileOpen)} aria-label="Menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      {mobileOpen && (
        <div className="mobile-nav">
          {nav.map(n => (
            <a key={n.id} href="#" onClick={(e) => { e.preventDefault(); setRoute(n.id); setMobileOpen(false); }}>
              {n.label}
            </a>
          ))}
          <a href="#" onClick={(e) => { e.preventDefault(); setRoute('careers'); setMobileOpen(false); }} className="mobile-cta">
            Join Our Fleet →
          </a>
        </div>
      )}
    </header>
  );
}

function Footer({ setRoute }) {
  return (
    <footer className="site-footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <img src="assets/logo-full.png" alt="Babiline LLC — Expedited Logistics" />
          <p className="footer-about">
            Expedited logistics trusted by brokers and driven by owner-operators. 24/7 dispatch, live tracking, dedicated units.
          </p>
          <div className="footer-contact">
            <a href="tel:+14842355888">+1 484 235 5888</a>
            <a href="mailto:contact@babilineinc.com">contact@babilineinc.com</a>
          </div>
        </div>
        <div>
          <h4>Company</h4>
          <a href="#" onClick={(e) => { e.preventDefault(); setRoute('about'); }}>About</a>
          <a href="#" onClick={(e) => { e.preventDefault(); setRoute('fleet'); }}>Fleet</a>
          <a href="#" onClick={(e) => { e.preventDefault(); setRoute('safety'); }}>Safety & Compliance</a>
          <a href="#" onClick={(e) => { e.preventDefault(); setRoute('contact'); }}>Contact</a>
        </div>
        <div>
          <h4>For Brokers</h4>
          <a href="#" onClick={(e) => { e.preventDefault(); setRoute('services'); }}>Services</a>
          <a href="#" onClick={(e) => { e.preventDefault(); setRoute('services'); }}>Equipment Types</a>
          <a href="tel:+14842355888">Book a Load</a>
          <a href="mailto:contact@babilineinc.com">Request Quote</a>
        </div>
        <div>
          <h4>For Drivers</h4>
          <a href="#" onClick={(e) => { e.preventDefault(); setRoute('careers'); }}>Why Babiline</a>
          <a href="#" onClick={(e) => { e.preventDefault(); setRoute('careers'); }}>Apply Now</a>
          <a href="#" onClick={(e) => { e.preventDefault(); setRoute('careers'); }}>Pay & Benefits</a>
          <a href="https://www.facebook.com/profile.php?id=61570169244859" target="_blank">Facebook</a>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Babiline LLC. All rights reserved.</div>
        <div className="footer-meta">
          <span>24/7 Dispatch & Operations</span>
          <span className="sep">•</span>
          <span>Based in Pennsylvania, USA</span>
        </div>
      </div>
    </footer>
  );
}

function TweaksPanel({ tweaks, setTweaks }) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const update = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.applyTweaks(next);
    localStorage.setItem('babiline_tweaks', JSON.stringify(next));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  if (!visible) return null;

  const accents = [
    { name: 'Signature Red', val: '#D32027' },
    { name: 'Deep Navy', val: '#0F2C4A' },
    { name: 'Amber', val: '#E8A23A' },
    { name: 'Electric', val: '#1E5FD9' },
    { name: 'Forest', val: '#2D6A4F' },
  ];

  const papers = [
    { name: 'Clean White', val: '#FFFFFF' },
    { name: 'Cool Gray', val: '#F4F6F9' },
    { name: 'Warm Cream', val: '#F6F4EF' },
    { name: 'Soft Stone', val: '#EFEEEA' },
  ];

  return (
    <div className="tweaks-panel">
      <div className="tweaks-header">
        <h4>Tweaks</h4>
        <button onClick={() => setVisible(false)}>×</button>
      </div>
      <div className="tweak-group">
        <label>Accent color</label>
        <div className="swatches">
          {accents.map(a => (
            <button key={a.val} className={`swatch ${tweaks.accent === a.val ? 'active' : ''}`}
              style={{ background: a.val }} onClick={() => update({ accent: a.val })} title={a.name} />
          ))}
        </div>
      </div>
      <div className="tweak-group">
        <label>Background tone</label>
        <div className="swatches">
          {papers.map(p => (
            <button key={p.val} className={`swatch ${tweaks.paper === p.val ? 'active' : ''}`}
              style={{ background: p.val, border: '1px solid rgba(0,0,0,0.1)' }}
              onClick={() => update({ paper: p.val })} title={p.name} />
          ))}
        </div>
      </div>
      <div className="tweak-group">
        <label>Hero slogan</label>
        <div className="slogan-picker">
          <button className={`slogan-opt ${tweaks.slogan === -1 ? 'active' : ''}`}
            onClick={() => update({ slogan: -1 })}>
            <span className="slogan-idx">🎲</span>
            <span className="slogan-text">Random per visit</span>
          </button>
          {(window.SLOGANS || []).map((s, i) => (
            <button key={i} className={`slogan-opt ${tweaks.slogan === i ? 'active' : ''}`}
              onClick={() => update({ slogan: i })}>
              <span className="slogan-idx">{String(i + 1).padStart(2, '0')}</span>
              <span className="slogan-text">{s.line1} {s.line2}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="tweak-group">
        <label>Density</label>
        <div className="seg">
          {['compact', 'comfortable', 'spacious'].map(d => (
            <button key={d} className={tweaks.density === d ? 'active' : ''}
              onClick={() => update({ density: d })}>{d}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Header, Footer, TweaksPanel });