// HOME PAGE — lighter palette + mobile
function HomePage({ setPage, lang }) {
  const t = lang === 'pt' ? {
    hero1: 'Iguarias', hero2: 'com Alma',
    heroSub: 'Pastelaria variada & salgados portugueses em Torres Vedras',
    cta1: 'Ver Loja', cta2: 'Encomendar via WhatsApp',
    featTitle: 'Os Nossos Favoritos', featSub: 'Feitos artesanalmente com os melhores ingredientes',
    delivTitle: 'Entregamos em Torres Vedras', delivSub: 'Encomende online e receba em casa',
    whyTitle: 'Porquê a Dom Papança?',
    feat1: 'Receitas Tradicionais', feat1d: 'Sabores autênticos da pastelaria portuguesa, feitos com ingredientes selecionados.',
    feat2: 'Entrega ao Domicílio', feat2d: 'Receba as suas iguarias frescas diretamente em casa, em Torres Vedras.',
    feat3: 'Encomendas Personalizadas', feat3d: 'Bolos de aniversário e encomendas especiais feitas a pedido.',
    viewAll: 'Ver todos os produtos',
  } : {
    hero1: 'Portuguese', hero2: 'Pastries',
    heroSub: 'Traditional pastries & savoury bites in Torres Vedras',
    cta1: 'Shop Now', cta2: 'Order via WhatsApp',
    featTitle: 'Our Favourites', featSub: 'Handcrafted with the finest ingredients',
    delivTitle: 'Delivering in Torres Vedras', delivSub: 'Order online and receive at home',
    whyTitle: 'Why Dom Papança?',
    feat1: 'Traditional Recipes', feat1d: 'Authentic flavours from Portuguese pastry tradition.',
    feat2: 'Home Delivery', feat2d: 'Receive your fresh treats delivered to your door in Torres Vedras.',
    feat3: 'Custom Orders', feat3d: 'Birthday cakes and special orders made to request.',
    viewAll: 'View all products',
  };

  const products = Store.getProducts().filter(p => p.featured);

  return (
    <div>
      {/* HERO */}
      <section style={{
        minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative', overflow: 'hidden', textAlign: 'center',
        background: 'radial-gradient(ellipse at 55% 45%, #5c2e0c 0%, #2d1608 45%, var(--bg) 100%)'
      }}>
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.06 }} preserveAspectRatio="none">
          {Array.from({length: 18}).map((_, i) => (
            <line key={i} x1={`${i*6}%`} y1="0" x2={`${i*6+9}%`} y2="100%" stroke="var(--gold)" strokeWidth="1"/>
          ))}
        </svg>
        <div style={{ position: 'absolute', opacity: 0.05, transform: 'scale(4)', pointerEvents: 'none' }}>
          <Logo size={110} />
        </div>
        <div style={{ position: 'relative', zIndex: 2, padding: '100px clamp(20px,5vw,60px) 60px' }}>
          <div style={{ color: 'var(--gold)', fontFamily: 'Lato, sans-serif', letterSpacing: 6, fontSize: 11, textTransform: 'uppercase', marginBottom: 18, opacity: 0.9 }}>Torres Vedras · Portugal</div>
          <h1 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(48px, 9vw, 92px)', color: 'var(--cream)', margin: '0 0 6px', fontWeight: 400, lineHeight: 1.05 }}>
            {t.hero1}<br/><em style={{ color: 'var(--gold)' }}>{t.hero2}</em>
          </h1>
          <p style={{ fontFamily: 'Lato, sans-serif', color: 'var(--muted)', fontSize: 'clamp(15px,2.5vw,18px)', margin: '20px auto 36px', lineHeight: 1.7, maxWidth: 520 }}>{t.heroSub}</p>
          <div className="hero-btns" style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <BtnPrimary onClick={() => setPage('shop')}>{t.cta1}</BtnPrimary>
            <a href="https://wa.me/351962564330" target="_blank" rel="noreferrer"
              style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(37,211,102,0.12)', border: '1px solid rgba(37,211,102,0.35)', borderRadius: 5, padding: '11px 22px', color: '#30d966', fontFamily: 'Lato, sans-serif', fontWeight: 700, fontSize: 13, letterSpacing: 1, textDecoration: 'none', textTransform: 'uppercase' }}>
              📱 {t.cta2}
            </a>
          </div>
          {/* Stats strip */}
          <div className="hero-stats" style={{ display: 'flex', gap: 40, justifyContent: 'center', marginTop: 56, paddingTop: 36, borderTop: '1px solid rgba(212,153,58,0.18)', flexWrap: 'wrap' }}>
            {[['100%', lang==='pt'?'Artesanal':'Handmade'], ['🚚', lang==='pt'?'Entrega Local':'Local Delivery'], ['🎂', lang==='pt'?'Encomendas':'Custom Orders']].map(([v,l])=>(
              <div key={l} style={{ textAlign: 'center', minWidth: 80 }}>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 26, color: 'var(--gold)', marginBottom: 4 }}>{v}</div>
                <div style={{ fontFamily: 'Lato, sans-serif', fontSize: 10, color: 'var(--muted)', letterSpacing: 2, textTransform: 'uppercase' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)', color: 'var(--dim)', fontSize: 10, fontFamily: 'Lato, sans-serif', letterSpacing: 3, textTransform: 'uppercase', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <span>{lang==='pt'?'Rolar':'Scroll'}</span>
          <div style={{ width: 1, height: 36, background: 'linear-gradient(to bottom, var(--gold), transparent)' }}></div>
        </div>
      </section>

      {/* FEATURED */}
      <section className="section-pad" style={{ padding: '80px clamp(16px,4vw,40px)', background: 'var(--bg)', maxWidth: 1200, margin: '0 auto' }}>
        <SectionTitle subtitle={t.featSub}>{t.featTitle}</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(230px, 1fr))', gap: 20 }}>
          {products.map(p => (
            <ProductCard key={p.id} product={p} lang={lang} showToast={() => {}} />
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <BtnGhost onClick={() => setPage('shop')}>{t.viewAll}</BtnGhost>
        </div>
      </section>

      {/* WHY US */}
      <section className="section-pad" style={{ padding: '72px clamp(16px,4vw,40px)', background: 'var(--bg2)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionTitle>{t.whyTitle}</SectionTitle>
          <div className="why-cards" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px,1fr))', gap: 24 }}>
            {[
              { icon: '🍮', title: t.feat1, desc: t.feat1d },
              { icon: '🚚', title: t.feat2, desc: t.feat2d },
              { icon: '🎂', title: t.feat3, desc: t.feat3d },
            ].map(f => (
              <div key={f.title} style={{ background: 'rgba(212,153,58,0.07)', border: '1px solid var(--border)', borderRadius: 10, padding: '28px 24px', textAlign: 'center' }}>
                <div style={{ fontSize: 38, marginBottom: 14 }}>{f.icon}</div>
                <h3 style={{ fontFamily: "'Playfair Display', serif", color: 'var(--cream)', fontSize: 19, margin: '0 0 10px' }}>{f.title}</h3>
                <p style={{ fontFamily: 'Lato, sans-serif', color: 'var(--muted)', fontSize: 14, lineHeight: 1.7, margin: 0 }}>{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* BANNER */}
      <section style={{ padding: 'clamp(40px,6vw,60px) clamp(16px,4vw,40px)', background: 'var(--gold)', textAlign: 'center' }}>
        <h2 style={{ fontFamily: "'Playfair Display', serif", color: '#1a0e05', fontSize: 'clamp(22px,4vw,32px)', margin: '0 0 10px' }}>{t.delivTitle}</h2>
        <p style={{ fontFamily: 'Lato, sans-serif', color: '#3d2010', fontSize: 15, margin: '0 0 22px' }}>{t.delivSub}</p>
        <button onClick={() => setPage('shop')}
          style={{ background: '#1a0e05', color: 'var(--gold)', border: 'none', borderRadius: 5, padding: '12px 28px', fontFamily: 'Lato, sans-serif', fontWeight: 700, fontSize: 13, letterSpacing: 1, textTransform: 'uppercase', cursor: 'pointer' }}>
          {t.cta1}
        </button>
      </section>

      <Footer lang={lang} setPage={setPage} />
    </div>
  );
}

// PRODUCT CARD
function ProductCard({ product, lang, showToast, addToCart }) {
  const [hov, setHov] = React.useState(false);
  const [added, setAdded] = React.useState(false);

  const handleAdd = () => {
    if (!addToCart) return;
    addToCart(product);
    setAdded(true);
    setTimeout(() => setAdded(false), 1500);
  };

  const catLabels = { doces: 'Doces', bolos: 'Bolos', salgados: 'Salgados', encomendas: 'Encomenda' };

  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        background: hov ? 'var(--card-hov)' : 'var(--card)',
        border: `1px solid ${hov ? 'var(--border-hov)' : 'var(--border)'}`,
        borderRadius: 10, overflow: 'hidden', transition: 'all 0.25s',
        transform: hov ? 'translateY(-3px)' : 'none',
        boxShadow: hov ? '0 12px 40px rgba(0,0,0,0.4)' : '0 2px 10px rgba(0,0,0,0.25)'
      }}>
      <div style={{ position: 'relative' }}>
        <ProductImage type={product.image} size={220} />
        <div style={{ position: 'absolute', top: 10, left: 10 }}>
          <span style={{ background: 'rgba(18,10,3,0.88)', border: '1px solid rgba(212,153,58,0.35)', color: 'var(--gold)', fontSize: 9, fontFamily: 'Lato, sans-serif', letterSpacing: 1.5, textTransform: 'uppercase', padding: '3px 8px', borderRadius: 3 }}>
            {catLabels[product.category] || product.category}
          </span>
        </div>
        {!product.available && (
          <div style={{ position: 'absolute', inset: 0, background: 'rgba(10,6,2,0.72)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <span style={{ color: 'var(--gold)', fontFamily: 'Lato, sans-serif', letterSpacing: 3, fontSize: 11, textTransform: 'uppercase', border: '1px solid var(--gold)', padding: '6px 14px' }}>
              {lang === 'pt' ? 'Esgotado' : 'Sold Out'}
            </span>
          </div>
        )}
      </div>
      <div style={{ padding: '18px 18px 20px' }}>
        <h3 style={{ fontFamily: "'Playfair Display', serif", color: 'var(--cream)', fontSize: 17, margin: '0 0 7px', fontWeight: 600 }}>{product.name}</h3>
        <p style={{ fontFamily: 'Lato, sans-serif', color: 'var(--muted)', fontSize: 13, lineHeight: 1.6, margin: '0 0 14px', minHeight: 38 }}>{product.description}</p>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
          <span style={{ fontFamily: "'Playfair Display', serif", color: 'var(--gold)', fontSize: 21, fontWeight: 700 }}>{product.price.toFixed(2)}€</span>
          {addToCart && product.available && (
            <button onClick={handleAdd}
              style={{
                background: added ? 'rgba(60,140,40,0.2)' : 'rgba(212,153,58,0.14)',
                border: `1px solid ${added ? 'rgba(60,180,40,0.5)' : 'rgba(212,153,58,0.4)'}`,
                color: added ? '#70cc44' : 'var(--gold)',
                borderRadius: 5, padding: '7px 14px', fontFamily: 'Lato, sans-serif',
                fontWeight: 700, fontSize: 12, letterSpacing: 1, textTransform: 'uppercase',
                cursor: 'pointer', transition: 'all 0.2s', whiteSpace: 'nowrap'
              }}>
              {added ? '✓' : (lang === 'pt' ? '+ Carrinho' : '+ Cart')}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

// FOOTER — mobile ready
function Footer({ lang, setPage }) {
  const t = lang === 'pt' ? {
    tagline: 'Pastelaria variada & salgados portugueses', loc: 'Torres Vedras, Portugal',
    links: 'Ligações', shop: 'Loja', about: 'Sobre Nós', contact: 'Contacto',
    hours: 'Horário', h1: 'Seg–Sex: 8h–19h', h2: 'Sáb: 8h–14h', h3: 'Dom: Fechado',
    rights: 'Todos os direitos reservados'
  } : {
    tagline: 'Traditional pastries & savoury bites', loc: 'Torres Vedras, Portugal',
    links: 'Links', shop: 'Shop', about: 'About', contact: 'Contact',
    hours: 'Opening Hours', h1: 'Mon–Fri: 8am–7pm', h2: 'Sat: 8am–2pm', h3: 'Sun: Closed',
    rights: 'All rights reserved'
  };

  return (
    <footer style={{ background: 'var(--footer-bg)', borderTop: '1px solid var(--border)', padding: 'clamp(40px,6vw,60px) clamp(16px,4vw,40px) 28px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px,1fr))', gap: 36, marginBottom: 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <Logo size={44} />
              <div>
                <div style={{ fontFamily: "'Playfair Display', serif", color: 'var(--cream)', fontSize: 17 }}>Dom Papança</div>
                <div style={{ fontFamily: 'Lato, sans-serif', color: 'var(--gold)', fontSize: 8, letterSpacing: 3, textTransform: 'uppercase' }}>IGUARIAS COM ALMA</div>
              </div>
            </div>
            <p style={{ fontFamily: 'Lato, sans-serif', color: 'var(--muted)', fontSize: 13, lineHeight: 1.7, margin: 0 }}>{t.tagline}<br/>{t.loc}</p>
          </div>
          <div>
            <h4 style={{ fontFamily: 'Lato, sans-serif', color: 'var(--gold)', fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', margin: '0 0 16px' }}>{t.links}</h4>
            {[['shop',t.shop],['about',t.about],['contact',t.contact]].map(([k,v]) => (
              <div key={k} style={{ marginBottom: 9 }}>
                <button onClick={() => setPage(k)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--muted)', fontFamily: 'Lato, sans-serif', fontSize: 14, padding: 0 }}>{v}</button>
              </div>
            ))}
          </div>
          <div>
            <h4 style={{ fontFamily: 'Lato, sans-serif', color: 'var(--gold)', fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', margin: '0 0 16px' }}>{t.hours}</h4>
            {[t.h1, t.h2, t.h3].map(h => (
              <div key={h} style={{ fontFamily: 'Lato, sans-serif', color: 'var(--muted)', fontSize: 13, marginBottom: 7 }}>{h}</div>
            ))}
          </div>
          <div>
            <h4 style={{ fontFamily: 'Lato, sans-serif', color: 'var(--gold)', fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', margin: '0 0 16px' }}>WhatsApp</h4>
            <a href="https://wa.me/351962564330" target="_blank" rel="noreferrer"
              style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(37,211,102,0.1)', border: '1px solid rgba(37,211,102,0.25)', borderRadius: 5, padding: '9px 14px', color: '#30d966', fontFamily: 'Lato, sans-serif', fontSize: 13, textDecoration: 'none' }}>
              📱 +351 962 564 330
            </a>
            <div style={{ marginTop: 14, fontFamily: 'Lato, sans-serif', color: 'var(--dim)', fontSize: 12 }}>📍 Torres Vedras, Portugal</div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(212,153,58,0.1)', paddingTop: 22, textAlign: 'center', fontFamily: 'Lato, sans-serif', color: 'var(--dim)', fontSize: 12, letterSpacing: 1 }}>
          © {new Date().getFullYear()} Dom Papança · {t.rights}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { HomePage, ProductCard, Footer });