// Page: About
function AboutPage({ lang, navigate }) {
  const t = I18N[lang];
  useReveal();
  useEffect(() => { window.scrollTo(0, 0); }, []);
  return (
    <main>
      <section className="about-hero">
        <div className="text reveal in">
          <span className="eyebrow left">{t.about.eyebrow}</span>
          <h1>
            {lang === 'ar'
              ? <>أناقة بسيطة<br/><span className="it">بروح أنثوية</span></>
              : <>Simple elegance<br/><span className="it">with a feminine soul</span></>
            }
          </h1>
          <p>{t.about.p1}</p>
          <p>{t.about.p2}</p>
          <button className="btn btn-outline" onClick={() => navigate('shop')} style={{marginTop:24, alignSelf:'flex-start'}}>
            {lang === 'ar' ? 'تسوقي المجموعة' : 'Shop the collection'} <Icon.Arrow/>
          </button>
        </div>
        <div className="img" style={{backgroundImage: `url(${IMG.hero1})`}}/>
      </section>

      <section className="container">
        <div className="values-grid">
          {t.about.values.map((v, i) => (
            <div className="value-card reveal" key={i}>
              <div className="num">— 0{i+1} —</div>
              <h3>{v.t}</h3>
              <p>{v.d}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="vision-block reveal">
        <span className="eyebrow">{t.about.visionTitle}</span>
        <h2>"{t.about.vision}"</h2>
      </section>
    </main>
  );
}

// Page: Contact
function ContactPage({ lang, navigate }) {
  const t = I18N[lang];
  useReveal();
  useEffect(() => { window.scrollTo(0, 0); }, []);
  const waMsg = lang === 'ar' ? 'مرحباً، أرغب بالاستفسار' : 'Hi, I want to ask';
  return (
    <main>
      <div className="contact-hero">
        <h1>{t.contact.title}</h1>
        <p>{t.contact.sub}</p>
      </div>
      <div className="container">
        <div className="contact-grid reveal">
          <div className="contact-card">
            <div className="icon"><Icon.Whatsapp/></div>
            <h3>{t.contact.whatsapp}</h3>
            <p>{t.contact.whatsappDesc}</p>
            <a className="btn btn-primary btn-block" href={waUrl(waMsg)} target="_blank" rel="noreferrer">{t.contact.whatsappCta}</a>
          </div>
          <div className="contact-card">
            <div className="icon"><Icon.Instagram/></div>
            <h3>{t.contact.ig}</h3>
            <p>{t.contact.igDesc} — @hallo.banat</p>
            <a className="btn btn-outline btn-block" href="https://instagram.com/hallo.banat" target="_blank" rel="noreferrer">{t.contact.igCta}</a>
          </div>
          <div className="contact-card">
            <div className="icon"><Icon.Mail/></div>
            <h3>{t.contact.email}</h3>
            <p>{t.contact.emailDesc} — info@hillobanat.com</p>
            <a className="btn btn-outline btn-block" href="mailto:info@hillobanat.com">info@hillobanat.com</a>
          </div>
        </div>
        <div className="hours-block reveal">
          <h3>{t.contact.hoursTitle}</h3>
          <ul>
            {t.contact.hours.map((h, i) => <li key={i}>{h}</li>)}
          </ul>
        </div>
      </div>
    </main>
  );
}

// Page: Wishlist
function WishlistPage({ lang, navigate, wishlist, toggleWish, onWaOrder, tweaks }) {
  const t = I18N[lang];
  useEffect(() => { window.scrollTo(0, 0); }, []);
  const items = PRODUCTS.filter(p => wishlist.includes(p.id));
  return (
    <main>
      <div className="contact-hero">
        <h1>{t.nav.wishlist}</h1>
        <p>{lang === 'ar' ? `${items.length} قطعة مفضلة` : `${items.length} favorite items`}</p>
      </div>
      <div className="container" style={{paddingBottom: 80}}>
        {items.length === 0 ? (
          <div style={{padding: '60px 0 100px', textAlign:'center'}}>
            <p style={{fontFamily:'var(--f-display)',fontStyle:'italic',color:'var(--ink-muted)',fontSize:20,marginBottom:24}}>
              {lang === 'ar' ? 'لم تضيفي أي منتج للمفضلة بعد' : 'No favorites yet'}
            </p>
            <button className="btn btn-primary" onClick={() => navigate('shop')}>
              {lang === 'ar' ? 'ابدأي التسوق' : 'Start shopping'}
            </button>
          </div>
        ) : (
          <div className={`pgrid cols-${tweaks.gridCols}`}>
            {items.map(p => (
              <ProductCard key={p.id} product={p} lang={lang} variant={tweaks.cardStyle}
                onClick={(pr) => navigate('product', { id: pr.id })}
                wishlist={wishlist} toggleWish={toggleWish} onWaOrder={onWaOrder}/>
            ))}
          </div>
        )}
      </div>
    </main>
  );
}

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