// home.jsx — simpler landing page focused on essentials

function Home({ lang, setRoute, openPDP }) {
  const t = (ar, en) => lang === 'ar' ? ar : en;
  const [activeFamily, setActiveFamily] = React.useState('all');

  const featured = PRODUCTS.filter(p => p.tag_ar).slice(0, 6);
  const filteredFamily = activeFamily === 'all'
    ? PRODUCTS.slice(0, 8)
    : PRODUCTS.filter(p => p.family === activeFamily).slice(0, 8);

  return (
    <>
      {/* HERO — simpler, calmer */}
      <section className="hero">
        <div className="hero-l">
          <div>
            <div className="hero-eyebrow eyebrow">{t('عطور هندية مختارة', 'Curated Indian perfumery')}</div>
            <h1 className="h-display hero-title">
              {t('عطر يحملك', 'A scent that')}
              <br />
              {t('بعيداً', 'carries you')}
              <em>{t('— روائح من قلب الهند، مقطّرة في دبي.', '— scents from the heart of India, decanted in Dubai.')}</em>
            </h1>
            <div className="hero-actions">
              <button className="btn lg" onClick={() => setRoute('shop')}>
                {t('تسوّق الكولكشن', 'Shop the Collection')} <I.arrow />
              </button>
              <button className="btn ghost lg" onClick={() => setRoute('story')}>
                {t('قصتنا', 'Our Story')}
              </button>
            </div>
          </div>
          <div className="hero-trust">
            <div className="hero-trust-item">
              <I.check /> <span>{t('شحن مجاني فوق 350 درهم', 'Free shipping over AED 350')}</span>
            </div>
            <div className="hero-trust-item">
              <I.check /> <span>{t('توصيل خلال 48 ساعة', '48-hour delivery')}</span>
            </div>
            <div className="hero-trust-item">
              <I.check /> <span>{t('عينة مجانية مع كل طلب', 'Free sample with every order')}</span>
            </div>
          </div>
        </div>

        <div className="hero-r">
          <div className="hero-r-tag">
            <div className="big">N°01</div>
            <div className="sm">{t('عطر الموسم', 'Edition of the season')}</div>
          </div>
          <div className="hero-bottle" style={{ color: '#3D2A1E' }}>
            <div className="pdp-label">ISTABRAQ<br />BOMBAY NIGHTS</div>
          </div>
          <div className="hero-r-cap">
            <div>
              <div className="mono">EXT. PARFUM · 50ml</div>
              <div className="serif-en" style={{ fontSize: 18, marginTop: 4 }}>Bombay Nights</div>
            </div>
            <div className="serif-en" style={{ fontSize: 28 }}>AED 720</div>
          </div>
        </div>
      </section>

      {/* FAMILY CHIPS — simple categorical browse */}
      <section className="family-strip">
        <div className="family-strip-head">
          <div>
            <div className="eyebrow">{t('تسوّق حسب العائلة العطرية', 'Shop by scent family')}</div>
            <h2 className="h-display family-strip-title">{t('اختر عالمك', 'Find your world')}</h2>
          </div>
          <a className="family-strip-link" onClick={() => setRoute('shop')}>
            {t('عرض الكل', 'View all')} <I.arrow />
          </a>
        </div>
        <div className="family-chips" role="tablist">
          <button className={'family-chip' + (activeFamily === 'all' ? ' on' : '')}
                  onClick={() => setActiveFamily('all')}>
            <span className="dot" style={{ background: 'var(--ink)' }} />
            {t('الكل', 'All')} <span className="count">{PRODUCTS.length}</span>
          </button>
          {SCENT_FAMILIES.map(f => (
            <button key={f.id}
                    className={'family-chip' + (activeFamily === f.id ? ' on' : '')}
                    onClick={() => setActiveFamily(f.id)}>
              <span className="dot" style={{ background: f.tone }} />
              {lang === 'ar' ? f.ar : f.en}
              <span className="count">{PRODUCTS.filter(p => p.family === f.id).length}</span>
            </button>
          ))}
        </div>

        <div className="product-grid family-grid">
          {filteredFamily.slice(0, 8).map(p => <ProductCard key={p.id} product={p} lang={lang} onOpen={openPDP} />)}
        </div>

        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <button className="btn ghost lg" onClick={() => setRoute('shop', activeFamily !== 'all' ? { family: activeFamily } : null)}>
            {t('عرض المزيد', 'See more')} <I.arrow />
          </button>
        </div>
      </section>

      {/* FEATURED — the season's picks */}
      <section className="section section-tight">
        <div className="section-head">
          <div>
            <div className="eyebrow">{t('مختارات الموسم', 'Season picks')}</div>
            <h2 className="h-display section-title">{t('من الموسم', 'From the season')}</h2>
          </div>
        </div>
        <div className="product-grid">
          {featured.map(p => <ProductCard key={p.id} product={p} lang={lang} onOpen={openPDP} />)}
        </div>
      </section>

      {/* MANIFESTO — compact */}
      <section className="manifesto">
        <div className="manifesto-inner">
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>{t('بيان', 'Manifesto')}</div>
          <h2 className="h-display manifesto-title">
            {t('من العطّار إلى يدك', 'From attar to hand')}
          </h2>
          <p className="manifesto-body">
            {t('نختار كل قطرة من بيوت عطور عائلية صغيرة في الهند — ميسور، آسام، كشمير، ولكنو. تُعبّأ يدوياً، تُختم بشمع، وتصل خلال 48 ساعة في الإمارات.',
               'We source each drop from small family attar houses across India — Mysore, Assam, Kashmir, Lucknow. Hand-decanted, wax-sealed, delivered within 48 hours across the UAE.')}
          </p>
          <button className="btn lg" style={{ background: '#fff', color: '#1a1a1a', borderColor: '#fff' }} onClick={() => setRoute('story')}>
            {t('اقرأ قصتنا', 'Read our story')} <I.arrow />
          </button>
        </div>
      </section>
    </>
  );
}

function ProductCard({ product, lang, onOpen, onAddToCart }) {
  const fam = SCENT_FAMILIES.find(f => f.id === product.family);
  const btnRef = React.useRef();
  return (
    <div className="card" onClick={() => onOpen(product)}>
      <div className="card-img">
        <div className="card-bottle" style={{ background: `linear-gradient(165deg, ${product.tone} 0%, color-mix(in oklab, ${product.tone} 60%, #000) 100%)`, color: product.tone }} />
        {product.tag_ar && <div className="card-tag">{lang === 'ar' ? product.tag_ar : product.tag_en}</div>}
        {onAddToCart && (
          <button ref={btnRef} className="card-add" aria-label="add"
                  onClick={(e) => { e.stopPropagation(); onAddToCart(product, btnRef.current); }}>
            <I.plus />
          </button>
        )}
      </div>
      <div className="card-info">
        <div className="card-info-l">
          <div className="name-ar">{lang === 'ar' ? product.name_ar : product.name_en}</div>
          <div className="family">{lang === 'ar' ? fam.ar : fam.en} · {product.concentration}</div>
        </div>
        <div className="card-info-r">
          <div className="price">{product.price}<span className="price-cur"> AED</span></div>
          <div className="price-sm">/ 50ml</div>
        </div>
      </div>
    </div>
  );
}

window.Home = Home;
window.ProductCard = ProductCard;