/* Product page */

const Product = () => {
  const { t, lang } = useLang();
  const device = CFG.devices[0];
  const variants = (BODY_COLORS.length ? BODY_COLORS.slice(0, 4) : [{ key: DEFAULT_CONFIG.bodyColor }]).map((body, index) => {
    const cap = CAP_COLORS[index % Math.max(1, CAP_COLORS.length)] || { key: DEFAULT_CONFIG.capColor };
    return {
      ...DEFAULT_CONFIG,
      bodyColor: body.key,
      capColor: cap.key,
      customText: index === 0 ? 'TITAN' : ''
    };
  });
  const [active, setActive] = React.useState(0);
  const config = variants[active];
  const stockResult = getVariantStockState(config.bodyColor, config.capColor);
  const eta = getProductionEta(stockResult);
  const dimensions = device.dimensions;

  return (
    <>
      <section className="section">
        <div className="container product-grid">
          <div className="stack sticky-panel" style={{ gap: 12 }}>
            <ProductPreview config={config} size="xl" />
            <div className="grid cols-4">
              {variants.map((variant, index) => (
                <button
                  key={index}
                  className={'choice' + (active === index ? ' selected' : '')}
                  type="button"
                  onClick={() => setActive(index)}
                  style={{ padding: 0, overflow: 'hidden' }}
                >
                  <ProductPreview config={variant} size="sm" animated={false} />
                </button>
              ))}
            </div>
          </div>

          <div className="stack" style={{ gap: 24 }}>
            <div className="stack" style={{ gap: 14 }}>
              <div className="eyebrow">{t.product.eyebrow}</div>
              <h1 className="h-1">{t.product.title.replace('{device}', device.displayName)}</h1>
              <p className="lead">{t.product.sub}</p>
              <div className="row wrap">
                <span className="tag tag-dot">{t.product.designedFor.replace('{device}', device.displayName)}</span>
                <span className="tag tag-dot">{t.product.accessory}</span>
              </div>
            </div>

            <div className="surface-plain stack" style={{ padding: 20 }}>
              <div className="row-between wrap">
                <div>
                  <div className="mono-sm">{t.product.fromPrice}</div>
                  <div className="h-2">{formatMoney(CFG.pricing.basePriceCents, lang)}</div>
                </div>
                <StockBadge stockResult={stockResult} />
              </div>
              <p className="body-muted">
                {t.product.production.replace('{min}', eta.min).replace('{max}', eta.max)}
              </p>
              <Link to="/configurator" className="btn btn-primary btn-lg btn-arrow">
                {t.product.customize}
              </Link>
            </div>

            <div className="stack" style={{ gap: 12 }}>
              <div className="eyebrow">{t.product.includes}</div>
              <div className="surface-plain" style={{ padding: 18 }}>
                {t.product.includesList.map((item) => (
                  <SpecRow key={item} k={item} v={t.common.included} tone="success" />
                ))}
              </div>
            </div>

            <p className="notice">{t.product.accessory}</p>

            <details className="surface-plain" style={{ padding: 18 }}>
              <summary className="row-between">
                <span className="eyebrow">{t.product.technical}</span>
                <span className="mono-sm">OPEN</span>
              </summary>
              <div style={{ marginTop: 14 }}>
                <SpecRow k={t.product.specDevice} v={device.displayName} />
                <SpecRow k={t.product.specBody} v={t.product.specBodyVal} />
                <SpecRow k={t.product.specCap} v={t.product.specCapVal} />
                <SpecRow
                  k={t.product.specDimensions}
                  v={`${dimensions.widthMm} x ${dimensions.depthMm} x ${dimensions.heightMm} mm`}
                />
                <SpecRow
                  k={t.product.specCaseDimensions}
                  v={`${device.caseDimensions.widthMm} x ${device.caseDimensions.depthMm} x ${device.caseDimensions.heightMm} mm`}
                />
                <SpecRow
                  k={t.product.specCapStart}
                  v={`${device.capStartMm} mm`}
                />
                <SpecRow
                  k={t.product.specProduction}
                  v={`${CFG.production.minDays}-${CFG.production.maxDays} ${t.common.days}`}
                />
                <SpecRow
                  k={t.product.specShipping}
                  v={`${CFG.pricing.shipping.standard.minDays}-${CFG.pricing.shipping.standard.maxDays} ${t.common.days}`}
                />
              </div>
            </details>
          </div>
        </div>
      </section>

      <ReviewsSection />
      <FaqPreview />
      <FinalCta />
    </>
  );
};

window.Product = Product;