/* United Wolfram — Product Detail page (AEO-optimised) */

function FAQAccordion({ faqs }) {
  const [open, setOpen] = React.useState(null);
  return (
    <div style={{ marginTop: "var(--space-6)" }}>
      {faqs.map((faq, i) => {
        const isOpen = open === i;
        return (
          <div key={i} style={{ borderTop: "1px solid var(--border-subtle)", padding: "var(--space-5) 0" }}>
            <button
              onClick={() => setOpen(isOpen ? null : i)}
              aria-expanded={isOpen}
              style={{
                width: "100%", textAlign: "left", background: "none", border: "none",
                cursor: "pointer", display: "flex", justifyContent: "space-between",
                alignItems: "center", gap: "var(--space-4)",
              }}
            >
              <span
                style={{
                  fontFamily: "var(--font-sans)", fontSize: "var(--size-headline)",
                  fontWeight: "var(--weight-semibold)",
                  color: isOpen ? "var(--text-brand)" : "var(--text-primary)",
                  lineHeight: "var(--leading-snug)",
                  transition: "color 240ms var(--ease-standard)",
                }}
                onMouseEnter={(e) => (e.currentTarget.style.color = "var(--text-brand)")}
                onMouseLeave={(e) => (e.currentTarget.style.color = isOpen ? "var(--text-brand)" : "var(--text-primary)")}
              >{faq.q}</span>
              <span style={{
                fontSize: "20px", color: "var(--text-brand)", flexShrink: 0,
                transform: isOpen ? "rotate(45deg)" : "none",
                transition: "transform 360ms var(--ease-out)",
              }}>+</span>
            </button>
            {/* Always mounted; height animates via the grid 0fr→1fr
                technique — buttery at any content length, no max-height
                guessing. The answer itself fades and settles slightly
                after the row starts opening, which reads as "rich". */}
            <div style={{
              display: "grid",
              gridTemplateRows: isOpen ? "1fr" : "0fr",
              transition: "grid-template-rows 420ms var(--ease-out)",
            }}>
              <div style={{ overflow: "hidden" }}>
                <p style={{
                  margin: "var(--space-4) 0 0", fontFamily: "var(--font-text)",
                  fontSize: "var(--size-body)", lineHeight: "var(--leading-body)",
                  color: "var(--text-secondary)", maxWidth: "720px",
                  opacity: isOpen ? 1 : 0,
                  transform: isOpen ? "none" : "translateY(-8px)",
                  transition: isOpen
                    ? "opacity 360ms var(--ease-out) 90ms, transform 360ms var(--ease-out) 90ms"
                    : "opacity 200ms ease, transform 200ms ease",
                }}>{faq.a}</p>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function ProductDetailView({ slug, onNav }) {
  const product = (window.UW_DATA.products || {})[slug];
  const _DS = window.UnitedWolframDesignSystem_d15b43;
  const { Button, Hero, Card, Badge } = _DS;
  const vp = window.useUWViewport();
  const stack = vp.width < 900;

  React.useEffect(() => {
    if (!product) return;
    window.UW_SEO.updatePageMeta(product.metaTitle, product.metaDesc, product.canonicalUrl);
    window.UW_SEO.injectProductSchema(product);
    window.UW_SEO.injectFAQSchema(product.faqs);
    window.UW_SEO.injectBreadcrumb([
      { name: "Home", path: "/" },
      { name: "Products", path: "/products/" },
      { name: product.name, path: product.canonicalUrl },
    ]);
  }, [slug]);

  if (!product) {
    return (
      <div style={{ minHeight: "60vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{ textAlign: "center" }}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-body)", color: "var(--text-secondary)" }}>
            Product detail page coming soon.
          </p>
          <Button onClick={() => onNav("products")} style={{ marginTop: "var(--space-4)" }}>Back to Products</Button>
        </div>
      </div>
    );
  }

  return (
    <article itemScope itemType="https://schema.org/Product">
      {/* Hero */}
      <Hero
        tone="dark"
        eyebrow={product.group}
        title={product.name}
        subtitle={product.formula ? product.formula + " · CAS " + product.cas : ""}
        minHeight="38vh"
      />

      {/* Breadcrumb */}
      <nav aria-label="Breadcrumb" style={{ background: "var(--surface-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
        <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "10px var(--gutter)", display: "flex", gap: "8px", alignItems: "center" }}>
          {[{ label: "Home", route: "home" }, { label: "Products", route: "products" }, { label: product.name, route: null }].map((b, i) => (
            <React.Fragment key={i}>
              {i > 0 && <span style={{ color: "var(--text-tertiary)", fontSize: "var(--size-footnote)" }}>›</span>}
              {b.route
                ? <button onClick={() => onNav(b.route)} style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-text)", fontSize: "var(--size-footnote)", color: "var(--text-brand)", padding: 0 }}>{b.label}</button>
                : <span style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-footnote)", color: "var(--text-secondary)" }}>{b.label}</span>
              }
            </React.Fragment>
          ))}
        </div>
      </nav>

      {/* Body */}
      <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "var(--space-12) var(--gutter)" }}>
        <div style={{ display: "grid", gridTemplateColumns: stack ? "1fr" : "1fr 320px", gap: stack ? "var(--space-8)" : "var(--space-12)", alignItems: "start" }}>

          {/* Left — content */}
          <div>
            {/* AEO entity intro */}
            <p itemProp="description" style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-body-lg)", lineHeight: "var(--leading-body)", color: "var(--text-primary)", marginBottom: "var(--space-8)" }}>
              {product.description}
            </p>

            {/* Applications */}
            <h2 style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-title-3)", fontWeight: "var(--weight-semibold)", color: "var(--text-primary)", marginBottom: "var(--space-4)", letterSpacing: "var(--tracking-title)" }}>
              Applications
            </h2>
            <ul style={{ paddingLeft: "var(--space-5)", display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
              {product.applications.map((a, i) => (
                <li key={i} style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-body)", lineHeight: "var(--leading-body)", color: "var(--text-secondary)" }}>{a}</li>
              ))}
            </ul>

            {/* Industries */}
            <h2 style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-title-3)", fontWeight: "var(--weight-semibold)", color: "var(--text-primary)", margin: "var(--space-8) 0 var(--space-4)", letterSpacing: "var(--tracking-title)" }}>
              Industries Served
            </h2>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-2)" }}>
              {product.industries.map((ind, i) => (
                <span key={i} style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-footnote)", fontWeight: "var(--weight-medium)", color: "var(--text-brand)", background: "var(--uw-green-50, #f0faf4)", border: "1px solid var(--uw-green-200, #a8d5bc)", borderRadius: "var(--radius-pill)", padding: "4px 12px" }}>{ind}</span>
              ))}
            </div>

            {/* FAQ — key AEO section */}
            {product.faqs && product.faqs.length > 0 && (
              <section data-reveal="" style={{ marginTop: "var(--space-10)" }}>
                <h2 style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-title-3)", fontWeight: "var(--weight-semibold)", color: "var(--text-primary)", marginBottom: "var(--space-2)", letterSpacing: "var(--tracking-title)" }}>
                  Frequently Asked Questions
                </h2>
                <FAQAccordion faqs={product.faqs} />
              </section>
            )}
          </div>

          {/* Right — specs card */}
          <aside style={{ order: stack ? -1 : 0 }}>
            <div style={{ background: "var(--surface-subtle)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-subtle)", padding: "var(--space-6)", position: stack ? "static" : "sticky", top: "72px" }}>
              <div style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-eyebrow)", fontWeight: "var(--weight-semibold)", textTransform: "uppercase", letterSpacing: "var(--tracking-eyebrow)", color: "var(--text-tertiary)", marginBottom: "var(--space-4)" }}>Technical Data</div>
              {[
                product.formula && { label: "Formula", value: product.formula },
                product.cas && { label: "CAS Number", value: product.cas },
                product.appearance && { label: "Appearance", value: product.appearance },
                { label: "Origin", value: "Gujarat, India" },
                { label: "Quality Control", value: "Fully automated, computerised" },
                { label: "Available", value: "In stock · Export worldwide" },
              ].filter(Boolean).map((row, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "var(--space-3) 0", borderTop: i === 0 ? "none" : "1px solid var(--border-subtle)", gap: "var(--space-4)" }}>
                  <span style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-footnote)", color: "var(--text-tertiary)", flexShrink: 0 }}>{row.label}</span>
                  <span style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-footnote)", fontWeight: "var(--weight-medium)", color: "var(--text-primary)", textAlign: "right" }}>{row.value}</span>
                </div>
              ))}
              <Button
                variant="primary"
                style={{ width: "100%", marginTop: "var(--space-5)", justifyContent: "center" }}
                onClick={() => onNav("contact")}
              >
                Request an Enquiry
              </Button>
              <p style={{ marginTop: "var(--space-3)", fontFamily: "var(--font-text)", fontSize: "var(--size-footnote)", color: "var(--text-tertiary)", textAlign: "center", lineHeight: "var(--leading-relaxed)" }}>
                Samples, specs and pricing available on request.
              </p>
            </div>
          </aside>

        </div>
      </div>

      {/* CTA band */}
      <div style={{ background: "var(--surface-inverse)", padding: "var(--space-12) var(--gutter)" }}>
        <div style={{ maxWidth: "680px", margin: "0 auto", textAlign: "center" }}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-eyebrow)", fontWeight: "var(--weight-semibold)", textTransform: "uppercase", letterSpacing: "var(--tracking-eyebrow)", color: "var(--uw-green-400, #6fcf97)", marginBottom: "var(--space-3)" }}>United Wolfram · Gujarat, India</p>
          <h2 style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-title-2)", fontWeight: 700, color: "#fff", letterSpacing: "var(--tracking-title)", marginBottom: "var(--space-4)" }}>
            Looking for {product.name}?
          </h2>
          <p style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-body)", lineHeight: "var(--leading-body)", color: "rgba(255,255,255,0.7)", marginBottom: "var(--space-7)" }}>
            Contact our team for samples, technical data sheets, pricing and export enquiries.
          </p>
          <Button variant="primary" size="lg" onClick={() => onNav("contact")}>Get in Touch</Button>
        </div>
      </div>
    </article>
  );
}

window.ProductDetailView = ProductDetailView;
