// IndustryDetail.jsx — the per-vertical page body rendered at /solutions/<id>.
// Reads the shared playbook data (IndustriesData.jsx) and shows a focused
// hero + default-config + pull-stat for a single industry.
function LDIndustryDetail({ id }) {
  const list = window.LD_INDUSTRIES || [];
  const r = list.find((x) => x.id === id);

  if (!r) {
    return (
      <section className="ld-container-wide" style={{ padding: "120px 32px", textAlign: "center" }}>
        <h1 className="ld-h2">Solution not found</h1>
        <p className="ld-lead" style={{ marginTop: 16 }}>
          <a href="solutions.html" style={{ color: "var(--ld-ink)", borderBottom: "2px solid var(--ld-yellow)" }}>Browse all solutions</a>
        </p>
      </section>
    );
  }

  const idx = list.indexOf(r);
  const next = list[(idx + 1) % list.length];

  return (
    <React.Fragment>
      <LDSubpageHero
        eyebrow={`Solutions · ${r.name}`}
        title={<>{r.lead}</>}
        sub={r.body}
      />

      <section style={{ background: "var(--ld-cream)", padding: "56px 0 40px" }}>
        <div className="ld-container-wide ld-feature-row" style={{ gridTemplateColumns: "1.1fr 0.9fr", gap: 24, alignItems: "stretch" }}>
          {/* default config */}
          <div style={{
            background: "#fff", border: "2px solid var(--ld-ink)", borderRadius: 24,
            boxShadow: "6px 6px 0 var(--ld-ink)", padding: "36px 40px",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
              <span style={{
                width: 56, height: 56, borderRadius: 14, background: r.tone,
                border: "1.5px solid var(--ld-ink)",
                display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 28,
              }}>{r.icon}</span>
              <div className="ld-mono" style={{ fontSize: 11, color: "var(--ld-ink-soft)", letterSpacing: "1.4px", textTransform: "uppercase", fontWeight: 600 }}>
                Default config for {r.name.toLowerCase()}
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 0, border: "1.5px solid var(--ld-ink)", borderRadius: 10, overflow: "hidden" }}>
              {r.defaults.map((d, i) => (
                <div key={d.l} style={{
                  padding: "16px 16px",
                  borderRight: i % 2 === 0 ? "1px solid var(--ld-line)" : "none",
                  borderBottom: i < r.defaults.length - 2 ? "1px solid var(--ld-line)" : "none",
                  background: i % 2 === 0 ? "var(--ld-cream)" : "#fff",
                }}>
                  <div className="ld-mono" style={{ fontSize: 10, color: "var(--ld-ink-soft)", letterSpacing: "0.8px", textTransform: "uppercase" }}>{d.l}</div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: "var(--ld-ink)", marginTop: 4 }}>{d.v}</div>
                </div>
              ))}
            </div>
            <p className="ld-small" style={{ color: "var(--ld-ink-mute)", marginTop: 18 }}>
              Every default is editable — these are the starting points we've found work best for {r.name.toLowerCase()}.
            </p>
          </div>

          {/* pull-stat panel */}
          <div style={{
            background: r.tone,
            border: "2px solid var(--ld-ink)", borderRadius: 24,
            padding: "48px 36px",
            display: "flex", flexDirection: "column", justifyContent: "center", gap: 24,
            position: "relative", overflow: "hidden",
          }}>
            <svg aria-hidden="true" style={{ position: "absolute", inset: 0, opacity: 0.08 }} viewBox="0 0 200 200" preserveAspectRatio="none">
              <pattern id={`ipat-detail-${r.id}`} width="20" height="20" patternUnits="userSpaceOnUse">
                <circle cx="10" cy="10" r="1.2" fill={r.ink}/>
              </pattern>
              <rect width="200" height="200" fill={`url(#ipat-detail-${r.id})`}/>
            </svg>
            <div style={{ position: "relative" }}>
              <div style={{ fontWeight: 900, fontSize: 42, letterSpacing: "-1.5px", color: r.ink, lineHeight: 1.0 }}>
                {r.pull.v}
              </div>
              <div className="ld-mono" style={{ fontSize: 12, color: r.ink, letterSpacing: "1.2px", textTransform: "uppercase", marginTop: 10, fontWeight: 600 }}>
                {r.pull.l}
              </div>
            </div>
            <div style={{
              background: "#fff", border: "1.5px solid var(--ld-ink)", borderRadius: 12, padding: 14,
              boxShadow: "4px 4px 0 var(--ld-ink)", position: "relative",
            }}>
              <div className="ld-mono" style={{ fontSize: 9, color: "var(--ld-ink-soft)", letterSpacing: "1px", marginBottom: 8 }}>CART · {r.name.toUpperCase()}</div>
              <div style={{ display: "flex", gap: 4, marginBottom: 8 }}>
                {["W","T","F","S","S"].map((dd, i) => (
                  <div key={i} style={{
                    flex: 1, padding: "4px 0", textAlign: "center",
                    background: i === 2 ? "var(--ld-yellow)" : "#fff",
                    border: `1.5px solid ${i === 2 ? "var(--ld-ink)" : "var(--ld-line)"}`,
                    borderRadius: 5, fontSize: 9, fontWeight: 800, color: "var(--ld-ink)",
                  }}>{dd}</div>
                ))}
              </div>
              <div style={{
                background: "var(--ld-yellow-tint)", border: "1.5px solid var(--ld-ink)",
                borderRadius: 6, padding: "6px 8px",
                fontSize: 10, fontWeight: 700, color: "var(--ld-ink)",
                display: "flex", alignItems: "center", justifyContent: "space-between",
              }}>
                <span>{r.defaults[0].v.replace("windows", "")}</span>
                <span><window.LDIcon.Check size={12}/></span>
              </div>
            </div>
          </div>
        </div>

        {/* prev/next nav */}
        <div className="ld-container-wide" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, marginTop: 36 }}>
          <a href="solutions.html" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 700, color: "var(--ld-ink)" }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
            All solutions
          </a>
          <a href={`solutions/${next.id}.html`} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 700, color: "var(--ld-ink)" }}>
            Next · {next.name}
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </section>
    </React.Fragment>
  );
}
window.LDIndustryDetail = LDIndustryDetail;
