// ABOUT PAGE — mobile ready
function AboutPage({ lang, setPage }) {
  const t = lang === 'pt' ? {
    title: 'Sobre Nós', sub: 'A nossa história e missão',
    story: 'A Nossa História',
    storyText: 'A Dom Papança nasceu do amor pela pastelaria tradicional portuguesa. Com raízes em Torres Vedras, criamos iguarias artesanais que trazem o sabor autêntico de Portugal à sua mesa.',
    storyText2: 'Cada produto é feito com ingredientes cuidadosamente selecionados, seguindo receitas tradicionais passadas de geração em geração. O nosso compromisso é com a qualidade, o sabor e o carinho em cada encomenda.',
    mission: 'A Nossa Missão',
    missionText: 'Levar a alegria da pastelaria portuguesa a cada lar de Torres Vedras, com encomendas online simples e entrega ao domicílio.',
    values: 'Os Nossos Valores',
    v1: 'Artesanal', v1d: 'Tudo feito à mão com ingredientes frescos e selecionados.',
    v2: 'Tradicional', v2d: 'Receitas autênticas da pastelaria portuguesa.',
    v3: 'Local', v3d: 'Com orgulho em Torres Vedras, entregando na sua porta.',
    cta: 'Ver os Nossos Produtos',
  } : {
    title: 'About Us', sub: 'Our story and mission',
    story: 'Our Story',
    storyText: 'Dom Papança was born from a love of traditional Portuguese pastry. Rooted in Torres Vedras, we create artisanal delicacies that bring the authentic taste of Portugal to your table.',
    storyText2: 'Each product is made with carefully selected ingredients, following traditional recipes passed down through generations.',
    mission: 'Our Mission',
    missionText: 'To bring the joy of Portuguese pastry to every home in Torres Vedras, with easy online ordering and home delivery.',
    values: 'Our Values',
    v1: 'Handcrafted', v1d: 'Everything made by hand with fresh, selected ingredients.',
    v2: 'Traditional', v2d: 'Authentic recipes from the Portuguese pastry tradition.',
    v3: 'Local', v3d: 'Proudly based in Torres Vedras, delivering to your door.',
    cta: 'View Our Products',
  };

  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg)', paddingTop: 70 }}>
      <div style={{ background: 'linear-gradient(135deg, var(--bg3) 0%, var(--bg) 100%)', padding: 'clamp(48px,8vw,80px) clamp(16px,4vw,40px) 40px', textAlign: 'center', borderBottom: '1px solid var(--border)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', opacity: 0.05, right: -40, top: -20, transform: 'scale(2.5)' }}>
          <Logo size={100} />
        </div>
        <SectionTitle subtitle={t.sub}>{t.title}</SectionTitle>
      </div>

      <div style={{ maxWidth: 1000, margin: '0 auto', padding: 'clamp(40px,6vw,80px) clamp(16px,4vw,40px)' }}>
        {/* Story */}
        <div className="about-story" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginBottom: 56, alignItems: 'center' }}>
          <div>
            <div style={{ color: 'var(--gold)', fontFamily: 'Lato, sans-serif', letterSpacing: 4, fontSize: 10, textTransform: 'uppercase', marginBottom: 10 }}>✦ Dom Papança</div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", color: 'var(--cream)', fontSize: 'clamp(22px,4vw,30px)', margin: '0 0 18px', fontWeight: 400 }}>{t.story}</h2>
            <p style={{ fontFamily: 'Lato, sans-serif', color: 'var(--muted)', fontSize: 15, lineHeight: 1.8, margin: '0 0 14px' }}>{t.storyText}</p>
            <p style={{ fontFamily: 'Lato, sans-serif', color: 'var(--muted)', fontSize: 15, lineHeight: 1.8, margin: 0 }}>{t.storyText2}</p>
          </div>
          <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 12, padding: '36px', textAlign: 'center' }}>
            <Logo size={90} />
            <div style={{ fontFamily: "'Playfair Display', serif", color: 'var(--cream)', fontSize: 20, marginTop: 18 }}>Dom Papança</div>
            <div style={{ fontFamily: 'Lato, sans-serif', color: 'var(--gold)', fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', marginTop: 5 }}>Torres Vedras · Portugal</div>
          </div>
        </div>

        {/* Mission */}
        <div style={{ background: 'rgba(212,153,58,0.07)', border: '1px solid var(--border)', borderRadius: 12, padding: 'clamp(24px,4vw,40px)', marginBottom: 56, textAlign: 'center' }}>
          <h3 style={{ fontFamily: "'Playfair Display', serif", color: 'var(--gold)', fontSize: 21, margin: '0 0 14px' }}>{t.mission}</h3>
          <p style={{ fontFamily: 'Lato, sans-serif', color: 'var(--cream)', fontSize: 16, lineHeight: 1.8, margin: 0, maxWidth: 580, marginLeft: 'auto', marginRight: 'auto' }}>{t.missionText}</p>
        </div>

        {/* Values */}
        <SectionTitle>{t.values}</SectionTitle>
        <div className="about-values" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginBottom: 48 }}>
          {[
            { icon: '🤲', title: t.v1, desc: t.v1d },
            { icon: '📜', title: t.v2, desc: t.v2d },
            { icon: '📍', title: t.v3, desc: t.v3d },
          ].map(v => (
            <div key={v.title} style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 10, padding: '24px', textAlign: 'center' }}>
              <div style={{ fontSize: 34, marginBottom: 12 }}>{v.icon}</div>
              <h4 style={{ fontFamily: "'Playfair Display', serif", color: 'var(--cream)', fontSize: 17, margin: '0 0 8px' }}>{v.title}</h4>
              <p style={{ fontFamily: 'Lato, sans-serif', color: 'var(--muted)', fontSize: 13, lineHeight: 1.7, margin: 0 }}>{v.desc}</p>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center' }}>
          <BtnPrimary onClick={() => setPage('shop')}>{t.cta}</BtnPrimary>
        </div>
      </div>

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

// CONTACT PAGE — mobile ready
function ContactPage({ lang, setPage }) {
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const t = lang === 'pt' ? {
    title: 'Contacto', sub: 'Entre em contacto connosco',
    name: 'Nome', email: 'Email', message: 'Mensagem',
    send: 'Enviar Mensagem', sentMsg: 'Mensagem enviada! Obrigado.',
    address: 'Morada', hours: 'Horário', whatsapp: 'WhatsApp',
    h1: 'Seg–Sex: 8h–19h', h2: 'Sáb: 8h–14h', h3: 'Dom: Fechado',
    waOrder: 'Encomendar por WhatsApp'
  } : {
    title: 'Contact', sub: 'Get in touch with us',
    name: 'Name', email: 'Email', message: 'Message',
    send: 'Send Message', sentMsg: 'Message sent! Thank you.',
    address: 'Address', hours: 'Opening Hours', whatsapp: 'WhatsApp',
    h1: 'Mon–Fri: 8am–7pm', h2: 'Sat: 8am–2pm', h3: 'Sun: Closed',
    waOrder: 'Order via WhatsApp'
  };

  const lbl = { display: 'block', fontFamily: 'Lato, sans-serif', color: 'var(--muted)', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 6 };

  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg)', paddingTop: 70 }}>
      <div style={{ background: 'linear-gradient(to bottom, var(--bg3), var(--bg))', padding: 'clamp(40px,6vw,60px) clamp(16px,4vw,40px) 36px', textAlign: 'center', borderBottom: '1px solid var(--border)' }}>
        <SectionTitle subtitle={t.sub}>{t.title}</SectionTitle>
      </div>

      <div style={{ maxWidth: 1000, margin: '0 auto', padding: 'clamp(32px,5vw,60px) clamp(16px,4vw,40px)' }}>
        <div className="contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 36 }}>
          {/* Form */}
          <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 10, padding: 'clamp(20px,4vw,32px)' }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <div style={{ fontSize: 48, marginBottom: 16 }}>✉️</div>
                <p style={{ fontFamily: 'Lato, sans-serif', color: 'var(--gold)', fontSize: 16 }}>{t.sentMsg}</p>
              </div>
            ) : (
              <form onSubmit={e => { e.preventDefault(); setSent(true); }}>
                <label style={lbl}>{t.name}</label>
                <input style={{ ...inputStyle, marginBottom: 16 }} value={form.name} onChange={e => set('name', e.target.value)} required />
                <label style={lbl}>{t.email}</label>
                <input style={{ ...inputStyle, marginBottom: 16 }} type="email" value={form.email} onChange={e => set('email', e.target.value)} required />
                <label style={lbl}>{t.message}</label>
                <textarea style={{ ...inputStyle, height: 120, resize: 'vertical', marginBottom: 20 }} value={form.message} onChange={e => set('message', e.target.value)} required />
                <BtnPrimary type="submit" full>{t.send}</BtnPrimary>
              </form>
            )}
          </div>

          {/* Info cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              { icon: '📍', title: t.address, lines: ['Torres Vedras', 'Portugal'] },
              { icon: '🕐', title: t.hours, lines: [t.h1, t.h2, t.h3] },
              { icon: '📱', title: t.whatsapp, lines: ['+351 962 564 330'] },
            ].map(info => (
              <div key={info.title} style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 10, padding: '20px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                  <span style={{ fontSize: 20 }}>{info.icon}</span>
                  <h4 style={{ fontFamily: 'Lato, sans-serif', color: 'var(--gold)', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', margin: 0 }}>{info.title}</h4>
                </div>
                {info.lines.map(l => (
                  <div key={l} style={{ fontFamily: 'Lato, sans-serif', color: 'var(--cream)', fontSize: 14, marginBottom: 3 }}>{l}</div>
                ))}
              </div>
            ))}
            <a href="https://wa.me/351962564330" target="_blank" rel="noreferrer"
              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, background: 'rgba(37,211,102,0.1)', border: '1px solid rgba(37,211,102,0.3)', borderRadius: 10, padding: '16px', color: '#30d966', fontFamily: 'Lato, sans-serif', fontWeight: 700, fontSize: 14, textDecoration: 'none', minHeight: 56 }}>
              💬 {t.waOrder}
            </a>
          </div>
        </div>
      </div>

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

Object.assign(window, { AboutPage, ContactPage });