function ContactRow({ n, label, value, href, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={href}
      onClick={onClick}
      target={href ? '_blank' : undefined}
      rel={href ? 'noopener' : undefined}
      tabIndex={href ? undefined : 0}
      onKeyDown={href ? undefined : e=>{ if (e.key==='Enter' || e.key===' ') { e.preventDefault(); onClick && onClick(e); } }}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        display:'flex', alignItems:'center', gap:'clamp(12px,2.2vw,28px)',
        padding:'clamp(12px,1.5vw,20px) 0',
        paddingLeft: hover ? 14 : 0,
        background: hover ? 'var(--paper-warm)' : 'transparent',
        borderBottom:'1px solid var(--line)', color:'var(--ink)',
        cursor:'pointer', textDecoration:'none',
        transition:'padding-left var(--dur) var(--ease), background-color var(--dur) var(--ease)'
      }}>
      <span className="ts-stat" style={{flex:'none', width:24, color:'var(--ink-4)', letterSpacing:'0.08em'}}>{n}</span>
      <span className="ts-label" style={{flex:'none', color:'var(--ink-3)', letterSpacing:'0.16em'}}>{label}</span>
      <span style={{
        flex:'1 1 auto', textAlign:'right', whiteSpace:'nowrap',
        fontFamily:'var(--font-sans)', fontWeight:700,
        fontSize:'clamp(1rem,1.5vw,1.375rem)', letterSpacing:'-0.01em'
      }}>{value}</span>
    </a>
  );
}

function AgencyPage({ go }) {
  const contacts = [
    { n:'01', label:'Email',     value:'booking@theotherside.agency', href:'mailto:booking@theotherside.agency' },
    { n:'02', label:'Social',    value:'@theotherside.agency',        href:'https://www.instagram.com/theotherside.agency/' },
    { n:'03', label:'New Faces', value:'become a model',              onClick:(e)=>{ e.preventDefault(); go('join'); } },
  ];

  return (
    <div className="fade-in shell" style={{
      display:'flex', flexDirection:'column', minHeight:'calc(100vh - 48px)',
      paddingTop:'clamp(24px,4vw,56px)', paddingBottom:'clamp(20px,2.4vw,36px)'
    }}>
      <h1 style={{
        fontFamily:'var(--font-sans)', fontWeight:500, margin:0,
        fontSize:'clamp(2.5rem, 6vw, 5.5rem)', letterSpacing:'-0.03em',
        maxWidth:'14ch'
      }}>
        A new attitude and the team behind it
      </h1>

      <p style={{
        margin:'clamp(20px,3vw,40px) 0 0', maxWidth:'62ch',
        fontFamily:'var(--font-sans)', fontWeight:400,
        fontSize:'clamp(1.0625rem,1.55vw,1.375rem)', lineHeight:1.5,
        letterSpacing:'-0.005em', color:'var(--ink-2)', textWrap:'pretty'
      }}>
        We are a young, dynamic team looking for unique faces with strong, distinct personalities. Our partners are among the leading agencies in the industry — we work closely with <strong style={{fontWeight:600, color:'var(--ink)'}}>Premium</strong>, <strong style={{fontWeight:600, color:'var(--ink)'}}>IMG</strong>, <strong style={{fontWeight:600, color:'var(--ink)'}}>Elite</strong>, <strong style={{fontWeight:600, color:'var(--ink)'}}>Ford</strong>, <strong style={{fontWeight:600, color:'var(--ink)'}}>Blow</strong>, <strong style={{fontWeight:600, color:'var(--ink)'}}>The Industry</strong> and other great teams. Our goal is to set new standards for ourselves and for this business.
      </p>

      <section style={{marginTop:'clamp(28px,4vw,56px)'}}>
        {contacts.map(c => (
          <ContactRow key={c.n} {...c} />
        ))}
      </section>
    </div>
  );
}
window.AgencyPage = AgencyPage;