/* global React */
const { useState, useEffect, useRef, useMemo } = React;

/* ============================================================
   Scene 1 · Hero · Heritage opener
   ============================================================ */
function Scene1Hero() {
  return (
    <section className="scene" id="hero">
      <SceneBg video="assets/videos/hero.mp4" poster="assets/photos/pampas.jpg" scrim="bottom" vignette />
      <div className="scene-content">
        <FadeIn delay={150}>
          <img
            src="assets/logos/azulnaturalbeef-wordmark-white.png"
            alt="Azul Natural Beef"
            className="hero-logo" />
          
        </FadeIn>
        <FadeIn delay={300}>
          <div className="eyebrow">
            <span className="dash"></span>
            <span>Tradición ganadera argentina · Desde 1840</span>
          </div>
        </FadeIn>
        <h1 className="display-h1">
          <BlurText text="Cien años de carne argentina," delay={500} />
          <br />
          <BlurText text="una sola mesa global." delay={500} stagger={95} emphRange={[1, 4]} />
        </h1>
        <FadeIn delay={1700} className="lede" as="p">
          Dos familias, cinco continentes,<br />
          veinte países de exportación.<br />
          Desde Argentina al mundo, todos los días.
        </FadeIn>
        <FadeIn delay={2000}>
          <div className="cta-row">
            <a href="#cadena" className="btn btn-primary">
              Conocé la cadena de valor
              <span className="arrow">→</span>
            </a>
            <a href="#devesa" className="btn btn-secondary">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 11V7a5 5 0 0 1 10 0v4" /><rect x="4" y="11" width="16" height="11" rx="0" /></svg>
              Ver catálogo Devesa
              <span className="arrow">→</span>
            </a>
          </div>
        </FadeIn>
        <FadeIn delay={2400}>
          <div className="stats-strip">
            <div className="stat">
              <div className="num"><CountUp to={100} suffix="+" /></div>
              <div className="lbl">Años de tradición ganadera</div>
            </div>
            <div className="stat">
              <div className="num"><CountUp to={14} suffix="+" /></div>
              <div className="lbl">Países activos de exportación</div>
            </div>
            <div className="stat">
              <div className="num">70-80<span style={{ fontSize: "0.6em", verticalAlign: "0.15em" }}>%</span></div>
              <div className="lbl">Materia prima propia</div>
            </div>
            <div className="stat">
              <div className="num"><CountUp to={1100} /></div>
              <div className="lbl">Animales / día · capacidad</div>
            </div>
          </div>
        </FadeIn>
      </div>
      <div className="scroll-cue">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
    </section>);

}

/* ============================================================
   Scene 2 · Origin · Dos familias, cien años
   ============================================================ */
function Scene2Origin() {
  // Fire/gauchos placeholder: warm radial gradient simulating fogón at dawn
  const fireGradient =
  "radial-gradient(ellipse at 22% 78%, #C8651B 0%, #6B2810 18%, #2B130B 40%, #14110E 75%), " +
  "linear-gradient(180deg, #1B1812 0%, #0E1A30 100%)";
  return (
    <section className="scene" id="origen" style={{ background: "#0E1A30" }}>
      <div className="scene-bg">
        <div className="gradient-bg" style={{ background: fireGradient }} />
        {/* Embers */}
        <Particles count={36} />
        <div className="scrim-left" />
        <div className="grain" />
      </div>
      <div className="scene-content">
        <div style={{ maxWidth: 640 }}>
          <FadeIn>
            <div className="eyebrow">
              <span className="num">01</span>
              <span className="dash"></span>
              <span>Origen</span>
            </div>
          </FadeIn>
          <h2 className="display-h2">
            <BlurText text="Dos familias." stagger={110} />
            <br />
            <BlurText text="Cuatro generaciones." delay={250} stagger={110} />
            <br />
            <BlurText text="Una sola tradición." delay={500} stagger={110} emphRange={[2, 2]} />
          </h2>
          <FadeIn delay={1300} className="lede" as="p">
            Azul Natural Beef nace de la unión de dos familias.
            No somos una empresa joven — somos una historia que decidió escalar al mundo.
          </FadeIn>
          <FadeIn delay={1500}>
            <div style={{ display: "flex", gap: 32, marginTop: 16, flexWrap: "wrap" }}>
              {[["100+", "Años"], ["4ta", "Generación"], ["AR + EU", "Origen"]].map(([n, l]) =>
              <div key={l}>
                  <div className="numeral" style={{ fontSize: 38 }}>{n}</div>
                  <div style={{ fontFamily: "var(--font-stamp)", fontSize: 10, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--anb-devesa-gold)", marginTop: 6 }}>{l}</div>
                </div>
              )}
            </div>
          </FadeIn>
        </div>
      </div>
    </section>);

}

/* ============================================================
   Scene 3 · Cattle · 70-80% own herd
   ============================================================ */
function Scene3Cattle() {
  return (
    <section className="scene" id="cadena">
      <SceneBg src="assets/photos/cattle.jpg" kenburns scrim="diag" vignette />
      <div className="scene-content middle">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "48px", alignItems: "center" }} className="cadena-grid">
          <div>
            <FadeIn>
              <div className="eyebrow">
                <span className="num">02</span>
                <span className="dash"></span>
                <span>Cadena de valor</span>
              </div>
            </FadeIn>
            <h2 className="display-h2">
              <BlurText text="Criamos la mayoría" stagger={95} />
              <br />
              <BlurText text="de nuestra propia carne." delay={400} stagger={95} emphRange={[1, 3]} />
            </h2>
            <FadeIn delay={1100} className="lede" as="p">
              No compramos carne — criamos ganado. Cultivamos los granos.
              Manejamos las pasturas. Cuando un competidor commodity dice "trazabilidad,"
              nosotros mostramos el feedlot.
            </FadeIn>
            <FadeIn delay={1300}>
              <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
                {[
                "Familias Simnis + Grupo Dúo + feedlots asociados",
                "Genética seleccionada por marbling y conformación",
                "Pasturas naturales · raciones controladas"].
                map((t) =>
                <li key={t} style={{ display: "flex", gap: 12, alignItems: "flex-start", color: "rgba(245,239,227,0.78)", fontSize: 14.5, lineHeight: 1.5 }}>
                    <span style={{ width: 24, height: 1, background: "var(--anb-devesa-gold)", marginTop: 11, flexShrink: 0 }}></span>
                    {t}
                  </li>
                )}
              </ul>
            </FadeIn>
          </div>
          <FadeIn delay={400}>
            <div style={{ textAlign: "center" }}>
              <div className="numeral" style={{ fontSize: "clamp(120px, 14vw, 240px)", lineHeight: 0.92, color: "var(--anb-bone)" }}>
                <CountUp to={80} duration={2200} />
                <span style={{ fontSize: "0.4em", color: "var(--anb-devesa-gold)" }}>%</span>
              </div>
              <div style={{ fontFamily: "var(--font-stamp)", fontSize: 11.5, letterSpacing: "0.28em", textTransform: "uppercase", color: "var(--anb-bone)", marginTop: 16, lineHeight: 1.5, maxWidth: 320, marginLeft: "auto", marginRight: "auto" }}>
                De nuestra hacienda viene<br />de proveedores propios
              </div>
            </div>
          </FadeIn>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { #cadena .cadena-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
    </section>);

}

/* ============================================================
   Scene 4 · Process · 1.100 animals/day · pinned panels
   ============================================================ */
function Scene4Process() {
  const panels = [
  { num: "1.100", lab: "Animales / día", desc: "Capacidad de faena en planta. Auditada, certificada, consistente." },
  { num: "3.500", lab: "Toneladas de almacenamiento", desc: "Capacidad de cámara fría para asegurar disponibilidad por mercado." },
  { num: "2", lab: "Establecimientos certificados", desc: "Establecimiento N° 5039 (frigorífico) + 5042-5 (curtiembre). BRC, SMETA, NATO." }];

  return (
    <section className="scene scene-pin" id="proceso">
      <div className="scene-bg">
        <div className="gradient-bg" style={{ background: "radial-gradient(ellipse at 80% 30%, rgba(42,58,87,0.4) 0%, rgba(14,26,48,1) 70%)" }} />
        <div className="grain" />
      </div>
      <FadeIn delay={250} className="proceso-img">
        <img src="assets/photos/instalaciones2.png" alt="Planta Devesa · Establecimiento N° 5039 · Azul, BA" />
      </FadeIn>
      <div className="scene-content middle" style={{ paddingTop: 96, paddingBottom: 0 }}>
        <div className="proceso-text">
          <FadeIn>
            <div className="eyebrow">
              <span className="num">03</span>
              <span className="dash"></span>
              <span>Industrial process</span>
            </div>
          </FadeIn>
          <FadeIn delay={150}>
            <h2 className="display-h2" style={{ marginBottom: 14, fontWeight: "300" }}>
              La planta detrás <span className="emph" style={{ fontWeight: "300" }}>de cada corte.</span>
            </h2>
          </FadeIn>
          <FadeIn delay={300} className="lede" as="p" style={{ marginBottom: 0 }}>
            Establecimiento N° 5039 · Las Flores Norte 1718, Azul, BA, Argentina.
          </FadeIn>
        </div>
        <div className="pin-track">
          {panels.map((p, i) =>
          <FadeIn key={i} delay={i * 140} className="pin-panel">
              <div className="lab">0{i + 1} · {p.lab}</div>
              <div className="big">
                {p.num.includes(".") ?
              <CountUp to={parseFloat(p.num.replace(/\./g, ""))} duration={1800} /> :

              <CountUp to={parseInt(p.num, 10)} duration={1400} />
              }
              </div>
              <div className="desc">{p.desc}</div>
            </FadeIn>
          )}
          <FadeIn delay={420} className="pin-panel">
            <div className="lab">04 · Bespoke</div>
            <div className="h2-emph" style={{ fontWeight: "300" }}>
              Productos a medida.<br />
              <span className="it" style={{ fontWeight: "300" }}>Made to order.</span>
            </div>
            <div className="desc" style={{ marginTop: 10 }}>
              Deshuesado de precisión, cortes personalizados por mercado, menudencias y porciones bajo HACCP.
            </div>
          </FadeIn>
        </div>
      </div>
    </section>);

}

/* ============================================================
   Scene 5 · Quality · Marlin Score, real data
   ============================================================ */
function Scene5Quality() {
  const [ref, inView] = useInView({ threshold: 0.4 });
  const score = 4.5; // out of 5
  const pct = score / 5 * 100;
  return (
    <section className="scene" id="calidad" style={{ background: "var(--anb-pampas-navy-deep)" }}>
      <div className="scene-bg">
        <div className="gradient-bg" style={{ background: "radial-gradient(ellipse at 30% 50%, rgba(40,28,20,0.6) 0%, rgba(14,26,48,1) 70%)" }} />
        <div className="grain" />
      </div>
      <div className="scene-content middle">
        <div className="qual-grid">
          <FadeIn>
            <div className="qual-img">
              <img src="assets/photos/ribeye.jpg" alt="Ribeye con marbling Marlin Score 5" style={{ animation: "kenburns 60s linear infinite alternate" }} />
            </div>
          </FadeIn>
          <div ref={ref}>
            <FadeIn>
              <div className="eyebrow">
                <span className="num">03</span>
                <span className="dash"></span>
                <span>Calidad medible</span>
              </div>
            </FadeIn>
            <h2 className="display-h2">
              <BlurText text="Marlin Score, Rib Eye Area," stagger={85} />
              <br />
              <BlurText text="certificados que se renuevan solos." delay={400} stagger={85} emphRange={[1, 4]} />
            </h2>
            <FadeIn delay={1100} className="lede" as="p">
              No estimamos calidad — la medimos. Cada corte se clasifica con métricas reales.
              Cada certificado del holding está vigente.
            </FadeIn>
            <FadeIn delay={1300}>
              <div className="badges">
                {["BRC", "SMETA", "Halal", "NATO", "HACCP", "Angus"].map((b) => <span key={b} className="badge">{b}</span>)}
              </div>
            </FadeIn>
            <FadeIn delay={1500}>
              <div className="score-bar">
                <div className="label">
                  <span>Marlin Score</span>
                  <span style={{ color: "var(--anb-devesa-gold)" }}>{score.toFixed(1)} / 5</span>
                </div>
                <div className="track">
                  <div className="fill" style={{ width: inView ? pct + "%" : "0%" }} />
                  <div className="marker" style={{ left: inView ? pct + "%" : "0%" }} />
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontFamily: "var(--font-stamp)", fontSize: 10, letterSpacing: "0.22em", color: "rgba(245,239,227,0.5)" }}>
                  <span>0</span><span>5</span>
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   Scene 6 · Devesa · The beef that won the world
   ============================================================ */
function Scene6Devesa() {
  return (
    <section className="scene scene-devesa" id="devesa">
      <div className="scene-bg">
        <img src="assets/photos/devesa-boxes.jpg" alt="" style={{ filter: "brightness(0.45) contrast(1.15) saturate(0.92)", animation: "kenburns 36s linear infinite alternate" }} />
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at center, rgba(14,26,48,0.35) 0%, rgba(14,26,48,0.92) 80%)", zIndex: 1 }} />
        <div className="vignette" />
        <div className="grain" />
        <Particles count={28} />
      </div>
      <div className="scene-content center" style={{ alignItems: "center", textAlign: "center" }}>
        <div style={{ maxWidth: 820, margin: "0 auto" }}>
          <FadeIn>
            <div className="eyebrow center" style={{ color: "var(--anb-devesa-gold)" }}>
              <span className="dash"></span>
              <span className="num">04</span>
              <span>Marca insignia · Devesa</span>
              <span className="dash"></span>
            </div>
          </FadeIn>
          <h2 className="display-h2" style={{ margin: "0 auto 28px", textAlign: "center" }}>
            <BlurText text="La carne que" stagger={110} />
            <br />
            <span className="devesa-emph">
              <BlurText text="ganó al mundo." delay={400} stagger={110} />
            </span>
          </h2>
          <FadeIn delay={1100} className="lede" as="p" style={{ margin: "0 auto 28px", textAlign: "center", maxWidth: "32rem" }}>
            Devesa ganó medalla de oro en lomo y bife angosto en el World Steak Challenge 2025 (Londres).
            Cortes excepcionales argentinos para chefs e importadores que entienden la diferencia entre
            buena carne y carne magistral.
          </FadeIn>
          <FadeIn delay={1300}>
            <div className="devesa-trophy">
              <img src="assets/awards/wsc25-gold.png" alt="WSC 2025 gold" />
              <div className="meta">
                <span className="top">🏆 World Steak Challenge 2025</span>
                <span className="mid">Medalla de oro</span>
                <span className="bot">Lomo · Bife angosto</span>
              </div>
            </div>
          </FadeIn>
          <FadeIn delay={1500}>
            <div className="submarks" style={{ margin: "0 auto 28px" }}>
              <span>Sub-marcas próximas 2027–2028:</span>
              <span className="sm-name">Único</span>
              <span style={{ color: "rgba(200,162,75,0.4)" }}>·</span>
              <span className="sm-name">Terram</span>
              <span style={{ color: "rgba(200,162,75,0.4)" }}>·</span>
              <span className="sm-name">Magnus</span>
            </div>
          </FadeIn>
          <FadeIn delay={1700}>
            <div className="cta-row" style={{ justifyContent: "center" }}>
              <a href="#devesa-brand" className="btn btn-gold">
                Conocer la marca Devesa
                <span className="arrow">→</span>
              </a>
              <a href="#cotizar" className="btn btn-secondary">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 11V7a5 5 0 0 1 10 0v4" /><rect x="4" y="11" width="16" height="11" rx="0" /></svg>
                Solicitar cotización
              </a>
            </div>
          </FadeIn>
        </div>
      </div>
    </section>);

}

/* ============================================================
   Scene 7 · World · 14+ markets
   ============================================================ */

// Country markers — rough lat/lng -> SVG coords (equirectangular, w=1000 h=500)
const COUNTRIES = [
{ code: "DE", name: "Alemania", region: "EU", x: 510, y: 130 },
{ code: "IT", name: "Italia", region: "EU", x: 520, y: 165 },
{ code: "ES", name: "España", region: "EU", x: 482, y: 165 },
{ code: "NL", name: "Países Bajos", region: "EU", x: 502, y: 122 },
{ code: "GB", name: "Reino Unido", region: "EU", x: 482, y: 120 },
{ code: "CH", name: "Suiza", region: "EU", x: 510, y: 145 },
{ code: "CN", name: "China", region: "AS", x: 760, y: 180 },
{ code: "HK", name: "Hong Kong", region: "AS", x: 770, y: 215 },
{ code: "SG", name: "Singapur", region: "AS", x: 760, y: 270 },
{ code: "MY", name: "Malasia", region: "AS", x: 755, y: 268 },
{ code: "AE", name: "EAU", region: "MEA", x: 620, y: 210 },
{ code: "IL", name: "Israel", region: "MEA", x: 575, y: 188 },
{ code: "ZA", name: "Sudáfrica", region: "MEA", x: 555, y: 360 },
{ code: "US", name: "EE.UU.", region: "AM", x: 235, y: 175 },
{ code: "MX", name: "México", region: "AM", x: 215, y: 215 },
{ code: "BR", name: "Brasil", region: "AM", x: 320, y: 305 },
{ code: "PE", name: "Perú", region: "AM", x: 270, y: 290 },
{ code: "CL", name: "Chile", region: "AM", x: 285, y: 360 }];

const ORIGIN = { x: 308, y: 360 }; // Argentina

function Scene7World() {
  const [ref, inView] = useInView({ threshold: 0.3 });
  return (
    <section className="scene" id="mundo" style={{ background: "var(--anb-pampas-navy-deep)" }}>
      <div className="scene-bg">
        <div className="gradient-bg" style={{
          background: "radial-gradient(ellipse at 30% 30%, rgba(42,58,87,0.5) 0%, rgba(14,26,48,1) 70%)"
        }} />
        <div className="grain" />
      </div>
      <div className="scene-content middle">
        <div className="mundo-grid">
          <div className="mundo-text">
            <FadeIn>
              <div className="eyebrow">
                <span className="num">05</span>
                <span className="dash"></span>
                <span>Alcance global</span>
              </div>
            </FadeIn>
            <h2 className="display-h2" style={{ marginBottom: 24 }}>
              <BlurText text="14+ países." stagger={110} />
              <br />
              <BlurText text="Cinco continentes." delay={300} stagger={110} />
              <br />
              <BlurText text="Una sola mesa." delay={600} stagger={110} emphRange={[1, 2]} />
            </h2>
            <FadeIn delay={1500} className="lede" as="p" style={{ marginBottom: 0 }}>
              Cada mercado tiene su autorización, sus restricciones, su mesa. Sabemos hablar el idioma de cada uno —
              literalmente, en español, inglés, 中文 y los que se sumen.
            </FadeIn>
          </div>
          <div ref={ref} className="mundo-map">
            <FadeIn delay={400}>
              <div
                className="world-map-wrap"
                style={{
                  opacity: inView ? 1 : 0,
                  transform: inView ? "scale(1)" : "scale(1.02)",
                  transition: "opacity 1200ms var(--ease-out-cinematic), transform 1800ms var(--ease-out-cinematic)"
                }}>
                {inView && (
                  <object
                    type="image/svg+xml"
                    data="assets/photos/argentina-export-map.svg"
                    className="world-map-img"
                    aria-label="Mercados de exportación de Azul Natural Beef · 14+ países en cinco continentes"
                  />
                )}
              </div>
            </FadeIn>
          </div>
        </div>
        <FadeIn delay={500}>
          <div className="region-strip">
            <div className="region">
              <div className="nm">Europa</div>
              <div className="flags">🇩🇪 🇮🇹 🇪🇸 🇳🇱 🇬🇧 🇨🇭</div>
            </div>
            <div className="region">
              <div className="nm">Asia</div>
              <div className="flags">🇨🇳 🇭🇰 🇸🇬 🇲🇾</div>
            </div>
            <div className="region">
              <div className="nm">Medio Oriente · África</div>
              <div className="flags">🇦🇪 🇮🇱 🇿🇦</div>
            </div>
            <div className="region">
              <div className="nm">Américas</div>
              <div className="flags">🇺🇸 🇲🇽 🇧🇷 🇵🇪 🇨🇱</div>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>);

}

/* ============================================================
   Scene 8 · Family · Three brands, two units
   ============================================================ */
function Scene8Family() {
  const cards = [
  { id: "devesa", name: "Devesa", tag: "Carne premium (cortes + menudencias) para chefs e importadores", chip: "WSC 2025", chipKind: "default", img: "assets/photos/ribeye.jpg" },
  { id: "anb", name: "ANB · Argentine Beef", tag: "Calidad consistente para volumen y mercados específicos", img: "assets/photos/cattle.jpg" },
  { id: "cyan", name: "Cyan", tag: "Manufactura B2B · Lanza 2026", chip: "Próximamente", chipKind: "coming", img: "assets/photos/cyan.jpg" }];

  const units = [
  { id: "rendering", name: "Planta de Rendering", tag: "Harina de hueso + cebo líquido", img: "assets/photos/instalaciones.jpg" },
  { id: "cueros", name: "Cueros salados", tag: "Wet salted hides export China · Establecimiento 5042-5", img: "assets/photos/cueros-salados.jpg" }];

  return (
    <section className="scene scene-family" id="familia" style={{ minHeight: "auto" }}>
      <div className="scene-content middle" style={{ minHeight: "auto", paddingTop: 96, paddingBottom: 56 }}>
        <FadeIn>
          <div className="eyebrow">
            <span className="num">06</span>
            <span className="dash"></span>
            <span>La familia Azul</span>
          </div>
        </FadeIn>
        <h2 className="display-h2" style={{ marginBottom: 28 }}>
          <BlurText text="Tres marcas. Dos unidades." stagger={80} />
          <br />
          <BlurText text="Un solo origen." delay={500} stagger={80} emphRange={[1, 2]} />
        </h2>
        <FadeIn delay={300}>
          <div style={{ fontFamily: "var(--font-stamp)", fontSize: 11, letterSpacing: "0.32em", color: "var(--anb-devesa-gold)", textTransform: "uppercase", marginTop: 32, marginBottom: 12 }}>
            ── Marcas
          </div>
        </FadeIn>
        <div className="family-grid">
          {cards.map((c, i) =>
          <FadeIn key={c.id} delay={i * 100} className="family-card">
              <a href={"#" + c.id} style={{ display: "contents", color: "inherit" }}>
                <div className="card-bg" style={c.img ? { backgroundImage: `url(${c.img})` } : { background: c.color }} />
                <div className="card-scrim" />
                {c.chip && <div className={"chip" + (c.chipKind === "coming" ? " coming" : "")}>{c.chip}</div>}
                <div className="card-content">
                  <span className="kicker">Marca</span>
                  <h3>{c.name}</h3>
                  <p>{c.tag}</p>
                  <span className="arrow-link">Conocer <span>→</span></span>
                </div>
              </a>
            </FadeIn>
          )}
        </div>
        <FadeIn delay={400}>
          <div style={{ fontFamily: "var(--font-stamp)", fontSize: 11, letterSpacing: "0.32em", color: "var(--anb-devesa-gold)", textTransform: "uppercase", marginTop: 36, marginBottom: 12 }}>
            ── Unidades de negocio
          </div>
        </FadeIn>
        <div className="family-grid row2">
          {units.map((c, i) =>
          <FadeIn key={c.id} delay={i * 100} className="family-card">
              <a href={"#" + c.id} style={{ display: "contents", color: "inherit" }}>
                <div className="card-bg" style={c.img ? { backgroundImage: `url(${c.img})` } : { background: c.color }} />
                <div className="card-scrim" />
                <div className="card-content">
                  <span className="kicker">Unidad</span>
                  <h3>{c.name}</h3>
                  <p>{c.tag}</p>
                  <span className="arrow-link">Conocer <span>→</span></span>
                </div>
              </a>
            </FadeIn>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   Scene 9 · Closing · Committed to excellence
   ============================================================ */
function Scene9Closing() {
  const ctas = [
  { num: "01", title: "Catálogo Devesa", arr: "/marcas/devesa/" },
  { num: "02", title: "Vender hacienda", arr: "/hacienda/" },
  { num: "03", title: "Postularme al equipo", arr: "/carreras/" },
  { num: "04", title: "Contacto comercial", arr: "/contacto/" },
  { num: "05", title: "Sala de prensa", arr: "/prensa/" }];

  return (
    <section className="scene" id="cierre">
      <SceneBg
        kenburns
        scrim="bottom"
        vignette
        gradient="linear-gradient(180deg, #C8651B 0%, #6B2810 22%, #2B1E2C 50%, #16243F 80%, #0E1A30 100%)" />
      
      <div className="scene-content center" style={{ alignItems: "center", textAlign: "center" }}>
        <FadeIn>
          <div className="eyebrow center">
            <span style={{ fontSize: 14, color: "var(--anb-devesa-gold)" }}>✕</span>
            <span className="dash"></span>
            <span>Comprometidos para la excelencia</span>
            <span className="dash"></span>
          </div>
        </FadeIn>
        <h1 className="display-h1" style={{ margin: "0 auto 28px", maxWidth: "16ch", textAlign: "center" }}>
          <BlurText text="De Argentina al mundo," stagger={100} />
          <br />
          <BlurText text="todos los días." delay={400} stagger={100} emphRange={[0, 2]} />
        </h1>
        <FadeIn delay={1100} className="lede" as="p" style={{ margin: "0 auto 28px", textAlign: "center", maxWidth: "30rem" }}>
          ¿Querés ver el catálogo Devesa, ofrecernos hacienda, postularte al equipo,
          o preguntarnos algo más concreto? Hay una puerta para cada cosa.
        </FadeIn>
        <FadeIn delay={1300} style={{ width: "100%", maxWidth: 1100 }}>
          <div className="closing-grid">
            {ctas.map((c) =>
            <a key={c.num} href={c.arr} className="closing-card">
                <span className="num">{c.num}</span>
                <span className="ttl">{c.title}</span>
                <span className="arr">Ir <span>→</span></span>
              </a>
            )}
          </div>
        </FadeIn>
      </div>
    </section>);

}

Object.assign(window, {
  Scene1Hero, Scene2Origin, Scene3Cattle, Scene4Process,
  Scene5Quality, Scene6Devesa, Scene7World, Scene8Family, Scene9Closing
});