/* global React, window, BOXES, DINNER, IG_TILES, CAL_DAYS, PICKUP_WINDOWS, PH, Seal, Countdown, Price, fmt, Marquee */
// =======================================================================
//  Hero, Boxes, Dinner, Logistics (calendário + WhatsApp), Instagram, Footer
// =======================================================================

const { useState: useStateS } = React;

/* ===================== HERO ===================== */

function Hero({ headline, onShop, onReserve }) {
  return (
    <section id="top" className="hero">
      <Seal />
      <div className="hero-grid">
        <div>
          <div className="eyebrow">
            <span className="heart" aria-hidden="true" style={{ color: "var(--accent)" }}></span>
            &nbsp;&nbsp;Edição limitada · 12 a 14 de junho
          </div>
          <h1 className="display">
            Junho sem pressa,<br />
            <span className="ink-soft">no Zuzunely.</span>
          </h1>
          <p className="lede">
            Pelo Dia dos Namorados, a nossa casa prepara presentes especiais
            para quem quer aproveitar com quem ama — e um jantar harmonizado
            de três tempos pela chef Bruna Haddad.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 28, flexWrap: "wrap" }}>
            <a
              href={window.ZUZU_JD_CONFIG?.reservationUrl || "/reservas/?evento=junho-sem-pressa-jantar"}
              className="cart-btn"
              style={{ background: "var(--accent)", borderColor: "var(--accent)" }}
            >
              Reserva do jantar
              <span style={{ fontStyle: "italic", fontFamily: "var(--font-display)", textTransform: "none", letterSpacing: 0, fontSize: 16 }}> →</span>
            </a>
            <a
              href="https://zuzunely.com.br/categoria-produto/presentes/caixas/dia-dos-namorados/"
              className="cart-btn"
              style={{ background: "transparent", color: "var(--ink)", borderColor: "var(--ink)" }}
            >
              Caixas especiais para quem você ama
            </a>
            <a
              href={`https://wa.me/${String(window.ZUZU_JD_CONFIG?.whatsapp || "5531984732761").replace(/\D/g, "")}?text=${encodeURIComponent("Oi, Zuzunely! Quero saber mais sobre o Junho sem pressa ♥")}`}
              target="_blank"
              rel="noopener noreferrer"
              className="cart-btn"
              style={{ background: "transparent", color: "var(--ink-soft)", borderColor: "transparent", paddingLeft: 0, fontSize: 13 }}
            >
              <span style={{ marginRight: 6 }}>💬</span>Fale com a gente no WhatsApp
            </a>
          </div>
          <Countdown />
        </div>

      </div>
    </section>
  );
}

/* ===================== BOXES ===================== */

function Boxes({ onAdd, cart }) {
  const products = [
    {
      id: "caixa-2",
      wcId: 4200,
      name: "Cinco mil explicações possíveis para o amor",
      price: "R$ 460,00",
      img: "https://zuzunely.com.br/wp-content/uploads/2026/05/2-1-400x457.png",
      url: "https://zuzunely.com.br/produto/caixa-vem-dancar-comigo/",
      serves: "Serve 2",
    },
    {
      id: "caixa-1",
      wcId: 4196,
      name: "Sem-Razões do Amor",
      price: "R$ 198,00",
      img: "https://zuzunely.com.br/wp-content/uploads/2026/05/1-1-400x457.png",
      url: "https://zuzunely.com.br/produto/caixa-maos-dadas/",
      serves: "Serve 1",
    },
    {
      id: "tabua-acucena",
      wcId: 4204,
      name: "Tábua Açucena",
      price: "R$ 395,00",
      img: "https://zuzunely.com.br/wp-content/uploads/2026/05/3-400x457.png",
      url: "https://zuzunely.com.br/produto/tabua-acucena/",
      serves: "Para 2 a 3",
    },
  ];

  function handleAdd(p, e) {
    e.preventDefault();
    // Adiciona ao carrinho WooCommerce direto via URL
    window.location.href = `https://zuzunely.com.br/?add-to-cart=${p.wcId}`;
  }

  return (
    <section id="caixas" className="section" style={{ background: "var(--bg)" }}>
      <div className="frame">
        <header className="section-head" style={{ marginBottom: 40 }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(28px, 4vw, 42px)", fontWeight: 400, fontStyle: "italic" }}>
            Nossas caixas
          </h2>
          <div className="meta">Encomendas até 09/06 · retirada e entrega 12, 13 e 14/06 · apenas de manhã</div>
        </header>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: "clamp(16px, 2vw, 32px)",
        }}>
          {products.map((p) => {
            const inCart = cart?.find((c) => c.id === p.id);
            return (
              <a
                key={p.id}
                href={p.url}
                style={{ textDecoration: "none", color: "inherit", display: "flex", flexDirection: "column" }}
              >
                <div style={{
                  background: "var(--paper)",
                  overflow: "hidden",
                  display: "flex",
                  flexDirection: "column",
                  height: "100%",
                }}>
                  <div style={{ overflow: "hidden", background: "#f5f0ea" }}>
                    <img
                      src={p.img}
                      alt={p.name}
                      style={{ width: "100%", aspectRatio: "400/457", objectFit: "cover", display: "block", transition: "transform .3s ease" }}
                      onMouseOver={(e) => e.currentTarget.style.transform = "scale(1.03)"}
                      onMouseOut={(e) => e.currentTarget.style.transform = "scale(1)"}
                    />
                  </div>
                  <div style={{ padding: "16px 12px 20px", flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
                    <div style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
                      {p.serves}
                    </div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(15px, 1.8vw, 19px)", fontStyle: "italic", lineHeight: 1.2, color: "var(--ink)" }}>
                      {p.name}
                    </div>
                    <div style={{ fontSize: 15, color: "var(--ink)", marginTop: "auto", paddingTop: 10 }}>
                      {p.price}
                    </div>
                    <button
                      onClick={(e) => handleAdd(p, e)}
                      style={{
                        marginTop: 8,
                        padding: "10px 0",
                        background: "var(--ink)",
                        color: "var(--paper)",
                        border: "none",
                        borderRadius: 2,
                        fontSize: 11,
                        letterSpacing: "0.14em",
                        textTransform: "uppercase",
                        cursor: "pointer",
                        width: "100%",
                      }}
                    >
                      Adicionar ao carrinho
                    </button>
                  </div>
                </div>
              </a>
            );
          })}
        </div>

        <style>{`
          @media (max-width: 640px) {
            #caixas .section > div > div[style*="repeat(3"] {
              grid-template-columns: 1fr !important;
            }
          }
        `}</style>
      </div>
    </section>
  );
}


/* ===================== DINNER ===================== */

function Dinner({ onReserve }) {
  return (
    <section id="jantar" className="section dark">
      <div className="frame">
        <header className="section-head">
          
          <h2 style={{ color: "var(--paper)" }}>O jantar</h2>
          <div className="meta">12 de junho · reservas pelo sistema da casa · 3 tempos harmonizados</div>
        </header>

        <div className="dinner">
          <div className="left">
            <img
              src="https://zuzunely.com.br/wp-content/uploads/2026/05/Screenshot_1.jpg"
              alt="Mesa do jantar Junho sem pressa — Zuzunely"
              style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", display: "block", borderRadius: 4 }}
            />
            <div className="reserve-card">
              <div className="eyebrow" style={{ color: "#fff8f0aa" }}>Reserva especial</div>
              <div className="poetic" style={{ color: "#fff8f0", fontSize: 24, lineHeight: 1.25 }}>
                Três tempos pensados pra durar — comer devagar, brindar duas vezes.
              </div>
              <div className="row"><span>Data</span><strong>{DINNER.date}</strong></div>
              <div className="row"><span>Horário</span><strong>{DINNER.hour}</strong></div>
              <div className="row"><span>Reserva</span><strong>{DINNER.seats}</strong></div>
              <div className="row"><span>A partir de</span><strong>R$ {fmt(DINNER.price)} <small style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontFamily: 'var(--font-body)', fontStyle: 'normal' }}>por pessoa</small></strong></div>
              <a
                className="btn"
                href={window.ZUZU_JD_CONFIG?.reservationUrl || "/reservas/?evento=junho-sem-pressa-jantar"}
              >
                Reservar pelo sistema <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", textTransform: "none", letterSpacing: 0, fontSize: 16 }}>→</span>
              </a>
            </div>
          </div>

          <div className="menu">
            <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 18 }}>Cardápio</div>
            <h3 className="display" style={{ fontSize: 32, margin: "0 0 8px", color: "var(--paper)" }}>
              Três tempos, sem pressa.
            </h3>
            <p className="lede" style={{ color: "var(--ink-soft)", marginBottom: 32, maxWidth: "42ch" }}>
              A mesma cozinha de sempre, mas vestida para a ocasião. Substituições de pratos podem ser combinadas para restrições alimentares.
            </p>

            {DINNER.courses.map((course, idx) => (
              <div className="menu-course" key={course.label}>
                <div className="label">{String(idx + 1).padStart(2, "0")} · {course.label}</div>
                {course.items.map((it, i) => (
                  <div className="menu-item" key={i}>
                    <span className="num">{String(idx + 1)}.{i + 1}</span>
                    <div>
                      <h4>{it.title}</h4>
                      <p>{it.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== CALENDAR + DELIVERY ===================== */

function Logistics({ deliveryMode, setDeliveryMode, selDay, setSelDay, selWindow, setSelWindow, selPeriod, setSelPeriod }) {
  return (
    <section id="calendario" className="section">
      <div className="frame">
        <header className="section-head">
          <div className="idx">03 / 03</div>
          <h2>Retirada <em style={{ color: "var(--accent)" }}>&amp;</em> entrega</h2>
          <div className="meta">Pré-cadastro pelo WhatsApp · confirmação pela equipe</div>
        </header>

        <div className="logistics">
          <div className="calendar">
            <div className="head">
              <div className="month">Junho · 2026</div>
              <div className="legend">
                <span><i style={{ background: "color-mix(in oklab, var(--accent) 16%, var(--paper))" }}></i> Janela do amor</span>
                <span><i style={{ background: "var(--ink)" }}></i> Selecionado</span>
                <span><i style={{ background: "var(--bg-2)" }}></i> Esgotado</span>
              </div>
            </div>
            <div className="cal-grid">
              {["D", "S", "T", "Q", "Q", "S", "S"].map((d, i) => (
                <div key={i} className="dow">{d}</div>
              ))}
              {/* domingo é o primeiro dia. Em junho/2026, 01/06 é segunda. */}
              <div className="day muted"></div>
              {CAL_DAYS.map((day) => {
                const isSel = selDay === day.d;
                const isSold = day.s === "sold";
                const cls = `day ${day.s} ${isSel ? "sel" : ""} ${isSold ? "" : "avail"}`;
                return (
                  <div
                    key={day.d}
                    className={cls}
                    onClick={() => !isSold && setSelDay(day.d)}
                    role="button"
                    tabIndex={isSold ? -1 : 0}
                  >
                    <div>{day.d}</div>
                  </div>
                );
              })}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 12 }}>
              <button
                className={deliveryMode === "entrega" ? "sel" : ""}
                onClick={() => setDeliveryMode("entrega")}
                style={{ border: "1px solid var(--line)", background: deliveryMode === "entrega" ? "var(--ink)" : "var(--paper)", color: deliveryMode === "entrega" ? "var(--paper)" : "var(--ink)", borderRadius: 999, padding: "10px 14px", cursor: "pointer" }}
              >
                Entrega
              </button>
              <button
                className={deliveryMode === "retirada" ? "sel" : ""}
                onClick={() => setDeliveryMode("retirada")}
                style={{ border: "1px solid var(--line)", background: deliveryMode === "retirada" ? "var(--ink)" : "var(--paper)", color: deliveryMode === "retirada" ? "var(--paper)" : "var(--ink)", borderRadius: 999, padding: "10px 14px", cursor: "pointer" }}
              >
                Retirada
              </button>
            </div>

            {deliveryMode === "retirada" ? (
              <div className="windows">
                {PICKUP_WINDOWS.map((w) => (
                  <button
                    key={w}
                    className={selWindow === w ? "sel" : ""}
                    onClick={() => setSelWindow(w)}
                    disabled={!selDay}
                    style={{ opacity: selDay ? 1 : 0.4 }}
                  >
                    {w}
                  </button>
                ))}
              </div>
            ) : (
              <div className="windows">
                {["Manhã"].map((period) => (
                  <button
                    key={period}
                    className={selPeriod === period ? "sel" : ""}
                    onClick={() => setSelPeriod(period)}
                    disabled={!selDay}
                    style={{ opacity: selDay ? 1 : 0.4 }}
                  >
                    {period}
                  </button>
                ))}
              </div>
            )}

            <p style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 12, fontStyle: "italic" }}>
              {selDay
                ? deliveryMode === "retirada"
                  ? `Você escolheu retirada em ${selDay} de junho${selWindow ? `, entre ${selWindow}` : ", agora escolha um horário"}.`
                  : `Você escolheu entrega em ${selDay} de junho, no período da ${String(selPeriod || "manhã").toLowerCase()}.`
                : "Escolha o dia — 12, 13 ou 14 de junho, sempre de manhã."}
            </p>
          </div>

          <div className="delivery-card">
            <h2>Onde encontrar a gente.</h2>
            <p className="poetic" style={{ fontSize: 20, color: "var(--ink-soft)", maxWidth: "38ch" }}>
              Você pode retirar na casa ou pedir entrega — nos dias 12, 13 e 14 de junho, sempre de manhã (08h às 12h). O cadastro vai pelo WhatsApp e a equipe confirma disponibilidade, frete e pagamento.
            </p>
            <div className="info-grid">
              <div className="cell">
                <div className="label">Endereço</div>
                <div className="val">R. Araguari, 1000 — Sto. Agostinho, BH/MG</div>
              </div>
              <div className="cell">
                <div className="label">Janela</div>
                <div className="val">12, 13 e 14 jun · 08h–12h</div>
              </div>
              <div className="cell">
                <div className="label">Entrega</div>
                <div className="val">Frete calculado pela equipe</div>
              </div>
              <div className="cell">
                <div className="label">Encomenda até</div>
                <div className="val">09 jun · 23h59 — prazo máximo</div>
              </div>
            </div>
            <button
              className="whats"
              onClick={() => {
                const phone = String(window.ZUZU_JD_CONFIG?.whatsapp || "5531984732761").replace(/\D/g, "");
                const msg = "Olá, Zuzunely! Gostaria de fazer uma encomenda para o Junho sem pressa.";
                window.open(`https://wa.me/${phone}?text=${encodeURIComponent(msg)}`, "_blank", "noopener,noreferrer");
              }}
            >
              <span>Falar pelo WhatsApp · (31) 9 8473-2761</span>
              <span className="arrow"></span>
            </button>
            <div style={{ display: "flex", gap: 12, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
              <span>@zuzunely_</span><span>·</span><span>contato@zuzunely.com.br</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== INSTAGRAM ===================== */

function Instagram() {
  return (
    <section id="instagram" className="section warm">
      <div className="frame">
        <header className="section-head">
          <div className="idx">✦</div>
          <h2>No Instagram <em style={{ color: "var(--accent)" }}>—</em> a campanha em movimento</h2>
          <div className="meta">5 peças entre 02 e 12 de junho · siga @zuzunely</div>
        </header>

        <div className="ig-strip">
          {IG_TILES.map((t, i) => (
            <div className="ig-tile" key={i}>
              <PH label={`peça ${i + 1} · ${t.tag.toLowerCase()}`} />
              <span className="tag">{t.tag}</span>
              <div className="cap">{t.cap}</div>
            </div>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginTop: 56 }}>
          <div>
            <div className="eyebrow">Hashtag oficial</div>
            <h3 className="display" style={{ fontSize: 56, margin: "6px 0 12px" }}>
              #junhosempressa
            </h3>
            <p className="poetic" style={{ fontSize: 18, color: "var(--ink-soft)", maxWidth: "42ch" }}>
              Quem postar a caixa marcando @zuzunely ganha um chocolate quente extra na próxima visita.
            </p>
          </div>
          <div>
            <div className="eyebrow">Cardápio digital</div>
            <h3 className="display" style={{ fontSize: 32, margin: "6px 0 12px" }}>
              Baixe para mandar para o seu par.
            </h3>
            <p style={{ fontSize: 14, color: "var(--ink-soft)", marginBottom: 18 }}>
              PDF com as quatro caixas, o jantar, datas e como pedir — pronto para enviar.
            </p>
            <button className="add" style={{ fontSize: 11 }}>Baixar PDF · 1,2 MB</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== FOOTER ===================== */

function Footer() {
  const wa = String(window.ZUZU_JD_CONFIG?.whatsapp || "5531984732761").replace(/\D/g, "");
  const waMsg = encodeURIComponent("Oi, Zuzunely! Quero saber mais sobre o Junho sem pressa ♥");
  return (
    <footer className="footer">
      <div className="frame">
        <div className="footer-grid">
          <div className="col-brand">
            <div className="display">Zuzunely</div>
            <p style={{ maxWidth: "32ch", color: "var(--ink-soft)", fontSize: 14 }}>
              Café, padoca e cozinha autoral pela chef Bruna Haddad. Sto. Agostinho, BH — de quarta a domingo.
            </p>
          </div>
          <div>
            <h4>Dia dos namorados</h4>
            <a href="#caixas">As caixas</a>
            <a href="#jantar">O jantar</a>
            <a href="#calendario">Retirada</a>
          </div>
          <div>
            <h4>Contato</h4>
            <a
              href={`https://wa.me/${wa}?text=${waMsg}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              Fale com a gente no WhatsApp
            </a>
            <a href="https://instagram.com/zuzunely_" target="_blank" rel="noopener noreferrer">@zuzunely_</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Zuzunely · Sto. Agostinho, Belo Horizonte</span>
          <span>Junho sem pressa · ed. limitada</span>
        </div>
      </div>
    </footer>
  );
}


/* ===================== WHATSAPP CTA ===================== */

function WhatsAppSection() {
  const phone = String(window.ZUZU_JD_CONFIG?.whatsapp || "5531984732761").replace(/\D/g, "");
  const msg   = "Oi, Zuzunely! Quero saber mais sobre o Junho sem pressa ♥";
  return (
    <section style={{
      background: "var(--bg-2)",
      padding: "clamp(40px, 6vw, 72px) var(--pad)",
      textAlign: "center",
    }}>
      <div className="frame" style={{ maxWidth: 560 }}>
        <p className="poetic" style={{
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontSize: "clamp(20px, 3vw, 28px)",
          color: "var(--ink)",
          marginBottom: 28,
          lineHeight: 1.35,
        }}>
          Dúvidas? A gente responde com carinho.
        </p>
        <a
          href={`https://wa.me/${phone}?text=${encodeURIComponent(msg)}`}
          target="_blank"
          rel="noopener noreferrer"
          className="cart-btn"
          style={{
            background: "#25D366",
            borderColor: "#25D366",
            color: "#fff",
            display: "inline-flex",
            alignItems: "center",
            gap: 10,
            fontSize: 13,
          }}
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
          </svg>
          Fale com a gente no WhatsApp
        </a>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Boxes, Dinner, Footer, WhatsAppSection });