function Companies({ accent, layout }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.15 });
    ref.current.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  const companies = [
    {
      num: '01',
      name: 'Assos Keukens & Badkamers',
      tagline: 'Showroom & specialist',
      desc: 'Van compleet ingerichte keukens en luxe badkamers tot PVC-vloeren en tegelwerk. In onze showroom vindt u alles om uw woonruimte een nieuwe identiteit te geven.',
      services: ['Keukens', 'Badkamers', 'PVC-vloeren', 'Tegels'],
      image: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?auto=format&fit=crop&w=1400&q=80',
      href: 'https://assoskeukensbadkamers.nl',
      domain: 'assoskeukensbadkamers.nl',
    },
    {
      num: '02',
      name: 'Assos Marmer',
      tagline: 'Aannemer & interieurbouw',
      desc: 'Totaalaannemer voor complete interieurbouw. Van ruwbouw tot maatwerk afwerking — wij realiseren uw volledige verbouwing met aandacht voor elk detail.',
      services: ['Interieurbouw', 'Verbouwing', 'Maatwerk', 'Marmer & natuursteen'],
      image: 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1400&q=80',
      href: 'https://assosmarmer.com',
      domain: 'assosmarmer.com',
    },
  ];

  return (
    <section id="bedrijven" ref={ref} data-screen-label="Companies" style={{
      padding: 'clamp(80px, 12vw, 160px) clamp(24px, 6vw, 80px)',
      background: 'var(--bg-2)',
      position: 'relative',
      borderTop: '1px solid var(--line)',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        {/* Section header */}
        <div className="reveal" style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24,
          textAlign: 'center', marginBottom: 'clamp(60px, 10vw, 120px)',
        }}>
          <span className="eyebrow center">Onze bedrijven</span>
          <h2 className="serif" style={{
            fontSize: 'clamp(40px, 6vw, 80px)',
            fontWeight: 400,
            lineHeight: 1.05,
            letterSpacing: '-0.02em',
            maxWidth: 900,
          }}>
            Het beste van twee <span style={{ fontStyle: 'italic', color: accent }}>specialismen</span>
          </h2>
        </div>

        {/* Cards */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: layout === 'split' ? '1fr 1fr' : '1fr',
          gap: layout === 'split' ? 'clamp(24px, 3vw, 48px)' : 'clamp(60px, 10vw, 120px)',
        }} className="companies-grid">
          {companies.map((c, i) => (
            <CompanyCard key={i} c={c} accent={accent} flipped={layout === 'stacked' && i % 2 === 1} layout={layout} />
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .companies-grid { grid-template-columns: 1fr !important; gap: 80px !important; }
          .company-stacked { grid-template-columns: 1fr !important; }
          .company-stacked .company-image { order: -1; }
        }
      `}</style>
    </section>
  );
}

function CompanyCard({ c, accent, flipped, layout }) {
  const [hover, setHover] = React.useState(false);

  if (layout === 'split') {
    return (
      <a className="reveal card" href={c.href} target="_blank" rel="noopener"
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          position: 'relative',
          display: 'block',
          aspectRatio: '4 / 5',
          overflow: 'hidden',
          background: 'var(--bg-3)',
          cursor: 'pointer',
          textDecoration: 'none',
        }}>
        <img src={c.image} alt={c.name} style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
          transform: hover ? 'scale(1.05)' : 'scale(1)',
          transition: 'transform 1.4s cubic-bezier(.2,.7,.2,1)',
          filter: 'brightness(0.85) contrast(1.02) saturate(0.95)',
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(20,19,15,0.15) 0%, rgba(20,19,15,0.65) 55%, rgba(20,19,15,0.96) 100%)',
        }} />
        <div style={{
          position: 'absolute', top: 32, left: 32, right: 32,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        }}>
          <span className="serif" style={{ fontSize: 14, color: accent, letterSpacing: '0.2em', fontWeight: 600 }}>
            — {c.num}
          </span>
          <span className="chip chip-light">{c.tagline}</span>
        </div>
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, padding: 32,
          display: 'flex', flexDirection: 'column', gap: 16,
        }}>
          <h3 className="serif" style={{
            fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: 500,
            lineHeight: 1.1, letterSpacing: '-0.01em', color: '#fff',
          }}>{c.name}</h3>
          <p style={{ fontSize: 15, lineHeight: 1.65, color: 'rgba(255,255,255,0.85)', maxWidth: 480 }}>
            {c.desc}
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 4 }}>
            {c.services.map((s, i) => (
              <span key={i} className="chip chip-light">{s}</span>
            ))}
          </div>
          <div style={{
            marginTop: 20, display: 'inline-flex', alignItems: 'center', gap: 10,
            color: '#fff', fontSize: 14, fontWeight: 500,
            paddingBottom: 4, borderBottom: `1px solid ${accent}`, alignSelf: 'flex-start',
          }}>
            <span>Bezoek {c.domain}</span>
            <span style={{
              display: 'inline-block', color: accent,
              transform: hover ? 'translateX(6px)' : 'translateX(0)',
              transition: 'transform .4s ease',
            }}>→</span>
          </div>
        </div>
      </a>
    );
  }

  // Stacked layout: alternating image/text
  return (
    <div className="reveal company-stacked" style={{
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 'clamp(32px, 5vw, 80px)',
      alignItems: 'center',
      direction: flipped ? 'rtl' : 'ltr',
    }}>
      <a href={c.href} target="_blank" rel="noopener" className="company-image card"
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          position: 'relative', display: 'block',
          aspectRatio: '4 / 5', overflow: 'hidden', direction: 'ltr',
          background: 'var(--bg-3)',
        }}>
        <img src={c.image} alt={c.name} style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
          transform: hover ? 'scale(1.05)' : 'scale(1)',
          transition: 'transform 1.4s cubic-bezier(.2,.7,.2,1)',
          filter: 'brightness(1) contrast(1.02) saturate(0.98)',
        }} />
      </a>
      <div style={{ direction: 'ltr', display: 'flex', flexDirection: 'column', gap: 24 }}>
        <span className="serif" style={{ fontSize: 14, color: accent, letterSpacing: '0.2em', fontWeight: 500 }}>
          — {c.num} · {c.tagline}
        </span>
        <h3 className="serif" style={{
          fontSize: 'clamp(32px, 4.5vw, 56px)', fontWeight: 400,
          lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--fg)',
        }}>{c.name}</h3>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-dim)', maxWidth: 520 }}>
          {c.desc}
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {c.services.map((s, i) => (
            <span key={i} className="chip">{s}</span>
          ))}
        </div>
        <a href={c.href} target="_blank" rel="noopener"
          className="btn btn-outline-accent"
          onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
          style={{ marginTop: 16, alignSelf: 'flex-start' }}>
          Bezoek {c.domain} <span className="arrow">→</span>
        </a>
      </div>
    </div>
  );
}

window.Companies = Companies;