// 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 S = window.SETTINGS || {};
  const heroTitle = lang === 'ar' ? (S.hero_title_ar || 'عطرٌ يحملك بعيداً') : (S.hero_title_en || 'A scent that carries you');
  const heroSub = lang === 'ar' ? (S.hero_sub_ar || 'روائح من قلب الهند، مقطّرة في دبي.') : (S.hero_sub_en || 'Scents from the heart of India, decanted in Dubai.');
  const showAI = String(S.show_ai ?? '1') === '1';

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

  return (
    <>
      {/* HERO — minimal, calm */}
      <section className="hero">
        <div className="hero-l">
          <div>
            <div className="hero-eyebrow eyebrow">{t('عطور هندية مختارة', 'Curated Indian perfumery')}</div>
            <h1 className="h-display hero-title">{heroTitle}</h1>
            <p className="hero-lede">{heroSub}</p>
            <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>

        <div className="hero-r">
          {S.hero_image ? (
            <div className="hero-photo" style={{ backgroundImage: `url(${S.hero_image})` }} />
          ) : (
            <div className="hero-bottle" style={{ color: 'var(--accent)' }} />
          )}
        </div>
      </section>

      {/* AI SCENT CONSOLE */}
      {showAI && <ScentConsole lang={lang} openPDP={openPDP} />}

      {/* 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>

      {/* 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">
        {product.image
          ? <img className="card-photo" src={product.image} alt={lang === 'ar' ? product.name_ar : product.name_en} loading="lazy" />
          : <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;