/* ============================================================
   YUZU YATAI — Nosotros · Locales · Contacto
   ============================================================ */

function PageHead({ kicker, title, sub, dark }) {
  return (
    <section
      className={dark ? "on-ink grain" : ""}
      style={{
        background: dark ? "var(--ink)" : "transparent",
        color: dark ? "var(--rice)" : "var(--ink)",
      }}
    >
      <div
        className="wrap"
        style={{
          padding:
            "clamp(44px,6vw,84px) clamp(20px,5vw,56px) clamp(28px,4vw,44px)",
        }}
      >
        <Eyebrow tone={dark ? "cream" : "ink"}>{kicker}</Eyebrow>
        <h1
          className="font-display"
          style={{
            color: dark ? "var(--rice)" : "var(--ink)",
            fontSize: "clamp(38px,6vw,82px)",
            lineHeight: 0.96,
            marginTop: 14,
            maxWidth: 14 + "ch",
          }}
        >
          {title}
        </h1>
        {sub && (
          <p
            style={{
              color: dark ? "rgba(244,239,231,.78)" : "rgba(30,27,24,.66)",
              fontSize: "clamp(16px,1.7vw,20px)",
              maxWidth: 560,
              marginTop: 18,
            }}
          >
            {sub}
          </p>
        )}
      </div>
    </section>
  );
}

function MapPlaceholder({ height = 220, radius = "var(--r-md)" }) {
  return (
    <div
      style={{
        position: "relative",
        height,
        borderRadius: radius,
        overflow: "hidden",
        background: "var(--rice-2)",
        backgroundImage:
          "linear-gradient(var(--rice-3) 1px,transparent 1px),linear-gradient(90deg,var(--rice-3) 1px,transparent 1px)",
        backgroundSize: "32px 32px",
        display: "grid",
        placeItems: "center",
      }}
    >
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "radial-gradient(circle at 50% 50%,transparent,var(--rice-2))",
        }}
      ></div>
      <div
        style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: 8,
          color: "var(--saffron)",
        }}
      >
        <IcPin size={34} />
        <span
          style={{
            fontFamily: "ui-monospace,Menlo,monospace",
            fontSize: 11,
            letterSpacing: ".12em",
            color: "rgba(30,27,24,.5)",
            textTransform: "uppercase",
          }}
        >
          mapa interactivo
        </span>
      </div>
    </div>
  );
}

/* ---------------- NOSOTROS ---------------- */
function Nosotros({ go }) {
  const values = [
    {
      t: "Fresco, siempre",
      d: "Pescado y verduras del día. Cortamos y armamos cada pedido al momento.",
    },
    {
      t: "Fuego de calle",
      d: "El wok bien caliente y la barra precisa: dos técnicas, un mismo respeto.",
    },
    {
      t: "Para compartir",
      d: "Porciones pensadas para la mesa. Comer juntos es parte del plato.",
    },
  ];
  return (
    <main>
      <PageHead
        dark
        kicker="Nuestra historia"
        title="Del yatai a tu mesa"
        sub="Yuzu Yatai nace de una obsesión: capturar la energía de los puestos callejeros de Asia y traerla, sin perder el alma, a Santiago."
      />
      <section
        style={{
          padding: "clamp(40px,6vw,80px) clamp(20px,5vw,56px)",
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: "clamp(28px,5vw,64px)",
          alignItems: "center",
        }}
        className="wrap about-grid"
      >
        <FoodImage
          src="https://images.unsplash.com/photo-1559314809-0d155014e29e?w=1100&q=80&auto=format&fit=crop"
          label="comida callejera tailandesa"
          ratio="4 / 5"
          radius="var(--r-lg)"
        />
        <div>
          <h2 style={{ fontSize: "clamp(28px,3.6vw,46px)", lineHeight: 1.04 }}>
            Un carrito, dos cocinas
          </h2>
          <p
            style={{
              color: "rgba(30,27,24,.72)",
              fontSize: 17,
              marginTop: 18,
              lineHeight: 1.7,
            }}
          >
            “Yatai” son los carros de comida que iluminan las noches de Fukuoka
            y Tokio: humo, conversación y platos servidos al instante. Quisimos
            esa misma calidez, pero con un giro: cruzar la disciplina del sushi
            japonés con la intensidad picante y aromática de la calle
            tailandesa.
          </p>
          <p
            style={{
              color: "rgba(30,27,24,.72)",
              fontSize: 17,
              marginTop: 16,
              lineHeight: 1.7,
            }}
          >
            El yuzu —ese cítrico japonés, ácido y perfumado— se convirtió en
            nuestro símbolo: dos mundos que se encuentran en un solo sabor.
          </p>
        </div>
      </section>

      <section
        className="on-ink grain"
        style={{
          background: "var(--ink)",
          color: "var(--rice)",
          padding: "clamp(48px,7vw,90px) 0",
        }}
      >
        <div className="wrap">
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <Eyebrow tone="cream" style={{ justifyContent: "center" }}>
              Lo que nos mueve
            </Eyebrow>
            <h2
              className="font-display"
              style={{
                color: "var(--rice)",
                fontSize: "clamp(28px,3.8vw,48px)",
                marginTop: 12,
              }}
            >
              Tres reglas, sin excepción
            </h2>
          </div>
          <div
            style={{
              display: "grid",
              gridTemplateColumns:
                "repeat(auto-fit,minmax(min(100%,240px),1fr))",
              gap: 22,
            }}
          >
            {values.map((v, i) => (
              <div
                key={i}
                style={{
                  border: "1px solid rgba(244,239,231,.18)",
                  borderRadius: "var(--r-md)",
                  padding: "28px 26px",
                }}
              >
                <span
                  style={{
                    fontFamily: "var(--display)",
                    fontSize: 30,
                    fontWeight: 700,
                    color: "var(--saffron)",
                  }}
                >
                  0{i + 1}
                </span>
                <h3
                  style={{ color: "var(--rice)", fontSize: 23, marginTop: 12 }}
                >
                  {v.t}
                </h3>
                <p
                  style={{
                    color: "rgba(244,239,231,.7)",
                    marginTop: 10,
                    fontSize: 15.5,
                  }}
                >
                  {v.d}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section
        className="wrap stack-2"
        style={{
          padding: "clamp(48px,7vw,90px) clamp(20px,5vw,56px)",
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: "clamp(28px,5vw,64px)",
          alignItems: "center",
        }}
      >
        <div>
          <Eyebrow>El chef</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(28px,3.6vw,46px)",
              marginTop: 12,
              lineHeight: 1.04,
            }}
          >
            Mano japonesa,
            <br />
            corazón tailandés
          </h2>
          <p
            style={{
              color: "rgba(30,27,24,.72)",
              fontSize: 17,
              marginTop: 18,
              lineHeight: 1.7,
            }}
          >
            Nuestra barra está liderada por un equipo que se formó entre Tokio y
            Bangkok. Cada roll, cada curry y cada caldo lleva años de oficio —y
            la convicción de que la comida callejera puede ser, también, comida
            de autor.
          </p>
          <div style={{ marginTop: 28 }}>
            <Button onClick={() => go("menu")}>
              <IcBag size={18} /> Probar el menú
            </Button>
          </div>
        </div>
        <FoodImage
          src="https://images.unsplash.com/photo-1582450871972-ab5ca641643d?w=1100&q=80&auto=format&fit=crop"
          label="sushi en la barra"
          ratio="4 / 5"
          radius="var(--r-lg)"
        />
      </section>
    </main>
  );
}

/* ---------------- LOCALES ---------------- */
function Locales({ go }) {
  return (
    <main>
      <PageHead
        kicker="Locales"
        title="Dónde encontrarnos"
        sub="Nuestra barra en Puente Alto. Ven a comer, retira tu pedido o pide delivery a tu casa."
      />
      <section
        className="wrap"
        style={{
          padding: "0 clamp(20px,5vw,56px) clamp(56px,8vw,100px)",
          display: "grid",
          gap: 26,
        }}
      >
        {YY.LOCATIONS.map((loc) => (
          <article
            key={loc.id}
            style={{
              display: "grid",
              gridTemplateColumns: "1.1fr 1fr",
              gap: 0,
              background: "var(--rice)",
              borderRadius: "var(--r-lg)",
              overflow: "hidden",
              boxShadow: "var(--shadow-soft)",
              border: "1px solid var(--rice-3)",
            }}
            className="locale-card"
          >
            <div style={{ padding: "clamp(26px,3.5vw,42px)" }}>
              {loc.flagship && (
                <span
                  style={{
                    display: "inline-block",
                    fontSize: 11.5,
                    fontWeight: 600,
                    letterSpacing: ".1em",
                    textTransform: "uppercase",
                    color: "var(--saffron)",
                    border: "1px solid var(--saffron)",
                    padding: "4px 10px",
                    borderRadius: "8px 2px 8px 2px",
                    marginBottom: 14,
                  }}
                >
                  Local principal
                </span>
              )}
              <h2
                style={{ fontSize: "clamp(24px,3vw,38px)", lineHeight: 1.02 }}
              >
                {loc.name}
              </h2>
              <ul
                style={{
                  listStyle: "none",
                  padding: 0,
                  margin: "22px 0 0",
                  display: "flex",
                  flexDirection: "column",
                  gap: 14,
                }}
              >
                {[
                  { I: IcPin, v: loc.addr },
                  { I: IcClock, v: loc.hours },
                  { I: IcPhone, v: loc.phone },
                ].map((r, i) => (
                  <li
                    key={i}
                    style={{
                      display: "flex",
                      gap: 12,
                      alignItems: "flex-start",
                      fontSize: 16,
                    }}
                  >
                    <span
                      style={{
                        color: "var(--saffron)",
                        flexShrink: 0,
                        marginTop: 1,
                      }}
                    >
                      <r.I size={20} />
                    </span>
                    {r.v}
                  </li>
                ))}
              </ul>
              <div
                style={{
                  display: "flex",
                  gap: 12,
                  marginTop: 28,
                  flexWrap: "wrap",
                }}
              >
                <Button onClick={() => go("menu")}>Pedir de este local</Button>
                <Button variant="secondary" iconRight>
                  Cómo llegar
                </Button>
              </div>
            </div>
            <div style={{ padding: 14 }}>
              <MapPlaceholder height={300} radius="var(--r-md)" />
            </div>
          </article>
        ))}
      </section>
    </main>
  );
}

/* ---------------- CONTACTO ---------------- */
function Contacto() {
  const [sent, setSent] = React.useState(false);
  const [motivo, setMotivo] = React.useState("Reserva de mesa");
  const inp = {
    width: "100%",
    padding: "14px 16px",
    border: "1.5px solid var(--rice-3)",
    borderRadius: "var(--r-sm)",
    background: "var(--rice)",
    outline: "none",
    fontSize: 15.5,
  };
  const channels = [
    { I: IcWhats, t: "WhatsApp", v: "+56 9 5555 1234" },
    { I: IcInsta, t: "Instagram", v: "@yuzuyatai" },
    { I: IcMail, t: "Email", v: "hola@yuzuyatai.cl" },
    { I: IcPhone, t: "Teléfono", v: "+56 2 2871 4500" },
  ];
  const motivos = [
    "Reserva de mesa",
    "Eventos privados",
    "Prensa & colaboraciones",
    "Sugerencia",
    "Otro",
  ];
  return (
    <main>
      <PageHead
        kicker="Contacto"
        title="Hablemos"
        sub="¿Reservas, eventos privados, prensa o solo un antojo? Escríbenos y te respondemos en menos de 24 horas."
      />
      <section
        className="wrap contacto-grid"
        style={{
          padding: "0 clamp(20px,5vw,56px) clamp(56px,8vw,100px)",
          display: "grid",
          gridTemplateColumns: "1.15fr .85fr",
          gap: "clamp(28px,4vw,56px)",
          alignItems: "start",
        }}
      >
        {/* form */}
        <form
          onSubmit={(e) => {
            e.preventDefault();
            setSent(true);
          }}
          style={{
            background: "var(--rice)",
            border: "1px solid var(--rice-3)",
            borderRadius: "var(--r-lg)",
            padding: "clamp(26px,3.5vw,40px)",
            boxShadow: "var(--shadow-soft)",
          }}
        >
          {sent ? (
            <div style={{ textAlign: "center", padding: "40px 10px" }}>
              <div
                style={{
                  width: 76,
                  height: 76,
                  margin: "0 auto 20px",
                  borderRadius: "22px 4px 22px 4px",
                  background: "var(--saffron)",
                  color: "var(--rice)",
                  display: "grid",
                  placeItems: "center",
                }}
              >
                <IcCheck size={40} />
              </div>
              <h3 style={{ fontSize: 30 }}>¡Mensaje enviado!</h3>
              <p
                style={{
                  color: "rgba(30,27,24,.6)",
                  marginTop: 12,
                  maxWidth: 320,
                  marginInline: "auto",
                }}
              >
                Gracias por escribirnos sobre{" "}
                <strong style={{ color: "var(--ink)" }}>
                  {motivo.toLowerCase()}
                </strong>
                . Te responderemos muy pronto.
              </p>
              <div style={{ marginTop: 24 }}>
                <Button variant="secondary" onClick={() => setSent(false)}>
                  Enviar otro
                </Button>
              </div>
            </div>
          ) : (
            <React.Fragment>
              <h3 style={{ fontSize: 24, marginBottom: 6 }}>Cuéntanos</h3>
              <p
                style={{
                  color: "rgba(30,27,24,.6)",
                  fontSize: 15,
                  marginBottom: 22,
                }}
              >
                Completa el formulario y nos pondremos en contacto.
              </p>
              <div style={{ display: "grid", gap: 14 }}>
                <div>
                  <label style={lbl}>Nombre</label>
                  <input style={inp} placeholder="Tu nombre" required />
                </div>
                <div
                  style={{
                    display: "grid",
                    gridTemplateColumns: "1fr 1fr",
                    gap: 14,
                  }}
                >
                  <div>
                    <label style={lbl}>Email</label>
                    <input
                      type="email"
                      style={inp}
                      placeholder="tu@correo.cl"
                      required
                    />
                  </div>
                  <div>
                    <label style={lbl}>Teléfono</label>
                    <input style={inp} placeholder="+56 9 …" />
                  </div>
                </div>
                <div>
                  <label style={lbl}>Motivo</label>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                    {motivos.map((m) => (
                      <button
                        type="button"
                        key={m}
                        onClick={() => setMotivo(m)}
                        style={{
                          padding: "9px 15px",
                          borderRadius: "11px 2px 11px 2px",
                          fontSize: 13.5,
                          fontWeight: 600,
                          border: `1.5px solid ${motivo === m ? "var(--saffron)" : "var(--rice-3)"}`,
                          background:
                            motivo === m
                              ? "var(--saffron-soft)"
                              : "var(--rice)",
                          color: motivo === m ? "var(--saffron)" : "var(--ink)",
                        }}
                      >
                        {m}
                      </button>
                    ))}
                  </div>
                </div>
                <div>
                  <label style={lbl}>Mensaje</label>
                  <textarea
                    rows={5}
                    style={{ ...inp, resize: "vertical" }}
                    placeholder="Cuéntanos en qué te ayudamos"
                    required
                  />
                </div>
              </div>
              <div style={{ marginTop: 22 }}>
                <Button type="submit" size="lg" iconRight>
                  Enviar mensaje
                </Button>
              </div>
            </React.Fragment>
          )}
        </form>

        {/* side column */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>
              Escríbenos directo
            </div>
            <div style={{ display: "grid", gap: 10 }}>
              {channels.map((c, i) => (
                <a
                  key={i}
                  href="#"
                  style={{
                    display: "flex",
                    gap: 13,
                    alignItems: "center",
                    background: "var(--rice)",
                    border: "1px solid var(--rice-3)",
                    borderRadius: "var(--r-md)",
                    padding: "15px 18px",
                  }}
                >
                  <span
                    style={{
                      width: 44,
                      height: 44,
                      display: "grid",
                      placeItems: "center",
                      borderRadius: "13px 3px 13px 3px",
                      background: "var(--saffron-soft)",
                      color: "var(--saffron)",
                      flexShrink: 0,
                    }}
                  >
                    <c.I size={22} />
                  </span>
                  <span>
                    <span
                      style={{ fontSize: 12.5, color: "rgba(30,27,24,.55)" }}
                    >
                      {c.t}
                    </span>
                    <span
                      style={{
                        display: "block",
                        fontWeight: 600,
                        fontSize: 16,
                      }}
                    >
                      {c.v}
                    </span>
                  </span>
                </a>
              ))}
            </div>
          </div>

          {/* horario card */}
          <div
            style={{
              background: "var(--ink)",
              color: "var(--rice)",
              borderRadius: "var(--r-md)",
              padding: "22px 24px",
            }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 10,
                marginBottom: 14,
              }}
            >
              <IcClock size={20} />
              <h4
                style={{
                  fontFamily: "var(--body)",
                  fontWeight: 700,
                  fontSize: 16,
                  color: "var(--rice)",
                }}
              >
                Horario
              </h4>
            </div>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                fontSize: 15,
                padding: "6px 0",
                borderBottom: "1px solid rgba(244,239,231,.14)",
              }}
            >
              <span style={{ color: "rgba(244,239,231,.75)" }}>
                Lunes a Domingo
              </span>
              <span style={{ fontWeight: 600 }}>12:30 – 23:00</span>
            </div>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                fontSize: 15,
                padding: "6px 0",
              }}
            >
              <span style={{ color: "rgba(244,239,231,.75)" }}>
                Cocina hasta
              </span>
              <span style={{ fontWeight: 600 }}>22:30</span>
            </div>
            <p
              style={{
                fontSize: 13.5,
                color: "rgba(244,239,231,.6)",
                marginTop: 12,
                display: "flex",
                alignItems: "center",
                gap: 7,
              }}
            >
              <IcPin size={15} /> Av. Concha y Toro 1450, Puente Alto
            </p>
          </div>

          <MapPlaceholder height={200} />
        </div>
      </section>
    </main>
  );
}
const lbl = {
  display: "block",
  fontSize: 13,
  fontWeight: 600,
  color: "rgba(30,27,24,.6)",
  marginBottom: 7,
  letterSpacing: ".02em",
};

Object.assign(window, {
  Nosotros,
  Locales,
  Contacto,
  PageHead,
  MapPlaceholder,
});