function About({ t }) {
  return (
    <section style={{ padding:'clamp(60px,8vw,120px) 0', position:'relative' }}>
      <div className="wrap about-grid" style={{
        display:'grid',
        gridTemplateColumns: 'minmax(280px, 1fr) minmax(280px, 1.2fr)',
        gap: 'clamp(30px, 5vw, 80px)',
        alignItems:'center',
      }}>
        {/* Left: text */}
        <div style={{ maxWidth: 460 }}>
          <p className="mono-tiny" style={{ color:'var(--pink-500)', marginBottom: 12 }}>{t.aboutKicker}</p>
          <h2 className="display" style={{ fontSize:'clamp(32px, 5vw, 56px)', marginBottom: 24 }}>{t.aboutLabel}</h2>
          <p style={{ fontSize: 15, lineHeight: 1.65, color:'var(--ink-soft)', marginBottom: 18 }}>
            {t.aboutP1}
          </p>
          <p style={{ fontSize: 15, lineHeight: 1.65, color:'var(--ink-soft)', marginBottom: 28 }}>
            {t.aboutP2}
          </p>
          <a href="#team" className="pill-btn">
            {t.moreAbout} <span className="arrow">→</span>
          </a>
        </div>

        {/* Right: photo slider */}
        <AboutSlider />
      </div>

      {/* Massive italic brand name across the bottom */}
      <div style={{
        position:'relative',
        marginTop: 'clamp(40px, 6vw, 80px)',
        textAlign:'center',
        padding: '0 4vw',
      }}>
        <div className="mega-text about-mega" style={{
          fontSize: 'clamp(32px, 8vw, 110px)',
          color: 'var(--pink-300)',
          lineHeight: 0.9,
          whiteSpace:'nowrap',
        }}>
          BelezaaPinkk
        </div>
        {/* small chrome inset */}
        <div style={{
          position:'absolute',
          left:'50%', top:'50%',
          transform:'translate(-25%, -10%)',
          width:'clamp(60px, 9vw, 120px)',
          aspectRatio:'1',
        }}>
          <ChromeBlob tint="pink" seed={1} style={{ width:'100%', height:'100%', filter:'drop-shadow(0 14px 24px rgba(0,0,0,0.2))' }} />
        </div>
      </div>
    </section>
  );
}

const SLIDER_PHOTOS = [
  'assets/institut-1.avif',
  'assets/institut-2.avif',
  'assets/institut-3.avif',
  'assets/institut-4.avif',
  'assets/institut-5.avif',
];

function AboutSlider() {
  const [current, setCurrent] = React.useState(0);
  const total = SLIDER_PHOTOS.length;

  React.useEffect(() => {
    const t = setInterval(() => setCurrent(c => (c + 1) % total), 4000);
    return () => clearInterval(t);
  }, [total]);

  const prev = () => setCurrent(c => (c - 1 + total) % total);
  const next = () => setCurrent(c => (c + 1) % total);

  return (
    <div style={{ position:'relative', borderRadius: 18, overflow:'hidden', aspectRatio:'4/3', width:'100%', background:'var(--pink-100)' }}>
      {SLIDER_PHOTOS.map((src, i) => (
        <img
          key={src}
          src={src}
          alt={`Institut ${i + 1}`}
          style={{
            position:'absolute', inset: 0,
            width:'100%', height:'100%',
            objectFit:'cover', objectPosition:'center',
            opacity: i === current ? 1 : 0,
            transition:'opacity 0.7s ease',
          }}
        />
      ))}

      {/* arrows */}
      {[{dir:'prev',fn:prev,pos:{left:12}},{dir:'next',fn:next,pos:{right:12}}].map(({dir,fn,pos}) => (
        <button key={dir} onClick={fn} style={{
          position:'absolute', top:'50%', transform:'translateY(-50%)', ...pos,
          width: 38, height: 38, borderRadius:'50%',
          background:'rgba(255,255,255,0.85)', border:'none', cursor:'pointer',
          display:'flex', alignItems:'center', justifyContent:'center',
          boxShadow:'0 4px 12px rgba(0,0,0,0.15)',
          zIndex: 2,
        }}>
          {dir === 'prev' ? '←' : '→'}
        </button>
      ))}

      {/* dots */}
      <div style={{
        position:'absolute', bottom: 14, left:'50%', transform:'translateX(-50%)',
        display:'flex', gap: 6, zIndex: 2,
      }}>
        {SLIDER_PHOTOS.map((_, i) => (
          <button key={i} onClick={() => setCurrent(i)} style={{
            width: i === current ? 20 : 8, height: 8, borderRadius: 999,
            background: i === current ? 'white' : 'rgba(255,255,255,0.5)',
            border:'none', cursor:'pointer', padding: 0,
            transition:'width 0.3s ease, background 0.3s ease',
          }} />
        ))}
      </div>
    </div>
  );
}

window.About = About;