// Cookie Policy - /cookie-policy
// Content taken verbatim (lightly formatted) from
// uploads/Outrun_Cookie_Policy_1.docx. Do not rewrite the wording; it is the
// company's approved legal text. Structure/layout only is ours.
//
// Block shapes: ['p', text] ['ul', [..]] ['h3', text] ['table', {head:[], rows:[[]]}]

const COOKIE_LINKS = {
  'Privacy Policy': '/privacy',
  'hello@outrun.insure': 'mailto:hello@outrun.insure',
  'Google’s cookie and technology information': 'https://policies.google.com/technologies/cookies',
  'LinkedIn’s Cookie Policy': 'https://www.linkedin.com/legal/cookie-policy',
  'aboutcookies.org': 'https://www.aboutcookies.org/',
  'ICO’s guidance on cookies and similar technologies': 'https://ico.org.uk/for-organisations/direct-marketing-and-privacy-and-electronic-communications/guide-to-pecr/cookies-and-similar-technologies/',
};

function cookieInline(text) {
  const keys = Object.keys(COOKIE_LINKS).sort((a, b) => b.length - a.length);
  const rx = new RegExp('(' + keys.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')) .join('|') + ')', 'g');
  return String(text).split(rx).map((part, i) => {
    const href = COOKIE_LINKS[part];
    if (!href) return <React.Fragment key={i}>{part}</React.Fragment>;
    const ext = href.startsWith('http');
    return <a key={i} href={href} className="pv-link" {...(ext ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>{part}</a>;
  });
}

const COOKIE_INTRO = 'This Cookie Policy explains how Outrun (\u201cwe\u201d, \u201cus\u201d, \u201cour\u201d) uses cookies and similar technologies on our website. It should be read alongside our Privacy Policy, which explains more generally how we collect, use and protect personal information.';

const COOKIE_SECTIONS = [
  { t: 'Who we are', b: [
    ['p', 'We are Outrun, a trading name of Exponential Systems Ltd (company number 13691250), and our registered office is at 30 Orange Street, London, England, WC2H 7HF. You can contact our Data Protection Officer at hello@outrun.insure.'],
  ]},
  { t: 'What are cookies?', b: [
    ['p', 'Cookies are small text files that are placed on your device when you visit a website. They are widely used to make websites work, work more efficiently, and to provide information to the owners of the site. Similar technologies, such as pixels, tags and local storage, may be used for the same purposes and are covered by this policy.'],
  ]},
  { t: 'How we use cookies', b: [
    ['p', 'We use cookies for the following purposes:'],
    ['h3', 'Strictly necessary cookies'],
    ['p', 'These cookies are essential for our website and platform to work, for example to let you log in, stay signed in, and use secure areas of our site. We do not need to ask for your consent to use these cookies, as our site and platform cannot function properly without them.'],
    ['table', { head: ['Cookie', 'Purpose', 'Duration'], rows: [
      ['Session / authentication cookies', 'Keep you logged in to your account and maintain your session as you navigate the platform.', 'Session, or up to 30 days for \u201cremember me\u201d functionality'],
      ['Load balancing / security cookies', 'Help route requests reliably and protect against certain types of attack.', 'Session'],
    ] }],
    ['h3', 'Analytics cookies'],
    ['p', 'We use Google Analytics to understand how visitors use our website (for example, which pages are viewed and how long visitors stay), so we can improve it. These cookies collect information in an anonymous or pseudonymous form.'],
    ['table', { head: ['Cookie', 'Purpose', 'Duration'], rows: [
      ['_ga', 'Used by Google Analytics to distinguish unique visitors to our site.', 'Approx. 2 years'],
      ['_ga_<container-id>', 'Used by Google Analytics to persist session state and campaign data.', 'Approx. 2 years'],
    ] }],
    ['p', 'You can find out more about how Google uses this data in Google\u2019s cookie and technology information.'],
    ['h3', 'Advertising / marketing cookies'],
    ['p', 'We use the LinkedIn Insight Tag to measure the performance of our advertising campaigns and to understand how visitors who come from LinkedIn interact with our site.'],
    ['table', { head: ['Cookie', 'Purpose', 'Duration'], rows: [
      ['bcookie', 'Used by LinkedIn as a unique browser identifier for analytics and ad measurement.', 'Approx. 2 years'],
      ['li_sugr', 'Used by LinkedIn to identify browser IDs for probabilistic matching of users, for analytics purposes.', 'Approx. 90 days'],
      ['lidc', 'Used by LinkedIn for routing and load-balancing of requests.', '24 hours'],
      ['UserMatchHistory / AnalyticsSyncHistory', 'Used by LinkedIn to sync the LinkedIn Ads ID and to track visits for analytics reporting.', 'Approx. 30 days'],
    ] }],
    ['p', 'You can find out more in LinkedIn\u2019s Cookie Policy.'],
  ]},
  { t: 'Third-party cookies', b: [
    ['p', 'Some cookies on our site are set by third parties, such as Google and LinkedIn, whose services we use as described above. These third parties are responsible for the cookies they set, and their own privacy and cookie policies (linked above) govern how they use the information collected. We do not control the content or duration of third-party cookies, and the specific cookies and durations described in this policy may change if these providers update their services.'],
  ]},
  { t: 'How to manage cookies', b: [
    ['p', 'Where cookies are not strictly necessary, we will ask for your consent before they are set, and you can change your preferences at any time. In addition, most web browsers allow you to control cookies through their settings, including:'],
    ['ul', [
      'Blocking all cookies, or cookies from particular sites.',
      'Deleting cookies that have already been set.',
      'Being notified when a cookie is set.',
    ]],
    ['p', 'Blocking or deleting cookies may affect your experience of our site, and some features may not work as intended. For general guidance on managing cookies in your browser, see aboutcookies.org. You can also read the ICO\u2019s guidance on cookies and similar technologies for further background.'],
  ]},
  { t: 'Changes to this Cookie Policy', b: [
    ['p', 'We may update this Cookie Policy from time to time to reflect changes to the cookies we use or for other operational, legal or regulatory reasons. Any updates will be posted on this page, so please check back periodically.'],
  ]},
  { t: 'Contact us', b: [
    ['p', 'If you have any questions about this Cookie Policy or how we use cookies, please contact our DPO at hello@outrun.insure or by writing to: DPO, Outrun, 30 Orange Street, London, England, WC2H 7HF.'],
  ]},
];

function CookieP({ children }) {
  const ED = React.useContext(EdCtx);
  const isMobile = useIsMobile();
  return <p style={{ ...ED.text.sans, fontSize: isMobile ? 16 : 17, lineHeight: 1.62, color: ED.ink2, margin: '0 0 16px', textWrap: 'pretty' }}>{children}</p>;
}

function CookieUl({ items }) {
  const ED = React.useContext(EdCtx);
  const isMobile = useIsMobile();
  return (
    <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
      {items.map((it, i) => (
        <li key={i} style={{ display: 'grid', gridTemplateColumns: '16px 1fr', gap: 12, alignItems: 'start' }}>
          <span aria-hidden="true" style={{ width: 5, height: 5, borderRadius: 5, background: ED.accent, marginTop: isMobile ? 9 : 10 }}></span>
          <span style={{ ...ED.text.sans, fontSize: isMobile ? 16 : 17, lineHeight: 1.6, color: ED.ink2, textWrap: 'pretty' }}>{cookieInline(it)}</span>
        </li>
      ))}
    </ul>
  );
}

function CookieTable({ head, rows }) {
  const ED = React.useContext(EdCtx);
  const edText = ED.text;
  const isMobile = useIsMobile();
  const cell = { ...edText.sans, fontSize: isMobile ? 14 : 15, lineHeight: 1.55, color: ED.ink2, padding: isMobile ? '12px 12px 12px 0' : '14px 24px 14px 0', verticalAlign: 'top', textAlign: 'left', borderBottom: `1px solid ${ED.rule}` };
  return (
    <table style={{ width: '100%', borderCollapse: 'collapse', margin: '4px 0 28px', tableLayout: 'fixed' }}>
      <thead>
        <tr>
          {head.map((h, i) => (
            <th key={h} style={{ ...edText.tag, fontSize: 10, color: ED.ink, textAlign: 'left', padding: isMobile ? '0 12px 10px 0' : '0 24px 12px 0', borderBottom: `1.5px solid ${ED.ink}`, width: i === 1 ? '48%' : '26%' }}>{h.toUpperCase()}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((r, i) => (
          <tr key={i}>
            {r.map((c, j) => (
              <td key={j} style={j === 0 ? { ...cell, color: ED.ink, ...edText.med, fontSize: isMobile ? 14 : 15 } : cell}>{c}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function CookieSection({ title, blocks }) {
  const ED = React.useContext(EdCtx);
  const edText = ED.text;
  const isMobile = useIsMobile();
  return (
    <section style={{ marginTop: isMobile ? 38 : 52 }}>
      <div style={{ maxWidth: 960 }}>
        <h2 style={{ ...edText.display, fontSize: isMobile ? 25 : 32, color: ED.ink, margin: '0 0 18px', letterSpacing: '-0.025em', lineHeight: 1.14 }}>{title}</h2>
        {blocks.map(([kind, val], i) => {
          if (kind === 'p') return <CookieP key={i}>{cookieInline(val)}</CookieP>;
          if (kind === 'ul') return <CookieUl key={i} items={val} />;
          if (kind === 'table') return <CookieTable key={i} head={val.head} rows={val.rows} />;
          return <h3 key={i} style={{ ...edText.med, fontSize: isMobile ? 17 : 18, color: ED.ink, margin: '28px 0 12px', letterSpacing: '-0.01em', lineHeight: 1.3 }}>{val}</h3>;
        })}
      </div>
    </section>
  );
}

function CookieBody() {
  const ED = React.useContext(EdCtx);
  const edText = ED.text;
  const isMobile = useIsMobile();
  return (
    <div style={{ background: ED.bg, paddingBottom: isMobile ? 64 : 110 }}>
      <style>{`.pv-link{color:${ED.accent};text-decoration:none;border-bottom:1px solid ${ED.accent}55}.pv-link:hover{border-bottom-color:${ED.accent}}`}</style>
      <header style={{ padding: isMobile ? '48px 24px 40px' : '86px 144px 40px' }}>
        <h1 style={{ ...edText.display, fontSize: isMobile ? 'clamp(34px, 11vw, 46px)' : 72, color: ED.ink, margin: 0, letterSpacing: '-0.035em', lineHeight: 1.03, maxWidth: 960 }}>
          Cookie Policy
        </h1>
        <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 19, lineHeight: 1.55, color: ED.ink2, margin: isMobile ? '20px 0 0' : '26px 0 0', maxWidth: 960, textWrap: 'pretty' }}>
          {cookieInline(COOKIE_INTRO)}
        </p>
      </header>

      <div style={{ padding: isMobile ? '0 24px' : '0 144px' }}>
        {COOKIE_SECTIONS.map((s) => (
          <CookieSection key={s.t} title={s.t} blocks={s.b} />
        ))}

        <div style={{ marginTop: isMobile ? 44 : 64 }}>
          <p style={{ ...edText.sans, fontSize: isMobile ? 15 : 16, lineHeight: 1.6, color: ED.ink2, margin: 0, maxWidth: 960 }}>
            Outrun is a trading name of Exponential Systems Ltd<br />
            30 Orange Street, London, England, WC2H 7HF<br />
            Company number 13691250
          </p>
        </div>
      </div>
    </div>
  );
}

function CookieSite({ accent, fontMode }) {
  return (
    <EdChrome accent={accent} fontMode={fontMode} current="/cookie-policy" signup={false}>
      <CookieBody />
    </EdChrome>
  );
}

Object.assign(window, { CookieSite, CookieBody, CookieSection, CookieTable, COOKIE_SECTIONS });