/* ==========================================================
   DOCE ENCANTO — Pages
   ========================================================== */

/* --------- Coffee Carousel ---------- */
function CoffeeCarousel() {
  const slides = [
    { name: 'Cappuccino', tag: 'signature', tone: 'tone-creme', img: 'assets/produtos/Cafeteria-Cappuccino-2-9.jpg', meta: 'ROSETTA · 65°C', tagLabel: 'signature' },
    { name: 'Latte Macchiato', tag: 'camadas', tone: 'tone-creme', img: 'assets/produtos/Cafeteria-LatteMacchiato-2-8.jpg', meta: 'TULIPA · 60°C', tagLabel: 'camadas' },
    { name: 'Matcha Latte', tag: 'cerimonial', tone: 'tone-salvia', img: 'assets/produtos/Cafeteria-MatchaLatte-3-8.jpg', meta: 'JAPÃO · USUCHA', tagLabel: 'cerimonial' },
    { name: 'Pistachio Latte', tag: 'iced', tone: 'tone-salvia', img: 'assets/produtos/IcedDrink-IcedLattePistachio-4-8.jpg', meta: 'SICÍLIA · GELO', tagLabel: 'iced' },
    { name: 'Brown Sugar Espresso', tag: 'iced', tone: 'tone-vinho', img: 'assets/produtos/IcedDrink-BrownSugarShakenEspresso-4-8.jpg', meta: 'SHAKEN · DUPLO', tagLabel: 'iced' },
    { name: 'Iced Matcha Latte', tag: 'iced', tone: 'tone-salvia', img: 'assets/produtos/IcedDrink-IcedMatchaLatte-4.jpg', meta: 'GELADO · LEITE', tagLabel: 'iced' }];

  const trackRef = useRef(null);
  const [progress, setProgress] = useState(0);

  const scrollByCard = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.querySelector('.coffee-slide');
    const cardW = card ? card.getBoundingClientRect().width + 16 : 360;
    el.scrollBy({ left: dir * cardW * 1.5, behavior: 'smooth' });
  };

  const onScroll = () => {
    const el = trackRef.current;
    if (!el) return;
    const max = el.scrollWidth - el.clientWidth;
    setProgress(max > 0 ? el.scrollLeft / max : 0);
  };

  return (
    <div style={{ marginTop: 96, position: 'relative' }}>
      {/* Header da carrossel + setas */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24, gap: 24 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'rgba(239,227,218,0.5)' }}>
          A vitrine · {slides.length} bebidas
        </span>
        <div style={{ display: 'flex', gap: 8 }}>
          <button
            onClick={() => scrollByCard(-1)}
            aria-label="Anterior"
            style={{
              width: 48, height: 48, borderRadius: '50%',
              border: '1px solid rgba(232,183,177,0.4)',
              background: 'transparent', color: 'var(--rosa-po)',
              cursor: 'pointer', fontSize: 18, fontFamily: 'var(--font-body)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'all 0.2s ease'
            }}
            onMouseOver={(e) => { e.currentTarget.style.background = 'var(--rosa-po)'; e.currentTarget.style.color = 'var(--escuro)'; }}
            onMouseOut={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--rosa-po)'; }}>
            ←
          </button>
          <button
            onClick={() => scrollByCard(1)}
            aria-label="Próxima"
            style={{
              width: 48, height: 48, borderRadius: '50%',
              border: '1px solid rgba(232,183,177,0.4)',
              background: 'transparent', color: 'var(--rosa-po)',
              cursor: 'pointer', fontSize: 18, fontFamily: 'var(--font-body)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'all 0.2s ease'
            }}
            onMouseOver={(e) => { e.currentTarget.style.background = 'var(--rosa-po)'; e.currentTarget.style.color = 'var(--escuro)'; }}
            onMouseOut={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--rosa-po)'; }}>
            →
          </button>
        </div>
      </div>

      {/* Track */}
      <div
        ref={trackRef}
        onScroll={onScroll}
        className="coffee-track"
        style={{
          display: 'flex',
          gap: 16,
          overflowX: 'auto',
          scrollSnapType: 'x mandatory',
          paddingBottom: 8,
          scrollbarWidth: 'none',
          msOverflowStyle: 'none'
        }}>
        <style>{`.coffee-track::-webkit-scrollbar { display: none; }`}</style>
        {slides.map((s, i) =>
          <div
            key={i}
            className="coffee-slide"
            style={{
              flex: '0 0 340px',
              aspectRatio: '4 / 5',
              position: 'relative',
              scrollSnapAlign: 'start'
            }}>
            <Placeholder name={s.name} tone={s.tone} img={s.img} style={{ width: '100%', height: '100%' }} />
            <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 12 }}>
              <div style={{ background: 'rgba(58,61,57,0.85)', backdropFilter: 'blur(8px)', padding: '14px 18px', color: 'var(--creme)' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--rosa-po)', marginBottom: 4 }}>{s.tagLabel}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontStyle: 'italic', fontWeight: 400, whiteSpace: 'nowrap' }}>{s.name}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.2em', color: 'var(--creme)', writingMode: 'vertical-rl', transform: 'rotate(180deg)', opacity: 0.7 }}>
                {s.meta}
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Progress bar */}
      <div style={{ marginTop: 24, height: 1, background: 'rgba(232,183,177,0.18)', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: -1, left: 0, height: 3,
          width: '20%',
          background: 'var(--rosa-po)',
          transform: `translateX(${progress * 400}%)`,
          transition: 'transform 0.2s ease'
        }} />
      </div>
    </div>);

}

/* --------- HOME --------- */
function HomePage({ navigate, openModal }) {
  const featured = [
  window.MENU_DATA[0].items[0],
  window.MENU_DATA[3].items[0],
  window.MENU_DATA[2].items[1]];


  return (
    <div>
      <section className="hero">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow-row">
              <span className="line" />
              <span className="eyebrow">CONFEITARIA & BRUNCH ·</span>
            </div>
            <h1 className="hero-title">
              Doces feitos<br />com <em>Amor</em>,<br />carinho e<br /><em>encanto</em>.
            </h1>
            <p className="hero-lede">Bolos, croissants, brigadeiros e brunch preparados artesanalmente todas as manhãs.
Receitas francesas com alma brasileira, no coração de Fátima.

            </p>
            <div className="hero-cta-row">
              <button onClick={() => navigate('bolos')} className="btn btn-primary">
                Encomendar bolo
                <span>→</span>
              </button>
              <button onClick={() => navigate('menu')} className="btn btn-outline">
                Ver o menu
              </button>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <div className="label">Aberto hoje</div>
                <div className="value">09 — 19h</div>
              </div>
              <div className="hero-meta-item">
                <div className="label">Encomendas</div>
                <div className="value">+48h</div>
              </div>
              <div className="hero-meta-item">
                <div className="label">Desde</div>
                <div className="value">2025</div>
              </div>
            </div>
          </div>
          <div className="hero-visual">
            <div className="badge">Especialidade · Charlotte</div>
            <Placeholder name="Charlotte Chocolate Nido & Nutella" tone="tone-vinho" img="assets/produtos/BoloInteiro-Charlotte-ChocolateNido-Nutella-35.jpg" style={{ width: '100%', height: '100%' }} />
            <div className="hero-rotating-stamp">
              <div style={{
                width: 180, height: 180, borderRadius: '50%',
                background: 'var(--vinho)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 16px 48px rgba(119,70,64,0.32)'
              }}>
                <img src="assets/logo-redondo-branco.png" alt="Doce Encanto" style={{ width: '88%', height: '88%', objectFit: 'contain' }} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <Marquee items={['Bolos', 'Cookies', 'Brigadeiros', 'Croissants', 'Salgados', 'Cafés', 'Iced Drinks', 'Brunch', 'Encomendas']} />

      <section className="section section-tight" style={{ paddingTop: 80, paddingBottom: 0 }}>
        <div className="highlights">
          <div className="highlight">
            <div className="num">01</div>
            <h3>Manteiga AOP</h3>
            <p>Manteiga francesa com denominação de origem, dobrada à mão na nossa massa folhada.</p>
          </div>
          <div className="highlight">
            <div className="num">02</div>
            <h3>72h de fermentação</h3>
            <p>Os nossos croissants passam três dias a descansar antes de irem ao forno.</p>
          </div>
          <div className="highlight">
            <div className="num">03</div>
            <h3>Café de especialidade</h3>
            <p>Blend exclusivo, torrado em pequenos lotes para uma chávena sempre fresca.</p>
          </div>
          <div className="highlight">
            <div className="num">04</div>
            <h3>Sem pressa</h3>
            <p>Receitas artesanais, sem aditivos. Cada doce é finalizado à mão, ao seu ritmo.</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 24, flexWrap: 'wrap' }}>
          <div>
            <span className="eyebrow" style={{ display: 'block', marginBottom: 16 }}>Selecção da casa</span>
            <h2 className="section-title">Em <em>destaque</em><br />esta semana</h2>
          </div>
          <button onClick={() => navigate('menu')} className="btn btn-outline">Ver todo o menu →</button>
        </div>
        <div className="featured-grid">
          {featured.map((it, i) =>
          <div key={i} className="featured-card" onClick={() => openModal(it)}>
              <Placeholder name={it.name} tone={it.tone} img={it.img} className="img" />
              <h3 className="name">{it.name}</h3>
              <div className="meta">
                <span>{it.desc.split(',')[0]}</span>
                <span className="price">{it.price}</span>
              </div>
            </div>
          )}
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="split">
          <Placeholder name="Vitrine de bolos" tone="tone-creme" img="assets/produtos/BoloInteiro-Retangular-ChocolateBrigadeiroBelga-Morango-55.jpg" className="split-visual" />
          <div className="split-content">
            <span className="eyebrow">Bolos para encomenda</span>
            <h2 className="section-title">Para celebrar<br />os <em>seus</em> momentos.</h2>
            <p>
              Charlottes, retangulares, tartes e cheesecakes preparados sob encomenda.
              Cada bolo é montado e finalizado à mão, com 48h de antecedência mínima.
            </p>
            <div className="actions">
              <button onClick={() => navigate('bolos')} className="btn btn-primary">Ver bolos →</button>
              <a href={window.WHATSAPP_URL} target="_blank" rel="noreferrer" className="btn btn-ghost">Falar no WhatsApp</a>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="split reverse">
          <Placeholder name="Brunch da casa" tone="tone-salvia" img="assets/produtos/Tosta-Benedict-9.jpg" className="split-visual" />
          <div className="split-content">
            <span className="eyebrow">Visite a Doce Encanto</span>
            <h2 className="section-title">Um café no<br /><em>centro</em> de Fátima.</h2>
            <p>
              Aberta de quarta a domingo das 9h às 19h, e à terça das 14h às 19h.
              Brunch servido todas as manhãs, com viennoiserie acabada de sair do forno.
            </p>
            <div className="actions">
              <button onClick={() => navigate('contato')} className="btn btn-primary">Como chegar →</button>
              <a href={window.INSTAGRAM_URL} target="_blank" rel="noreferrer" className="btn btn-ghost">@doceencantofatima</a>
            </div>
          </div>
        </div>
      </section>

      {/* ---- Café de Especialidade ---- */}
      <section style={{ background: 'var(--escuro)', color: 'var(--creme)', padding: '140px 48px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>
          {/* Header */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 96 }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'var(--rosa-po)' }}>
                  ☕ Cafetaria
                </span>
                <span style={{ flex: 1, height: 1, background: 'rgba(232,183,177,0.3)' }} />
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'rgba(239,227,218,0.5)' }}>04 / 06</span>
              </div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(56px, 7vw, 108px)', fontWeight: 400, lineHeight: 0.98, letterSpacing: '-0.02em', margin: 0 }}>
                Café tirado<br />com <em style={{ fontStyle: 'italic', color: 'var(--rosa-po)', fontWeight: 300 }}>excelência</em>.
              </h2>
            </div>
            <div style={{ paddingBottom: 16 }}>
              <p style={{ fontFamily: 'var(--font-display)', fontSize: 22, lineHeight: 1.5, color: 'var(--rosa-po)', fontWeight: 300, fontStyle: 'italic', margin: '0 0 24px', maxWidth: 460 }}>
                Levamos o café tão a sério como os nossos bolos.
              </p>
              <p style={{ fontSize: 14, lineHeight: 1.85, color: 'rgba(239,227,218,0.75)', margin: 0, maxWidth: 460 }}>
                Grão de especialidade, baristas profissionais, vaporização precisa do leite e finalização à mão. Cada chávena é um pequeno ritual.
              </p>
            </div>
          </div>

          {/* Três pilares */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid rgba(232,183,177,0.18)' }}>
            {[
            {
              num: '01',
              eyebrow: 'O grão',
              title: 'Café de\nespecialidade',
              body: 'Trabalhamos com grãos pontuados acima de 84 SCA, torrados em pequenos lotes para garantir frescura e perfil aromático em cada extração.',
              meta: '84+ SCA · torra fresca'
            },
            {
              num: '02',
              eyebrow: 'A mão',
              title: 'Baristas\nprofissionais',
              body: 'Equipa formada em extração, dosagem e vaporização. Calibração diária da moagem, pressão constante e leite com microespuma sedosa.',
              meta: 'formação contínua'
            },
            {
              num: '03',
              eyebrow: 'A arte',
              title: 'Latte art\nem cada chávena',
              body: 'Do tradicional rosetta ao tulipa e ao heart — cada cappuccino sai do balcão com latte art desenhada à mão, na temperatura certa.',
              meta: 'rosetta · tulipa · heart'
            }].
            map((p, i) =>
            <div key={p.num} style={{
              padding: '56px 40px 56px 0',
              paddingLeft: i === 0 ? 0 : 40,
              borderRight: i < 2 ? '1px solid rgba(232,183,177,0.18)' : 'none',
              display: 'flex',
              flexDirection: 'column',
              gap: 20
            }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 64, fontWeight: 300, color: 'var(--rosa-po)', fontStyle: 'italic', lineHeight: 1 }}>{p.num}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'rgba(239,227,218,0.5)' }}>{p.eyebrow}</span>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 400, lineHeight: 1.1, margin: 0, color: 'var(--creme)', letterSpacing: '-0.01em', whiteSpace: 'pre-line' }}>
                  {p.title}
                </h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.75, color: 'rgba(239,227,218,0.72)', margin: 0 }}>
                  {p.body}
                </p>
                <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: '1px solid rgba(232,183,177,0.12)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--rosa-po)' }}>
                  {p.meta}
                </div>
              </div>
            )}
          </div>

          {/* Vitrine: carrossel horizontal */}
          <CoffeeCarousel />

          {/* Rodapé da seção */}
          <div style={{ marginTop: 64, paddingTop: 32, borderTop: '1px solid rgba(232,183,177,0.18)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
            <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: 1.5, color: 'var(--rosa-po)', fontStyle: 'italic', maxWidth: 540 }}>
              Espresso, cappuccino, flat white, latte macchiato e iced drinks — tudo do nosso bar.
            </p>
            <button onClick={() => navigate('menu')} className="btn"
            style={{ background: 'var(--creme)', color: 'var(--escuro)' }}>
              Ver carta de cafetaria →
            </button>
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--vinho)', padding: '120px 48px', textAlign: 'center', color: 'var(--creme)' }}>
        <div style={{ maxWidth: 820, margin: '0 auto' }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'var(--rosa-po)' }}>
            — encomenda personalizada —
          </span>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 6vw, 92px)', fontWeight: 400, lineHeight: 1.05, margin: '24px 0 32px', letterSpacing: '-0.015em' }}>
            Vamos preparar<br /><em style={{ color: 'var(--rosa-po)' }}>algo especial</em> para si?
          </h2>
          <a href={window.WHATSAPP_URL} target="_blank" rel="noreferrer" className="btn"
          style={{ background: 'var(--creme)', color: 'var(--vinho)' }}>
            Iniciar conversa no WhatsApp →
          </a>
        </div>
      </section>
    </div>);

}

/* --------- MENU --------- */
function MenuPage({ openModal }) {
  const [filter, setFilter] = useState('todos');
  const cats = [
  { id: 'todos', label: 'Tudo' },
  ...window.MENU_DATA.map((c) => ({ id: c.cat, label: c.catName === 'Cheesecakes & Tarteletes' || c.catName === 'Iced Drinks' ? c.catName : c.catName.split(' ')[0] }))];


  const sections = filter === 'todos' ? window.MENU_DATA : window.MENU_DATA.filter((c) => c.cat === filter);

  return (
    <div>
      <header className="page-header">
        <div>
          <div className="crumb">02 — Menu</div>
          <h1>Menu da<br /><em>casa</em>.</h1>
        </div>
        <p className="lede">Doces, salgados, café de especialidade, cappuccino e iced drinks. Tudo preparado artesanalmente, todas as manhãs, na nossa cozinha em Fátima.


        </p>
      </header>

      <div className="menu-toolbar">
        <span className="label" style={{ marginRight: 16, color: 'var(--salvia)' }}>Filtrar</span>
        {cats.map((c) => {
          const count = c.id === 'todos' ?
          window.MENU_DATA.reduce((acc, s) => acc + s.items.length, 0) :
          window.MENU_DATA.find((s) => s.cat === c.id)?.items.length || 0;
          return (
            <button
              key={c.id}
              className={`menu-filter ${filter === c.id ? 'active' : ''}`}
              onClick={() => setFilter(c.id)}>
              
              {c.label}
              <span className="count">{String(count).padStart(2, '0')}</span>
            </button>);

        })}
      </div>

      <div className="menu-list">
        {sections.map((sec, idx) =>
        <div key={sec.cat} className="menu-section">
            <div className="menu-section-head">
              <span className="num">{String(idx + 1).padStart(2, '0')} / {String(sections.length).padStart(2, '0')}</span>
              <h2>{sec.catName.split(' ').map((w, i, a) =>
              i === a.length - 1 && a.length > 1 ? <em key={i}>{w}</em> : <React.Fragment key={i}>{w} </React.Fragment>
              )}</h2>
              <span className="num">{sec.items.length} items</span>
            </div>
            {sec.items.map((it, i) =>
          <div key={i} className="menu-row" onClick={() => openModal(it)}>
                <Placeholder name={it.name} tone={it.tone} img={it.img} className="thumb" />
                <div className="info">
                  <div className="name">
                    {it.name}
                    {it.tag && <span className={`tag ${it.tag === 'novo' ? 'new' : it.tag === 'veg' ? 'veg' : ''}`}>{it.tag}</span>}
                  </div>
                  <div className="desc">{it.desc}</div>
                </div>
                <div className="price">{it.price}</div>
              </div>
          )}
          </div>
        )}
      </div>
    </div>);

}

/* --------- BOLOS --------- */
function CakesPage({ openModal }) {
  const [filter, setFilter] = useState('todos');
  const [lightboxIndex, setLightboxIndex] = useState(null);

  const types = ['todos', ...new Set(window.CAKE_DATA.map((c) => c.type))];
  const filtered = filter === 'todos' ? window.CAKE_DATA : window.CAKE_DATA.filter((c) => c.type === filter);

  return (
    <div>
      <header className="page-header">
        <div>
          <div className="crumb">03 — Bolos inteiros</div>
          <h1>Bolos para<br /><em>encomenda</em>.</h1>
        </div>
        <p className="lede">
          Charlottes, retangulares, tartes e cheesecakes — montados e finalizados à mão.
          Encomende com 48 horas de antecedência mínima.
        </p>
      </header>

      <div className="menu-toolbar">
        <span className="label" style={{ marginRight: 16, color: 'var(--salvia)' }}>Modelo</span>
        {types.map((t) => {
          const count = t === 'todos' ? window.CAKE_DATA.length : window.CAKE_DATA.filter((c) => c.type === t).length;
          return (
            <button
              key={t}
              className={`menu-filter ${filter === t ? 'active' : ''}`}
              onClick={() => setFilter(t)}>
              
              {t === 'todos' ? 'Tudo' : t}
              <span className="count">{String(count).padStart(2, '0')}</span>
            </button>);

        })}
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <a href={window.WHATSAPP_URL} target="_blank" rel="noreferrer" className="btn btn-primary btn-sm">
            Falar no WhatsApp →
          </a>
        </div>
      </div>

      <div className="cake-grid">
        {filtered.map((cake, i) =>
        <div key={i} className="cake-card">
            <div onClick={() => setLightboxIndex(i)}>
              <Placeholder name={cake.name} tone={cake.tone} img={cake.img} className="img">
                <div className="corner">{cake.type}</div>
              </Placeholder>
            </div>
            <h3 className="name">
              <span>{cake.name.split(' ').slice(0, -1).join(' ')} <em>{cake.name.split(' ').slice(-1)[0]}</em></span>
              <span className="num">{cake.num}</span>
            </h3>
            <p className="desc">{cake.desc}</p>
            <div className="meta">
              <span className="price">{cake.price} · {cake.serves}</span>
              <button className="arrow" onClick={() => openModal(cake)}>Detalhes →</button>
            </div>
          </div>
        )}
      </div>

      <section style={{ background: 'var(--creme)', padding: '96px 48px' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <span className="eyebrow" style={{ display: 'block', marginBottom: 16 }}>Como encomendar</span>
            <h2 className="section-title">Três passos<br />para o seu <em>bolo</em>.</h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {[
            { n: '01', t: 'Escolha o modelo', d: 'Charlotte, retangular, tarte ou cheesecake — a partir do nosso catálogo ou criação personalizada.' },
            { n: '02', t: 'Fale connosco', d: 'Confirmamos por WhatsApp o sabor, tamanho, data de levantamento e quaisquer pedidos especiais.' },
            { n: '03', t: 'Levante na loja', d: 'O bolo é finalizado à mão na manhã do levantamento. Entregamos pronto a servir.' }].
            map((s) =>
            <div key={s.n} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24, paddingBottom: 24, borderBottom: '1px solid rgba(58,61,57,0.12)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, color: 'var(--vinho)' }}>{s.n}</div>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-body)', fontSize: 14, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 500, margin: '4px 0 8px' }}>{s.t}</h3>
                  <p style={{ margin: 0, fontSize: 14, lineHeight: 1.7, color: 'var(--salvia)' }}>{s.d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ---- Massas & Recheios ---- */}
      <section style={{ background: 'var(--creme-soft)', padding: '120px 48px', borderTop: '1px solid rgba(58,61,57,0.08)' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 80 }}>
            <span className="eyebrow" style={{ display: 'block', marginBottom: 16 }}>Personalize o seu bolo</span>
            <h2 className="section-title" style={{ maxWidth: 720, margin: '0 auto' }}>
              Escolha a <em>massa</em><br />e o <em>recheio</em>.
            </h2>
            <p style={{ maxWidth: 520, margin: '24px auto 0', fontSize: 14, lineHeight: 1.8, color: 'var(--salvia)' }}>
              Combine livremente as nossas massas e recheios da casa para montar um bolo à sua medida.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
            {/* Massas */}
            <div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 32, paddingBottom: 16, borderBottom: '1px solid rgba(58,61,57,0.18)' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--salvia)' }}>01 / Massa</span>
                <span style={{ flex: 1, fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--salvia)', textAlign: 'right' }}>quatro opções</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                {[
                { n: 'Chocolate', d: 'Massa fofa de cacau, intensa e levemente amarga.', tone: 'tone-vinho' },
                { n: 'Cenoura', d: 'Receita brasileira clássica, húmida e dourada.', tone: 'tone-creme' },
                { n: 'Red Velvet', d: 'Aveludada, com toque de cacau e cor profunda.', tone: 'tone-rosa' },
                { n: 'Baunilha', d: 'Massa branca clássica com baunilha em pasta.', tone: 'tone-creme' }].
                map((m, i) =>
                <div key={m.n} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 20, padding: '20px 0', borderBottom: '1px solid rgba(58,61,57,0.10)' }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--vinho)', paddingTop: 6 }}>0{i + 1}</div>
                    <div>
                      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400, margin: '0 0 6px', color: 'var(--escuro)', letterSpacing: '-0.01em' }}>{m.n}</h3>
                      <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.7, color: 'var(--salvia)' }}>{m.d}</p>
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Recheios */}
            <div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 32, paddingBottom: 16, borderBottom: '1px solid rgba(58,61,57,0.18)' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--salvia)' }}>02 / Recheio</span>
                <span style={{ flex: 1, fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--salvia)', textAlign: 'right' }}>quatro opções</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                {[
                { n: 'Brigadeiro Belga', d: 'Brigadeiro tradicional preparado com chocolate belga Callebaut.' },
                { n: 'Brigadeiro Branco', d: 'Brigadeiro de chocolate branco, doce e cremoso.' },
                { n: 'Doce de Leite', d: 'Doce de leite argentino, denso e amanteigado.' },
                { n: 'Pistachio', d: 'Recheio cremoso de pistacho da Sicília, levemente torrado.' }].
                map((r, i) =>
                <div key={r.n} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 20, padding: '20px 0', borderBottom: '1px solid rgba(58,61,57,0.10)' }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--vinho)', paddingTop: 6 }}>0{i + 1}</div>
                    <div>
                      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400, margin: '0 0 6px', color: 'var(--escuro)', letterSpacing: '-0.01em' }}>{r.n}</h3>
                      <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.7, color: 'var(--salvia)' }}>{r.d}</p>
                    </div>
                  </div>
                )}

                {/* Selo Callebaut — assinatura da casa */}
                <div style={{ marginTop: 32, padding: '32px 32px', background: 'var(--vinho)', color: 'var(--creme)' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--rosa-po)', marginBottom: 16 }}>
                    — Assinatura da casa —
                  </div>
                  <p style={{ margin: '0 0 24px', fontFamily: 'var(--font-display)', fontSize: 20, lineHeight: 1.45, color: 'var(--creme)', fontWeight: 400, letterSpacing: '-0.005em' }}>
                    Usamos <em style={{ color: 'var(--rosa-po)', fontStyle: 'italic' }}>chocolate belga Callebaut</em> em todos os nossos preparos de chocolate.
                  </p>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 16, paddingTop: 20, borderTop: '1px solid rgba(232, 183, 177, 0.25)' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--rosa-po)' }}>Em parceria com</span>
                    <div style={{ flex: 1, height: 1, background: 'rgba(232, 183, 177, 0.20)' }} />
                    {/* Callebaut wordmark — recriação SVG */}
                    <svg viewBox="0 0 200 44" style={{ height: 32, width: 'auto' }} aria-label="Callebaut">
                      <text
                        x="100"
                        y="30"
                        textAnchor="middle"
                        fontFamily="'Cormorant Garamond', 'Playfair Display', Georgia, serif"
                        fontSize="30"
                        fontWeight="400"
                        fontStyle="italic"
                        fill="var(--rosa-po)"
                        letterSpacing="1">
                        Callebaut
                      </text>
                      <text
                        x="100"
                        y="42"
                        textAnchor="middle"
                        fontFamily="var(--font-mono)"
                        fontSize="5"
                        letterSpacing="3"
                        fill="var(--rosa-po)"
                        opacity="0.7">
                        FINEST BELGIAN CHOCOLATE · est. 1911
                      </text>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style={{ marginTop: 64, textAlign: 'center' }}>
            <a
              href={`${window.WHATSAPP_URL}?text=${encodeURIComponent('Olá! Gostaria de encomendar um bolo personalizado.')}`}
              target="_blank"
              rel="noreferrer"
              className="btn btn-primary">

              Combinar massa e recheio no WhatsApp
              <span style={{ fontSize: 14 }}>→</span>
            </a>
          </div>
        </div>
      </section>

      {lightboxIndex !== null &&
      <Lightbox
        items={filtered}
        index={lightboxIndex}
        onClose={() => setLightboxIndex(null)}
        onNext={() => setLightboxIndex((lightboxIndex + 1) % filtered.length)}
        onPrev={() => setLightboxIndex((lightboxIndex - 1 + filtered.length) % filtered.length)} />

      }
    </div>);

}

/* --------- CONTACT --------- */
function ContactPage() {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ nome: '', email: '', tel: '', tipo: 'Encomenda', msg: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    const text = `Olá, sou ${form.nome} (${form.email}, ${form.tel}). Tipo: ${form.tipo}. ${form.msg}`;
    window.open(`${window.WHATSAPP_URL}?text=${encodeURIComponent(text)}`, '_blank');
    setSent(true);
  };

  const hours = [
  { day: 'Segunda-feira', time: 'Encerrado', closed: true },
  { day: 'Terça-feira', time: '14:00 — 19:00' },
  { day: 'Quarta-feira', time: '09:00 — 19:00' },
  { day: 'Quinta-feira', time: '09:00 — 19:00' },
  { day: 'Sexta-feira', time: '09:00 — 19:00' },
  { day: 'Sábado', time: '09:00 — 19:00' },
  { day: 'Domingo', time: '09:00 — 19:00' }];


  return (
    <div>
      <header className="page-header">
        <div>
          <div className="crumb">04 — Contato</div>
          <h1>Visite-nos<br />em <em>Fátima</em>.</h1>
        </div>
        <p className="lede">
          A nossa morada, horário e contactos.
          Encomendas e mensagens preferencialmente via WhatsApp.
        </p>
      </header>

      <div className="contact-info">
        <div className="contact-block">
          <div className="label">Endereço</div>
          <h3 className="value">Av. Nossa Senhora<br />de <em>Fátima, 9</em></h3>
          <p style={{ margin: 0, color: 'var(--salvia)', fontSize: 13 }}>2495-407 Fátima, Portugal</p>
          <p style={{ marginTop: 12 }}>
            <a href={window.MAPS_LINK} target="_blank" rel="noreferrer" style={{ color: 'var(--vinho)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
              Abrir mapa →
            </a>
          </p>
        </div>
        <div className="contact-block">
          <div className="label">WhatsApp</div>
          <h3 className="value"><em>+351</em> 925 528 729</h3>
          <p style={{ margin: 0, color: 'var(--salvia)', fontSize: 13 }}>Resposta em até 1 hora durante o horário de funcionamento.</p>
          <p style={{ marginTop: 12 }}>
            <a href={window.WHATSAPP_URL} target="_blank" rel="noreferrer" style={{ color: 'var(--vinho)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
              Iniciar conversa →
            </a>
          </p>
        </div>
        <div className="contact-block">
          <div className="label">Instagram</div>
          <h3 className="value">@doceencanto<em>fatima</em></h3>
          <p style={{ margin: 0, color: 'var(--salvia)', fontSize: 13 }}>Novidades, bastidores e o doce do dia.</p>
          <p style={{ marginTop: 12 }}>
            <a href={window.INSTAGRAM_URL} target="_blank" rel="noreferrer" style={{ color: 'var(--vinho)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
              Seguir →
            </a>
          </p>
        </div>
        <div className="contact-block">
          <div className="label">Horário</div>
          <div style={{ marginTop: -4 }}>
            {hours.map((h) =>
            <div key={h.day} className={`hours-row ${h.closed ? 'closed' : ''}`}>
                <span className="day">{h.day}</span>
                <span className="time">{h.time}</span>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="map-wrap">
        <iframe
          src={window.MAPS_EMBED}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          allowFullScreen
          title="Mapa Doce Encanto" />
        
      </div>

      <section className="contact-form-wrap">
        <div className="contact-form-inner">
          <div>
            <span className="eyebrow" style={{ display: 'block', marginBottom: 16 }}>Envie-nos uma mensagem</span>
            <h2 className="section-title">Vamos<br /><em>conversar</em>?</h2>
            <p style={{ maxWidth: 380, marginTop: 24, color: 'var(--salvia)', lineHeight: 1.8 }}>
              Preencha o formulário e abrimos uma conversa por WhatsApp diretamente.
              Para encomendas urgentes ou no mesmo dia, prefira ligar-nos.
            </p>
          </div>
          <form className="contact-form" onSubmit={handleSubmit}>
            <div className="row">
              <div>
                <label>Nome</label>
                <input required value={form.nome} onChange={(e) => setForm({ ...form, nome: e.target.value })} placeholder="O seu nome" />
              </div>
              <div>
                <label>Telefone</label>
                <input value={form.tel} onChange={(e) => setForm({ ...form, tel: e.target.value })} placeholder="+351 …" />
              </div>
            </div>
            <div className="row">
              <div>
                <label>Email</label>
                <input type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="email@exemplo.pt" />
              </div>
              <div>
                <label>Tipo de pedido</label>
                <select value={form.tipo} onChange={(e) => setForm({ ...form, tipo: e.target.value })}>
                  <option>Encomenda de bolo</option>
                  <option>Brunch / reserva</option>
                  <option>Encomenda de doces</option>
                  <option>Outro</option>
                </select>
              </div>
            </div>
            <div>
              <label>Mensagem</label>
              <textarea required value={form.msg} onChange={(e) => setForm({ ...form, msg: e.target.value })} placeholder="Conte-nos sobre o seu pedido — sabor, data, número de pessoas…" />
            </div>
            <button type="submit" className="btn btn-primary">
              {sent ? 'Conversa aberta no WhatsApp ✓' : 'Enviar via WhatsApp →'}
            </button>
          </form>
        </div>
      </section>
    </div>);

}

window.HomePage = HomePage;
window.MenuPage = MenuPage;
window.CakesPage = CakesPage;
window.ContactPage = ContactPage;