// ASA Timmerwerken v2 — Components & shared utilities

const MEDIA = {
  // Videos (Mixkit — royalty-free)
  heroVideo:    'https://assets.mixkit.co/videos/4196/4196-720.mp4',
  showcaseVideo:'https://assets.mixkit.co/videos/4046/4046-720.mp4',
  workVideo:    'https://assets.mixkit.co/videos/4648/4648-720.mp4',
  paintVideo:   'https://assets.mixkit.co/videos/32537/32537-720.mp4',

  // Photos (Unsplash)
  heroPoster:   'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1800&q=85',
  overOns:      'https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=900&q=80&fit=crop',
  aanbouw:      'https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=900&q=80&fit=crop',
  renovatie:    'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=900&q=80&fit=crop',
  badkamer:     'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=900&q=80&fit=crop',
  maatwerk:     'https://images.unsplash.com/photo-1565538810643-b5bdb714032a?w=900&q=80&fit=crop',
  gallery1:     'https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=600&q=80',
  gallery2:     'https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?w=600&q=80',
  gallery3:     'https://images.unsplash.com/photo-1484154218962-a197022b5858?w=600&q=80',
  gallery4:     'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&q=80',
  gallery5:     'https://images.unsplash.com/photo-1600573472591-ee6b68d14c68?w=600&q=80',
  gallery6:     'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=600&q=80',
  cta:          'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=1400&q=80',
};

const P = {
  gold:    '#C4956A',
  goldDk:  '#A87848',
  goldLt:  '#E8D5B8',
  ink:     '#1C1916',
  ink2:    '#2A2520',
  ink3:    '#38332E',
  parch:   '#FAF6EF',
  sand:    '#EDE5D8',
  linen:   '#F2EDE4',
  warm:    '#3C3830',
  warmMid: '#8A7F74',
  warmBdr: '#D5CCC0',
  white:   '#FFFFFF',
};

const NAV_LINKS = [
  { label: 'Home',      page: 'home' },
  { label: 'Over ons',  page: 'over' },
  { label: 'Diensten',  page: 'diensten' },
  { label: 'Calculator', page: 'calculator' },
  { label: 'Contact',   page: 'contact' },
];

// ── useMobile ────────────────────────────────────────────────
function useMobile() {
  const [m, setM] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const h = () => setM(window.innerWidth < 768);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return m;
}

// ── Nav ─────────────────────────────────────────────────────
function Nav({ currentPage, navigate }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const mob = useMobile();

  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  React.useEffect(() => { setMenuOpen(false); }, [currentPage]);

  const navBg = scrolled || menuOpen
    ? 'rgba(26,22,18,0.97)'
    : currentPage === 'home' ? 'transparent' : 'rgba(26,22,18,0.97)';

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 500,
      background: navBg,
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(196,149,106,0.12)' : 'none',
      transition: 'background 0.4s, border 0.4s',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 64, maxWidth: 1280, margin: '0 auto',
        padding: mob ? '0 20px' : '0 48px',
      }}>

        {/* Logo */}
        <a href="#" onClick={e => { e.preventDefault(); navigate('home'); setMenuOpen(false); window.scrollTo(0,0); }}
          style={{ fontFamily: "'Syne',sans-serif", fontSize: mob ? 13 : 15, fontWeight: 700, color: '#FAF6EF', letterSpacing: '0.1em', textDecoration: 'none', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: P.gold, flexShrink: 0 }}></span>
          ASA Timmerwerken
        </a>

        {mob ? (
          /* Hamburger knop */
          <button onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu"
            style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 5, padding: 8, marginRight: -8 }}>
            <span style={{ display: 'block', width: 22, height: 2, background: '#FAF6EF', borderRadius: 1, transition: 'transform 0.25s', transform: menuOpen ? 'translateY(7px) rotate(45deg)' : 'none' }}></span>
            <span style={{ display: 'block', width: 22, height: 2, background: '#FAF6EF', borderRadius: 1, transition: 'opacity 0.25s', opacity: menuOpen ? 0 : 1 }}></span>
            <span style={{ display: 'block', width: 22, height: 2, background: '#FAF6EF', borderRadius: 1, transition: 'transform 0.25s', transform: menuOpen ? 'translateY(-7px) rotate(-45deg)' : 'none' }}></span>
          </button>
        ) : (
          <>
            {/* Desktop nav links */}
            <ul style={{ display: 'flex', gap: 40, listStyle: 'none', margin: 0, padding: 0 }}>
              {NAV_LINKS.map(l => (
                <li key={l.page}>
                  <a href="#"
                    style={{ color: currentPage === l.page ? '#FAF6EF' : 'rgba(250,246,239,0.5)', textDecoration: 'none', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 400, transition: 'color 0.2s', paddingBottom: 3, borderBottom: currentPage === l.page ? `1px solid ${P.gold}` : '1px solid transparent' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#FAF6EF'}
                    onMouseLeave={e => e.currentTarget.style.color = currentPage === l.page ? '#FAF6EF' : 'rgba(250,246,239,0.5)'}
                    onClick={e => { e.preventDefault(); navigate(l.page); window.scrollTo(0,0); }}>
                    {l.label}
                  </a>
                </li>
              ))}
            </ul>

            {/* Desktop CTA */}
            <a href="tel:+31630133754" style={{
              border: `1px solid rgba(196,149,106,0.45)`, color: '#FAF6EF', fontFamily: "'DM Sans',sans-serif", fontSize: 12, letterSpacing: '0.09em', textTransform: 'uppercase', padding: '9px 22px', textDecoration: 'none', transition: 'all 0.25s',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = P.gold; e.currentTarget.style.borderColor = P.gold; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(196,149,106,0.45)'; }}>
              Bel direct
            </a>
          </>
        )}
      </div>

      {/* Mobiel uitklapmenu */}
      {mob && (
        <div style={{
          position: 'fixed', top: 64, left: 0, right: 0, bottom: 0,
          background: 'rgba(26,22,18,0.98)',
          display: 'flex', flexDirection: 'column',
          padding: '32px 24px 48px',
          zIndex: 600,
          overflowY: 'auto',
          transform: menuOpen ? 'translateX(0)' : 'translateX(100%)',
          transition: 'transform 0.3s cubic-bezier(0.4,0,0.2,1)',
          pointerEvents: menuOpen ? 'auto' : 'none',
        }}>
          {NAV_LINKS.map(l => (
            <a key={l.page} href="#"
              onClick={e => { e.preventDefault(); navigate(l.page); setMenuOpen(false); window.scrollTo(0,0); }}
              style={{ fontFamily: "'Syne',sans-serif", fontSize: 32, fontWeight: 700, color: currentPage === l.page ? P.gold : '#FAF6EF', textDecoration: 'none', padding: '18px 0', borderBottom: '1px solid rgba(255,255,255,0.06)', display: 'block' }}>
              {l.label}
            </a>
          ))}
          <a href="tel:+31630133754" style={{ marginTop: 36, display: 'inline-flex', background: P.gold, color: '#fff', padding: '14px 28px', fontSize: 13, textDecoration: 'none', letterSpacing: '0.09em', textTransform: 'uppercase', fontFamily: "'DM Sans',sans-serif", alignSelf: 'flex-start' }}>
            Bel direct
          </a>
        </div>
      )}
    </nav>
  );
}

// ── Footer ───────────────────────────────────────────────────
function Footer({ navigate }) {
  const mob = useMobile();
  return (
    <footer style={{ background: P.ink, borderTop: `1px solid ${P.ink3}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: mob ? '48px 20px 32px' : '72px 48px 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '2fr 1fr 1fr 1.5fr', gap: mob ? 28 : 56, paddingBottom: mob ? 28 : 56, borderBottom: `1px solid ${P.ink3}`, marginBottom: 24 }}>

          {/* Brand blok */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: P.gold, flexShrink: 0, display: 'inline-block' }}></span>
              <span style={{ fontFamily: "'Syne',sans-serif", fontSize: 14, fontWeight: 700, color: '#FAF6EF', letterSpacing: '0.08em', textTransform: 'uppercase' }}>ASA Timmerwerken</span>
            </div>
            <p style={{ fontSize: 13, color: '#7A7064', lineHeight: 1.8, maxWidth: 280 }}>Renovatie, aanbouw en maatwerk voor woningen en bedrijfspanden in Utrecht en omgeving. Vakwerk, helder geregeld.</p>
            <div style={{ marginTop: 20, paddingTop: 20, borderTop: `1px solid ${P.ink3}` }}>
              <div style={{ fontSize: 11, color: P.gold, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>Werkgebied</div>
              <div style={{ fontSize: 13, color: '#7A7064' }}>Utrecht · Zeist · Houten · Nieuwegein · Maarssen</div>
            </div>
          </div>

          {/* Navigatie & Diensten — alleen desktop */}
          {!mob && (
            <>
              <div>
                <div style={{ fontSize: 10, color: '#5A5550', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 20 }}>Navigatie</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {NAV_LINKS.map(l => (
                    <a key={l.page} href="#" onClick={e => { e.preventDefault(); navigate(l.page); window.scrollTo(0,0); }}
                      style={{ fontSize: 13, color: '#6A6460', textDecoration: 'none', transition: 'color 0.15s' }}
                      onMouseEnter={e => e.currentTarget.style.color = '#FAF6EF'}
                      onMouseLeave={e => e.currentTarget.style.color = '#6A6460'}>{l.label}</a>
                  ))}
                </div>
              </div>
              <div>
                <div style={{ fontSize: 10, color: '#5A5550', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 20 }}>Diensten</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {['Aanbouw','Complete renovatie','Badkamers','Zolders','Maatwerk','Kozijnen'].map(s => (
                    <a key={s} href="#" onClick={e => { e.preventDefault(); navigate('diensten'); window.scrollTo(0,0); }}
                      style={{ fontSize: 13, color: '#6A6460', textDecoration: 'none', transition: 'color 0.15s' }}
                      onMouseEnter={e => e.currentTarget.style.color = '#FAF6EF'}
                      onMouseLeave={e => e.currentTarget.style.color = '#6A6460'}>{s}</a>
                  ))}
                </div>
              </div>
            </>
          )}

          {/* Contact */}
          <div>
            <div style={{ fontSize: 10, color: '#5A5550', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 20 }}>Contact</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <a href="tel:+31630133754" style={{ fontSize: 14, color: '#FAF6EF', fontWeight: 500, textDecoration: 'none' }}>+31 6 30133754</a>
              <a href="mailto:asatimmerwerken@gmail.com" style={{ fontSize: 13, color: '#6A6460', textDecoration: 'none' }}>asatimmerwerken@gmail.com</a>
              {!mob && <div style={{ fontSize: 13, color: '#6A6460', lineHeight: 1.7 }}>Pahud de Mortangesdreef 50<br />3562 AB Utrecht</div>}
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
          <div style={{ fontSize: 12, color: '#3E3A36' }}>© {new Date().getFullYear()} ASA Timmerwerken — Utrecht</div>
          <div style={{ fontSize: 12, color: '#3E3A36' }}>Alle rechten voorbehouden</div>
        </div>
      </div>
    </footer>
  );
}

// ── Tag ─────────────────────────────────────────────────────
function Tag({ children, light }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
      <span style={{ display: 'block', width: 32, height: 1, background: P.gold, flexShrink: 0 }}></span>
      <span style={{ fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 500, color: P.gold, letterSpacing: '0.16em', textTransform: 'uppercase' }}>{children}</span>
    </div>
  );
}

// ── GoldBtn ──────────────────────────────────────────────────
function GoldBtn({ children, onClick, outline, dark, href, submit }) {
  const [hov, setHov] = React.useState(false);
  const base = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontFamily: "'DM Sans',sans-serif", fontWeight: 400, cursor: 'pointer', transition: 'all 0.22s', textDecoration: 'none', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '13px 28px', border: 'none' };

  let style;
  if (outline && dark) style = { ...base, background: 'transparent', color: P.warm, border: `1px solid ${P.warmBdr}`, ...(hov ? { background: P.parch } : {}) };
  else if (outline) style = { ...base, background: 'transparent', color: '#FAF6EF', border: `1px solid rgba(196,149,106,0.4)`, ...(hov ? { background: 'rgba(196,149,106,0.1)' } : {}) };
  else style = { ...base, background: hov ? P.goldDk : P.gold, color: '#fff' };

  const props = { style, onMouseEnter: () => setHov(true), onMouseLeave: () => setHov(false), onClick };
  if (href) return <a href={href} {...props}>{children}</a>;
  if (submit) return <button type="submit" {...props}>{children}</button>;
  return <button {...props}>{children}</button>;
}

// ── VideoBackground ─────────────────────────────────────────
function VideoBg({ src, poster, overlay = 0.55, children }) {
  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      <video autoPlay muted loop playsInline preload="auto" poster={poster}
        style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', minWidth: '100%', minHeight: '100%', width: 'auto', height: 'auto', objectFit: 'cover' }}>
        <source src={src} type="video/mp4" />
      </video>
      <div style={{ position: 'absolute', inset: 0, background: `rgba(26,22,18,${overlay})` }}></div>
      <div style={{ position: 'relative', zIndex: 2 }}>{children}</div>
    </div>
  );
}

// ── VideoModal ───────────────────────────────────────────────
function VideoModal({ src, onClose }) {
  React.useEffect(() => {
    const fn = e => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', fn);
    return () => document.removeEventListener('keydown', fn);
  }, [onClose]);
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', maxWidth: 960, aspectRatio: '16/9', background: '#000' }}>
        <video controls autoPlay style={{ width: '100%', height: '100%', display: 'block' }}>
          <source src={src} type="video/mp4" />
        </video>
      </div>
      <button onClick={onClose} style={{ position: 'absolute', top: 24, right: 32, background: 'none', border: 'none', color: '#FAF6EF', fontSize: 32, cursor: 'pointer', lineHeight: 1 }}>×</button>
    </div>
  );
}

// ── ScrollReveal ─────────────────────────────────────────────
function Reveal({ children, delay = 0 }) {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} style={{ opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(28px)', transition: `opacity 0.7s ease ${delay}ms, transform 0.7s ease ${delay}ms` }}>
      {children}
    </div>
  );
}

Object.assign(window, { MEDIA, P, NAV_LINKS, useMobile, Nav, Footer, Tag, GoldBtn, VideoBg, VideoModal, Reveal });