// CoolSouq Marketplace — Product detail screen.
const NSp = window.CoolSouqDesignSystem_f4ec4c;

function GalleryPlate({ big }) {
  const MARK = (
    <svg width={big ? 92 : 40} height={big ? 92 : 40} viewBox="0 0 48 48" fill="none" aria-hidden="true" style={{ opacity: 0.45 }}>
      <g stroke="var(--slate-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M24 8 V40"/><path d="M24 13 l-4 -4 M24 13 l4 -4"/><path d="M24 35 l-4 4 M24 35 l4 4"/>
        <path d="M10.1 16 L37.9 32"/><path d="M37.9 16 L10.1 32"/>
      </g>
    </svg>
  );
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 8, width: "100%", height: "100%", background: "var(--slate-100)" }}>
      {MARK}
      {big && <span style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-faint)" }}>Photo on request</span>}
    </div>
  );
}

function ProductScreen({ product, onBack, onRfq, onCompare, compareIds }) {
  const { Button, Breadcrumbs, Tabs, SpecTable, StatusPill, Badge, PriceTag, VerifiedDealerBadge, Card } = NSp;
  const p = product || window.CS_PRODUCTS[0];
  const [tab, setTab] = React.useState("specs");
  const [thumb, setThumb] = React.useState(0);

  const specs = [
    { label: "Cooling capacity", value: `${p.capacity} kW`, hl: true },
    { label: "Refrigerant", value: p.refrigerant },
    { label: "Compressor", value: p.compressor },
    { label: "Year of manufacture", value: String(p.year) },
    { label: "Condition", value: p.condition },
    { label: "Dimensions (L×W×H)", value: "4.2 × 2.2 × 2.4 m" },
    { label: "Weight (operating)", value: "5,420 kg" },
    { label: "Sound power", value: "98 dB(A)" },
    { label: "Power supply", value: "400 V / 3ph / 50 Hz" },
    { label: "ESEER", value: "4.1" },
  ];

  return (
    <div style={{ background: "var(--bg-page)", minHeight: "70vh" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "18px 24px 0" }}>
        <Breadcrumbs items={[{ label: "Home", href: "#" }, { label: "Chillers", href: "#" }, { label: "Air-cooled", href: "#" }, { label: p.brand }]} />
      </div>

      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "16px 24px 48px", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 36, alignItems: "start" }}>
        {/* LEFT: gallery + tabs */}
        <div>
          <div style={{ display: "flex", gap: 12 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {[0, 1, 2, 3].map(i => (
                <button key={i} onClick={() => setThumb(i)} style={{ width: 64, height: 64, borderRadius: "var(--radius-md)", border: `1.5px solid ${thumb === i ? "var(--brand)" : "var(--border)"}`, overflow: "hidden", cursor: "pointer", padding: 0, background: "var(--slate-100)" }}>
                  <GalleryPlate />
                </button>
              ))}
            </div>
            <div style={{ flex: 1, aspectRatio: "4 / 3", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--border)", position: "relative" }}>
              <GalleryPlate big />
              <div style={{ position: "absolute", top: 14, insetInlineStart: 14, display: "flex", gap: 8 }}>
                <span style={{ padding: "4px 9px", background: "rgba(21,33,43,0.86)", color: "var(--paper)", borderRadius: "var(--radius-sm)", fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase" }}>{p.condition}</span>
                <StatusPill status={p.status} />
              </div>
            </div>
          </div>

          {/* Tabs */}
          <div style={{ marginTop: 28 }}>
            <Tabs value={tab} onChange={setTab} items={[{ value: "specs", label: "Specifications" }, { value: "desc", label: "Description" }, { value: "logistics", label: "Logistics & customs" }, { value: "dealer", label: "Dealer" }]} />
            <div style={{ paddingTop: 22 }}>
              {tab === "specs" && <SpecTable columns={2} items={specs} />}
              {tab === "desc" && (
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.7, color: "var(--text-body)", maxWidth: 640 }}>
                  <p style={{ marginTop: 0 }}>Decommissioned from a Dubai data-centre cooling plant after a capacity upgrade. Fully tested under load on our bench — compressors, control board and EXV verified operational. Comes with original Climaveneta documentation and last service report.</p>
                  <ul style={{ paddingInlineStart: 20, display: "flex", flexDirection: "column", gap: 6 }}>
                    <li>Microchannel condenser coils, recently cleaned</li>
                    <li>Carel pCO5+ controller with BACnet/IP gateway</li>
                    <li>Soft-start, low-noise EC condenser fans</li>
                    <li>Inspection available at our Jebel Ali yard by appointment</li>
                  </ul>
                </div>
              )}
              {tab === "logistics" && (
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.7, color: "var(--text-body)", maxWidth: 640 }}>
                  <SpecTable items={[{ label: "Incoterms", value: "EXW Jebel Ali (DDP on request)" }, { label: "Loading", value: "Forklift + crane on site" }, { label: "Transport", value: "1× 40ft flat-rack" }, { label: "Lead time", value: "5–7 business days" }, { label: "Est. freight to Riyadh", value: "€ 2,150" }]} />
                </div>
              )}
              {tab === "dealer" && (
                <Card padding="lg">
                  <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                    <div style={{ width: 56, height: 56, borderRadius: "var(--radius-md)", background: "var(--slate-900)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--gold-300)", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22 }}>GC</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 600, color: "var(--text-strong)" }}>{p.dealer}</div>
                      <div style={{ marginTop: 4 }}><VerifiedDealerBadge name="Verified dealer · since 2014" deals={240} country="AE" size="sm" /></div>
                    </div>
                    <Button variant="secondary">View store</Button>
                  </div>
                </Card>
              )}
            </div>
          </div>
        </div>

        {/* RIGHT: buy box */}
        <div style={{ position: "sticky", top: 134, display: "flex", flexDirection: "column", gap: 16 }}>
          <div>
            <div className="cs-eyebrow" style={{ color: "var(--brand-ink)", fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>{p.brand}</div>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: 25, fontWeight: 700, color: "var(--text-strong)", margin: "6px 0 0", lineHeight: 1.2, letterSpacing: "-0.02em" }}>{p.title}</h1>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 10, fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-muted)" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>{window.CS_I.globe} {p.location}</span>
              <span style={{ fontFamily: "var(--font-mono)" }}>Ref · {p.id.toUpperCase()}</span>
            </div>
          </div>

          <Card padding="lg" style={{ borderColor: "var(--border-strong)" }}>
            <PriceTag size="xl" amount={p.price.amount} currency={p.price.currency} original={p.price.original} note={p.price.note} onRequest={p.price.onRequest} />
            <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 18 }}>
              <Button size="lg" fullWidth onClick={() => onRfq(p)}>Request quote</Button>
              <Button size="lg" variant="secondary" fullWidth leftIcon={<span style={{ display: "inline-flex" }}>{window.CS_I.phone}</span>}>Request a callback</Button>
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
              <button onClick={() => onCompare(p.id)} style={{ flex: 1, height: 38, border: "1px solid var(--border)", borderRadius: "var(--radius-control)", background: compareIds.includes(p.id) ? "var(--surface-accent-tint)" : "var(--surface-card)", color: compareIds.includes(p.id) ? "var(--accent-ink)" : "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
                {compareIds.includes(p.id) ? "✓ In comparison" : "Add to compare"}
              </button>
              <button style={{ width: 44, height: 38, border: "1px solid var(--border)", borderRadius: "var(--radius-control)", background: "var(--surface-card)", color: "var(--text-muted)", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{window.CS_I.heart}</button>
            </div>
          </Card>

          <Card padding="md">
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {[["Buyer protection", "Funds held until you confirm delivery"], ["Inspection service", "Independent on-site check from € 350"], ["Logistics", "Door-to-door freight & customs quote"]].map(([h, s]) => (
                <div key={h} style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
                  <span style={{ width: 30, height: 30, flexShrink: 0, borderRadius: "var(--radius-md)", background: "var(--surface-accent-tint)", color: "var(--accent-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg>
                  </span>
                  <div>
                    <div style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: 600, color: "var(--text-strong)" }}>{h}</div>
                    <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--text-muted)", marginTop: 1 }}>{s}</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}
window.ProductScreen = ProductScreen;