/* United Wolfram — Sustainability page.
   Composes DS primitives + UWSection so it inherits the site's look,
   spacing rhythm, and scroll-reveal animations automatically. */

function SustainabilityView({ go }) {
  const _DS = window.UnitedWolframDesignSystem_d15b43;
  const { Hero, SectionHeader, Button } = _DS;
  const Section = window.UWSection;

  React.useEffect(() => {
    window.UW_SEO.updatePageMeta(
      "Sustainability — United Wolfram",
      "United Wolfram processes tungsten and cobalt recovered exclusively from post-industrial recycled materials — 100% recycled feedstock, 100% on-site solar power, OECD-aligned responsible sourcing.",
      "/sustainability/"
    );
    window.UW_SEO.cleanPageSchemas();
    window.UW_SEO.injectBreadcrumb([
      { name: "Home", path: "/" },
      { name: "Sustainability", path: "/sustainability/" },
    ]);
  }, []);

  const pillars = [
    {
      n: "01",
      title: "Responsible recycling",
      body: "Every material we process represents an opportunity to extend the life of critical resources. By recovering tungsten and cobalt from post-industrial recycled materials, we reduce dependence on primary mining while supporting more sustainable manufacturing across global industries. We continuously improve our recycling processes to maximise resource efficiency, minimise waste generation, and contribute to a circular economy.",
    },
    {
      n: "02",
      title: "Responsible supply chains",
      body: "Trust begins with responsible sourcing. United Wolfram operates management systems designed to promote transparency, traceability, and accountability throughout our supply chain — supplier evaluation, risk assessment, material traceability, and continuous monitoring. Our programme is developed with reference to the OECD Due Diligence Guidance for minerals from conflict-affected and high-risk areas and the Responsible Minerals Assurance Process (RMAP).",
    },
    {
      n: "03",
      title: "Environmental stewardship",
      body: "Environmental responsibility is integrated throughout our operations — 100% post-industrial recycled raw materials, 100% on-site solar-powered manufacturing, responsible waste management, efficient use of energy and natural resources, and continuous environmental improvement.",
    },
    {
      n: "04",
      title: "People & business integrity",
      body: "People are at the centre of our success. We are committed to a safe, inclusive, and respectful workplace where employees are treated fairly and with dignity. We maintain zero tolerance for child labour, forced labour, discrimination, harassment, bribery, corruption, and unethical business practices — and we expect the same from our suppliers, contractors, and partners.",
    },
  ];

  const valueFor = [
    { label: "For customers", body: "Consistent, high-quality recycled tungsten and cobalt products supported by responsible sourcing and reliable manufacturing." },
    { label: "For suppliers", body: "Long-term partnerships built on transparency, ethical business conduct, and mutual accountability." },
    { label: "For employees", body: "A safe workplace that promotes professional growth, diversity, respect, and wellbeing." },
    { label: "For the environment", body: "Reduced dependence on primary mining, increased resource recovery, renewable energy utilisation, and responsible waste management." },
  ];

  const commitments = [
    "Ethical business conduct",
    "Human rights & fair labour practices",
    "Health & safety",
    "Environmental responsibility",
    "Responsible mineral sourcing",
    "Supply chain due diligence",
    "Supplier engagement",
    "Risk assessment & traceability",
    "Continuous improvement",
  ];

  const prose = {
    fontFamily: "var(--font-text)",
    fontSize: "var(--size-body-lg)",
    lineHeight: "var(--leading-body)",
    color: "var(--text-secondary)",
    maxWidth: "720px",
    margin: "0 auto var(--space-5)",
  };

  return (
    <React.Fragment>
      <Hero
        tone="dark"
        eyebrow="Sustainability"
        title="Responsible today. Sustainable tomorrow."
        subtitle="Sustainability is not a separate initiative — it is the foundation of our business."
        minHeight="46vh"
      />

      {/* Intro */}
      <Section tone="page">
        <div style={{ textAlign: "center" }}>
          <p style={{ ...prose, color: "var(--text-primary)" }}>
            As a processor of tungsten and cobalt recovered exclusively from post-industrial recycled
            materials, we transform valuable resources into high-quality products while reducing waste,
            conserving natural resources, and supporting a circular economy for critical minerals.
          </p>
          <p style={prose}>
            Our approach combines responsible sourcing, environmental stewardship, ethical governance,
            and continuous innovation to create long-term value for our customers, employees, suppliers,
            and communities.
          </p>
          <p style={{ ...prose, marginBottom: 0 }}>
            Guided by internationally recognised responsible sourcing principles, we are committed to
            operating with transparency, integrity, and accountability throughout our operations and
            supply chain.
          </p>
        </div>
      </Section>

      {/* Four pillars */}
      <Section tone="subtle">
        <SectionHeader
          eyebrow="Our Approach"
          title="Built on four pillars."
          subtitle="Responsible manufacturing is achieved by balancing environmental responsibility, ethical business practices, operational excellence, and long-term partnerships."
        />
        <div
          style={{
            marginTop: "var(--space-12)",
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: "var(--space-6)",
          }}
        >
          {pillars.map((p) => (
            <div
              key={p.n}
              style={{
                background: "var(--surface-card)",
                border: "1px solid var(--border-subtle)",
                borderRadius: "var(--radius-lg)",
                padding: "var(--space-8)",
                boxShadow: "var(--shadow-xs)",
                transition: "box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard)",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-card-hover, 0 8px 32px rgba(0,0,0,0.10))"; e.currentTarget.style.transform = "translateY(-4px)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-xs)"; e.currentTarget.style.transform = "none"; }}
            >
              <div style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-title-2)", fontWeight: "var(--weight-bold)", color: "var(--uw-green-300)", letterSpacing: "var(--tracking-display)", marginBottom: "var(--space-3)" }}>
                {p.n}
              </div>
              <h3 style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-title-3)", fontWeight: "var(--weight-semibold)", color: "var(--text-primary)", margin: "0 0 var(--space-3)" }}>
                {p.title}
              </h3>
              <p style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-subhead)", lineHeight: "var(--leading-body)", color: "var(--text-secondary)", margin: 0 }}>
                {p.body}
              </p>
            </div>
          ))}
        </div>
      </Section>

      {/* Value creation */}
      <Section tone="page">
        <SectionHeader
          eyebrow="Creating Value"
          title="Sustainability creates value at every stage."
        />
        <div
          style={{
            marginTop: "var(--space-10)",
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
            gap: "var(--space-10) var(--space-8)",
          }}
        >
          {valueFor.map((v) => (
            <div key={v.label}>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: "var(--size-headline)", fontWeight: "var(--weight-semibold)", color: "var(--text-brand)", marginBottom: "var(--space-2)" }}>
                {v.label}
              </div>
              <p style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-subhead)", lineHeight: "var(--leading-body)", color: "var(--text-secondary)", margin: 0 }}>
                {v.body}
              </p>
            </div>
          ))}
        </div>
      </Section>

      {/* Commitment — dark brand field, matching the values section */}
      <Section tone="dark">
        <SectionHeader
          tone="dark"
          eyebrow="Our Commitment"
          title="Responsible business, embedded throughout."
          subtitle="Our management is committed to continually strengthening our governance systems, responsible sourcing programme, environmental performance, and operational excellence through continuous improvement and stakeholder engagement."
        />
        <p style={{ maxWidth: "720px", margin: "var(--space-8) auto 0", textAlign: "center", fontFamily: "var(--font-text)", fontSize: "var(--size-body)", lineHeight: "var(--leading-body)", color: "rgba(255,255,255,0.78)" }}>
          United Wolfram publicly communicates its commitment to responsible sourcing, ethical business
          conduct, environmental stewardship, human rights, workplace safety, and supply chain due
          diligence in accordance with internationally recognised responsible business principles.
        </p>
      </Section>

      {/* Governance checklist */}
      <Section tone="subtle">
        <SectionHeader
          eyebrow="Governance"
          title="Responsible business, documented."
          subtitle="Our responsible business framework is supported by documented management systems designed to promote accountability and continuous improvement across our operations."
        />
        <div
          style={{
            marginTop: "var(--space-10)",
            maxWidth: "860px",
            marginLeft: "auto",
            marginRight: "auto",
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
            gap: "var(--space-3)",
          }}
        >
          {commitments.map((c) => (
            <div
              key={c}
              style={{
                display: "flex",
                alignItems: "center",
                gap: "var(--space-3)",
                background: "var(--surface-card)",
                border: "1px solid var(--border-subtle)",
                borderRadius: "var(--radius-md, 12px)",
                padding: "14px var(--space-5)",
              }}
            >
              <span aria-hidden="true" style={{ color: "var(--text-brand)", fontWeight: 700, flexShrink: 0 }}>✓</span>
              <span style={{ fontFamily: "var(--font-text)", fontSize: "var(--size-subhead)", fontWeight: "var(--weight-medium)", color: "var(--text-primary)" }}>{c}</span>
            </div>
          ))}
        </div>
      </Section>

      {/* Looking ahead + CTA */}
      <Section tone="page">
        <SectionHeader
          eyebrow="Looking Ahead"
          title="The future depends on responsible materials."
          subtitle="Recycling, innovation, and responsible business practices play a vital role in building resilient global supply chains. As we grow, we remain committed to improving our environmental performance, strengthening our responsible sourcing programme, investing in sustainable technologies, and creating long-term value for our customers, partners, employees, and communities."
        />
        <div style={{ marginTop: "var(--space-10)", display: "flex", gap: "var(--space-4)", justifyContent: "center", flexWrap: "wrap" }}>
          <Button variant="primary" size="lg" onClick={() => go && go("enquiry")}>Talk to our team</Button>
          <Button variant="secondary" size="lg" onClick={() => go && go("products")}>Explore products</Button>
        </div>
      </Section>
    </React.Fragment>
  );
}

window.SustainabilityView = SustainabilityView;
