/* global React, PageIntro, useViewport */
const { useState: useStatePol, useEffect: useEffectPol, useRef: useRefPol, useMemo: useMemoPol } = React;

/* ------------------------------------------------------------------ */
/* Policies                                                            */
/*                                                                    */
/* Renders one of six policy pages — Warranty, Care & maintenance,    */
/* Privacy, Terms, Accessibility, Modern slavery. Content per         */
/* Derlot_Website_Policy_Pages.docx, verbatim.                        */
/*                                                                    */
/* Layout: PageIntro (eyebrow "Policies" · title · standfirst)        */
/*         left sticky section nav · right editorial column           */
/*         sibling policy switcher · contact CTA                      */
/* ------------------------------------------------------------------ */

const POLICY_ORDER = [
  "warranty",
  "care",
  "privacy",
  "terms",
  "accessibility",
  "modern-slavery",
];

const POLICIES = {
  warranty: {
    slug: "warranty",
    label: "Warranty",
    title: "Warranty",
    standfirst:
      "Derlot Group is committed to quality and craftsmanship. All Derlot furniture and lighting products are warranted against manufacturing defects in materials and workmanship under defined conditions of use.",
    updated: "Effective May 2026",
    sections: [
      {
        heading: "Structural Warranty — 5 Years (Residential / Light Commercial)",
        body:
          "Frames, bases, joints, welds, and structural components are covered for 5 years from the date of original purchase. Normal use is defined as intended use by individuals of average weight and activity, indoors, for no more than 8 hours per day. Extendable — conditions apply.*",
      },
      {
        heading: "Commercial / Intensive-Use Environments — 5 Years",
        body:
          "Products specified for commercial, hospitality, education, or public space environments carry a 5-year structural warranty and 1-year upholstery warranty. Extendable — conditions apply.* For high-intensity environments such as airports, healthcare, or 24-hour facilities, contact Derlot for tailored specifications.",
      },
      {
        heading: "Fabric & Upholstery — 2 Years",
        body:
          "Covers manufacturing defects in stitching, seaming, and application, and premature deterioration under standard use conditions.",
      },
      {
        heading: "Finishes & Coatings — 1 Year",
        body:
          "Powder coat, lacquer, anodised, and other applied finishes are warranted against peeling, cracking, or adhesion failure not caused by external damage or misuse.",
      },
      {
        heading: "Lighting — 2 Years",
        body:
          "Electrical components, wiring, and housings are warranted against manufacturing defects under normal use, when installed by a licensed electrician.",
      },
      {
        heading: "Certifications",
        body:
          "Select Derlot collections carry individual product certifications and third-party test reports, including structural and durability testing conducted in accordance with relevant ANSI/BIFMA, AS/NZS, EN, or equivalent international standards. Load ratings, cycle test results, and certification documentation are available upon request for specified collections. Please contact Derlot for product-specific certification information.",
      },
      {
        heading: "Exclusions",
        body:
          "This warranty does not cover normal wear and tear, misuse, negligence, improper assembly, damage from heat, moisture, sunlight, or chemicals, unauthorised modifications, or damage caused during purchaser-arranged transport.",
      },
      {
        heading: "How to Make a Warranty Claim",
        body:
          "Contact us with proof of purchase, a written description of the defect, and photographic evidence. Derlot will assess the claim and proceed with repair or replacement as appropriate.",
      },
    ],
    footnote:
      "* Extended warranty options are available at the time of purchase. Contact Derlot for details.",
  },

  care: {
    slug: "care",
    label: "Care & maintenance",
    title: "Care & maintenance",
    standfirst:
      "Derlot Group products are designed and manufactured for long-term performance. Appropriate care will preserve the structural integrity, finish, and appearance of your product throughout its service life.",
    updated: "Effective May 2026",
    sections: [
      {
        heading: "General",
        body:
          "Wipe surfaces regularly with a soft, dry or lightly damp cloth. Avoid abrasive cloths, scouring pads, or aggressive chemical cleaners. Do not allow liquids to pool on surfaces or penetrate joints.",
      },
      {
        heading: "Upholstery & Fabric",
        body:
          "Blot spills immediately with a clean, absorbent cloth — do not rub. Always follow the care and maintenance instructions provided by the fabric house for cleaning, spot treatment, and long-term upkeep. Refer to the specific guidelines issued by the fabric supplier (e.g. Maharam, Kvadrat, Camira) for recommended cleaning agents and methods.",
      },
      {
        heading: "Timber & Veneer",
        body:
          "Clean with a lightly damp cloth and dry immediately. Avoid prolonged exposure to direct sunlight, which may cause colour change or warping. Do not place hot items directly on timber surfaces. Periodic application of a suitable furniture polish or oil, as recommended by the supplier, will maintain the finish.",
      },
      {
        heading: "Metal & Powder Coat",
        body:
          "Wipe with a soft damp cloth. Avoid abrasive cleaners or steel wool. In outdoor or high-humidity environments, inspect periodically for signs of corrosion and apply a suitable protective coating if required.",
      },
      {
        heading: "Upholstered Seating",
        body:
          "Rotate and redistribute cushions regularly to maintain even wear. Always follow the care and maintenance instructions provided by the fabric house for cleaning, spot treatment, and long-term upkeep.",
      },
      {
        heading: "LDPE Rotomoulded Products",
        body: [
          "Rotomoulded polyethylene products are highly durable and resistant to impact, UV exposure, and moisture. Clean with warm water and a mild detergent using a soft cloth or sponge. Rinse thoroughly and allow to dry. For stubborn marks, a diluted non-abrasive household cleaner may be used. Avoid solvents, acetone, or petroleum-based cleaners, which may degrade the surface.",
          "Although LDPE is inherently UV-stabilised, prolonged exposure to direct sunlight over extended periods may cause gradual colour change. This is a natural characteristic of the material and does not affect structural performance.",
          "Do not use sharp or abrasive tools on the surface. Minor scuffs can often be buffed out with a soft cloth. Rotomoulded products do not require painting, sealing, or any surface treatment under normal conditions.",
          "Products used outdoors should be stored or secured appropriately in high-wind conditions. floor fixing and water fillable options are available with our collections.",
        ],
      },
      {
        heading: "Castors & Glides",
        body:
          "Inspect and tighten periodically. Replace glides when worn to prevent floor damage. Confirm that castors are specified appropriately for the floor surface type.",
      },
    ],
    footnote:
      "For product-specific care guidance, contact Derlot Customer Service.",
  },

  privacy: {
    slug: "privacy",
    label: "Privacy",
    title: "Privacy",
    standfirst:
      "Derlot is committed to protecting your privacy and handling your personal information with care and transparency. This policy explains how we collect, use, disclose and protect personal information, in accordance with the Privacy Act 1988 (Cth) and the Australian Privacy Principles.",
    updated: "Effective 2026",
    sections: [
      {
        heading: "Information we collect",
        body:
          "We may collect personal information including your name, company name and contact details (phone, email and address); purchase and transaction history; payment information (processed securely through third-party payment providers); the communications you send us; website usage data and cookies; and the trade and professional credentials supplied with trade-account applications.",
      },
      {
        heading: "How we use your information",
        body:
          "We use your personal information to process orders, arrange delivery and manage your account; to communicate with you about your orders and enquiries; to provide after-sales support and warranty services; to send marketing and promotional communications where you have opted in; to improve our products, services and website experience; and to meet our legal and regulatory obligations.",
      },
      {
        heading: "Disclosure of information",
        body:
          "We may share your information with delivery and logistics providers to fulfil your orders, payment processors and financial institutions, IT service providers who support our systems, professional advisors (legal, accounting and insurance), and government or regulatory bodies where required by law. We do not sell your personal information to third parties.",
      },
      {
        heading: "Marketing communications",
        body:
          "Where you have provided consent, we may contact you with news, product updates and promotions. You may opt out at any time by clicking 'unsubscribe' in any marketing email or by contacting us at contact@derlotgroup.com.",
      },
      {
        heading: "Data security",
        body:
          "We take reasonable steps to protect your personal information from unauthorised access, misuse or disclosure, and our website uses SSL encryption for data transmission. However, no method of transmission over the internet is entirely secure.",
      },
      {
        heading: "Access and correction",
        body:
          "You have the right to access and request correction of any personal information we hold about you. To make a request, contact us at contact@derlotgroup.com; we will respond within 30 days.",
      },
      {
        heading: "Cookies",
        body:
          "Our website uses cookies to improve your browsing experience and to gather analytics data. You may disable cookies through your browser settings, although this may affect some website functionality.",
      },
      {
        heading: "Retention",
        body:
          "We retain personal information for as long as necessary to fulfil the purposes for which it was collected, or as required by law. Transaction records are retained for a minimum of seven years for legal and accounting purposes.",
      },
      {
        heading: "Complaints",
        body:
          "If you believe we have breached the Privacy Act 1988 (Cth) or the Australian Privacy Principles, please contact us in the first instance. If you are not satisfied with our response, you may lodge a complaint with the Office of the Australian Information Commissioner (OAIC) at oaic.gov.au.",
      },
      {
        heading: "Contact",
        body:
          "Privacy enquiries can be directed to contact@derlotgroup.com or +61 7 3397 8886, or by post to 1/26 Birubi Street, Coorparoo QLD 4151, Australia.",
      },
    ],
    footnote: "Derlot Editions Pty Ltd T/A Derlot · ABN 53 155 547 112 · derlot.com",
  },

  terms: {
    slug: "terms",
    label: "Terms",
    title: "Terms & conditions",
    standfirst:
      "These terms and conditions govern all sales of products by Derlot Group and form the basis of the agreement between Derlot and the purchaser.",
    updated: "Effective May 2026",
    sections: [
      {
        heading: "Orders & Quotations",
        body:
          "Quotations are valid for 30 days from the date of issue and are subject to product availability. An order is confirmed upon receipt of a signed Sales Order and required deposit. Derlot reserves the right to decline or cancel any order prior to confirmation.",
      },
      {
        heading: "Payment",
        body:
          "A deposit of 50% is required to confirm an order. The remaining balance is due prior to dispatch unless otherwise agreed in writing. Title to goods does not pass to the purchaser until full payment is received.",
      },
      {
        heading: "Delivery",
        body:
          "If quoted, delivery is made to the address specified in the Sales Order. Risk of loss or damage passes to the purchaser upon delivery. Changes to delivery address or timing must be communicated in writing at least 5 business days prior to the scheduled delivery date.",
      },
      {
        heading: "Inspection & Acceptance",
        body:
          "The purchaser must inspect all goods upon delivery. Any non-conformance with the Sales Order must be notified in writing within 48 hours of delivery. Failure to notify within this period constitutes acceptance of the goods as delivered.",
      },
      {
        heading: "Cancellations & Returns",
        body:
          "Returns for change of mind are not accepted. Where Derlot agrees to a cancellation, goods must be returned at the purchaser's cost and risk, in original unopened condition. Deposits may be forfeited and additional costs may be charged.",
      },
      {
        heading: "Warranties",
        body:
          "Our goods are supplied with statutory guarantees that cannot be excluded under the applicable consumer-protection laws of the jurisdiction in which the order is fulfilled. Express warranty terms are detailed in the Derlot Warranty Policy.",
      },
      {
        heading: "Limitation of Liability",
        body:
          "To the maximum extent permitted by applicable law, Derlot's liability is limited to the value of the relevant order. Derlot is not liable for indirect, consequential, or incidental loss, including loss of profit, revenue, or opportunity.",
      },
      {
        heading: "Governing Law",
        body: [
          "These terms are governed by the laws of the jurisdiction in which the relevant Derlot Group entity operates and from which the applicable invoice is issued.",
          "For orders fulfilled by Derlot Editions Pty Ltd T/A Derlot, the laws of Queensland, Australia apply. For orders fulfilled by Derlot Group North America, the laws of the State of New York apply. For orders fulfilled by any other regional Derlot entity, the laws of the jurisdiction in which that entity is registered shall apply.",
          "Any dispute will be subject to the exclusive jurisdiction of the courts of the applicable jurisdiction.",
        ],
      },
    ],
    footnote: "Full terms are available upon request.",
  },

  accessibility: {
    slug: "accessibility",
    label: "Accessibility",
    title: "Accessibility",
    standfirst:
      "Derlot Group is committed to ensuring that its website and digital communications are accessible to all users, including people with disabilities.",
    updated: "Effective May 2026",
    sections: [
      {
        heading: "Our commitment",
        body:
          "We work towards conformance with the Web Content Accessibility Guidelines (WCAG) 2.1 at Level AA, as published by the World Wide Web Consortium (W3C). Our ongoing efforts include providing text alternatives for non-text content, ensuring adequate colour contrast, enabling full keyboard navigation, maintaining clear and consistent document structure, and ensuring all interactive elements are appropriately labelled.",
      },
      {
        heading: "Continuous improvement & feedback",
        body:
          "We recognise that accessibility is a continuous process and are committed to improving our digital environment on an ongoing basis. If you experience difficulty accessing any part of our website, require content in an alternative format, or wish to provide feedback, please contact us at contact@derlotgroup.com. We aim to respond to all accessibility enquiries within 5 business days.",
      },
    ],
  },

  "modern-slavery": {
    slug: "modern-slavery",
    label: "Modern slavery",
    title: "Modern slavery",
    standfirst:
      "Derlot Group is committed to conducting its operations ethically and to respecting internationally recognised human rights across its business and supply chain. We acknowledge our responsibilities under the applicable modern-slavery and human-rights legislation in the jurisdictions in which we operate — including the Modern Slavery Act 2018 (Cth) in Australia — and are committed to taking meaningful action to identify, assess, and address modern slavery risks.",
    updated: "Effective May 2026",
    sections: [
      {
        heading: "Our Position",
        body:
          "Derlot does not tolerate modern slavery, forced labour, debt bondage, human trafficking, or child labour in any form — whether within our own operations or through our suppliers, manufacturers, and business partners. We expect all parties engaged in our supply chain to uphold these standards.",
      },
      {
        heading: "Our Supply Chain",
        body:
          "Derlot designs and sources products through manufacturing partners in Australia, Europe, and internationally. We recognise that global supply chains carry inherent risks and we take active steps to understand, monitor, and mitigate those risks at each level.",
      },
      {
        heading: "Our Actions",
        body:
          "We conduct due diligence on new and existing suppliers with reference to modern slavery risk factors. Modern slavery and ethical conduct expectations are embedded in our supplier and manufacturing agreements. We prioritise partners who can demonstrate safe working conditions, fair remuneration, and responsible labour practices. Where risks are identified, we engage collaboratively to address them and, where necessary, review the relationship.",
      },
      {
        heading: "Reporting",
        body:
          "In accordance with our reporting obligations under the Modern Slavery Act 2018 (Cth) and equivalent regimes in other jurisdictions in which we operate, Derlot Group publishes a Modern Slavery Statement on a periodic basis. Statements are available upon request.",
      },
      {
        heading: "Contact",
        body:
          "If you have concerns or information relating to modern slavery risks within our supply chain, please contact us at contact@derlotgroup.com.",
      },
    ],
    footnote: "Derlot Group operates through regional entities including Derlot Editions Pty Ltd (Australia), Derlot Group North America, and other affiliated entities. The relevant contracting entity is identified on each quotation and invoice.",
  },
};

window.POLICIES = POLICIES;
window.POLICY_ORDER = POLICY_ORDER;

/* ----- Helpers --------------------------------------------------- */

function slugify(s) {
  return s.toLowerCase()
    .replace(/&/g, "and")
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-|-$/g, "");
}

/* ----- UI atoms -------------------------------------------------- */

function SectionNavLink({ label, anchor, active, onClick }) {
  return (
    <a
      href={`#${anchor}`}
      onClick={(e) => { e.preventDefault(); onClick(anchor); }}
      style={{
        display: "block",
        fontSize: 13,
        lineHeight: 1.5,
        color: active ? "#1a1917" : "#6c6862",
        fontWeight: active ? 500 : 400,
        textDecoration: "none",
        padding: "6px 0 6px 14px",
        borderLeft: active ? "1px solid #1a1917" : "1px solid transparent",
        marginLeft: -1,
        transition: "color 160ms ease, border-color 160ms ease",
      }}
    >
      {label}
    </a>
  );
}

function PolicyBody({ blocks, isMobile }) {
  const paragraphs = Array.isArray(blocks) ? blocks : [blocks];
  return (
    <>
      {paragraphs.map((p, i) => (
        <p key={i} style={{
          margin: i === 0 ? "0" : "16px 0 0",
          fontSize: isMobile ? 15 : 16,
          lineHeight: 1.65,
          color: "#3a3833",
          maxWidth: "62ch",
        }}>
          {p}
        </p>
      ))}
    </>
  );
}

/* ----- Page ------------------------------------------------------ */

function PolicyPage({ slug, setScreen }) {
  const policy = POLICIES[slug];
  const vw = useViewport();
  const isMobile = vw < 900;

  const sections = useMemoPol(() => {
    if (!policy) return [];
    return policy.sections.map(s => ({ ...s, anchor: slugify(s.heading) }));
  }, [policy]);

  const [activeAnchor, setActiveAnchor] = useStatePol(sections[0]?.anchor || "");

  // Scroll spy — observe each section and mark the topmost visible one active.
  const sectionRefs = useRefPol({});
  useEffectPol(() => {
    if (isMobile) return; // no sticky nav on mobile
    const obs = new IntersectionObserver(
      (entries) => {
        // Pick the section closest to the top of the viewport that is intersecting.
        const visible = entries
          .filter(e => e.isIntersecting)
          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
        if (visible.length) {
          const id = visible[0].target.getAttribute("data-anchor");
          if (id) setActiveAnchor(id);
        }
      },
      { rootMargin: "-120px 0px -55% 0px", threshold: 0 }
    );
    Object.values(sectionRefs.current).forEach(el => el && obs.observe(el));
    return () => obs.disconnect();
  }, [sections, isMobile]);

  const scrollTo = (anchor) => {
    const el = sectionRefs.current[anchor];
    if (!el) return;
    const headerOffset = 90;
    const top = el.getBoundingClientRect().top + window.scrollY - headerOffset;
    window.scrollTo({ top, behavior: "smooth" });
    setActiveAnchor(anchor);
  };

  if (!policy) {
    return (
      <section style={{ padding: "200px 24px 120px", textAlign: "center" }}>
        <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "#6c6862", marginBottom: 16 }}>Policy not found</div>
      </section>
    );
  }

  // Previous/next sibling policies
  const idx = POLICY_ORDER.indexOf(slug);
  const prev = idx > 0 ? POLICIES[POLICY_ORDER[idx - 1]] : null;
  const next = idx < POLICY_ORDER.length - 1 ? POLICIES[POLICY_ORDER[idx + 1]] : null;

  return (
    <>
      <PageIntro
        eyebrow="Policies"
        title={policy.title}
        body={policy.standfirst}
        compact
      />

      {/* ======= NOTICE — region/variation waiver ======= */}
      <section style={{
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
        borderBottom: "0.5px solid rgba(26,25,23,0.18)",
        background: "#ecebe5",
      }}>
        <div style={{
          maxWidth: 1440, margin: "0 auto",
          padding: isMobile ? "24px 20px" : "28px max(32px, 4vw)",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(180px, 220px) minmax(0, 1fr)",
          gap: isMobile ? 10 : 48,
          alignItems: "start",
        }}>
          <div style={{
            fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
            color: "#6c6862", fontWeight: 500, paddingTop: isMobile ? 0 : 3,
          }}>
            Notice
          </div>
          <div style={{
            fontSize: isMobile ? 13 : 13.5,
            lineHeight: 1.6,
            color: "#3a3833",
            maxWidth: "82ch",
          }}>
            The statements on this page set out Derlot Group&rsquo;s standard policy positions and are intended as a guide for specifiers. Region-specific terms apply and are issued at the point of quotation and invoice. Derlot Group reserves the right to vary these terms by region, by project, or as required by applicable law.
          </div>
        </div>
      </section>

      {/* ======= BODY ======= */}
      <section style={{
        padding: isMobile ? "0 20px 64px" : "0 max(32px, 4vw) 96px",
        maxWidth: 1440, margin: "0 auto",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(220px, 280px) minmax(0, 1fr)",
          gap: isMobile ? 32 : 96,
          borderTop: "0.5px solid rgba(26,25,23,0.18)",
          paddingTop: isMobile ? 32 : 56,
        }}>
          {/* Left: sticky section nav (desktop only) */}
          {!isMobile && (
            <aside>
              <div style={{ position: "sticky", top: 110 }}>
                <div style={{
                  fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
                  color: "#6c6862", fontWeight: 500,
                  marginBottom: 14, paddingLeft: 14,
                }}>
                  In this document
                </div>
                <nav style={{ borderLeft: "0.5px solid rgba(26,25,23,0.18)" }}>
                  {sections.map(s => (
                    <SectionNavLink
                      key={s.anchor}
                      label={s.heading}
                      anchor={s.anchor}
                      active={activeAnchor === s.anchor}
                      onClick={scrollTo}
                    />
                  ))}
                </nav>
                {policy.updated && (
                  <div style={{
                    marginTop: 28, paddingLeft: 14,
                    fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
                    color: "#6c6862",
                  }}>
                    {policy.updated}
                  </div>
                )}
              </div>
            </aside>
          )}

          {/* Right: body */}
          <article>
            {isMobile && policy.updated && (
              <div style={{
                fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
                color: "#6c6862", marginBottom: 24,
              }}>
                {policy.updated}
              </div>
            )}

            {sections.map((s, i) => (
              <div
                key={s.anchor}
                data-anchor={s.anchor}
                ref={(el) => { sectionRefs.current[s.anchor] = el; }}
                style={{
                  paddingTop: i === 0 ? 0 : (isMobile ? 36 : 48),
                  scrollMarginTop: 100,
                }}
              >
                <h2 style={{
                  margin: "0 0 16px 0",
                  fontFamily: "var(--font-display, Poppins, sans-serif)",
                  fontWeight: 500,
                  fontSize: isMobile ? 19 : 22,
                  letterSpacing: "-0.01em",
                  lineHeight: 1.25,
                  color: "#1a1917",
                  maxWidth: "30ch",
                  textWrap: "balance",
                }}>
                  {s.heading}
                </h2>
                <PolicyBody blocks={s.body} isMobile={isMobile} />
              </div>
            ))}

            {policy.footnote && (
              <div style={{
                marginTop: isMobile ? 40 : 56,
                paddingTop: isMobile ? 24 : 32,
                borderTop: "0.5px solid rgba(26,25,23,0.18)",
                fontSize: 13,
                lineHeight: 1.6,
                color: "#6c6862",
                fontStyle: "italic",
                maxWidth: "62ch",
              }}>
                {policy.footnote}
              </div>
            )}

            {/* Contact CTA inline at the end of the body column */}
            <div style={{
              marginTop: isMobile ? 48 : 64,
              padding: isMobile ? "32px 0 0" : "40px 0 0",
              borderTop: "0.5px solid rgba(26,25,23,0.18)",
            }}>
              <div style={{
                fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
                color: "#6c6862", fontWeight: 500, marginBottom: 14,
              }}>
                Questions about this policy
              </div>
              <h3 style={{
                margin: 0,
                fontFamily: "var(--font-display, Poppins, sans-serif)",
                fontWeight: 500,
                fontSize: isMobile ? 20 : 24,
                lineHeight: 1.2,
                letterSpacing: "-0.01em",
                color: "#1a1917",
                maxWidth: "28ch",
                textWrap: "balance",
              }}>
                Write to us
              </h3>
              <div style={{ marginTop: 20, display: "flex", flexWrap: "wrap", gap: isMobile ? 16 : 32, fontSize: 14, lineHeight: 1.6, color: "#1a1917" }}>
                <a
                  href={`mailto:contact@derlotgroup.com?subject=${encodeURIComponent(policy.title + " enquiry")}`}
                  style={{ color: "#1a1917", borderBottom: "0.5px solid rgba(26,25,23,0.4)", paddingBottom: 2 }}
                >
                  contact@derlotgroup.com
                </a>
              </div>
            </div>
          </article>
        </div>
      </section>

      {/* ======= SIBLING POLICIES ======= */}
      <section style={{
        background: "#ecebe5",
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
        borderBottom: "0.5px solid rgba(26,25,23,0.18)",
      }}>
        <div style={{
          maxWidth: 1440, margin: "0 auto",
          padding: isMobile ? "48px 20px" : "72px max(32px, 4vw)",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 20, marginBottom: isMobile ? 28 : 36 }}>
            <div style={{
              fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
              color: "#6c6862", fontWeight: 500,
            }}>
              Also in policies
            </div>
            {/* Prev / next quick-jump */}
            <div style={{ display: "flex", gap: 24, fontSize: 12 }}>
              {prev && (
                <a
                  onClick={() => setScreen(`policy-${prev.slug}`)}
                  style={{ color: "#1a1917", cursor: "pointer", letterSpacing: "0.02em" }}
                >
                  ← {prev.label}
                </a>
              )}
              {next && (
                <a
                  onClick={() => setScreen(`policy-${next.slug}`)}
                  style={{ color: "#1a1917", cursor: "pointer", letterSpacing: "0.02em" }}
                >
                  {next.label} →
                </a>
              )}
            </div>
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(3, minmax(0, 1fr))",
            gap: isMobile ? 0 : 0,
            borderTop: "0.5px solid rgba(26,25,23,0.18)",
          }}>
            {POLICY_ORDER.filter(s => s !== slug).map(s => {
              const p = POLICIES[s];
              return (
                <a
                  key={s}
                  onClick={() => setScreen(`policy-${p.slug}`)}
                  style={{
                    display: "block",
                    cursor: "pointer",
                    padding: isMobile ? "20px 0" : "24px 0",
                    borderBottom: "0.5px solid rgba(26,25,23,0.18)",
                    color: "#1a1917",
                  }}
                >
                  <div style={{
                    fontFamily: "var(--font-display, Poppins, sans-serif)",
                    fontWeight: 500,
                    fontSize: isMobile ? 16 : 18,
                    letterSpacing: "-0.005em",
                    color: "#1a1917",
                  }}>
                    {p.label} →
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
}

window.PolicyPage = PolicyPage;
