// Boutique + carte produit

const ProductCard = ({ product, onOpen, index }) => {
  return (
    <article
      className={`product reveal reveal--d${(index % 3) + 1}` + (product.inStock ? "" : " product--out")}
      onClick={() => onOpen(product)}
      role="button"
      tabIndex={0}
    >
      <div className="product__media">
        {product.image ? (
          <img className="product__media-img" src={product.image} alt={product.name} />
        ) : (
          <>
            <div className="product__glow" style={{ background: product.accent }}></div>
            <div className="product__emoji">{product.emoji}</div>
          </>
        )}
        <div className="product__badge">{product.badge}</div>
        {!product.inStock && <div className="product__soldout">Victime de<br/>son succès</div>}
      </div>
      <div className="product__body">
        <div className="product__tag-row">
          <div className="product__tag">Fleur · {product.typeFull}</div>
          {product.stock && (
            <span className={"product__stock" + (product.inStock ? "" : " product__stock--out")}>
              <span className="product__stock-dot"></span>{product.stock}
            </span>
          )}
        </div>
        <h3 className="product__name">{product.name}</h3>
        <p className="product__strain">{product.strain}</p>
        <p className="product__origin">Origine · {product.origin.replace("Greenhouse · ", "")}</p>

        <div className="product__bar">
          <div className="product__bar-label">
            <span>CBD</span>
            <span>{product.cbd}%</span>
          </div>
          <div className="product__bar-track">
            <div className="product__bar-fill" style={{ width: `${Math.min(100, product.cbd * 4)}%` }}></div>
          </div>
        </div>

        <div className="product__chips">
          {product.effectChips.map(chip => (
            <span key={chip} className="product__chip">{chip}</span>
          ))}
        </div>

        <div className="product__footer">
          <div>
            <div className="product__price">€{product.price.toFixed(2).replace(".", ",")}</div>
            <div className="product__price-unit">5 g · €{product.pricePerG.toFixed(2).replace(".", ",")}/g</div>
          </div>
          <div className="product__cta">{product.inStock ? "Voir →" : "Détails →"}</div>
        </div>
      </div>
    </article>
  );
};

const Shop = ({ onOpenProduct }) => {
  return (
    <section className="shop" id="shop" data-screen-label="03 Boutique">
      <div className="shop__header">
        <div className="celtic-divider reveal">
          <div className="celtic-divider__line"></div>
          <CelticKnot />
          <div className="celtic-divider__line"></div>
        </div>
        <div className="section-eyebrow reveal">Notre collection</div>
        <h2 className="section-title reveal reveal--d1" style={{ marginTop: 16 }}>
          Trois expressions<br/><em>d'excellence</em>
        </h2>
        <p className="section-lead reveal reveal--d2" style={{ margin: "20px auto 0" }}>
          Chaque produit est rigoureusement sélectionné, analysé en laboratoire indépendant,
          et livré directement chez vous.
        </p>
        <div className="shop__roadmap reveal reveal--d3">
          <span className="shop__roadmap-item shop__roadmap-item--active">Greenhouse 2025 · disponible</span>
          <span className="shop__roadmap-item">Outdoor 2026 · en cours</span>
          <span className="shop__roadmap-item shop__roadmap-item--soon">Indoor · à venir</span>
        </div>
      </div>
      <div className="products">
        {window.PRODUCTS.map((p, i) => (
          <ProductCard key={p.id} product={p} index={i} onOpen={onOpenProduct} />
        ))}
      </div>
    </section>
  );
};

Object.assign(window, { ProductCard, Shop });