/* AMARINE — Nosotros */

function AboutHero() {
  const t = useT();
  return (
    <section
      className="about-hero"
      style={{
        backgroundImage:
          'url("/assets/media/nosotros/nosotros/nosotros.jpg")',
      }}
    >
      <div className="about-hero-overlay" aria-hidden="true" />
      <div className="about-hero-content">
        <Reveal>
          <span className="eyebrow">{t('about.eyebrow')}</span>
        </Reveal>
        <Reveal as="h1" delay={120}>
          {t('about.hero.title.part1')} <span className="it">{t('about.hero.title.part2')}</span> {t('about.hero.title.part3')} <span className="it" style={{color:'var(--gold)'}}>{t('about.hero.title.part4')}</span>
        </Reveal>
        <Reveal className="note" delay={200}>
          {t('about.hero.note')}
        </Reveal>
      </div>
    </section>
  );
}

function AboutStory() {
  const t = useT();
  return (
    <section className="section gut surface-ivory-warm">
      <div className="s-head" style={{padding: 0, marginBottom: 56}}>
        <div className="label">
          <span className="numeral">— I</span>
          <span className="eyebrow">{t('about.story.eyebrow')}</span>
        </div>
        <div>
          <h2>{t('about.story.title.part1')} <span className="it">{t('about.story.title.part2')}</span> {t('about.story.title.part3')}</h2>
          <p style={{marginTop: 32, color:'var(--graphite)', fontSize: 18, maxWidth:'58ch'}}>{t('about.story.body')}</p>
        </div>
      </div>
    </section>
  );
}

function AboutTeam() {
  const t = useT();
  const team = [
    { id:'dani', name: 'Daniela Villasuso', role: t('about.team.dani.role'), bio: t('about.team.dani.bio'), note: t('about.team.dani.note'), label: t('about.team.dani.label'), img: '/assets/media/nosotros/dani-villauso/daniela.jpg' },
    { id:'caro', name: 'Caroline Nabors',   role: t('about.team.caro.role'), bio: t('about.team.caro.bio'), note: t('about.team.caro.note'), label: t('about.team.caro.label'), img: '/assets/media/nosotros/caroline-rosen/caroline.jpg' },
    { id:'carla', name: 'Carla M Sariñana', role: t('about.team.carla.role'), bio: t('about.team.carla.bio'), note: t('about.team.carla.note'), label: t('about.team.carla.label'), img: '/assets/media/nosotros/karla-m-sarinana/karla.jpg' },
  ];
  return (
    <section className="section gut">
      <div className="s-head" style={{padding: 0, marginBottom: 56}}>
        <div className="label">
          <span className="numeral">— II</span>
          <span className="eyebrow">{t('about.team.eyebrow')}</span>
        </div>
        <div>
          <h2>{t('about.team.title.part1')} <span className="it">{t('about.team.title.part2')}</span></h2>
        </div>
      </div>
      <div className="team-grid">
        {team.map((m, i) => (
          <Reveal key={m.id} className="member" delay={i * 100}>
            <div className="ph" data-label={m.label} style={{backgroundImage:`url(${m.img})`}} />
            <h3>{m.name}</h3>
            <div className="role">{m.role}</div>
            <p className="bio">{m.bio}</p>
            <p className="note">{m.note}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function AboutHubs() {
  const t = useT();
  const cells = [
    { kicker: t('home.presence.mexico.kicker'), name: t('home.presence.mexico.name'), cities: t('home.presence.mexico.cities'), note: t('home.presence.mexico.note') },
    { kicker: t('home.presence.spain.kicker'),  name: t('home.presence.spain.name'), cities: t('home.presence.spain.cities'), note: t('home.presence.spain.note') },
    { kicker: t('home.presence.us.kicker'),     name: t('home.presence.us.name'), cities: t('home.presence.us.cities'), note: t('home.presence.us.note') },
  ];
  return (
    <section className="section gut surface-ivory-warm">
      <div className="s-head" style={{padding: 0, marginBottom: 56}}>
        <div className="label">
          <span className="numeral">— III</span>
          <span className="eyebrow">{t('about.hubs.eyebrow')}</span>
        </div>
        <div>
          <h2>{t('about.hubs.title.part1')} <span className="it">{t('about.hubs.title.part2')}</span></h2>
        </div>
      </div>
      <div className="presence-grid">
        {cells.map((c, i) => (
          <Reveal key={i} className="presence-cell" delay={i * 80}>
            <span className="kicker">{c.kicker}</span>
            <h3>{c.name}</h3>
            <span className="cities">{c.cities}</span>
            <p className="note">{c.note}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function AboutCTA() {
  const t = useT();
  const lp = window.AMARINE_I18N.pathFor;
  return (
    <section className="closing-cta">
      <Reveal>
        <span className="eyebrow on-dark">— IV</span>
        <h2>{t('about.cta.title.part1')} <br/><span className="it">{t('about.cta.title.part2')}</span></h2>
        <p>{t('about.cta.locations')}</p>
        <a className="btn btn-secondary" href={lp('/contact')}>
          {t('nav.cta')} <span className="arrow">→</span>
        </a>
      </Reveal>
    </section>
  );
}

function AboutPage() {  
  return (
    <>
      <Header active="about" onDark={true}/>
      <main>
        <AboutHero />
        <AboutStory />
        <AboutTeam />
        <AboutHubs />
        <AboutCTA />
      </main>
      <Footer />
    </>
  );
}

// Expose to window for router
window.AMARINE_PAGES = window.AMARINE_PAGES || {};
window.AMARINE_PAGES.AboutPage = AboutPage;