/* global React */
const { useState, useEffect, useRef } = React;

/* ---------------- Icons (inline, minimal stroke) ---------------- */
const Icon = {
  Arrow: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
  Chev: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="square" {...p}>
      <path d="M9 6l6 6-6 6"/>
    </svg>
  ),
  Phone: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/>
    </svg>
  ),
  Mail: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 7l9 6 9-6"/>
    </svg>
  ),
  Pin: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M12 22s7-7.5 7-13a7 7 0 10-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/>
    </svg>
  ),
  Star: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M12 3l2.6 5.4 5.9.8-4.3 4.1 1 5.9L12 16.8 6.8 19.2l1-5.9L3.5 9.2l5.9-.8L12 3z"/>
    </svg>
  ),
  Building: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <rect x="4" y="3" width="16" height="18"/><path d="M9 7h.01M15 7h.01M9 11h.01M15 11h.01M9 15h.01M15 15h.01"/>
    </svg>
  ),
  Tools: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M14 7l3-3 3 3-3 3-3-3zM7 14l-4 4 3 3 4-4M14 7l-7 7M17 10l-3 3"/>
    </svg>
  ),
  Spool: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <ellipse cx="12" cy="6" rx="6" ry="2"/><path d="M6 6v12c0 1.1 2.7 2 6 2s6-.9 6-2V6"/><path d="M8 9c1 .5 2.5 1 4 1s3-.5 4-1M8 13c1 .5 2.5 1 4 1s3-.5 4-1"/>
    </svg>
  ),
  Shield: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/>
    </svg>
  ),
  Sparkle: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M12 3v6M12 15v6M3 12h6M15 12h6M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/>
    </svg>
  ),
  Drop: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M12 3s7 7 7 12a7 7 0 11-14 0c0-5 7-12 7-12z"/>
    </svg>
  ),
  Layers: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5M3 17l9 5 9-5"/>
    </svg>
  ),
  Ring: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M19 12a7 7 0 11-3-5.7"/>
    </svg>
  ),
  Clock: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>
    </svg>
  ),
  Dollar: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M12 3v18M16 7c0-2-2-3-4-3s-4 1-4 3 2 3 4 3 4 1 4 3-2 3-4 3-4-1-4-3"/>
    </svg>
  ),
  Palette: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M12 3a9 9 0 100 18c1.7 0 2-1.5 1-2.5s-1-2.5 1-2.5h2a5 5 0 005-5c0-4.4-4-8-9-8z"/>
      <circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/>
    </svg>
  ),
  Photo: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <rect x="3" y="5" width="18" height="14"/><circle cx="9" cy="11" r="2"/><path d="M3 17l5-5 4 4 3-3 6 6"/>
    </svg>
  ),
};

/* ---------------- Image placeholder ---------------- */
function Imgph({ label, dark, style }) {
  return (
    <div className={"imgph" + (dark ? " dark" : "")} style={style}>
      <span className="label">{label}</span>
    </div>
  );
}

/* ---------------- Header ---------------- */
function Header({ active, onJump, onQuote }) {
  const [compact, setCompact] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef(null);
  const hamburgerRef = useRef(null);

  useEffect(() => {
    const onScroll = () => setCompact(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    if (!menuOpen) return;
    const onClickOutside = (e) => {
      if (hamburgerRef.current && hamburgerRef.current.contains(e.target)) return;
      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
    };
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    document.addEventListener('mousedown', onClickOutside);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onClickOutside);
      document.removeEventListener('keydown', onKey);
    };
  }, [menuOpen]);

  const items = [
    { id: 'home', label: 'Home' },
    { id: 'services', label: 'Services' },
    { id: 'display', label: 'Promotional Products' },
    { id: 'team', label: 'Team Stores' },
    { id: 'catalog', label: 'Catalog' },
    { id: 'about', label: 'About Us' },
  ];

  const handleNavClick = (id) => {
    setMenuOpen(false);
    onJump(id);
  };

  return (
    <header className={"site-header" + (compact ? ' compact' : '')}>
      <div className="wrap">
        <a href="#home" className="brand" onClick={(e) => { e.preventDefault(); onJump('home'); }}>
          <img src="assets/lytle-logo.png" alt="Lytle Custom Apparel" className="brand-logo" />
        </a>
        <nav className="nav">
          {items.map(it => (
            <a key={it.id} href={"#" + it.id}
               className={active === it.id ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); onJump(it.id); }}>
              {it.label}
            </a>
          ))}
        </nav>
        <div className="header-actions">
          <button className="btn" onClick={onQuote}>Get a Quote</button>
          <button
            ref={hamburgerRef}
            className="hamburger"
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label="Toggle menu"
            aria-expanded={menuOpen}>
            <span className={'hamburger-icon' + (menuOpen ? ' open' : '')}>
              <span/><span/><span/>
            </span>
          </button>
        </div>
      </div>
      <div className={'mobile-menu' + (menuOpen ? ' open' : '')} ref={menuRef}>
        <nav>
          {items.map(it => (
            <a key={it.id} href={"#" + it.id}
               className={active === it.id ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); handleNavClick(it.id); }}>
              {it.label}
            </a>
          ))}
        </nav>
      </div>
    </header>
  );
}

/* ---------------- Hero ---------------- */
const HERO_SLIDES = ['assets/hero-1.png', 'assets/hero-2.png', 'assets/hero-3.png'];
const HERO_ROTATE_MS = 4000;

function Hero({ onQuote, onJump }) {
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setActive((i) => (i + 1) % HERO_SLIDES.length);
    }, HERO_ROTATE_MS);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="hero" id="home">
      <div className="bg">
        {HERO_SLIDES.map((src, i) => (
          <div
            key={src}
            className={`slide${i === active ? ' active' : ''}`}
            style={{ backgroundImage: `url('${src}')` }}
          />
        ))}
      </div>
      <div className="wrap">
        <div className="hero-copy reveal in">
          <h1>
            Custom Printing<br />
            <span className="red">Done Right</span><span className="stroke"> </span><br />
            Since 1989.
          </h1>
          <p>Delivering exceptional custom printing for businesses, organizations, events, and communities.</p>
          <div className="hero-actions">
            <button className="btn" onClick={() => onJump('services')}>Our Services</button>
            <button className="btn ghost" onClick={onQuote}>Get a Quote</button>
          </div>
        </div>
        <HeroImageSlot />
      </div>
    </section>
  );
}
function HeroImageSlot() {
  // Only visible in split hero variant via CSS
  return <div className="hero-image-slot" />;
}

window.LYTLE_UI = { Icon, Imgph, Header, Hero };