/* Home page bands, in Figma order: statement → banner → services → selected
   work → awards → launch campaign. */
const { Button, SectionHeading, ServiceCard, GalleryCard, DisplayBanner, AwardsRow, Logo } =
  window.ApexAgencyDesignSystem_54b6ac;

function HeroBand() {
  return (
    <section className="hero" data-screen-label="Home / hero">
      <span className="grad-line grad-line--hero" aria-hidden="true"></span>
      <div className="hero-inner">
        <Reveal as="h1" delay={60} immediate>{HOME_HERO.title}</Reveal>
        <Reveal as="p" delay={160} immediate>{HOME_HERO.lede}</Reveal>
      </div>
      <img className="hero-star" src={DECOR.star} alt="" aria-hidden="true" />
    </section>
  );
}

function StatementBand() {
  return (
    <section className="statement" data-screen-label="Home / statement">
      <div className="statement-inner">
        <Reveal>
          <SectionHeading level="h2" font="core" style={{ maxWidth: 1070, fontSize: 'clamp(26px,3.472vw,50px)', lineHeight: 1.2, letterSpacing: '-0.04em' }}>
            {HOME_STATEMENT.display}
          </SectionHeading>
        </Reveal>
        <div className="statement-row">
          <Reveal delay={0}>
            <Button className="btn btn-r" variant="primary" href={HOME_STATEMENT.cta.href}>{HOME_STATEMENT.cta.label}</Button>
          </Reveal>
          <Reveal delay={70} as="p" style={{ margin: 0, maxWidth: 813 }}>
            <span style={{ fontFamily: 'var(--font-core)', fontSize: 'var(--size-subheadline)', lineHeight: 1.3333, letterSpacing: '-.04167em' }}>
              {HOME_STATEMENT.body}
            </span>
          </Reveal>
        </div>
      </div>
      <Reveal style={{ marginTop: 'clamp(24px,2.78vw,40px)' }}>
        <DisplayBanner className="banner" image={HOME_STATEMENT.banner.image} height="clamp(220px,31.04vw,447px)">
          {HOME_STATEMENT.banner.text}
        </DisplayBanner>
      </Reveal>
    </section>
  );
}

function ServicesBand() {
  return (
    <section className="services" id="services" data-screen-label="Home / services">
      <div className="services-inner">
        <Reveal className="services-head">
          <SectionHeading level="services" font="core" tone="inverse">Nuestros servicios</SectionHeading>
          <Logo variant="mark" height={65} color="var(--apex-white)" style={{ flexShrink: 0 }} />
        </Reveal>
        <Stagger className="services-grid">
          {SERVICES.map((s) => (
            <ServiceCard
              key={s.title} className="svc" title={s.title} description={s.description}
              iconGlyph={<span className="ms-icon" style={{ color: s.color }} aria-hidden="true">{s.glyph}</span>}
            />
          ))}
        </Stagger>
      </div>
    </section>
  );
}

function WorkBand() {
  return (
    <section className="work" id="work" data-screen-label="Home / selected work">
      <div className="work-head">
        <img className="work-pencil" src={DECOR.pencil} alt="" aria-hidden="true" />
        <div className="work-head-row">
          <Reveal>
            <SectionHeading level="services" font="core">{WORK_INTRO.title}</SectionHeading>
          </Reveal>
          <Reveal delay={70} className="work-shot" style={{ backgroundImage: `url(${WORK_INTRO.image})` }} role="img" aria-label="Apex campaign work" />
        </div>
        <Reveal className="work-lede">
          <p>{WORK_INTRO.body}</p>
        </Reveal>
      </div>
      <Stagger className="work-grid">
        {PROJECTS.map((p) => (
          <GalleryCard key={p.id} className="gcard" title={p.title} meta={p.meta} image={p.cover} href={p.href} />
        ))}
      </Stagger>
    </section>
  );
}

function AwardsBand() {
  /* AwardsRow boxes every mark at a uniform 158px with a uniform gap; the
     frame gives each mark its own size and an uneven gap, so the row geometry
     is corrected in site.css (.awards) against the order of this list. */
  return (
    <Reveal>
      <AwardsRow className="awards" title={AWARDS.title} logos={AWARDS.logos.map((l) => l.src)} />
    </Reveal>
  );
}

function CampaignBand() {
  return (
    <section className="campaign" data-screen-label="Home / launch campaign">
      <div className="campaign-row">
        <Stagger className="campaign-col">
          <SectionHeading level="services" font="core" style={{ maxWidth: 581 }}>
            {CAMPAIGN.title}
          </SectionHeading>
          <p>{CAMPAIGN.body}</p>
          <Button className="btn" variant="outline" href={CAMPAIGN.cta.href} style={{ alignSelf: 'flex-start' }}>{CAMPAIGN.cta.label}</Button>
        </Stagger>
        <Reveal delay={140} className="campaign-shot" style={{ backgroundImage: `url(${CAMPAIGN.image})` }} role="img" aria-label="Apex team at work" />
      </div>
    </section>
  );
}

Object.assign(window, { HeroBand, StatementBand, ServicesBand, WorkBand, AwardsBand, CampaignBand });