/* AMARINE — Eventos & Experiencias */

const EVENTS_MEDIA = {
  brand: '/assets/media/eventos-experiencias/experiencias-marca/exp-1.jpg',
  content: '/assets/media/eventos-experiencias/content-amplificacion/ca-1.jpg',
  method: '/assets/media/eventos-experiencias/metofologia/me-1.jpg',
};

function EventsHero() {
  const t = useT();
  const P = window.AMARINE_PHOTOS;
  return (
    <section
      className="line-hero"
      style={{ position: "relative", overflow: "hidden" }}
    >
      <div
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage: `url(${P.pillarBrand})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          filter: "saturate(0.7) contrast(1.05)",
          opacity: 0.35,
        }}
      />
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "linear-gradient(180deg, rgba(26,72,83,0.55) 0%, rgba(26,72,83,0.92) 100%)",
        }}
      />
      <div className="grid" style={{ position: "relative", zIndex: 2 }}>
        <div>
          <Reveal>
            <span
              className="eyebrow on-dark"
              style={{ color: "var(--gold)", letterSpacing: "0.22em" }}
            >
              {t("events.eyebrow")}
            </span>
          </Reveal>
          <Reveal as="h1" delay={120}>
            {t("events.hero.line1")} <br />
            {t("events.hero.line2")}{" "}
            <span className="gold">{t("events.hero.line3")}</span> <br />
            <span className="it">{t("events.hero.line4")}</span>
          </Reveal>
        </div>
        <Reveal delay={200}>
          <p>{t("events.intro")}</p>
          <a className="link-arrow" href="#pillars">
            {t("events.hero.anchor")} <span>↓</span>
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function PillarsSection() {
  const t = useT();
  const pillars = [
    {
      key: "brand",
      num: t("events.pillar1.num"),
      title: t("events.pillar1.title"),
      sub: t("events.pillar1.subtitle"),
      bullets: [
        t("events.pillar1.b1"),
        t("events.pillar1.b2"),
        t("events.pillar1.b3"),
      ],
      img: EVENTS_MEDIA.brand,
    },
    {
      key: "content",
      num: t("events.pillar2.num"),
      title: t("events.pillar2.title"),
      sub: t("events.pillar2.subtitle"),
      bullets: [
        t("events.pillar2.b1"),
        t("events.pillar2.b2"),
        t("events.pillar2.b3"),
      ],
      img: EVENTS_MEDIA.content,
    },
    {
      key: "method",
      num: t("events.pillar3.num"),
      title: t("events.pillar3.title"),
      sub: t("events.pillar3.subtitle"),
      bullets: [
        t("events.pillar3.b1"),
        t("events.pillar3.b2"),
        t("events.pillar3.b3"),
      ],
      img: EVENTS_MEDIA.method,
    },
  ];
  return (
    <section id="pillars" className="section gut">
      <div className="s-head" style={{ padding: 0, marginBottom: 80 }}>
        <div className="label">
          <span className="numeral">— I</span>
          <span className="eyebrow">{t("events.pillars.eyebrow")}</span>
        </div>
        <div>
          <h2>
            {t("events.pillars.title.part1")} <br />
            <span className="it">{t("events.pillars.title.part2")}</span>
          </h2>
        </div>
      </div>
      <div className="pillars">
        {pillars.map((p, i) => (
          <Reveal key={p.key} className="pillar" delay={i * 100} as="article">
            <div
              className="ph"
              data-label={p.sub}
              style={{
                backgroundImage: `url(${p.img})`,
                aspectRatio: "4/3",
                marginBottom: 24,
              }}
            />
            <span className="num">{p.num}</span>
            <span className="sub">{p.sub}</span>
            <h3>{p.title}</h3>
            <ul>
              {p.bullets.map((b, idx) => (
                <li key={idx}>{b}</li>
              ))}
            </ul>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function MethodologySection() {
  const t = useT();
  const acts = [
    {
      n: "01",
      title: t("events.method.act1.title"),
      desc: t("events.method.act1.desc"),
    },
    {
      n: "02",
      title: t("events.method.act2.title"),
      desc: t("events.method.act2.desc"),
    },
    {
      n: "03",
      title: t("events.method.act3.title"),
      desc: t("events.method.act3.desc"),
    },
    {
      n: "04",
      title: t("events.method.act4.title"),
      desc: t("events.method.act4.desc"),
    },
    {
      n: "05",
      title: t("events.method.act5.title"),
      desc: t("events.method.act5.desc"),
    },
  ];
  return (
    <section id="method" className="section methodology gut">
      <div className="s-head" style={{ padding: 0, marginBottom: 64 }}>
        <div className="label">
          <span className="numeral">— II</span>
          <span className="eyebrow">{t("events.method.eyebrow")}</span>
        </div>
        <div>
          <h2>
            {t("events.method.title.part1")}{" "}
            <span className="it">{t("events.method.title.part2")}</span>
          </h2>
          <p
            style={{
              marginTop: 24,
              fontStyle: "italic",
              fontFamily: "var(--serif)",
              fontSize: 22,
              color: "var(--gold)",
            }}
          >
            {t("events.method.lead")}
          </p>
        </div>
      </div>
      <div className="acts">
        {acts.map((a, i) => (
          <Reveal key={a.n} className="act" delay={i * 60}>
            <div className="num">{a.n}</div>
            <h4>{a.title}</h4>
            <p>{a.desc}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function CasesPreview() {
  const t = useT();
  const lp = window.AMARINE_I18N.pathFor;
  const P = window.AMARINE_PHOTOS;
  const portfolioData = window.AMARINE_PORTFOLIO_DATA;
  const projectPathFor = (slug) => {
    if (portfolioData && portfolioData.getProjectRoutePath) {
      return portfolioData.getProjectRoutePath(slug);
    }
    return `/portfolio/${slug}`;
  };
  const cases = React.useMemo(() => {
    if (!portfolioData || !portfolioData.getProjects) return [];

    return portfolioData
      .getProjects()
      .filter((project) => project.line === "events")
      .sort((a, b) => {
        const aYear = Number(a.year) || 0;
        const bYear = Number(b.year) || 0;
        return bYear - aYear || String(a.slug || "").localeCompare(String(b.slug || ""));
      })
      .slice(0, 3);
  }, [portfolioData]);
  return (
    <section className="section gut">
      <div className="s-head" style={{ padding: 0, marginBottom: 56 }}>
        <div className="label">
          <span className="numeral">— III</span>
          <span className="eyebrow">{t("events.cases.eyebrow")}</span>
        </div>
        <div>
          <h2>
            {t("events.cases.title.part1")}{" "}
            <span className="it">{t("events.cases.title.part2")}</span>
          </h2>
        </div>
      </div>
      <div className="cases-row">
        {cases.map((project, i) => (
          <Reveal
            key={project.slug}
            as="a"
            href={lp(projectPathFor(project.slug))}
            className="case"
            delay={i * 100}
          >
            <div className="ph">
              {/(\/video\/upload\/)|(\.(mp4|mov|webm|avi)$)/i.test(project.heroImage) ? (
                <video
                  src={project.heroImage}
                  autoPlay
                  muted
                  loop
                  playsInline
                  preload="metadata"
                />
              ) : (
                <img
                  src={project.heroImage}
                  alt={project.title}
                  loading="lazy"
                />
              )}
            </div>

            <div className="meta">
              <span>{project.city}</span>
              <span className="tag">{project.year}</span>
            </div>

            <h4>
              {project.title}
              <span
                style={{
                  display: "block",
                  marginTop: 8,
                  color: "var(--mute)",
                  fontStyle: "italic",
                  fontSize: "16px",
                }}
              >
                {project.category}
              </span>
            </h4>
          </Reveal>
        ))}
      </div>
      <div style={{ paddingTop: 64, textAlign: "right" }}>
        <a
          className="link-arrow"
          href={lp("/portfolio", { search: "line=events" })}
        >
          {t("events.cases.cta")} <span>→</span>
        </a>
      </div>
    </section>
  );
}

function EventsCTA() {
  const t = useT();
  const lp = window.AMARINE_I18N.pathFor;
  return (
    <section className="closing-cta">
      <Reveal>
        <span className="eyebrow on-dark">— IV</span>
        <h2>{t("events.cta.title")}</h2>
        <p>
          {t("events.cta.desc.part1")}
          <br />
          {t("events.cta.desc.part2")}
        </p>
        <a
          className="btn btn-secondary"
          href={lp("/contact", { search: "line=events" })}
        >
          {t("events.cta.btn")} <span className="arrow">→</span>
        </a>
      </Reveal>
    </section>
  );
}

function EventsPage() {
  return (
    <>
      <Header active="events" onDark={true} />
      <main>
        <EventsHero />
        <PillarsSection />
        <MethodologySection />
        <CasesPreview />
        <EventsCTA />
      </main>
      <Footer />
    </>
  );
}

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