// privacy-page.jsx — Privacy Notice template.
// Editorial reading layout: compact header on cream + 2-column body
// (sticky TOC · long-form prose) + Privacy Office contact card.
// Reuses LockedNavBar + Footer from the rest of the site.

// ============================================================
// Page metadata
// ============================================================
const PRIVACY_META = {
  title: 'Privacy Notice',
  lede:
    'How Green Integrations Inc. collects, uses, discloses, and processes the personal data of visitors and users of greenintegrations.ca. This notice forms part of, and is incorporated with, our Terms and Conditions.',
  effective: 'May 1, 2026',
  jurisdiction: 'Canada · PIPEDA',
  controller: 'Green Integrations Inc.',
  registeredAt: '125 Norfinch Dr. #207, Toronto, ON M3N 1W8'
};

// ============================================================
// Table-of-contents structure — single source of truth so the
// sidebar nav, the section headings, and the scroll-spy stay in sync.
// ============================================================
const PRIVACY_TOC = [
  { id: 's-introduction',     n: '01', label: 'Introduction' },
  { id: 's-collection-use',   n: '02', label: 'How we collect and use your personal data' },
  { id: 's-disclosure',       n: '03', label: 'Disclosing your personal data to others' },
  { id: 's-international',    n: '04', label: 'International transfers' },
  { id: 's-retention',        n: '05', label: 'Retention and security' },
  { id: 's-rights',           n: '06', label: 'Your rights' },
  { id: 's-our-details',      n: '07', label: 'Our details' },
  { id: 's-amendments',       n: '08', label: 'Amendments' }
];

// ============================================================
// Section header — small mono index + H2.
// Matches the brand "running header" rhythm without the divider rules.
// ============================================================
const PrivacySectionHeading = ({ n, id, children }) => (
  <header style={{ margin: '56px 0 22px' }}>
    <div style={{
      fontFamily: 'var(--ff-mono)', fontSize: 11, fontWeight: 500,
      letterSpacing: '0.14em', textTransform: 'uppercase',
      color: 'var(--gi-color-green)', marginBottom: 10
    }}>{n} · Section</div>
    <h2 id={id} style={{
      font: '500 30px/36px var(--ff-sans)', letterSpacing: '-0.018em',
      color: 'var(--gi-deep-ink)', margin: 0, scrollMarginTop: 96
    }}>{children}</h2>
  </header>
);

// ============================================================
// Numbered clause — mono index in the gutter, prose to the right.
// This is the workhorse of the page. Indented just enough to give
// legal numbering the feel of a marginal anchor instead of a list bullet.
// ============================================================
const Clause = ({ n, children }) => (
  <div className="gi-clause" style={{
    display: 'grid', gridTemplateColumns: '64px 1fr', gap: 8,
    margin: '0 0 18px', alignItems: 'baseline'
  }}>
    <span style={{
      fontFamily: 'var(--ff-mono)', fontSize: 12, fontWeight: 500,
      letterSpacing: '0.04em', color: 'var(--gi-slate)',
      paddingTop: 2
    }}>{n}</span>
    <div style={{
      font: '400 15.5px/1.78 var(--ff-sans)', color: '#1A2434',
      textWrap: 'pretty', margin: 0
    }}>{children}</div>
  </div>
);

// "Definition" row used inside Section 2 — a tiny inline-mono tag
// for the bracketed data-category labels in the source ("usage data",
// "account data", etc.), so the reader can scan categories quickly.
const DataTag = ({ children }) => (
  <span style={{
    display: 'inline-block',
    fontFamily: 'var(--ff-mono)', fontSize: 11.5, fontWeight: 500,
    letterSpacing: '0.02em', color: 'var(--gi-soft-green)',
    background: 'var(--gi-accent-soft)',
    padding: '1px 8px', borderRadius: 3,
    margin: '0 1px'
  }}>{children}</span>
);

// ============================================================
// Page header — small, calm. No big hero image; this is a legal page.
// Cream surface, one-line eyebrow, balanced title, meta rail underneath.
// ============================================================
const PrivacyHeader = () => (
  <header style={{
    background: 'var(--gi-paper-cream)',
    borderBottom: '1px solid rgba(15,33,51,0.08)'
  }}>
    <div data-gi-resp="container" style={{
      maxWidth: 1200, margin: '0 auto', padding: '88px 48px 56px'
    }}>
      {/* Breadcrumb-style tag */}
      <div style={{
        fontFamily: 'var(--ff-mono)', fontSize: 11, fontWeight: 500,
        letterSpacing: '0.14em', textTransform: 'uppercase',
        color: 'var(--gi-color-green)', marginBottom: 28
      }}>Legal · Privacy</div>

      {/* Title block */}
      <div className="gi-privacy-head" style={{
        display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 80,
        alignItems: 'end'
      }}>
        <h1 style={{
          font: '500 64px/68px var(--ff-sans)', letterSpacing: '-0.028em',
          color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance',
          maxWidth: 720
        }}>{PRIVACY_META.title}</h1>
        <p style={{
          font: '400 17px/28px var(--ff-sans)', color: 'var(--gi-slate)',
          margin: 0, maxWidth: 460, textWrap: 'pretty', paddingBottom: 8
        }}>{PRIVACY_META.lede}</p>
      </div>

      {/* Metadata rail — mono labels, sage values */}
      <div className="gi-privacy-meta" style={{
        marginTop: 56,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32,
        paddingTop: 28, borderTop: '1px solid rgba(15,33,51,0.10)'
      }}>
        {[
          { label: 'Effective',    value: PRIVACY_META.effective },
          { label: 'Jurisdiction', value: PRIVACY_META.jurisdiction },
          { label: 'Controller',   value: PRIVACY_META.controller },
          { label: 'Registered',   value: PRIVACY_META.registeredAt }
        ].map((m, i) => (
          <div key={i}>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 10, fontWeight: 500,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--gi-graphite)', marginBottom: 8
            }}>{m.label}</div>
            <div style={{
              font: '500 14px/20px var(--ff-sans)', color: 'var(--gi-deep-ink)',
              letterSpacing: '-0.005em'
            }}>{m.value}</div>
          </div>
        ))}
      </div>
    </div>
  </header>
);

// ============================================================
// Sticky TOC sidebar — scroll-spy via IntersectionObserver.
// Same scroll-spy pattern as Blog Post, simplified (no collapse).
// ============================================================
const PrivacyTOC = () => {
  const [active, setActive] = React.useState(PRIVACY_TOC[0].id);

  React.useEffect(() => {
    const nodes = PRIVACY_TOC.map((t) => document.getElementById(t.id)).filter(Boolean);
    if (!nodes.length) return;
    const io = new IntersectionObserver((entries) => {
      const visible = entries.filter((e) => e.isIntersecting);
      if (visible.length) setActive(visible[0].target.id);
    }, { rootMargin: '-12% 0% -72% 0%' });
    nodes.forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);

  return (
    <nav className="gi-privacy-toc" style={{
      position: 'sticky', top: 96, alignSelf: 'start',
      paddingTop: 4
    }}>
      <div style={{
        fontFamily: 'var(--ff-mono)', fontSize: 10, fontWeight: 500,
        letterSpacing: '0.16em', textTransform: 'uppercase',
        color: 'var(--gi-graphite)', marginBottom: 18
      }}>On this page</div>

      <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {PRIVACY_TOC.map((t) => {
          const isActive = active === t.id;
          return (
            <li key={t.id} style={{ position: 'relative' }}>
              <a href={`#${t.id}`}
                style={{
                  display: 'grid', gridTemplateColumns: '34px 1fr', gap: 4,
                  font: `${isActive ? '500' : '400'} 13.5px/1.5 var(--ff-sans)`,
                  color: isActive ? 'var(--gi-deep-ink)' : 'var(--gi-slate)',
                  borderLeftWidth: 2,
                  borderLeftStyle: 'solid',
                  borderLeftColor: isActive ? 'var(--gi-soft-green)' : 'rgba(15,33,51,0.10)',
                  padding: '8px 0 8px 14px',
                  textDecoration: 'none',
                  transition: 'color 200ms ease, border-left-color 200ms ease'
                }}>
                <span style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 11,
                  letterSpacing: '0.04em',
                  color: isActive ? 'var(--gi-soft-green)' : 'var(--gi-graphite)'
                }}>{t.n}</span>
                <span style={{ textWrap: 'pretty' }}>{t.label}</span>
              </a>
            </li>
          );
        })}
      </ol>

      {/* Quick-action: print / contact */}
      <div style={{
        marginTop: 32, paddingTop: 24,
        borderTop: '1px solid rgba(15,33,51,0.10)',
        display: 'flex', flexDirection: 'column', gap: 12
      }}>
        <a href="#s-our-details" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          font: '500 12px/1 var(--ff-sans)', color: 'var(--gi-deep-ink)',
          textDecoration: 'none', border: 'none'
        }}>
          <i data-lucide="mail" style={{ width: 14, height: 14, strokeWidth: 1.5, color: 'var(--gi-soft-green)' }} />
          Contact the Privacy Office
        </a>
        <button onClick={() => window.print && window.print()} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          font: '500 12px/1 var(--ff-sans)', color: 'var(--gi-deep-ink)',
          background: 'transparent', border: 'none', padding: 0,
          cursor: 'pointer'
        }}>
          <i data-lucide="printer" style={{ width: 14, height: 14, strokeWidth: 1.5, color: 'var(--gi-soft-green)' }} />
          Print this notice
        </button>
      </div>
    </nav>
  );
};

// ============================================================
// Article body — every numbered clause from the source policy,
// rendered through the <Clause> primitive. Inline data-category
// tags (<DataTag>) replace the "(quoted)" parenthetical labels for
// faster scanning in Section 2.
// ============================================================
const PrivacyProse = () => (
  <article className="gi-prose-legal" style={{ maxWidth: 760 }}>
    {/* Opening — sits above Section 01, acts as the lede */}
    <p className="gi-lede" style={{
      font: '400 19px/1.65 var(--ff-sans)', color: 'var(--gi-deep-ink)',
      letterSpacing: '-0.005em',
      margin: '0 0 36px',
      paddingLeft: 18,
      borderLeft: '2px solid #D4A24C',
      textWrap: 'pretty'
    }}>
      This Privacy Policy describes the policies of <strong>Green Integrations Inc.</strong>, having
      its principal place of business at 125 Norfinch Dr. #207, Toronto, ON, M3N 1W8
      (“Green Integrations”, “we”, “our” or “us”) regarding the collection, use, disclosure
      and processing of personal data of visitors or users who access or use the website (“you”).
      This Privacy Policy is a part of and incorporated with the
      {' '}<a href="https://greenintegrations.ca/terms-of-service/" target="_blank" rel="noreferrer">Terms and Conditions</a>.
      Any term not defined herein has the meaning provided in the Terms and Conditions.
    </p>

    {/* 01 — Introduction */}
    <PrivacySectionHeading n="01" id="s-introduction">Introduction</PrivacySectionHeading>
    <Clause n="1.1">We are committed to safeguarding the privacy of our website visitors and users.</Clause>
    <Clause n="1.2">
      This policy applies where we are acting as a data controller with respect to your
      personal data; in other words, where we determine the purposes and means of the
      processing of that personal data.
    </Clause>
    <Clause n="1.3">
      We use cookies on our website. Insofar as those cookies are not strictly necessary
      for the provision of our website and any products, we will ask you to consent to
      our use of cookies when you first visit our website.
    </Clause>
    <Clause n="1.4">
      Our website incorporates privacy controls which affect how we will process your
      personal data.
    </Clause>

    {/* 02 — Collection & use */}
    <PrivacySectionHeading n="02" id="s-collection-use">
      How we collect and use your personal data
    </PrivacySectionHeading>
    <Clause n="2.1">
      In this Section we have set out: (a) the general categories of personal data that
      we may process; (b) in the case of personal data that we did not obtain directly
      from you, the source and specific categories of that data; (c) the purposes for
      which we may process personal data; and (d) the legal bases of the processing.
    </Clause>
    <Clause n="2.2">
      We may process data about your use of the website and products offered{' '}
      (<DataTag>usage data</DataTag>). The usage data may include your IP address,
      geographical location, browser type and version, operating system, referral source,
      length of visit, page views and website navigation paths, as well as information
      about the timing, frequency and pattern of your website use. The source of the
      usage data is our analytics tracking system. This usage data may be processed for
      the purposes of analyzing the use of the website and products offered therein.
      The legal basis for this processing is consent or our legitimate interests, namely
      monitoring and improving the website and services and any products offered.
    </Clause>
    <Clause n="2.3">
      We may process your website account data (<DataTag>account data</DataTag>). The
      account data may include your name and email address. The source of the account
      data is you. The account data may be processed for the purposes of operating our
      website, providing our services and products, ensuring the security of our
      website, products and services, maintaining back-ups of our databases and
      communicating with you. The legal basis for this processing is consent or our
      legitimate interests, namely the proper administration of our website and business
      or the performance of a contract between you and us and/or taking steps, at your
      request, to enter into such a contract.
    </Clause>
    <Clause n="2.4">
      We may process information included in your personal profile on our website{' '}
      (<DataTag>profile data</DataTag>). The profile data may include your name,
      address, telephone number, email address, profile pictures, gender, date of birth,
      relationship status, interests and hobbies, educational details and employment
      details. The profile data may be processed for the purposes of enabling and
      monitoring your use of our website and services. The legal basis for this
      processing is consent or our legitimate interests, namely the proper administration
      of our website and business or the performance of a contract between you and us
      and/or taking steps, at your request, to enter into such a contract.
    </Clause>
    <Clause n="2.5">
      We may process your personal data that are provided in the course of the use of
      our services or products (<DataTag>service data</DataTag>). The source of the
      service data is you. The service data may be processed for the purposes of operating
      our website, providing our services or products, ensuring the security of our
      website, products and services, maintaining back-ups of our databases and
      communicating with you. The legal basis for this processing is consent or our
      legitimate interests, namely the proper administration of our website and business
      or the performance of a contract between you and us and/or taking steps, at your
      request, to enter into such a contract.
    </Clause>
    <Clause n="2.6">
      We may process information that you post for publication on our website or through
      our services (<DataTag>publication data</DataTag>). The publication data may be
      processed for the purposes of enabling such publication and administering our
      website and services. The legal basis for this processing is consent or our
      legitimate interests, namely the proper administration of our website and business
      or the performance of a contract between you and us and/or taking steps, at your
      request, to enter into such a contract.
    </Clause>
    <Clause n="2.7">
      We may process information contained in any enquiry you submit to us regarding
      goods and/or services (<DataTag>enquiry data</DataTag>). The enquiry data may be
      processed for the purposes of offering, marketing and selling relevant goods
      and/or services to you.
    </Clause>
    <Clause n="2.8">
      We may process information relating to our customer relationships, including
      customer contact information (<DataTag>customer relationship data</DataTag>).
      The customer relationship data may include your name, your employer, your job
      title or role, your contact details, and information contained in communications
      between us and you or your employer. The source of the customer relationship data
      is you or your employer. The customer relationship data may be processed for the
      purposes of managing our relationships with customers, communicating with
      customers, keeping records of those communications and promoting our products and
      services to customers. The legal basis for this processing is consent or our
      legitimate interests, namely the proper management of our customer relationships.
    </Clause>
    <Clause n="2.9">
      We may process information relating to transactions, including purchases of goods
      and services, that you enter into with us and/or through our website{' '}
      (<DataTag>transaction data</DataTag>). The transaction data may include your
      contact details, your card details and the transaction details. The transaction
      data may be processed for the purpose of supplying the purchased goods and services
      and keeping proper records of those transactions. The legal basis for this
      processing is the performance of a contract between you and us and/or taking steps,
      at your request, to enter into such a contract and our legitimate interests, namely
      the proper administration of our website and business.
    </Clause>
    <Clause n="2.10">
      We may process information that you provide to us for the purpose of subscribing
      to our email notifications and/or newsletters (<DataTag>notification data</DataTag>).
      The notification data may be processed for the purposes of sending you the relevant
      notifications and/or newsletters. The legal basis for this processing is consent
      or the performance of a contract between you and us and/or taking steps, at your
      request, to enter into such a contract.
    </Clause>
    <Clause n="2.11">
      We may process information contained in or relating to any communication that you
      send to us (<DataTag>correspondence data</DataTag>). The correspondence data may
      include the communication content and metadata associated with the communication.
      Our website will generate the metadata associated with communications made using
      the website contact forms. The correspondence data may be processed for the
      purposes of communicating with you and record-keeping. The legal basis for this
      processing is our legitimate interests, namely the proper administration of our
      website and business and communications with users.
    </Clause>

    {/* 03 — Disclosure */}
    <PrivacySectionHeading n="03" id="s-disclosure">
      Disclosing your personal data to others
    </PrivacySectionHeading>
    <Clause n="3.1">
      We may disclose your personal data to any member of our group of companies
      including our subsidiaries and affiliates, insofar as reasonably necessary for the
      purposes, and on the legal bases, set out in this policy.
    </Clause>
    <Clause n="3.2">
      We may disclose your personal data to our insurers and/or professional advisers
      insofar as reasonably necessary for the purposes of obtaining or maintaining
      insurance coverage, managing risks, obtaining professional advice, or the
      establishment, exercise or defence of legal claims, whether in court proceedings
      or in an administrative or out-of-court procedure.
    </Clause>
    <Clause n="3.3">
      We may disclose your personal data to our suppliers or subcontractors insofar as
      reasonably necessary for the performance of a contract or for operating the
      website or providing the products, and ensuring the security of our website.
    </Clause>
    <Clause n="3.4">
      Financial transactions relating to our website and services are or may be handled
      by our payment services providers. We will share transaction data with our payment
      services providers only to the extent necessary for the purposes of processing
      your payments, refunding such payments and dealing with complaints and queries
      relating to such payments and refunds.
    </Clause>
    <Clause n="3.5">
      We may disclose your enquiry data to one or more of those selected third-party
      suppliers of goods and services for the purpose of enabling them to contact you so
      that they can offer, market and sell to you relevant goods and/or services.
    </Clause>
    <Clause n="3.6">
      In addition to the specific disclosures of personal data set out in this Section,
      we may disclose your personal data where such disclosure is necessary for
      compliance with a legal obligation to which we are subject, or in order to protect
      your vital interests or the vital interests of another natural person. We may also
      disclose your personal data where such disclosure is necessary for the
      establishment, exercise or defence of legal claims, whether in court proceedings
      or in an administrative or out-of-court procedure.
    </Clause>
    <Clause n="3.7">
      <strong>We will not sell, rent, or lease any of your personal data to any third
      party for advertising purposes.</strong>
    </Clause>

    {/* 04 — International transfers */}
    <PrivacySectionHeading n="04" id="s-international">
      International transfers of your personal data
    </PrivacySectionHeading>
    <Clause n="4.1">
      In this Section, we provide information about the circumstances in which your
      personal data may be transferred to countries outside Canada.
    </Clause>
    <Clause n="4.2">
      When we disclose your personal data to third parties, these third parties may
      process and store your information outside of Canada. If your personal information
      is processed or stored in a foreign country, it will be subject to that country’s
      laws and may be disclosed in accordance with those laws.
    </Clause>
    <Clause n="4.3">
      If you are located outside of Canada, your personal data may be transferred,
      stored and processed in and to Canada or other countries that may not provide the
      same level of protection for your personal data. By submitting your personal data
      to us, you consent to such transfer, storage, and processing.
    </Clause>

    {/* 05 — Retention & security */}
    <PrivacySectionHeading n="05" id="s-retention">
      Retention and security of personal data
    </PrivacySectionHeading>
    <Clause n="5.1">
      This Section sets out our data retention policies and procedure, which are
      designed to help ensure that we comply with our legal obligations in relation to
      the retention and deletion of personal data.
    </Clause>
    <Clause n="5.2">
      Personal data that we process for any purpose or purposes shall not be kept for
      longer than is necessary for that purpose or those purposes for which it is
      collected, or as long as your relationship with us continues or following
      applicable legal or regulatory requirements.
    </Clause>
    <Clause n="5.3">
      We shall take commercially reasonable measures to prevent unauthorized access,
      loss, destruction, or alteration of your personal data under our control by
      putting in place necessary administrative, security, and technical measures.
      Although we attempt to provide stringent security, we cannot guarantee that all
      potential security breaches can be prevented; accordingly, you acknowledge and
      agree that you are submitting personal information to us at your own risk.
    </Clause>

    {/* 06 — Your rights */}
    <PrivacySectionHeading n="06" id="s-rights">Your rights</PrivacySectionHeading>
    <Clause n="6.1">
      In this Section, we have summarised the rights that you have under the data
      protection law of Canada. Some of the rights are complex, and not all of the
      details have been included in our summaries. You should read the relevant laws and
      guidance from the regulatory authorities for a full explanation of these rights.
    </Clause>
    <Clause n="6.2">
      You have the right to access the personal information that we hold about you. If
      you exercise this access right, we may charge you a reasonable fee for copying
      and sending the information. You also have the right to challenge the accuracy
      and completeness of the information, and have that information amended as
      appropriate.
    </Clause>
    <Clause n="6.3">
      To the extent that the legal basis for our processing of your personal information
      is consent, you have the right to withdraw that consent at any time.
    </Clause>
    <Clause n="6.4">
      When you sign up for the website, you are opting in to receive emails from us. We
      may send you information about products and services we think you may like. You
      have the option to discontinue receiving any communications from us for any reason.
    </Clause>
    <Clause n="6.5">
      You may exercise any of your rights in relation to your personal data by sending us
      a mail at <a href="mailto:info@greenintegrations.ca">info@greenintegrations.ca</a>.
    </Clause>

    {/* 07 — Our details (rendered as a contact card, not numbered clauses) */}
    <PrivacySectionHeading n="07" id="s-our-details">Our details</PrivacySectionHeading>
    <p style={{
      font: '400 15.5px/1.78 var(--ff-sans)', color: '#1A2434',
      margin: '0 0 24px', textWrap: 'pretty', maxWidth: 640
    }}>
      If you need any further information on the way your personal data is being handled
      by us, have concerns, or would like to exercise any of your rights, you can contact
      our Privacy Office using the details below. If you believe we have not addressed
      your concerns, you have the right to complain with your data supervisory authority.
    </p>

    <aside style={{
      background: 'var(--gi-deep-ink)', color: '#fff',
      borderRadius: 12, padding: '36px 40px',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32
    }}>
      <div style={{ gridColumn: '1 / -1', display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{
          width: 28, height: 28, borderRadius: 6,
          background: 'rgba(255,255,255,0.08)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <i data-lucide="shield-check" style={{ width: 16, height: 16, strokeWidth: 1.5, color: '#D4A24C' }} />
        </span>
        <span style={{
          fontFamily: 'var(--ff-mono)', fontSize: 11, fontWeight: 500,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: '#D4A24C'
        }}>Privacy Office</span>
      </div>

      <div>
        <div style={{
          fontFamily: 'var(--ff-mono)', fontSize: 10, fontWeight: 500,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.5)', marginBottom: 8
        }}>Mailing address</div>
        <p style={{
          font: '400 14.5px/22px var(--ff-sans)', color: '#fff',
          margin: 0
        }}>
          Green Integrations Inc.<br />
          125 Norfinch Dr. #207<br />
          North York, ON M3N 1W8, Canada
        </p>
      </div>

      <div>
        <div style={{
          fontFamily: 'var(--ff-mono)', fontSize: 10, fontWeight: 500,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.5)', marginBottom: 8
        }}>Reach us</div>
        <p style={{
          font: '400 14.5px/22px var(--ff-sans)', color: '#fff',
          margin: 0
        }}>
          <a href="mailto:info@greenintegrations.ca" style={{
            color: '#fff', borderBottom: '1px solid rgba(255,255,255,0.3)',
            paddingBottom: 1
          }}>info@greenintegrations.ca</a><br />
          <a href="tel:+16479304336" style={{
            color: 'rgba(255,255,255,0.78)', border: 'none'
          }}>1-647-930-4336</a>
        </p>
      </div>
    </aside>

    {/* 08 — Amendments */}
    <PrivacySectionHeading n="08" id="s-amendments">Amendments</PrivacySectionHeading>
    <Clause n="8.1">
      We may update this policy from time to time by publishing a new version on our
      website.
    </Clause>
    <Clause n="8.2">
      You should check this page occasionally to ensure you are happy with any changes
      to this policy.
    </Clause>
    <Clause n="8.3">
      If there are any material changes, we may promptly notify you by email.
    </Clause>
    <Clause n="8.4">
      To the extent permitted under applicable law, your continued use of the website
      after any change is made in this policy will constitute your acceptance of such
      change.
    </Clause>

    {/* Footer rule for the article */}
    <div style={{
      marginTop: 64, paddingTop: 28,
      borderTop: '1px solid rgba(15,33,51,0.10)',
      display: 'flex', justifyContent: 'flex-end', alignItems: 'baseline',
      flexWrap: 'wrap', gap: 16
    }}>
      <a href="/terms-of-service/" style={{
        font: '500 13px/1 var(--ff-sans)', color: 'var(--gi-deep-ink)',
        border: 'none', textDecoration: 'none',
        display: 'inline-flex', alignItems: 'center', gap: 8
      }}>
        Read the Terms and Conditions
        <i data-lucide="arrow-up-right" style={{ width: 14, height: 14, strokeWidth: 1.5, color: 'var(--gi-soft-green)' }} />
      </a>
    </div>
  </article>
);

// ============================================================
// 2-column body layout — TOC sidebar (3 cols) + prose (9 cols).
// Collapses to single column on tablet/mobile (CSS in host file).
// ============================================================
const PrivacyBody = () => (
  <section style={{ background: 'var(--gi-paper-cream)', padding: '72px 0 96px' }}>
    <div data-gi-resp="container" style={{
      maxWidth: 1200, margin: '0 auto', padding: '0 48px'
    }}>
      <div className="gi-privacy-layout" style={{
        display: 'grid', gridTemplateColumns: '260px 1fr', gap: 96,
        alignItems: 'start'
      }}>
        <PrivacyTOC />
        <PrivacyProse />
      </div>
    </div>
  </section>
);

// ============================================================
// Page shell
// ============================================================
const PrivacyPage = () => {
  React.useEffect(() => {
    const t = setInterval(
      () => window.lucide && window.lucide.createIcons({ attrs: { 'stroke-width': 1.5 } }),
      200
    );
    return () => clearInterval(t);
  }, []);

  return (
    <div data-screen-label="Privacy Notice">
      <LockedNavBar onHero={false} />
      <PrivacyHeader />
      <PrivacyBody />
      <Footer />
    </div>
  );
};

Object.assign(window, { PrivacyPage });