/* ============================================================
   Digital Odyssey, Legal pages (Privacy Policy + Terms)
   Shared layout, driven by window.__DOC ('privacy' | 'terms').
   NOTE: placeholder legal copy for a marketing agency, have
   qualified counsel review before publishing.
   ============================================================ */

const LEGAL = {
  privacy: {
    eyebrow: 'Legal',
    title: 'Privacy Policy',
    updated: 'June 1, 2026',
    intro: 'This Privacy Policy explains how Digital Odyssey ("we", "us", "our") collects, uses, and protects information when you visit our website, contact us, or work with us as a client. We keep this plain-spoken on purpose, if anything is unclear, just ask.',
    sections: [
      { id: 'collect', h: 'Information we collect', body: [
        'When you submit our contact form or book a call, we collect the details you give us, typically your name, email, company, website, budget range, and the message you send.',
        'When you browse the site, we may automatically collect limited technical data such as your IP address, browser type, pages viewed, and referring source, through cookies and similar technologies.',
        { list: ['Contact details you submit voluntarily', 'Business information relevant to an enquiry or engagement', 'Usage and device data collected automatically', 'Marketing performance data within accounts you authorise us to manage'] },
      ]},
      { id: 'use', h: 'How we use your information', body: [
        'We use the information to respond to enquiries, deliver and improve our services, send relevant updates you have opted into, and meet our legal and accounting obligations.',
        'We do not sell your personal information. Ever.',
      ]},
      { id: 'cookies', h: 'Cookies & analytics', body: [
        'We use cookies and analytics tools (for example, privacy-respecting traffic analytics and advertising pixels) to understand how the site performs and to measure marketing campaigns.',
        'You can control or disable cookies through your browser settings. Some parts of the site may not function as intended if cookies are disabled.',
      ]},
      { id: 'sharing', h: 'Sharing & third parties', body: [
        'We share information only with trusted service providers who help us operate, such as hosting, analytics, advertising platforms (e.g. Meta and Google), email, and scheduling tools, and only to the extent needed to deliver our services.',
        'These providers process data under their own terms and applicable law. We may also disclose information where required by law.',
      ]},
      { id: 'client-data', h: 'Client accounts & data', body: [
        'For clients, we work inside your own ad, analytics, and CRM accounts. Those accounts, their data, and any creative assets remain yours at all times. We never hold your accounts or data hostage.',
      ]},
      { id: 'retention', h: 'Data retention', body: [
        'We keep personal information only as long as needed for the purposes described here, or as required by law. Enquiry data that does not become an engagement is periodically removed.',
      ]},
      { id: 'rights', h: 'Your rights', body: [
        'Depending on where you live, you may have the right to access, correct, delete, or restrict the use of your personal information, and to withdraw consent for marketing at any time.',
        'To exercise any of these, email us at the address below and we will respond within a reasonable timeframe.',
      ]},
      { id: 'security', h: 'Security', body: [
        'We take reasonable technical and organisational measures to protect your information. No method of transmission or storage is perfectly secure, but we work to safeguard data against unauthorised access, loss, or misuse.',
      ]},
      { id: 'changes', h: 'Changes to this policy', body: [
        'We may update this policy from time to time. When we do, we will revise the "last updated" date above and, where appropriate, notify you.',
      ]},
    ],
  },
  terms: {
    eyebrow: 'Legal',
    title: 'Terms & Conditions',
    updated: 'June 1, 2026',
    intro: 'These Terms & Conditions govern your use of the Digital Odyssey website and the services we provide. By using our site or engaging us, you agree to these terms. Specific engagements are also governed by a separate written proposal or agreement, which prevails if there is any conflict.',
    sections: [
      { id: 'services', h: 'Our services', body: [
        'Digital Odyssey provides digital marketing services including social media marketing, performance marketing, SEO, content creation, web design and development, analytics, and related AI-assisted offerings.',
        'The exact scope, deliverables, and timelines for any engagement are defined in a written proposal or statement of work agreed between us.',
      ]},
      { id: 'engagements', h: 'Engagements & fees', body: [
        'Most engagements run on a monthly retainer plus media spend, billed transparently through your own accounts. Fees, billing cycles, and any setup costs are set out in your proposal.',
        'Unless otherwise agreed, invoices are due within the period stated on the invoice. Late or unpaid amounts may pause active work.',
      ]},
      { id: 'client', h: 'Client responsibilities', body: [
        'To do our best work, we rely on timely access to relevant accounts, assets, approvals, and information. Delays in providing these may affect timelines and results.',
        { list: ['Provide accurate information and required access', 'Review and approve work within agreed windows', 'Ensure you hold rights to materials you supply', 'Comply with the policies of third-party advertising platforms'] },
      ]},
      { id: 'ip', h: 'Intellectual property', body: [
        'Deliverables created specifically for you become yours upon full payment. We retain ownership of our pre-existing tools, frameworks, and know-how, and may use anonymised, aggregated learnings to improve our services.',
        'We may reference completed work and high-level results in our portfolio unless you ask us in writing not to.',
      ]},
      { id: 'results', h: 'Performance & no guarantees', body: [
        'We bring experience, diligence, and a results-focused process, but marketing outcomes depend on many factors beyond our control, including markets, platforms, budgets, and your own offering.',
        'Any figures, benchmarks, or case study results shown on this site are illustrative of past performance and are not a guarantee of future results.',
      ]},
      { id: 'platforms', h: 'Third-party platforms', body: [
        'Our services often run on third-party platforms such as Meta and Google. Your use of those platforms is subject to their terms and policies, and we are not responsible for their actions, outages, or policy changes.',
      ]},
      { id: 'liability', h: 'Limitation of liability', body: [
        'To the maximum extent permitted by law, Digital Odyssey is not liable for indirect, incidental, or consequential damages. Our total liability for any claim is limited to the fees you paid us for the services giving rise to the claim in the preceding three months.',
      ]},
      { id: 'termination', h: 'Termination', body: [
        'Either party may end an engagement as set out in the applicable proposal, most run month-to-month after an initial ramp period. On termination, you pay for work performed up to the effective date.',
      ]},
      { id: 'law', h: 'Governing law', body: [
        'These terms are governed by the laws of the Province of Alberta, Canada, without regard to conflict-of-law principles. Any disputes will be handled in the courts located there.',
      ]},
      { id: 'changes', h: 'Changes to these terms', body: [
        'We may update these terms from time to time. Continued use of the site after changes take effect constitutes acceptance of the revised terms.',
      ]},
    ],
  },
};

function LegalSectionBody({ body }) {
  return body.map((b, i) => {
    if (typeof b === 'string') {
      return <p key={i} className="do-body-md" style={{ margin: '0 0 16px', maxWidth: 720 }}>{b}</p>;
    }
    return (
      <ul key={i} style={{ listStyle: 'none', padding: 0, margin: '0 0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {b.list.map((li) => (
          <li key={li} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.55, color: 'var(--text-2)' }}>
            <Icon name="check" size={18} color="var(--cyan-deep)" style={{ flexShrink: 0, marginTop: 3 }} />{li}
          </li>
        ))}
      </ul>
    );
  });
}

function LegalApp() {
  useReveal();
  const doc = LEGAL[window.__DOC] || LEGAL.privacy;
  const active = window.__DOC === 'terms' ? 'terms' : 'privacy';
  return (
    <>
      <TopNav active={active} />
      <main>
        <PageHero eyebrow={doc.eyebrow} title={doc.title}
          body={`Last updated ${doc.updated}.`} />

        <section className="section">
          <Container>
            <div className="split" style={{ gridTemplateColumns: '260px 1fr', gap: 56, alignItems: 'flex-start' }}>
              {/* TOC */}
              <nav className="reveal legal-toc" style={{ position: 'sticky', top: 100 }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>On this page</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                  {doc.sections.map((s) => (
                    <li key={s.id}>
                      <a href={`#${s.id}`} style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--text-2)', transition: 'color .15s ease' }}
                        onMouseEnter={(e) => e.target.style.color = 'var(--cyan-deep)'} onMouseLeave={(e) => e.target.style.color = 'var(--text-2)'}>{s.h}</a>
                    </li>
                  ))}
                </ul>
              </nav>

              {/* Body */}
              <div className="reveal" style={{ transitionDelay: '80ms', minWidth: 0 }}>
                <p className="do-body-lg" style={{ margin: '0 0 8px', maxWidth: 720 }}>{doc.intro}</p>
                {doc.sections.map((s, i) => (
                  <section key={s.id} id={s.id} style={{ paddingTop: 40, marginTop: 40, borderTop: i === 0 ? 'none' : '1px solid var(--border)', scrollMarginTop: 96 }}>
                    <h2 className="do-title-lg" style={{ margin: '0 0 16px' }}>{s.h}</h2>
                    <LegalSectionBody body={s.body} />
                  </section>
                ))}

                <div className="do-card" style={{ marginTop: 48, padding: 28, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
                  <div style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--chip-bg)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name="mail" size={20} color="var(--cyan-deep)" />
                  </div>
                  <div style={{ flex: 1, minWidth: 220 }}>
                    <div className="do-title-sm" style={{ marginBottom: 4 }}>Questions about this {active === 'terms' ? 'agreement' : 'policy'}?</div>
                    <div className="do-body-sm" style={{ margin: 0 }}>Email us at <a href="mailto:hello@digitalodyssey.agency" style={{ color: 'var(--cyan-deep)', fontWeight: 600 }}>hello@digitalodyssey.agency</a> and we will get back to you.</div>
                  </div>
                  <Button href="contact.html" variant="outline" icon="arrow-right">Contact us</Button>
                </div>
              </div>
            </div>
          </Container>
        </section>
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<LegalApp />);