/* ============================================================
   YUZU YATAI — Inicio (Home)
   ============================================================ */

const HERO_IMG =
  "https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=1600&q=80&auto=format&fit=crop";
const HERO_IMG2 =
  "https://images.unsplash.com/photo-1617196034796-73dfa7b1fd56?w=1400&q=80&auto=format&fit=crop";

/* ---- HERO (3 variants) ---- */
function Hero({ go, variant }) {
  if (variant === "split") return <HeroSplit go={go} />;
  if (variant === "cartel") return <HeroCartel go={go} />;
  return <HeroInmersivo go={go} />;
}

function HeroButtons({ go, tone = "dark" }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 14 }}>
      <Button size="lg" tone={tone} onClick={() => go("menu")}>
        <IcBag size={19} /> Pedir ahora
      </Button>
      <Button
        size="lg"
        variant="secondary"
        tone={tone}
        onClick={() => go("menu")}
        iconRight
      >
        Ver el menú
      </Button>
    </div>
  );
}

function HeroInmersivo({ go }) {
  return (
    <section
      className="on-ink grain"
      style={{
        position: "relative",
        minHeight: "calc(100dvh - 76px)",
        display: "flex",
        alignItems: "flex-end",
        overflow: "hidden",
        background: "var(--ink)",
      }}
    >
      <img
        src={HERO_IMG}
        alt=""
        onError={(e) => (e.target.style.display = "none")}
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
          opacity: 0.5,
        }}
      />
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "linear-gradient(180deg,rgba(30,27,24,.55) 0%,rgba(30,27,24,.2) 35%,rgba(30,27,24,.85) 100%)",
        }}
      ></div>
      <div
        className="wrap"
        style={{
          position: "relative",
          zIndex: 2,
          padding: "0 clamp(20px,5vw,56px) clamp(48px,7vw,90px)",
          width: "100%",
        }}
      >
        <div className="reveal" style={{ maxWidth: 880 }}>
          <div style={{ marginBottom: 26 }}>
            <ScriptKicker tone="cream" />
          </div>
          <h1
            className="font-display"
            style={{
              color: "var(--rice)",
              fontSize: "clamp(40px,6.4vw,86px)",
              lineHeight: 0.98,
              letterSpacing: "-.02em",
            }}
          >
            Sushi japonés y comida callejera{" "}
            <span style={{ fontStyle: "italic", color: "var(--saffron)" }}>
              tailandesa
            </span>
            , en Chile.
          </h1>
          <p
            style={{
              color: "rgba(244,239,231,.8)",
              fontSize: "clamp(16px,1.7vw,20px)",
              maxWidth: 540,
              margin: "22px 0 34px",
            }}
          >
            Del <em>yatai</em> —el carrito callejero japonés— a tu mesa. Cocina
            fresca, picante y precisa, para pedir y disfrutar.
          </p>
          <HeroButtons go={go} />
        </div>
      </div>
    </section>
  );
}

function HeroSplit({ go }) {
  return (
    <section
      style={{
        display: "grid",
        gridTemplateColumns: "1.05fr 1fr",
        minHeight: "calc(100dvh - 76px)",
        background: "var(--ink)",
      }}
      className="hero-split on-ink"
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          padding: "clamp(40px,6vw,80px)",
        }}
        className="reveal"
      >
        <div style={{ marginBottom: 28 }}>
          <Logo tone="cream" wordmarkHeight={58} kicker={false} />
        </div>
        <h1
          className="font-display"
          style={{
            color: "var(--rice)",
            fontSize: "clamp(36px,4.4vw,64px)",
            lineHeight: 1,
          }}
        >
          Del yatai
          <br />a tu mesa.
        </h1>
        <p
          style={{
            color: "rgba(244,239,231,.78)",
            fontSize: "clamp(16px,1.5vw,19px)",
            maxWidth: 460,
            margin: "22px 0 34px",
          }}
        >
          Sushi japonés y comida callejera tailandesa, servidos con la calidez
          de un puesto callejero y la precisión de la barra.
        </p>
        <HeroButtons go={go} />
      </div>
      <div
        className="grain"
        style={{ position: "relative", overflow: "hidden", minHeight: 320 }}
      >
        <img
          src={HERO_IMG2}
          alt=""
          onError={(e) => (e.target.style.display = "none")}
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            objectFit: "cover",
          }}
        />
        <div
          style={{
            position: "absolute",
            inset: 0,
            background:
              "linear-gradient(90deg,rgba(30,27,24,.5),transparent 30%)",
          }}
        ></div>
      </div>
    </section>
  );
}

function HeroCartel({ go }) {
  return (
    <section
      style={{
        position: "relative",
        overflow: "hidden",
        padding: "clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px)",
      }}
    >
      <div
        style={{
          position: "absolute",
          top: "-12%",
          right: "-10%",
          opacity: "calc(.1 * var(--saffron-presence))",
          pointerEvents: "none",
        }}
      >
        <YuzuSlice size={620} line="var(--saffron)" seed="var(--saffron)" />
      </div>
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div className="reveal" style={{ maxWidth: 940 }}>
          <ScriptKicker />
          <h1
            className="font-display"
            style={{
              fontSize: "clamp(44px,8vw,116px)",
              lineHeight: 0.92,
              letterSpacing: "-.03em",
              margin: "22px 0 0",
            }}
          >
            Sushi japonés,
            <br />
            comida callejera
            <br />
            <span style={{ fontStyle: "italic", color: "var(--saffron)" }}>
              tailandesa.
            </span>
          </h1>
          <p
            style={{
              fontSize: "clamp(16px,1.7vw,20px)",
              maxWidth: 520,
              margin: "26px 0 32px",
              color: "var(--ink)",
            }}
          >
            Del yatai a tu mesa, en Chile. Pide en línea, retira en local o
            recíbelo en casa.
          </p>
          <HeroButtons go={go} tone="light" />
        </div>
        <div
          className="grain"
          style={{
            marginTop: 44,
            borderRadius: "var(--r-lg)",
            overflow: "hidden",
            aspectRatio: "21 / 9",
            position: "relative",
            background: "var(--ink)",
          }}
        >
          <img
            src={HERO_IMG}
            alt=""
            onError={(e) => (e.target.style.display = "none")}
            style={{
              position: "absolute",
              inset: 0,
              width: "100%",
              height: "100%",
              objectFit: "cover",
            }}
          />
        </div>
      </div>
    </section>
  );
}

/* ---- intro strip ---- */
function IntroStrip() {
  return (
    <section
      className="wrap"
      style={{
        padding: "clamp(56px,8vw,104px) clamp(20px,5vw,56px)",
        textAlign: "center",
      }}
    >
      <Eyebrow style={{ justifyContent: "center" }}>
        寿司 · ไทย · La fusión
      </Eyebrow>
      <p
        style={{
          fontFamily: "var(--title)",
          fontWeight: 600,
          fontSize: "clamp(26px,3.6vw,46px)",
          lineHeight: 1.18,
          maxWidth: 940,
          margin: "20px auto 0",
          letterSpacing: "-.01em",
        }}
      >
        Dos cocinas callejeras, una misma barra. La precisión del{" "}
        <span style={{ color: "var(--saffron)" }}>sushi</span> japonés y el
        fuego del <span style={{ color: "var(--saffron)" }}>wok</span>{" "}
        tailandés, hechos para compartir.
      </p>
    </section>
  );
}

/* ---- destacados ---- */
function Destacados({ openItem, go, cardVariant }) {
  const picks = ["roll-yuzu", "pad-thai", "gyozas", "salmon-teriyaki"].map(
    (id) => YY.MENU.find((m) => m.id === id),
  );
  return (
    <section
      style={{
        background: "var(--rice-2)",
        padding: "clamp(56px,8vw,100px) 0",
      }}
    >
      <div className="wrap">
        <div
          style={{
            display: "flex",
            alignItems: "flex-end",
            justifyContent: "space-between",
            gap: 24,
            flexWrap: "wrap",
            marginBottom: 40,
          }}
        >
          <div>
            <Eyebrow>Destacados del menú</Eyebrow>
            <h2 style={{ fontSize: "clamp(30px,4vw,52px)", marginTop: 12 }}>
              Lo que más se pide
            </h2>
          </div>
          <Button variant="secondary" onClick={() => go("menu")} iconRight>
            Ver el menú completo
          </Button>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns:
              "repeat(auto-fill,minmax(min(100%,260px),1fr))",
            gap: "clamp(16px,2vw,26px)",
          }}
        >
          {picks.map((m) => (
            <MenuCard
              key={m.id}
              item={m}
              onAdd={() => openItem(m)}
              variant={cardVariant}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- cómo pedir ---- */
function ComoPedir({ go }) {
  const steps = [
    {
      Icon: IcBag,
      t: "Elige tu pedido",
      d: "Arma tu orden desde el menú: sushi, rolls, wok tailandés y más.",
    },
    {
      Icon: IcBike,
      t: "Retiro o delivery",
      d: "Retira en local o recibe en casa con nuestro delivery o las apps.",
    },
    {
      Icon: IcSmile,
      t: "Disfruta",
      d: "Todo llega fresco, listo para abrir y compartir. Itadakimasu.",
    },
  ];
  return (
    <section
      className="wrap"
      style={{ padding: "clamp(56px,8vw,100px) clamp(20px,5vw,56px)" }}
    >
      <div style={{ textAlign: "center", marginBottom: 48 }}>
        <Eyebrow style={{ justifyContent: "center" }}>Cómo pedir</Eyebrow>
        <h2 style={{ fontSize: "clamp(30px,4vw,52px)", marginTop: 12 }}>
          Tres pasos, sin vueltas
        </h2>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit,minmax(min(100%,240px),1fr))",
          gap: "clamp(20px,3vw,40px)",
        }}
      >
        {steps.map((s, i) => (
          <div
            key={i}
            style={{
              textAlign: "center",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 14,
            }}
          >
            <div
              style={{
                position: "relative",
                width: 84,
                height: 84,
                display: "grid",
                placeItems: "center",
                borderRadius: "26px 5px 26px 5px",
                background: "var(--saffron-soft)",
                color: "var(--saffron)",
                border: "1.5px solid var(--saffron)",
              }}
            >
              <s.Icon size={34} />
              <span
                style={{
                  position: "absolute",
                  top: -10,
                  right: -10,
                  width: 30,
                  height: 30,
                  borderRadius: "50%",
                  background: "var(--ink)",
                  color: "var(--rice)",
                  fontFamily: "var(--display)",
                  fontSize: 15,
                  display: "grid",
                  placeItems: "center",
                  fontWeight: 700,
                }}
              >
                {i + 1}
              </span>
            </div>
            <h3 style={{ fontSize: 23 }}>{s.t}</h3>
            <p
              style={{
                color: "rgba(30,27,24,.7)",
                maxWidth: 280,
                fontSize: 15.5,
              }}
            >
              {s.d}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---- nuestra historia (dark band) ---- */
function HistoriaBand({ go }) {
  return (
    <section
      className="on-ink grain"
      style={{
        background: "var(--ink)",
        color: "var(--rice)",
        position: "relative",
      }}
    >
      <div
        className="wrap historia-grid"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: "clamp(28px,5vw,72px)",
          alignItems: "center",
          padding: "clamp(56px,8vw,104px) clamp(20px,5vw,56px)",
        }}
      >
        <div className="historia-text">
          <Eyebrow tone="cream">Nuestra historia</Eyebrow>
          <h2
            className="font-display"
            style={{
              color: "var(--rice)",
              fontSize: "clamp(30px,4.2vw,56px)",
              marginTop: 14,
              lineHeight: 1.02,
            }}
          >
            Nació en un carrito.
            <br />
            Creció en Santiago.
          </h2>
          <p
            style={{
              color: "rgba(244,239,231,.78)",
              fontSize: 17,
              margin: "22px 0 32px",
              maxWidth: 480,
            }}
          >
            Yatai son los puestos callejeros que iluminan las noches de Japón.
            Tomamos esa energía —humo, fuego y barra— y la cruzamos con los
            sabores intensos de la calle tailandesa. El resultado es Yuzu Yatai.
          </p>
          <Button
            variant="secondary"
            tone="dark"
            onClick={() => go("nosotros")}
            iconRight
          >
            Conoce nuestra historia
          </Button>
        </div>
        <FoodImage
          src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=1100&q=80&auto=format&fit=crop"
          label="ambiente del local"
          ratio="4 / 5"
          radius="var(--r-lg)"
        />
      </div>
    </section>
  );
}

/* ---- delivery / zonas ---- */
function DeliveryStrip() {
  return (
    <section
      className="wrap"
      style={{ padding: "clamp(48px,7vw,88px) clamp(20px,5vw,56px)" }}
    >
      <div
        style={{
          borderRadius: "var(--r-lg)",
          border: "1.5px solid var(--rice-3)",
          padding: "clamp(28px,4vw,52px)",
          display: "grid",
          gridTemplateColumns: "1.2fr 1fr",
          gap: 40,
          alignItems: "center",
        }}
        className="delivery-grid"
      >
        <div>
          <Eyebrow>Retiro & Delivery</Eyebrow>
          <h2 style={{ fontSize: "clamp(26px,3.4vw,42px)", marginTop: 12 }}>
            Como prefieras pedir
          </h2>
          <p
            style={{
              color: "rgba(30,27,24,.7)",
              marginTop: 14,
              maxWidth: 440,
              fontSize: 16,
            }}
          >
            Retiro en local en 20–30 min, delivery propio en Puente Alto y
            comunas cercanas, o pídenos por tus apps favoritas.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {[
            { I: IcStore, t: "Retiro en local", d: "Sin costo · 20–30 min" },
            { I: IcBike, t: "Delivery propio", d: "Puente Alto y alrededores" },
          ].map((r, i) => (
            <div
              key={i}
              style={{
                display: "flex",
                gap: 14,
                alignItems: "center",
                background: "var(--rice-2)",
                padding: "16px 18px",
                borderRadius: "var(--r-sm)",
              }}
            >
              <div
                style={{
                  width: 46,
                  height: 46,
                  display: "grid",
                  placeItems: "center",
                  borderRadius: "13px 3px 13px 3px",
                  background: "var(--rice)",
                  color: "var(--saffron)",
                  flexShrink: 0,
                }}
              >
                <r.I size={24} />
              </div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 16 }}>{r.t}</div>
                <div style={{ fontSize: 14, color: "rgba(30,27,24,.6)" }}>
                  {r.d}
                </div>
              </div>
            </div>
          ))}
          <div
            style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 4 }}
          >
            {YY.DELIVERY.map((d) => (
              <span
                key={d}
                style={{
                  fontSize: 13,
                  fontWeight: 600,
                  padding: "8px 14px",
                  borderRadius: "10px 2px 10px 2px",
                  border: "1px solid var(--rice-3)",
                  color: "rgba(30,27,24,.7)",
                }}
              >
                {d}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- reseñas + instagram ---- */
function SocialProof() {
  return (
    <section
      style={{
        background: "var(--rice-2)",
        padding: "clamp(56px,8vw,100px) 0",
      }}
    >
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <Eyebrow style={{ justifyContent: "center" }}>Lo que dicen</Eyebrow>
          <h2 style={{ fontSize: "clamp(28px,3.8vw,48px)", marginTop: 12 }}>
            Cariño de barrio
          </h2>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(min(100%,260px),1fr))",
            gap: 20,
            marginBottom: 56,
          }}
        >
          {YY.REVIEWS.map((r, i) => (
            <figure
              key={i}
              style={{
                margin: 0,
                background: "var(--rice)",
                borderRadius: "var(--r-md)",
                padding: "28px 26px",
                boxShadow: "var(--shadow-soft)",
              }}
            >
              <div
                style={{
                  display: "flex",
                  gap: 2,
                  color: "var(--saffron)",
                  marginBottom: 14,
                }}
              >
                {[0, 1, 2, 3, 4].map((s) => (
                  <IcStar key={s} size={16} />
                ))}
              </div>
              <blockquote
                style={{
                  margin: 0,
                  fontFamily: "var(--body)",
                  fontWeight: 400,
                  fontSize: 17,
                  lineHeight: 1.55,
                  letterSpacing: "0",
                }}
              >
                “{r.q}”
              </blockquote>
              <figcaption
                style={{
                  marginTop: 18,
                  fontSize: 14,
                  color: "rgba(30,27,24,.6)",
                }}
              >
                <strong style={{ color: "var(--ink)" }}>{r.a}</strong> · {r.src}
              </figcaption>
            </figure>
          ))}
        </div>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: 16,
            marginBottom: 20,
            flexWrap: "wrap",
          }}
        >
          <h3
            style={{
              fontSize: 24,
              display: "flex",
              alignItems: "center",
              gap: 10,
            }}
          >
            <IcInsta size={24} /> @yuzuyatai
          </h3>
          <a href="#" style={{ color: "var(--saffron)", fontWeight: 600 }}>
            Seguir →
          </a>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(150px,1fr))",
            gap: 10,
          }}
        >
          {[
            "roll de la casa",
            "sashimi",
            "pad thai",
            "gyozas",
            "barra del local",
            "mochi",
          ].map((l, i) => (
            <FoodImage
              key={i}
              label={l}
              ratio="1 / 1"
              radius="14px 3px 14px 3px"
              src={
                [
                  "https://images.unsplash.com/photo-1611143669185-af224c5e3252?w=500&q=80&auto=format&fit=crop",
                  "https://images.unsplash.com/photo-1582450871972-ab5ca641643d?w=500&q=80&auto=format&fit=crop",
                  "https://images.unsplash.com/photo-1559314809-0d155014e29e?w=500&q=80&auto=format&fit=crop",
                  "https://images.unsplash.com/photo-1496116218417-1a781b1c416c?w=500&q=80&auto=format&fit=crop",
                  "https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=500&q=80&auto=format&fit=crop",
                  "https://images.unsplash.com/photo-1631206753348-db44968fd440?w=500&q=80&auto=format&fit=crop",
                ][i]
              }
            />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- CTA final ---- */
function FinalCTA({ go }) {
  return (
    <section
      className="wrap"
      style={{ padding: "clamp(48px,7vw,96px) clamp(20px,5vw,56px)" }}
    >
      <div
        className="on-ink grain"
        style={{
          position: "relative",
          overflow: "hidden",
          background: "var(--ink)",
          color: "var(--rice)",
          borderRadius: "var(--r-lg)",
          padding: "clamp(40px,6vw,80px)",
          textAlign: "center",
        }}
      >
        <div
          style={{
            position: "absolute",
            bottom: "-40%",
            left: "50%",
            transform: "translateX(-50%)",
            opacity: "calc(.14 * var(--saffron-presence))",
          }}
        >
          <YuzuSlice size={460} line="var(--saffron)" seed="var(--saffron)" />
        </div>
        <div style={{ position: "relative", zIndex: 2 }}>
          <h2
            className="font-display"
            style={{
              color: "var(--rice)",
              fontSize: "clamp(32px,5vw,64px)",
              lineHeight: 1,
            }}
          >
            ¿Con hambre?{" "}
            <span style={{ fontStyle: "italic", color: "var(--saffron)" }}>
              Pide ahora.
            </span>
          </h2>
          <p
            style={{
              color: "rgba(244,239,231,.78)",
              fontSize: 18,
              margin: "20px auto 32px",
              maxWidth: 460,
            }}
          >
            Tu próxima comida favorita está a unos clics. Retiro o delivery, en
            minutos.
          </p>
          <div
            style={{
              display: "flex",
              gap: 14,
              justifyContent: "center",
              flexWrap: "wrap",
            }}
          >
            <Button size="lg" tone="dark" onClick={() => go("menu")}>
              <IcBag size={19} /> Pedir ahora
            </Button>
            <Button
              size="lg"
              variant="secondary"
              tone="dark"
              onClick={() => go("locales")}
              iconRight
            >
              Ver locales
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home({ go, openItem, t }) {
  return (
    <main>
      <Hero go={go} variant={t.hero} />
      <IntroStrip />
      <Destacados openItem={openItem} go={go} cardVariant={t.card} />
      <ComoPedir go={go} />
      <HistoriaBand go={go} />
      <DeliveryStrip />
      <SocialProof />
      <FinalCTA go={go} />
    </main>
  );
}

Object.assign(window, { Home, Hero });