// Privacy.jsx — privacy policy page

const PRIVACY_SECTIONS = [
  { id: 'preamble', title: 'Preamble' },
  { id: 'who-we-are', title: '01 · Who we are' },
  { id: 'information-we-collect', title: '02 · Information we collect' },
  { id: 'how-we-use', title: '03 · How we use information' },
  { id: 'shopify-data', title: '04 · Shopify merchant data' },
  { id: 'sharing', title: '05 · Sharing & disclosure' },
  { id: 'cookies', title: '06 · Cookies & analytics' },
  { id: 'retention', title: '07 · Retention & deletion' },
  { id: 'security', title: '08 · Security' },
  { id: 'rights', title: '09 · Your rights' },
  { id: 'international', title: '10 · International transfers' },
  { id: 'children', title: '11 · Children' },
  { id: 'changes', title: '12 · Changes to this policy' },
  { id: 'contact', title: '13 · Contact' },
];

const Privacy = () => {
  const [active, setActive] = React.useState('preamble');

  React.useEffect(() => {
    const narrow = typeof window !== 'undefined' && window.matchMedia('(max-width: 899px)').matches;
    // Tight root margins + short mobile viewports can shrink the IO root to ~0; keep a usable band.
    const rootMargin = narrow ? '-12% 0px -35% 0px' : '-22% 0px -50% 0px';

    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setActive(e.target.id);
        }
      });
    }, { rootMargin, threshold: [0, 0.08, 0.2] });

    PRIVACY_SECTIONS.forEach(s => {
      const el = document.getElementById(s.id);

      if (el) {
        obs.observe(el);
      }
    });

    return () => obs.disconnect();
  }, []);

  return (
    <div className="privacy-root">
      {/* Title block */}
      <section style={{ padding: 'clamp(72px, 14vw, 120px) 0 clamp(48px, 8vw, 80px)', borderBottom: '1px solid var(--rule-soft)' }}>
        <div className="container">
          <div className="privacy-hero-grid">
            <div>
              <span className="eyebrow">Legal · Effective Jan 1, 2026</span>
              <h1 className="display" style={{ fontSize: 'clamp(56px, 8vw, 120px)', marginTop: 20 }}>
                Privacy<br/>
                <em>policy.</em>
              </h1>
              <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--ink-soft)', margin: '28px 0 0', maxWidth: 640, lineHeight: 1.45 }}>
                How StoreOn Web Solutions collects, uses, and safeguards information from
                the merchants and visitors we chart our work&nbsp;by.
              </p>
            </div>
            <div style={{ position: 'relative' }}>
              <Moon size={140} phase={0.5} />
              <div style={{ position: 'absolute', bottom: -28, left: 0, right: 0, textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
                Full moon · Art. § ∞
              </div>
            </div>
          </div>

          <div className="privacy-meta-row" style={{ display: 'flex', gap: 32, marginTop: 60, paddingTop: 32, borderTop: '1px solid var(--rule-soft)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
            <span>Version 3.2</span>
            <span>Effective 2026-01-01</span>
            <span>Last reviewed 2026-04-12</span>
            <span className="privacy-meta-reading">Reading time ~ 7 min</span>
          </div>
        </div>
      </section>

      <section style={{ padding: 'clamp(48px, 8vw, 80px) 0 clamp(100px, 14vw, 160px)' }}>
        <div className="container">
          <div className="privacy-layout">
            {/* TOC */}
            <aside className="privacy-toc">
              <div className="eyebrow" style={{ marginBottom: 20, paddingBottom: 14, borderBottom: '1px solid var(--rule-soft)' }}>Contents</div>
              <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                {PRIVACY_SECTIONS.map(s => (
                  <a key={s.id} href={`#${s.id}`}
                    onClick={e => { e.preventDefault(); document.getElementById(s.id)?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}
                    style={{
                      fontSize: 13,
                      padding: '8px 0 8px 16px',
                      borderLeft: active === s.id ? '1px solid var(--accent)' : '1px solid transparent',
                      color: active === s.id ? 'var(--ink)' : 'var(--ink-mute)',
                      transition: 'all .2s ease',
                      fontFamily: active === s.id ? 'var(--serif)' : 'var(--sans)',
                      fontStyle: active === s.id ? 'italic' : 'normal',
                      fontSize: active === s.id ? 15 : 13,
                    }}>
                    {s.title}
                  </a>
                ))}
              </nav>
              <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--rule-soft)', fontSize: 12, color: 'var(--ink-mute)', lineHeight: 1.5 }}>
                <p style={{ margin: 0 }}>Questions about this policy?</p>
                <a href="mailto:storeon.shopify.support@gmail.com" style={{ textDecoration: 'underline', textDecorationThickness: '0.5px', textUnderlineOffset: 3, color: 'var(--ink)' }}>storeon.shopify.support@gmail.com</a>
              </div>
            </aside>

            {/* Body */}
            <article className="privacy-article" style={{ maxWidth: 720, minWidth: 0, width: '100%', fontSize: 'clamp(15px, 3.6vw, 16px)', lineHeight: 1.75, color: 'var(--ink-soft)' }}>
              <div id="preamble" style={bodySectionStyle}>
                <p style={dropStyle}>
                  <span style={dropCapStyle}>A</span>t StoreOn Web Solutions, privacy is a craft — one we
                  treat with the same deliberate attention we bring to every line of code. This policy
                  describes, in as plain a voice as we can manage, what information we collect from you
                  and the merchants we serve, why we collect it, and the rights you hold over it.
                </p>
                <p>
                  We are a small, store-owned agency: there is no opaque committee behind these
                  paragraphs. If something here is unclear, write to us and a human will answer.
                </p>
              </div>

              <SectionMark />

              <Section id="who-we-are" title="01 · Who we are">
                <p>
                  StoreOn Web Solutions ("StoreOn," "we," "us," "our") is an independent web agency
                  focused on Shopify application development — both public apps distributed on the
                  Shopify App Store and private, custom apps built for individual merchants.
                </p>
                <p>
                  Our legal entity is StoreOn Web Solutions Ltd., registered in the jurisdiction
                  disclosed on request. Our contactable privacy representative is the founder, who
                  receives all inquiries sent to the addresses listed below.
                </p>
                <p>
                  For the purposes of the General Data Protection Regulation (GDPR) and analogous
                  instruments, we act as a <em>data controller</em> for information we collect
                  directly, and as a <em>data processor</em> for information merchants entrust to us
                  through their Shopify stores.
                </p>
              </Section>

              <Section id="information-we-collect" title="02 · Information we collect">
                <p>
                  We collect only what we need. The categories of information we may collect include:
                </p>
                <ul style={listStyle}>
                  <li><strong>Identification data.</strong> Your name, business name, email address, and — if you choose to share it — a phone number, when you contact us or engage our services.</li>
                  <li><strong>Commercial data.</strong> The details of our engagement: project scope, invoices, tax information, and correspondence relating to work performed.</li>
                  <li><strong>Technical data.</strong> When you visit our website, basic request metadata — IP address, user agent, referrer, timestamps — is recorded briefly for operational reasons.</li>
                  <li><strong>Shopify data.</strong> When installing or using apps we have built, Shopify will transmit limited merchant and, in some cases, customer data to the app. See section 04.</li>
                  <li><strong>Communications.</strong> The contents of emails, calls, and project management threads you exchange with us.</li>
                </ul>
                <p>
                  We do not purchase personal information from data brokers, nor do we enrich what you
                  provide us with third-party profiles.
                </p>
              </Section>

              <Section id="how-we-use" title="03 · How we use information">
                <p>We use the information described above for the following purposes:</p>
                <ul style={listStyle}>
                  <li>To deliver the services you have engaged us for;</li>
                  <li>To correspond with you about your project, proposals, or inquiries;</li>
                  <li>To issue invoices and meet tax and accounting obligations;</li>
                  <li>To maintain and improve our own website and internal tooling;</li>
                  <li>To comply with legal and regulatory obligations applicable to our profession.</li>
                </ul>
                <p>
                  We do not use your information for automated decision-making with legal or
                  significant effects, nor do we profile you for advertising purposes.
                </p>
              </Section>

              <Section id="shopify-data" title="04 · Shopify merchant data">
                <p>
                  A significant portion of our work involves apps that operate inside the Shopify
                  ecosystem. When a merchant installs an app we have built, Shopify grants that app
                  specific scopes of access — for example, to orders, products, or customer records —
                  under the permissions the merchant explicitly approves.
                </p>
                <p>
                  In those cases, we act on the merchant's behalf as a data processor. We handle
                  Shopify data strictly for the purpose of operating the app, and in accordance with
                  Shopify's API License and Terms of Use, the Shopify Partner Program Agreement, and
                  the Shopify Protected Customer Data requirements where applicable.
                </p>
                <p>
                  We honour the mandatory compliance webhooks Shopify requires of app developers —
                  <code style={codeStyle}>customers/redact</code>, <code style={codeStyle}>shop/redact</code>, and
                  <code style={codeStyle}>customers/data_request</code> — within the timeframes Shopify prescribes.
                </p>
              </Section>

              <Section id="sharing" title="05 · Sharing & disclosure">
                <p>
                  We do not sell personal information. We share it only in narrow, described
                  circumstances:
                </p>
                <ul style={listStyle}>
                  <li><strong>Sub-processors.</strong> Infrastructure providers we rely on to operate our services — hosting, email, analytics, payment processors. Each is bound by a data processing agreement consistent with this policy.</li>
                  <li><strong>Legal compliance.</strong> When we are required by law, valid court order, or regulatory authority to disclose information.</li>
                  <li><strong>Business transfers.</strong> In the unlikely event of a merger, acquisition, or dissolution, information may transfer to a successor entity, with prior notice to you.</li>
                  <li><strong>With your consent.</strong> In any other circumstance, only where you have expressly agreed.</li>
                </ul>
              </Section>

              <Section id="cookies" title="06 · Cookies & analytics">
                <p>
                  Our website uses a small set of cookies: strictly necessary cookies that keep the
                  site functional, and — only where you have consented — an analytics cookie that
                  helps us understand which pages are most useful. We use a privacy-respecting
                  analytics provider that does not create cross-site profiles.
                </p>
                <p>
                  You can withdraw your consent at any time through the cookie banner, or by clearing
                  cookies through your browser.
                </p>
              </Section>

              <Section id="retention" title="07 · Retention & deletion">
                <p>
                  We retain personal data only for as long as it is necessary for the purposes it was
                  collected for. Concretely:
                </p>
                <ul style={listStyle}>
                  <li>Inquiry correspondence is kept for up to 24 months, then deleted unless an engagement follows;</li>
                  <li>Client project data is kept for the duration of the engagement plus 7 years for accounting purposes;</li>
                  <li>Technical logs are kept for 30 days;</li>
                  <li>Shopify merchant and customer data is retained only while the app is installed and for the short periods Shopify's compliance webhooks require.</li>
                </ul>
              </Section>

              <Section id="security" title="08 · Security">
                <p>
                  We protect information with measures proportionate to its sensitivity: encrypted
                  transport (HTTPS), encryption at rest on services we control, strict access control
                  on sensitive stores, regular dependency review, and principle-of-least-privilege
                  access for staff and contractors.
                </p>
                <p>
                  No system is absolutely secure. In the event of a personal data breach affecting
                  your rights, we will notify you and, where required, the relevant supervisory
                  authority within 72 hours of becoming aware of it.
                </p>
              </Section>

              <Section id="rights" title="09 · Your rights">
                <p>
                  Depending on your jurisdiction, you may have the right to:
                </p>
                <ul style={listStyle}>
                  <li>Access the personal data we hold about you;</li>
                  <li>Request correction of inaccurate information;</li>
                  <li>Request deletion (the "right to be forgotten");</li>
                  <li>Restrict or object to certain processing;</li>
                  <li>Receive your data in a portable, machine-readable format;</li>
                  <li>Withdraw consent at any time, where processing is based on consent;</li>
                  <li>Lodge a complaint with a supervisory authority.</li>
                </ul>
                <p>
                  To exercise any of these rights, write to <a href="mailto:storeon.shopify.support@gmail.com" style={linkStyle}>storeon.shopify.support@gmail.com</a>.
                  We respond within 30 days.
                </p>
              </Section>

              <Section id="international" title="10 · International transfers">
                <p>
                  Some of the sub-processors we work with are located outside your jurisdiction.
                  Where personal data is transferred across borders, we rely on appropriate safeguards
                  — standard contractual clauses, adequacy decisions, or equivalent instruments — to
                  ensure your information remains protected to the same standard as described here.
                </p>
              </Section>

              <Section id="children" title="11 · Children">
                <p>
                  Our services are directed at merchants and businesses, not children. We do not
                  knowingly collect personal information from anyone under the age of 16. If you
                  believe a child has provided us with information, please contact us and we will
                  delete it.
                </p>
              </Section>

              <Section id="changes" title="12 · Changes to this policy">
                <p>
                  We revise this policy periodically. When the changes are material, we will notify
                  active clients by email and update the "Last reviewed" date at the top of this
                  page. Continued use of our services after a revision constitutes acceptance of the
                  updated policy.
                </p>
              </Section>

              <Section id="contact" title="13 · Contact">
                <p>
                  You can reach our privacy representative at:
                </p>
                <div style={{
                  margin: '20px 0',
                  padding: 24,
                  border: '1px solid var(--rule-soft)',
                  background: 'var(--bg-elev)',
                  fontFamily: 'var(--mono)',
                  fontSize: 13,
                  lineHeight: 1.8,
                }}>
                  StoreOn Web Solutions<br/>
                  Attn: Privacy<br/>
                  <a href="mailto:storeon.shopify.support@gmail.com" style={linkStyle}>storeon.shopify.support@gmail.com</a><br/>
                  <span style={{ color: 'var(--ink-mute)' }}>— Reply within 7 days</span>
                </div>
                <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', marginTop: 40 }}>
                  — Thank you for reading. May your orbit be steady. ✦
                </p>
              </Section>
            </article>
          </div>
        </div>
      </section>
    </div>
  );
};

const bodySectionStyle = { marginBottom: 64, scrollMarginTop: 100 };
const dropStyle = { margin: 0, position: 'relative' };
const dropCapStyle = {
  float: 'left',
  fontFamily: 'var(--serif)',
  fontStyle: 'italic',
  fontSize: 72,
  lineHeight: 0.85,
  marginRight: 12,
  marginTop: 6,
  color: 'var(--ink)',
  fontWeight: 400,
};
const listStyle = { padding: 0, listStyle: 'none', margin: '16px 0', display: 'flex', flexDirection: 'column', gap: 12 };
const codeStyle = { fontFamily: 'var(--mono)', fontSize: 13, padding: '2px 6px', background: 'var(--bg-elev)', border: '1px solid var(--rule-soft)', borderRadius: 3, whiteSpace: 'nowrap' };
const linkStyle = { color: 'var(--ink)', textDecoration: 'underline', textDecorationThickness: '0.5px', textUnderlineOffset: 3 };

const Section = ({ id, title, children }) => (
  <div id={id} style={bodySectionStyle}>
    <h2 style={{
      fontFamily: 'var(--serif)',
      fontStyle: 'italic',
      fontWeight: 400,
      fontSize: 34,
      letterSpacing: '-0.01em',
      margin: '0 0 20px',
      color: 'var(--ink)',
    }}>{title}</h2>
    {children}
  </div>
);

const SectionMark = () => (
  <div style={{ display: 'flex', justifyContent: 'center', margin: '48px 0', gap: 16, alignItems: 'center' }}>
    <span style={{ width: 40, height: 1, background: 'var(--rule-soft)' }}/>
    <span style={{ color: 'var(--accent)', fontSize: 12 }}>✦ ☾ ✦</span>
    <span style={{ width: 40, height: 1, background: 'var(--rule-soft)' }}/>
  </div>
);

Object.assign(window, { Privacy });