/* AMARINE — Home */
const HomeTweakDefaults = /*EDITMODE-BEGIN*/ {
  rhythm: "quiet",
  showBrandWall: true,
}; /*EDITMODE-END*/

function HomeHero({ rhythm }) {
  const t = useT();
  const P = window.AMARINE_PHOTOS;
  const heroBgStyle = React.useMemo(
    () => ({ backgroundImage: `url(${P.heroAmbient})` }),
    [P.heroAmbient],
  );
  return (
    <section className="home-hero">
      <div className="bg-img" style={heroBgStyle} aria-hidden="true" />
      <div className="corner-mark">
        <MarkCompass size={88} />
      </div>
      <div className="meta-top">
        <span>{t("home.eyebrow")}</span>
        <span className="roman">MMXXVI</span>
      </div>
      <div className="inner">
        {rhythm === "manifesto" ? (
          <Reveal as="h1" delay={120}>
            {t("home.hero.line1")} <br />
            {t("home.hero.line2")}{" "}
            <span className="gold">{t("home.hero.line3")}</span> <br />
            <span className="it">{t("home.hero.line4")}</span>
          </Reveal>
        ) : (
          <Reveal as="h1" delay={120}>
            {t("home.hero.line1")} <br />
            <span className="it">
              {t("home.hero.line2")} {t("home.hero.line3")}
            </span>{" "}
            <br />
            {t("home.hero.line4")}
          </Reveal>
        )}
        <Reveal className="lede" delay={240}>
          {rhythm === "manifesto" ? (
            <em>{t("home.hero.lede.manifesto")}</em>
          ) : (
            t("home.hero.lede.default")
          )}
        </Reveal>
        <div className="baseline">
          <span>{t("home.hero.places")}</span>
          <span className="scroll">
            <span className="line" /> {t("home.hero.scroll")}
          </span>
        </div>
      </div>
    </section>
  );
}

function Manifesto() {
  const t = useT();
  return (
    <section className="manifesto">
      <Reveal className="label">
        <span className="numeral">— I</span>
        <span className="eyebrow">{t("home.manifesto.eyebrow")}</span>
      </Reveal>
      <Reveal className="body" delay={120}>
        <>
          {t("home.manifesto.part1")}{" "}
          <span className="it">{t("home.manifesto.it1")}</span>
          {t("home.manifesto.part2")}{" "}
          <span className="gold">{t("home.manifesto.gold")}</span>
          {t("home.manifesto.part3")}{" "}
          <span className="it">{t("home.manifesto.it2")}</span>
          {t("home.manifesto.part4")}
        </>
      </Reveal>
    </section>
  );
}

function Doors() {
  const t = useT();
  const lp = window.AMARINE_I18N.pathFor;
  const P = window.AMARINE_PHOTOS;
  const eventsDoorStyle = React.useMemo(
    () => ({ backgroundImage: `url(${P.doorEvents})` }),
    [P.doorEvents],
  );
  const hospDoorStyle = React.useMemo(
    () => ({ backgroundImage: `url(${P.doorHospitality})` }),
    [P.doorHospitality],
  );
  return (
    <section className="doors">
      <a
        className="door"
        href={lp("/events")}
        aria-label={`${t("home.lines.events.title")} - ${t("home.lines.events.cta")}`}
      >
        <div
          className="ph"
          data-label={t("home.lines.events.label")}
          style={eventsDoorStyle}
          role="img"
          aria-label={t("home.lines.events.label")}
        />
        <div className="door-body">
          <span className="eyebrow">{t("home.lines.events.eyebrow")}</span>
          <h2>
            {t("home.lines.events.title.part1")} <br />
            <span className="it">{t("home.lines.events.title.part2")}</span>
          </h2>
          <p className="desc">{t("home.lines.events.desc")}</p>
        </div>
        <div className="door-foot">
          <span className="link-arrow">
            {t("home.lines.events.cta")} <span>→</span>
          </span>
          <span className="door-num">I</span>
        </div>
      </a>
      <a
        className="door dark"
        href={lp("/hospitality")}
        aria-label={`${t("home.lines.hospitality.title")} - ${t("home.lines.hospitality.cta")}`}
      >
        <div
          className="ph dark"
          data-label={t("home.lines.hospitality.label")}
          style={hospDoorStyle}
          role="img"
          aria-label={t("home.lines.hospitality.label")}
        />
        <div className="door-body">
          <span className="eyebrow on-dark">
            {t("home.lines.hospitality.eyebrow")}
          </span>
          <h2>
            <span className="it">{t("home.lines.hospitality.title")}</span>
          </h2>
          <p className="desc">{t("home.lines.hospitality.desc")}</p>
        </div>
        <div className="door-foot">
          <span className="link-arrow">
            {t("home.lines.hospitality.cta")} <span>→</span>
          </span>
          <span className="door-num">II</span>
        </div>
      </a>
    </section>
  );
}

function Presence() {
  const t = useT();
  const lang = useLang();
  const cells = React.useMemo(
    () => [
      {
        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"),
      },
    ],
    [lang, t],
  );
  return (
    <section className="section gut">
      <div className="s-head s-head-tight s-head-mb-64">
        <div className="label">
          <span className="numeral">— III</span>
          <span className="eyebrow">{t("home.presence.eyebrow")}</span>
        </div>
        <div>
          <h2>
            {t("home.presence.title.part1")}{" "}
            <span className="it">{t("home.presence.title.part2")}</span>
          </h2>
          <p className="presence-desc">{t("home.presence.desc")}</p>
        </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 HomePortfolioShowcase() {
  const brands = [
    { folder: "american-express", name: "American Express", image: "mqc-1.png" },
    { folder: "area", name: "Area", image: "mqc-2.png" },
    { folder: "azulik", name: "Azulik", image: "mqc-3.png" },
    { folder: "condesa-gin", name: "Condesa Gin", image: "mqc-4.png" },
    { folder: "dior", name: "Dior", image: "mqc-5.png" },
    { folder: "grupo-carolo", name: "Grupo Carolo", image: "mqc-6.png" },
    { folder: "jp-morgan", name: "J.P. Morgan", image: "mqc-7.png" },
    { folder: "mastercard", name: "Mastercard", image: "mqc-8.png" },
    { folder: "maze", name: "Maze", image: "mqc-9.png" },
    { folder: "nespresso", name: "Nespresso", image: "mqc-10.png" },
    { folder: "pandora", name: "Pandora", image: "mqc-11.png" },
    { folder: "pepsico", name: "PepsiCo", image: "mqc-12.png" },
    { folder: "scotiabank", name: "Scotiabank", image: "mqc-13.png" },
    { folder: "sonos", name: "Sonos", image: "mqc-14.png" },
    { folder: "southern-smoke -foundation", name: "Southern Smoke Foundation", image: "mqc-15.png" },
    { folder: "tequila-mijenta", name: "Tequila Mijenta", image: "mqc-16.png" },
    { folder: "tequila-teremana", name: "Tequila Teremana", image: "mqc-17.png" },
    { folder: "xila", name: "Xila", image: "mqc-18.png" },
  ];
  const featuredBrands = brands.slice(0, 15);
  const closingBrands = brands.slice(15);
  const mediaBase = "/assets/media/principal/marcas%20que%20confian";

  const renderBrand = (brand, index) => (
    <Reveal
      key={`${brand.folder}-${index}`}
      as="div"
      className="brand-logo-card"
      delay={index * 40}
      role="listitem"
    >
      <div className="brand-logo-wrap">
        <img
          src={`${mediaBase}/${encodeURIComponent(brand.folder)}/${brand.image}`}
          alt={brand.name}
          loading="lazy"
        />
      </div>
    </Reveal>
  );

  return (
    <>
      <div className="brand-grid" role="list" aria-label="Marcas que confían en nosotros">
        {featuredBrands.map((brand, index) => renderBrand(brand, index))}
      </div>
      <div className="brand-grid brand-grid-closing" role="list" aria-label="Más marcas que confían en nosotros">
        {closingBrands.map((brand, index) => renderBrand(brand, index + featuredBrands.length))}
      </div>
    </>
  );
}

function BrandsBlock() {
  const t = useT();
  const lp = window.AMARINE_I18N.pathFor;
  return (
    <section className="section brand-section">
      <div className="s-head">
        <div className="label">
          <span className="numeral">— IV</span>
          <span className="eyebrow">{t("home.brands.eyebrow")}</span>
        </div>
        <div>
          <h2>
            {t("home.brands.title.part1")}{" "}
            <span className="it">{t("home.brands.title.part2")}</span>
            {t("home.brands.title.part3")}
          </h2>
        </div>
      </div>
      <div className="gut">
        <HomePortfolioShowcase />
        <div className="brands-link-row">
          <a className="link-arrow" href={lp("/portfolio")}>
            {t("home.brands.cta")} <span>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

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

function HomePage() {
  const t = useT();
  const lang = useLang();
  const HeaderComponent = window.__AMARINE_COMPONENTS__?.Header || window.Header;
  const FooterComponent = window.__AMARINE_COMPONENTS__?.Footer || window.Footer;
  const [tweaks, setTweak] = useTweaks(HomeTweakDefaults);
  const rhythmOptions = React.useMemo(
    () => [
      { value: "quiet", label: t("home.tweaks.rhythm.quiet") },
      { value: "cinematic", label: t("home.tweaks.rhythm.cinematic") },
      { value: "manifesto", label: t("home.tweaks.rhythm.manifesto") },
    ],
    [lang, t],
  );
  return (
    <>
      <HeaderComponent active="home" onDark={true} />
      <main className="home" data-rhythm={tweaks.rhythm}>
        <HomeHero rhythm={tweaks.rhythm} />
        <Manifesto />
        <Doors />
        <Presence />
        {tweaks.showBrandWall && <BrandsBlock />}
        <ClosingCTA />
      </main>
      <FooterComponent />
      <TweaksPanel title={t("home.tweaks.title")}>
        <TweakSection title={t("home.tweaks.rhythm.title")}>
          <TweakRadio
            label={t("home.tweaks.rhythm.label")}
            value={tweaks.rhythm}
            options={rhythmOptions}
            onChange={(v) => setTweak("rhythm", v)}
          />
        </TweakSection>
        <TweakSection title={t("home.tweaks.sections.title")}>
          <TweakToggle
            label={t("home.tweaks.sections.brandWall")}
            value={tweaks.showBrandWall}
            onChange={(v) => setTweak("showBrandWall", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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

// Main App component that listens to router
function App() {
  const { useState, useEffect } = React;
  const [routeState, setRouteState] = useState(() => {
    const router = window.AMARINE_ROUTER;
    return router
      ? router.getState()
      : { page: "home", locale: "es", segments: [], search: "" };
  });

  useEffect(() => {
    const router = window.AMARINE_ROUTER;
    if (!router) return;

    // Initial sync
    setRouteState(router.getState());

    // Listen for route changes
    const unsubscribe = router.onChange((state) => {
      // Keep full route state so same-page segment changes still re-render.
      setRouteState({ ...state });
    });

    return unsubscribe;
  }, []);

  const Pages = window.AMARINE_PAGES || {};
  const page = routeState.page || "home";

  const pageComponents = {
    home: <HomePage />,
    about: Pages.AboutPage ? <Pages.AboutPage /> : <HomePage />,
    events: Pages.EventsPage ? <Pages.EventsPage /> : <HomePage />,
    portfolio: Pages.PortPage ? <Pages.PortPage /> : <HomePage />,
    hospitality: Pages.HospitalityPage ? (
      <Pages.HospitalityPage />
    ) : (
      <HomePage />
    ),
    contact: Pages.ContactPage ? <Pages.ContactPage /> : <HomePage />,
  };

  return (
    <React.Fragment
      key={[
        routeState.locale,
        page,
        routeState.search,
        (routeState.segments || []).join("/"),
      ].join(":")}
    >
      {pageComponents[page] || <HomePage />}
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);