// Home page — original v2 structure, zip buttons
const HOUSE_STARS = [
  { title: "Vedeta", text: "O doce pequeno, intenso e muito Creek's para acompanhar café ou fechar o almoço.", img: "assets/creeks-real/creeks-vedeta-chocolate.jpg" },
  { title: "Brownie de chocolate", text: "Artesanal, generoso e servido com aquela estética de balcão real.", img: "assets/creeks-real/creeks-brownie.jpg" },
  { title: "Bolos da casa", text: "Camadas simples, fruta, creme e sabor de pastelaria feita com mão.", img: "assets/creeks-real/creeks-bolo-frutos.jpg" },
  { title: "Saladas com personalidade", text: "Leves, coloridas e com combinações inesperadas para almoço.", img: "assets/creeks-real/creeks-salada-real.jpg" },
];

const HIGHLIGHTS = [
  { title: "Bolos da casa", text: "Camadas simples, fruta, creme e sabor de cafetaria real.", img: "assets/creeks-real/creeks-bolo-frutos.jpg" },
  { title: "Brownie de chocolate", text: "Denso, artesanal e perfeito para acompanhar café.", img: "assets/creeks-real/creeks-brownie.jpg" },
  { title: "Bolos e tartes", text: "Fruta, creme, coco, frutos vermelhos e aquele aspeto feito à mão.", img: "assets/creeks-real/creeks-bolo-framboesa.jpg" },
  { title: "Saladas e bowls", text: "Opções frescas, coloridas e generosas para almoços leves.", img: "assets/creeks-real/creeks-salada-real.jpg" },
  { title: "Vedetas", text: "Pequenos doces de chocolate com assinatura Creek's.", img: "assets/creeks-real/creeks-vedeta-chocolate.jpg" },
  { title: "Brunch e almoço", text: "A carta mantém os nomes da casa, mas aqui mostramos comida real e apetitosa.", img: "assets/creeks-real/creeks-bolo-coco.jpg" },
];

const MENU_CATS_HOME = ["Brunch", "Hambúrgueres Gourmet", "Pizzas na tábua", "Saladas", "Bowls", "Tradições & pratos do dia", "Tartes e bolos", "Café & bebidas"];

const HomePage = ({ go, openReserve }) => {
  return (
    <>
      {/* HERO */}
      <section className="creeks-hero">
        <div className="section-inner hero-content">
          <div className="hero-copy-block reveal">
            <img className="hero-logo" src="assets/creeks-logo.jpg" alt="Creek's Caffé" />
            <p className="eyebrow chalk-line">Food & Fun | Est. 2015 | Venda do Pinheiro</p>
            <h1>
              <span>Creek's Caffé</span>
              <span className="hero-dash"> - </span>
              <span>Eat, Drink &amp; Share</span>
            </h1>
            <p className="hero-copy">
              Brunch, comida caseira, pastelaria artesanal, bolos e momentos para partilhar num espaço acolhedor onde a comida é uma arte.
            </p>
            <div className="button-row">
              <button className="btn primary lg" onClick={() => openReserve && openReserve()}>
                <Icon name="calendar" /> Reservar mesa
              </button>
              <button className="btn secondary lg" onClick={() => go("bolo")}>
                <Icon name="cake" /> Pedir bolo
              </button>
              <button className="btn ghost lg" onClick={() => go("catering")}>
                <Icon name="catering" /> Catering
              </button>
            </div>
            <div className="hero-tags">
              <span>Brunch</span>
              <span>Vedetas</span>
              <span>Hambúrgueres gourmet</span>
              <span>Bolos &amp; tartes</span>
            </div>
          </div>
          <div className="hero-visual reveal" style={{ animationDelay: "0.1s" }}>
            <img className="hero-photo hero-photo-main" src="assets/creeks-real/creeks-bolo-frutos.jpg" alt="Bolo artesanal" />
            <img className="hero-photo hero-photo-small" src="assets/creeks-real/creeks-vedeta-chocolate.jpg" alt="Vedetas" />
            <div className="chalk-card">
              <strong># CreeksCaffeOriginal</strong>
              <span>good food is good mood</span>
            </div>
          </div>
        </div>
      </section>

      {/* CONCEPT — Eat, Drink & Share */}
      <section className="section paper-section reveal">
        <div className="section-inner" style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.4fr)", gap: 60, alignItems: "start" }}>
          <div>
            <p className="eyebrow">O conceito</p>
            <h2>Food &amp; Fun na Venda do Pinheiro</h2>
            <p className="section-copy">
              O Creek's Caffé é um café-bistrot familiar, acolhedor e descontraído. Junta brunch, comida de conforto, pastelaria artesanal, nomes com humor e aquela energia de comunidade que faz uma casa ser reconhecida.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {[
              { icon: "utensils", title: "Eat", text: "Brunch, bowls, saladas, hambúrgueres, pizzas na tábua e pratos de almoço." },
              { icon: "coffee", title: "Drink", text: "Café, sumos, bebidas frescas e pausas de balcão com sabor a casa." },
              { icon: "heart", title: "Share", text: "Vedetas, brownies, tartes, bolos e catering para dividir com quem importa." },
            ].map(card => (
              <article key={card.title} style={{ background: "var(--cream)", border: "1px solid var(--line)", borderRadius: 14, padding: 20 }}>
                <Icon name={card.icon} size={24} />
                <h3 style={{ marginTop: 12, fontSize: "1.3rem" }}>{card.title}</h3>
                <p style={{ color: "var(--muted)", marginTop: 8, fontSize: "0.92rem" }}>{card.text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* VEDETAS */}
      <section className="section reveal">
        <div className="section-inner">
          <div className="section-title-row">
            <div>
              <p className="eyebrow">As vedetas</p>
              <h2>O que tem mesmo cara de Creek's</h2>
            </div>
            <button className="btn ghost sm" onClick={() => go("menu")}>Ver menu completo →</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 24, marginTop: 10 }}>
            {HOUSE_STARS.map(item => (
              <article key={item.title} className="reveal" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <img src={item.img} alt={item.title} style={{ width: "100%", height: 220, objectFit: "cover", borderRadius: 10 }} />
                <div>
                  <p className="eyebrow">Creek's original</p>
                  <h3 style={{ marginTop: 6 }}>{item.title}</h3>
                  <p style={{ color: "var(--muted)", marginTop: 8, fontSize: "0.92rem" }}>{item.text}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* HIGHLIGHT GRID */}
      <section className="section cream-section reveal">
        <div className="section-inner">
          <div className="section-title-row">
            <div>
              <p className="eyebrow">Da carta</p>
              <h2>Brunch, almoço, doces e coisas para dividir</h2>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18, marginTop: 32 }}>
            {HIGHLIGHTS.map(item => (
              <article key={item.title} style={{ borderRadius: 14, overflow: "hidden", border: "1px solid var(--line)", background: "var(--warm-white)" }}>
                <img src={item.img} alt={item.title} style={{ width: "100%", height: 180, objectFit: "cover" }} />
                <div style={{ padding: "16px 18px" }}>
                  <h3 style={{ fontSize: "1.1rem" }}>{item.title}</h3>
                  <p style={{ color: "var(--muted)", marginTop: 6, fontSize: "0.88rem" }}>{item.text}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CAKE FEATURE */}
      <section className="section navy-section reveal">
        <div className="section-inner cake-feature" style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.95fr) minmax(0, 1fr)", alignItems: "center", gap: 60 }}>
          <div className="cake-photo-stack reveal" style={{ position: "relative", minHeight: 520 }}>
            <img src="assets/creeks-real/creeks-bolo-framboesa.jpg" alt="Bolo personalizado"
              style={{ width: "78%", height: 500, objectFit: "cover", border: "3px solid #fffdf5b8", borderRadius: 10, boxShadow: "0 28px 70px #00000042" }} />
            <img src="assets/creeks-real/creeks-bolo-coco.jpg" alt="Detalhe"
              style={{ width: "42%", height: 260, objectFit: "cover", border: "3px solid #fffdf5b8", borderRadius: 10, position: "absolute", bottom: 18, right: 0, boxShadow: "0 28px 70px #00000042" }} />
          </div>
          <div className="reveal">
            <p className="eyebrow gold">Bolos e doces</p>
            <h2 style={{ marginTop: 10 }}>Bolos feitos para a tua ocasião</h2>
            <p className="section-copy">
              Aniversários, festas, cupcakes, tartes e catering doce. Envia a tua ideia, data e referência visual; a equipa responde com disponibilidade e proposta.
            </p>
            <div style={{ display: "grid", gap: 10, margin: "26px 0" }}>
              {["Envia a ideia", "Diz a data e o tema", "Recebe proposta", "Levanta ou combina entrega"].map((step, i) => (
                <span key={step} style={{ background: "rgba(255,253,245,0.1)", border: "1px solid rgba(255,253,245,0.15)", borderRadius: 10, display: "flex", alignItems: "center", gap: 10, padding: 14 }}>
                  <strong style={{ background: "var(--gold)", width: 30, height: 30, color: "var(--navy-deep)", borderRadius: "50%", display: "grid", placeItems: "center", fontFamily: "var(--serif)", flexShrink: 0 }}>{i + 1}</strong>
                  <span style={{ fontWeight: 700, color: "var(--warm-white)" }}>{step}</span>
                </span>
              ))}
            </div>
            <div className="button-row">
              <button className="btn secondary lg" onClick={() => go("bolo")}>
                <Icon name="cake" size={16} /> Pedir Orçamento
              </button>
              <button className="btn ghost lg" onClick={() => go("catering")}>
                Ver catering <Icon name="arrowRight" size={16} />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* MENU PREVIEW */}
      <section className="section kraft-section reveal">
        <div className="section-inner" style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.5fr)", gap: 60, alignItems: "center" }}>
          <div>
            <p className="eyebrow">Menu</p>
            <h2>A carta com nomes da casa</h2>
            <p className="section-copy">
              Do brunch ao almoço, dos hambúrgueres com nomes de cães às tartes e brownies de balcão.
            </p>
            <button className="btn primary" style={{ marginTop: 28 }} onClick={() => go("menu")}>
              Ver Menu Completo <Icon name="arrowRight" size={14} />
            </button>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {MENU_CATS_HOME.map(cat => (
              <span key={cat} style={{ background: "var(--cream)", border: "1px solid var(--line)", borderRadius: 999, padding: "6px 14px", fontSize: "0.88rem", fontWeight: 700, color: "var(--navy-deep)" }}>{cat}</span>
            ))}
          </div>
        </div>
      </section>

      {/* REQUEST CARDS */}
      <section className="section reveal">
        <div className="section-inner">
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <p className="eyebrow">Pedidos</p>
            <h2>Faz o teu pedido</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 20 }}>
            {[
              { icon: "calendar", title: "Reservar mesa", text: "Escolhe dia, hora e número de pessoas. A reserva fica pendente até confirmação da equipa.", label: "Reservar Mesa", action: () => openReserve && openReserve() },
              { icon: "cake", title: "Pedir bolo", text: "Envia tema, data, número de pessoas e imagem de referência.", label: "Pedir Bolo", action: () => go("bolo") },
              { icon: "catering", title: "Pedir catering", text: "Para festas, eventos, doces, salgados, brunch boxes e momentos especiais.", label: "Pedir Catering", action: () => go("catering") },
            ].map(card => (
              <article key={card.title} style={{ background: "var(--warm-white)", border: "1px solid var(--line)", borderRadius: 14, padding: "28px 24px", display: "grid", gap: 12 }}>
                <Icon name={card.icon} size={28} />
                <h3>{card.title}</h3>
                <p style={{ color: "var(--muted)", fontSize: "0.92rem" }}>{card.text}</p>
                <button className="btn primary" style={{ justifySelf: "start" }} onClick={card.action}>{card.label}</button>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* O ESPAÇO */}
      <section className="section paper-section reveal">
        <div className="section-inner" style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.75fr) minmax(0, 1.25fr)", gap: 44, alignItems: "center" }}>
          <div className="reveal">
            <p className="eyebrow">O espaço</p>
            <h2 style={{ marginTop: 10 }}>Um café com madeira, ardósia e boa disposição</h2>
            <p className="section-copy">
              Na Venda do Pinheiro, o Creek's junta comida, café, doces e ambiente descontraído num espaço acolhedor para famílias, amigos, estudantes e profissionais da zona.
            </p>
          </div>
          <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr 0.7fr", gap: 14, animationDelay: "0.1s" }}>
            <img src="assets/creeks-real/creeks-interior-menu.jpg" alt="Interior" style={{ width: "100%", height: 454, objectFit: "cover", borderRadius: 10, gridRow: "span 2" }} />
            <img src="assets/creeks-real/creeks-vedeta-chocolate.jpg" alt="Vedetas" style={{ width: "100%", height: 220, objectFit: "cover", borderRadius: 10 }} />
            <img src="assets/creeks-real/creeks-brownie.jpg" alt="Brownie" style={{ width: "100%", height: 220, objectFit: "cover", borderRadius: 10 }} />
          </div>
        </div>
      </section>
    </>
  );
};


window.HomePage = HomePage;