/* Team — staggered portrait wall with roster rail, hover reveal and drop-in photo slots. */
const TEAM = [
  { n: 'Irudaya Raj', role: 'CEO · Digital strategy', bio: 'Sets the strategy on every engagement and stays your single point of contact from the first call through handover.', id: 'team-1', img: 'team/irudaya.png', tall: true },
  { n: 'Francis Xavier', role: 'Web developer', bio: 'Owns build quality — speed budgets, semantic markup, accessibility and the documentation you keep after launch.', id: 'team-2', img: 'team/francis.png' },
  { n: 'David', role: 'SEO specialist', bio: 'Technical audits, on-page architecture and the editorial link acquisition that keeps authority compounding.', id: 'team-3', img: 'team/david.png', tall: true },
  { n: 'Regina', role: 'Graphic designer', bio: 'Identity systems, campaign collateral and the social assets that keep the brand consistent everywhere.', id: 'team-4', img: 'team/regina.png' },
];

function TeamSection() {
  const [i, setI] = React.useState(0);
  return (
    <section className="zx-team">
      <span className="zx-team__wash" aria-hidden="true" />
      <div className="zx-container zx-team__inner">
        <header className="zx-team__head" data-reveal>
          <span className="zx-team__eyebrow">Our team</span>
          <h2 className="zx-team__h2">The people who will actually be on your project</h2>
          <p className="zx-team__lede">Four specialists, one brief — strategy, build, search and design, coordinated as a single team.</p>
        </header>

        <div className="zx-team__body">
          <div className="zx-team__wall">
            {TEAM.map((p, n) => (
              <figure key={p.id} className="zx-team__card" data-tall={p.tall ? '' : undefined} data-on={n === i ? '' : undefined}
                onMouseEnter={() => setI(n)} onFocus={() => setI(n)} tabIndex={0}>
                <span className="zx-team__shot">
                  {p.img
                    ? <img src={window.ASSETS + p.img} alt={p.n} loading="lazy" />
                    : <image-slot id={p.id} shape="rounded" radius="18" placeholder="Drop photo"></image-slot>}
                </span>
                <figcaption className="zx-team__plate">
                  <strong>{p.n}</strong>
                  <em>{p.role}</em>
                  <span className="zx-team__bio">{p.bio}</span>
                </figcaption>
                <span className="zx-team__plus" aria-hidden="true">+</span>
              </figure>
            ))}
          </div>

          <ul className="zx-team__rail">
            {TEAM.map((p, n) => (
              <li key={p.id}>
                <button type="button" className="zx-team__row" data-on={n === i ? '' : undefined}
                  onMouseEnter={() => setI(n)} onFocus={() => setI(n)} aria-current={n === i ? 'true' : undefined}>
                  <span className="zx-team__pip" aria-hidden="true" />
                  <span className="zx-team__rowtext">
                    <strong>{p.n}</strong>
                    <em>{p.role}</em>
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { TeamSection, TEAM });