/* United Wolfram — Industry Solutions views (AEO-optimised) */

function IndustrySolutionsView({ onSelectIndustry }) {
  const _DS = window.UnitedWolframDesignSystem_d15b43;
  const { Hero, Button } = _DS;
  const industries = window.UW_DATA.industries;

  React.useEffect(() => {
    window.UW_SEO.updatePageMeta(
      "Tungsten Powder Solutions by Industry — United Wolfram",
      "United Wolfram supplies tungsten and cobalt powders to 16+ industries: aerospace, defence, oil & gas, medical, semiconductor and cemented carbides. Gujarat, India.",
      "/industry-solutions/"
    );
    window.UW_SEO.cleanPageSchemas();
    window.UW_SEO.injectBreadcrumb([
      { name: "Home", path: "/" },
      { name: "Industry Solutions", path: "/industry-solutions/" },
    ]);
  }, []);

  const icons = {
    "Aerospace": "✈", "Automotive Industries": "🔧", "Cemented Carbides": "⚙",
    "Chemicals": "⚗", "Coating Technology": "🎯", "Defence": "🛡",
    "Diamond Tools": "💎", "Electronics & Electrical": "⚡", "Energy": "⚡",
    "Medical & Bio-Medical": "🏥", "Mining": "⛏", "Oil & Gas": "🛢",
    "Power Generation": "⚡", "Semiconductor & Electronics": "💻",
    "Special Application": "🔬", "Tungsten in Steel": "🏗",
  };

  return (
    <div>
      <Hero
        tone="dark"
        eyebrow="Industry Solutions"
        title="Tungsten powders engineered for 16+ global industries."
        subtitle="From aerospace and defence to semiconductor and medical — United Wolfram supplies precision tungsten and cobalt materials wherever performance is critical."
        minHeight="44vh"
      />

      <section data-reveal="" style={{ background: "var(--surface-page)", padding: "var(--space-14) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto" }}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-eyebrow)", fontWeight: "var(--weight-semibold)", textTransform: "uppercase", letterSpacing: "var(--tracking-eyebrow)", color: "var(--text-tertiary)", marginBottom: "var(--space-3)", textAlign: "center" }}>Industries We Serve</p>
          <h2 style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-title-1)", fontWeight: 700, letterSpacing: "var(--tracking-title)", textAlign: "center", color: "var(--text-primary)", marginBottom: "var(--space-10)" }}>
            Where our materials make the difference.
          </h2>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: "var(--space-4)" }}>
            {industries.map((ind, i) => {
              const hasDetail = !!(window.UW_DATA.industryDetail || {})[ind];
              return (
                <button
                  key={i}
                  onClick={() => hasDetail ? onSelectIndustry(ind) : null}
                  style={{
                    background: "var(--surface-card)", border: "1px solid var(--border-subtle)",
                    borderRadius: "var(--radius-lg)", padding: "var(--space-6)",
                    textAlign: "left", cursor: hasDetail ? "pointer" : "default",
                    transition: "box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard)",
                    boxShadow: "var(--shadow-xs)",
                  }}
                  onMouseEnter={e => { e.currentTarget.style.boxShadow = "var(--shadow-card-hover)"; e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.borderColor = "var(--text-brand)"; }}
                  onMouseLeave={e => { e.currentTarget.style.boxShadow = "var(--shadow-xs)"; e.currentTarget.style.transform = "none"; e.currentTarget.style.borderColor = "var(--border-subtle)"; }}
                >
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-body)", fontWeight: "var(--weight-semibold)", color: "var(--text-primary)", marginBottom: hasDetail ? "var(--space-2)" : 0 }}>
                    {ind}
                  </div>
                  {hasDetail && (
                    <span style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-footnote)", color: "var(--text-brand)" }}>
                      Learn more →
                    </span>
                  )}
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* AEO entity block */}
      <section data-reveal="" style={{ background: "var(--surface-subtle)", padding: "var(--space-14) var(--gutter)", borderTop: "1px solid var(--border-subtle)" }}>
        <div style={{ maxWidth: "720px", margin: "0 auto" }}>
          <h2 style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-title-2)", fontWeight: 700, color: "var(--text-primary)", letterSpacing: "var(--tracking-title)", marginBottom: "var(--space-5)" }}>
            Why engineers worldwide specify United Wolfram.
          </h2>
          <p style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-body-lg)", lineHeight: "var(--leading-body)", color: "var(--text-secondary)", marginBottom: "var(--space-5)" }}>
            United Wolfram is a Gujarat, India-based tungsten and cobalt powder manufacturer serving customers across aerospace, defence, oil &amp; gas, medical, semiconductor, cemented carbide and 10+ other industries. The company produces more than 30 product grades under fully automated, computerised quality control — from Ammonium Paratungstate (APT) through tungsten metal powder to ready-to-press carbide grades.
          </p>
          <p style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-body)", lineHeight: "var(--leading-body)", color: "var(--text-secondary)" }}>
            Every shipment is traceable from raw material to finished powder. Customers benefit from a single, quality-assured source for both the tungsten carbide and cobalt binder phases — simplifying supply chains and ensuring material compatibility.
          </p>
          <Button onClick={() => window.UW_SEO && null} style={{ marginTop: "var(--space-6)" }}>Request an Enquiry</Button>
        </div>
      </section>
    </div>
  );
}

function IndustryDetailView({ industry, onNav }) {
  const detail = (window.UW_DATA.industryDetail || {})[industry];
  const _DS = window.UnitedWolframDesignSystem_d15b43;
  const { Hero, Button } = _DS;
  const vp = window.useUWViewport();
  const stack = vp.width < 900;

  React.useEffect(() => {
    if (!detail) return;
    window.UW_SEO.updatePageMeta(detail.metaTitle, detail.metaDesc, "/industry-solutions/" + detail.slug + "/");
    window.UW_SEO.cleanPageSchemas();
    window.UW_SEO.injectFAQSchema(detail.faqs);
    window.UW_SEO.injectBreadcrumb([
      { name: "Home", path: "/" },
      { name: "Industry Solutions", path: "/industry-solutions/" },
      { name: industry, path: "/industry-solutions/" + (detail ? detail.slug : "") + "/" },
    ]);
  }, [industry]);

  if (!detail) {
    return (
      <div>
        <Hero tone="dark" eyebrow="Industry Solutions" title={industry} subtitle="Tungsten and cobalt powders engineered for this sector." minHeight="38vh" />
        <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "var(--space-12) var(--gutter)", textAlign: "center" }}>
          <p style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-body)", color: "var(--text-secondary)", marginBottom: "var(--space-6)" }}>
            Detailed industry page coming soon. Contact us to discuss your specific application.
          </p>
          <Button onClick={() => onNav("contact")}>Get in Touch</Button>
        </div>
      </div>
    );
  }

  return (
    <article>
      <Hero tone="dark" eyebrow="Industry Solutions" title={detail.headline} subtitle={""} 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: "Industry Solutions", route: "industry-solutions" }, { label: industry, 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>

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

          <div>
            <p style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-body-lg)", lineHeight: "var(--leading-body)", color: "var(--text-primary)", marginBottom: "var(--space-8)" }}>
              {detail.body}
            </p>

            {detail.faqs && detail.faqs.length > 0 && (
              <section>
                <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>
                <div style={{ marginTop: "var(--space-4)" }}>
                  {detail.faqs.map((faq, i) => (
                    <div key={i} style={{ borderTop: "1px solid var(--border-subtle)", padding: "var(--space-5) 0" }}>
                      <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-headline)", fontWeight: "var(--weight-semibold)", color: "var(--text-primary)", marginBottom: "var(--space-2)" }}>{faq.q}</p>
                      <p style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-body)", lineHeight: "var(--leading-body)", color: "var(--text-secondary)" }}>{faq.a}</p>
                    </div>
                  ))}
                </div>
              </section>
            )}
          </div>

          {/* Products sidebar */}
          <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)" }}>
                Relevant Products
              </div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
                {detail.products.map((p, i) => (
                  <li key={i}>
                    <span style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-body)", color: "var(--text-primary)", display: "block", padding: "var(--space-2) 0", borderBottom: "1px solid var(--border-subtle)" }}>{p}</span>
                  </li>
                ))}
              </ul>
              <Button variant="primary" style={{ width: "100%", marginTop: "var(--space-5)", justifyContent: "center" }} onClick={() => onNav("contact")}>
                Request Enquiry
              </Button>
            </div>
          </aside>
        </div>
      </div>
    </article>
  );
}

window.IndustrySolutionsView = IndustrySolutionsView;
window.IndustryDetailView = IndustryDetailView;