// Products.jsx — product showcase with selector panel
// Image refs live here (not in translations) since they don't change by language
const PRODUCT_IMGS = {
  spit:    IMG.spit,
  burger:  IMG.burger,
  crumble: IMG.flatbreadTop,
};

function Products() {
  const { T } = useLang();
  const P = T.products;

  const [active, setActive] = React.useState("spit");
  // Controls the cross-fade when switching products
  const [visible, setVisible] = React.useState(true);
  const cur = P.items.find(p => p.id === active);

  // Fade out, swap product, fade back in
  const handleSelect = (id) => {
    if (id === active) return;
    setVisible(false);
    setTimeout(() => { setActive(id); setVisible(true); }, 180);
  };

  const fadeStyle = {
    opacity: visible ? 1 : 0,
    transition: "opacity .18s ease",
  };

  return (
    <section id="products" style={{ background: "var(--bg)", padding: "96px 0 104px" }}>
      <div className="container">

        {/* ── Section header ── */}
        <Reveal style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between",
          marginBottom: 44, flexWrap: "wrap", gap: 18 }}>
          <div>
            <h2 style={{ font: "var(--t-h1)", letterSpacing: "-.015em",
              textTransform: "uppercase", margin: 0 }}>
              {P.heading}
            </h2>
            <p style={{ font: "var(--t-lead)", color: "var(--fg2)",
              marginTop: 10, maxWidth: 460 }}>
              {P.subheading}
            </p>
          </div>
          {/* Honest signal that the range is growing */}
          <span style={{
            background: "var(--lime)", color: "var(--on-lime)",
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase",
            padding: "9px 16px", borderRadius: "var(--r-pill)",
            whiteSpace: "nowrap", alignSelf: "flex-start",
          }}>{P.badge}</span>
        </Reveal>

        {/* ── Showcase ── */}
        <Reveal delay={80}>
          <div className="nm-showcase" style={{
            display: "grid", gridTemplateColumns: "1.15fr .85fr",
            height: 520, borderRadius: "var(--r-lg)",
            overflow: "hidden", boxShadow: "var(--shadow-lg)",
          }}>

            {/* Left: full-bleed product photo */}
            <div style={{ position: "relative", overflow: "hidden", background: "var(--ink)" }}>
              <img
                src={PRODUCT_IMGS[active]}
                alt={cur.name}
                style={{ width: "100%", height: "100%", objectFit: "cover",
                  display: "block", ...fadeStyle }}
              />
              {/* Gradient so the product name stays legible over any photo */}
              <div style={{ position: "absolute", inset: 0,
                background: "linear-gradient(to top, rgba(38,7,46,.78) 0%, rgba(38,7,46,.08) 45%, transparent 100%)",
                pointerEvents: "none" }} />
              {/* Product name on photo */}
              <div style={{ position: "absolute", bottom: 28, left: 28, ...fadeStyle }}>
                <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 900,
                  fontSize: "clamp(2.25rem, 4vw, 3.75rem)",
                  color: "var(--lime)", textTransform: "uppercase",
                  letterSpacing: "-.025em", lineHeight: 1,
                }}>
                  {cur.tag}
                </div>
              </div>
            </div>

            {/* Right: product info + selector */}
            <div style={{
              background: "var(--ink)", padding: "40px 36px",
              display: "flex", flexDirection: "column",
            }}>

              {/* Active product details — fades with the photo */}
              <div style={{ flex: 1, ...fadeStyle }}>
                <p style={{ font: "var(--t-body)", color: "var(--fg-on-dark-2)",
                  lineHeight: 1.65, maxWidth: 340, margin: "0 0 18px" }}>
                  {cur.blurb}
                </p>
                {/* Use case tags */}
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {cur.uses.map(u => (
                    <span key={u} style={{
                      border: "1.5px solid var(--border-dark)",
                      color: "var(--fg-on-dark-2)", borderRadius: "var(--r-pill)",
                      padding: "6px 13px", fontSize: 13, fontWeight: 600,
                    }}>{u}</span>
                  ))}
                </div>
              </div>

              {/* Divider */}
              <div style={{ height: 1, background: "var(--border-dark)", margin: "28px 0" }} />

              {/* Product selector list — clicking switches the showcase */}
              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                {P.items.map(p => {
                  const on = p.id === active;
                  return (
                    <button
                      key={p.id}
                      onClick={() => handleSelect(p.id)}
                      style={{
                        textAlign: "left", cursor: "pointer",
                        border: "none", borderRadius: "var(--r-sm)",
                        background: on ? "rgba(241,252,122,.09)" : "transparent",
                        padding: "11px 14px",
                        display: "flex", alignItems: "center", gap: 12,
                        transition: "background .18s ease",
                      }}
                    >
                      {/* Active indicator dot */}
                      <span style={{
                        width: 7, height: 7, borderRadius: 999, flex: "none",
                        background: on ? "var(--lime)" : "rgba(255,255,255,.18)",
                        transition: "background .18s ease",
                      }} />
                      <span style={{
                        fontFamily: "var(--font-display)", fontWeight: on ? 800 : 500,
                        fontSize: 14.5, textTransform: "uppercase", letterSpacing: ".04em",
                        color: on ? "var(--paper)" : "var(--fg-on-dark-2)",
                        transition: "color .18s ease",
                      }}>
                        {p.name}
                      </span>
                    </button>
                  );
                })}
              </div>

              {/* CTA */}
              <div style={{ marginTop: 24 }}>
                <Button as="a" href="#contact">{P.cta}</Button>
              </div>
            </div>

          </div>
        </Reveal>

      </div>

      <style>{`
        /* Stack vertically on mobile */
        @media (max-width: 860px) {
          .nm-showcase { grid-template-columns: 1fr !important; height: auto !important; }
          .nm-showcase > div:first-child { height: 300px; }
          .nm-showcase > div:last-child { padding: 28px 24px !important; }
        }
      `}</style>
    </section>
  );
}
window.Products = Products;