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

/* ---------- Icons ---------- */
const Icon = {
  arrow: (props) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="square"/>
    </svg>
  ),
  menu: () => (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
      <path d="M3 7h16M3 15h16" stroke="currentColor" strokeWidth="1.4"/>
    </svg>
  ),
  close: () => (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
      <path d="M4 4l14 14M18 4L4 18" stroke="currentColor" strokeWidth="1.4"/>
    </svg>
  ),
  instagram: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <rect x="3" y="3" width="18" height="18" rx="4.5" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
    </svg>
  ),
  tiktok: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path d="M14 3v10.5a3.5 3.5 0 11-3.5-3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
      <path d="M14 3c.5 2.5 2.5 4.5 5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  youtube: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <rect x="2" y="5" width="20" height="14" rx="3" stroke="currentColor" strokeWidth="1.4"/>
      <path d="M10 9l5 3-5 3V9z" fill="currentColor"/>
    </svg>
  ),
  // Pillar icons — minimal line
  sim: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="13" r="5" stroke="currentColor" strokeWidth="1.2"/>
      <path d="M16 18v10M10 28h12" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
      <circle cx="13" cy="11.5" r="0.7" fill="currentColor"/>
      <circle cx="18" cy="11" r="0.7" fill="currentColor"/>
      <circle cx="16" cy="14.5" r="0.7" fill="currentColor"/>
      <circle cx="19" cy="14" r="0.7" fill="currentColor"/>
      <circle cx="14" cy="14" r="0.7" fill="currentColor"/>
    </svg>
  ),
  apparel: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <path d="M8 8l4-3 2 2h4l2-2 4 3-3 4-2-1v14H10V11l-2 1-3-4z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/>
    </svg>
  ),
  building: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <path d="M5 28V10l11-5 11 5v18" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/>
      <path d="M11 28v-8h10v8M15 14h2" stroke="currentColor" strokeWidth="1.2"/>
    </svg>
  ),
  community: () => (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
      <circle cx="14" cy="11" r="4" stroke="currentColor" strokeWidth="1.2"/>
      <path d="M5 24c1-5 4.5-7 9-7s8 2 9 7" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
    </svg>
  ),
  gate: () => (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
      <path d="M4 24V7l10-3 10 3v17M4 24h20" stroke="currentColor" strokeWidth="1.2"/>
      <path d="M10 24V13h8v11" stroke="currentColor" strokeWidth="1.2"/>
    </svg>
  ),
  style: () => (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
      <circle cx="14" cy="14" r="9" stroke="currentColor" strokeWidth="1.2"/>
      <path d="M14 5c4 4 4 14 0 18M14 5c-4 4-4 14 0 18M5 14h18" stroke="currentColor" strokeWidth="1.2"/>
    </svg>
  ),
};

/* ---------- Photo Placeholder ---------- */
function Photo({ caption, dark=false, aspect=null, style={}, className='', tag=true, src=null, alt='', objectPosition='center' }) {
  const s = { ...style };
  if (aspect) s.aspectRatio = aspect;
  return (
    <div className={`photo ${dark ? 'dark' : ''} ${src ? 'has-src' : ''} ${className}`} style={s}>
      {src && (
        <img
          src={src}
          alt={alt}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition }}
        />
      )}
      {tag && !src && <span className="photo-tag" />}
      {caption && !src && <span className="photo-caption">{caption}</span>}
    </div>
  );
}

/* ---------- Navigation ---------- */
function Nav({ current, go, onDark=false }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    ['our-story', 'About'],
    ['rentals', 'Rentals'],
    ['apparel', 'Apparel'],
    ['the-club', 'Club'],
    ['contact', 'Contact'],
  ];
  return (
    <>
      <nav className={`nav ${onDark && !scrolled ? 'on-dark' : ''}`}>
        <div className="nav-inner">
          <div className="nav-left nav-logo" onClick={() => go('home')} style={{ cursor: 'pointer' }}>
            <img className="nav-logo-img" src="assets/8tee-logo-white.svg" alt="8tee Golf" style={{ height: 42, width: 'auto', display: 'block' }} />
          </div>
          <div className="nav-links">
            {links.map(([k, label]) => (
              <button
                key={k}
                className={`nav-link ${current === k ? 'active' : ''}`}
                onClick={() => go(k)}
              >{label}</button>
            ))}
            <button className="nav-cta" onClick={() => go('rentals')}>Book a Simulator</button>
          </div>
          <button className="mobile-toggle" onClick={() => setOpen(!open)} aria-label="menu" style={{ color: onDark && !scrolled ? 'var(--cream)' : 'var(--charcoal)' }}>
            {open ? <Icon.close /> : <Icon.menu />}
          </button>
        </div>
      </nav>
      <div className={`mobile-drawer ${open ? 'open' : ''}`}>
        {links.map(([k, label]) => (
          <button key={k} className="nav-link" onClick={() => { go(k); setOpen(false); }}>{label}</button>
        ))}
        <div style={{ marginTop: 32 }}>
          <button className="btn btn-camel" onClick={() => { go('rentals'); setOpen(false); }}>Book a Simulator</button>
        </div>
      </div>
    </>
  );
}

/* ---------- Footer ---------- */
function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="footer-cols" style={{ gridTemplateColumns: '1fr 1fr', maxWidth: 700 }}>
        <div className="footer-col">
          <h5>Explore</h5>
          <a onClick={() => go('home')}>Home</a>
          <a onClick={() => go('our-story')}>Our Story</a>
          <a onClick={() => go('the-club')}>The Club</a>
          <a onClick={() => go('contact')}>Contact</a>
        </div>
        <div className="footer-col">
          <h5>What we do</h5>
          <a onClick={() => go('rentals')}>Simulator Rentals</a>
          <a onClick={() => go('apparel')}>Apparel & Gear</a>
          <a onClick={() => go('the-club')}>The Club</a>
          <a onClick={() => go('the-club')}>Events</a>
        </div>
      </div>
      <div className="footer-social">
        <a aria-label="Instagram" href="https://www.instagram.com/8teegolf" target="_blank" rel="noopener"><Icon.instagram /></a>
        <a aria-label="YouTube" href="https://www.youtube.com/@8teegolf/shorts" target="_blank" rel="noopener"><Icon.youtube /></a>
      </div>
      <div className="footer-bottom">
        <div>© 2026 8tee Golf LLC. All rights reserved.</div>
        <div>
          <a href="#" onClick={(e) => e.preventDefault()}>Privacy Policy</a>
          <a href="#" onClick={(e) => e.preventDefault()}>Terms of Service</a>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Toast ---------- */
function useToast() {
  const [msg, setMsg] = useState(null);
  const show = (m) => {
    setMsg(m);
    setTimeout(() => setMsg(null), 3400);
  };
  const node = msg ? <div className="toast">{msg}</div> : null;
  return [show, node];
}

/* ---------- Reveal on scroll ---------- */
function Reveal({ children, delay = 0, as: Tag='div', ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); io.disconnect(); }
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref} className={`reveal ${seen ? 'in' : ''}`} style={{ transitionDelay: `${delay}ms` }} {...rest}>
      {children}
    </Tag>
  );
}

Object.assign(window, { Icon, Photo, Nav, Footer, useToast, Reveal });
