/* Privacy page — editorial document */
function PrivacyApp() {
  const sections = [
    {
      n: '01',
      t: 'Introduction',
      p: [
        'We, Code My Brains Out takes user privacy very seriously. While using our products (including services), we may collect and use your relevant information in order to improve the quality of our services; we will do everything in our power to protect your privacy, as long as it is within a reasonable business scope. We recommend that you read the "Privacy Policy" in detail to get an understanding of what type of information we collect, how we collect this information and how we use it. By using our products or services, you agree to the collection, storage and use of your information as long as it follows the context dictated here and the adherence of local laws and regulations.',
        'This "Privacy Policy" utilizes certain professional terms; we will try to explain things as concise as possible, so that you may understand completely.'
      ]
    },
    {
      n: '02',
      t: 'The Collection and Use of Information',
      p: [
        'We collect and store relevant personal information in order to create your Account, and to provide the necessary support for any follow-up services. If you do not wish to provide this information, you might not be able to register an account, enjoy any or all services provided afterwards, or get the best user experience of certain services. Unregistered users may also use certain functions; we do not collect any personal information from unregistered users.',
        'The information we collect includes:',
        { list: [
          'Any names, email addresses, mailing addresses, username, bio, uploaded profile photos etc. entered or filled in when you register for an account.',
          'The information collected when using "Share Photo Stream" or "Share" services.'
        ]},
        'Other information we collect includes:',
        { list: [
          'Any geographical locations, system languages, device model and type, or operating system versions while you are interacting with our services using any computers or devices. This information will help us learn more about you, in order to optimize services and provide a better user experience.',
          'Any records, including statistical information, key operation paths, error logs, crash logs, etc. you encounter while using our products. This will help us to get a better understanding of the status of our products, in order to improve our services, further optimize user experience and provide higher quality products.',
          'Any location information and file creation times for your photos (or similar files); any special characteristics of persons within your photos; and any content contained within your photos. We will use this information to provide "People Aggregation", "Location Aggregation", "Content Labeling", as well as a combination of other custom features using these functions as a basic foundation.'
        ]},
        'You can turn off your device or turn off GPS location functions; by doing so, we will not obtain your current location information.',
        'To make full use of our services in some of our apps, you need to create an account using a valid email address.',
        'We may send you notifications via email or system notifications; if you do not wish to receive these messages, you can turn them off for your device or Application by following the relevant prompts.',
        'You may stop using our service at any time. When you delete data, a copy might remain on the servers for a period of time before complete deletion; this is due to computer system operation and continuous data backup and archiving features.'
      ]
    },
    {
      n: '03',
      t: 'Web Browser Cookies',
      p: [
        'Our Site may use "cookies" to enhance User experience. User\'s web browser places cookies on their hard drive for record-keeping purposes and sometimes to track information about them. User may choose to set their web browser to refuse cookies, or to alert you when cookies are being sent. If they do so, note that some parts of the Site may not function properly.'
      ]
    },
    {
      n: '04',
      t: 'Information Disclosure',
      p: [
        'When you use our products or services, we assume that you allow and agree with these terms. Therefore, we shall not share your information with any third parties, sell or rent your information, or distribute this information to others; with the exclusion of the following situations.',
        { list: [
          'We can share your information after receiving your confirmation to do so.',
          'In order to protect our legal rights and interests, or those of our partners and clients, we may disclose your personal information as permitted by the extent of the law.',
          'In order to comply with local laws and regulations, for any mandatory reasons, to maintain the rights of others and to maintain public interests or other laws, we may release your personal information carefully and within the legal framework.',
          'When there are mergers, acquisitions or other similar transactions, your personal information may be traded as a resource. If this happens, we will inform you beforehand so that you may decide if you wish to destroy or transfer your personal information.'
        ]}
      ]
    },
    {
      n: '05',
      t: 'Advertising',
      p: [
        'Ads appearing on our site may be delivered to Users by advertising partners, who may set cookies. These cookies allow the ad server to recognize your computer each time they send you an online advertisement to compile non personal identification information about you or others who use your computer. This information allows ad networks to, among other things, deliver targeted advertisements that they believe will be of most interest to you. This privacy policy does not cover the use of cookies by any advertisers.'
      ]
    },
    {
      n: '06',
      t: 'Google AdSense',
      p: [
        'Some of the ads may be served by Google. Google\'s use of the DART cookie enables it to serve ads to Users based on their visit to our Site and other sites on the Internet. DART uses "non personally identifiable information" and does NOT track personal information about you, such as your name, email address, physical address, etc. You may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy at http://www.google.com/privacy_ads.html'
      ]
    },
    {
      n: '07',
      t: 'Changes to This Policy',
      p: [
        'When there is an update on the Privacy Policy, we will display the update date at the top of the Policy in an obvious position. We recommend that you carefully check the updated content every time; when you continue to use our products or services, we shall always assume that you agree to the terms and conditions that are effective at the most present time.'
      ]
    },
    {
      n: '08',
      t: 'Contact',
      p: [
        'If you have any questions, comments, or concerns about this Privacy Policy or our other privacy policies or practices, please contact us via this e-mail address:',
        'Email: support@codemybrainsout.com'
      ]
    }
  ];

  function renderItem(item, key, isLast) {
    if (typeof item === 'string') {
      return (
        <p className="body-l" key={key} style={{marginBottom: isLast ? 0 : 18}}>
          {item === 'Email: support@codemybrainsout.com' ? (
            <React.Fragment>
              Email:{' '}
              <a
                href="mailto:support@codemybrainsout.com"
                data-chroma
                style={{textDecoration:'underline'}}
              >
                support@codemybrainsout.com
              </a>
            </React.Fragment>
          ) : item}
        </p>
      );
    }
    if (item.heading) {
      return (
        <p key={key} className="mono-label"
           style={{marginTop:24, marginBottom:8, color:'var(--ink)', letterSpacing:'0.05em'}}>
          {item.heading}
        </p>
      );
    }
    if (item.list) {
      return (
        <ul key={key} style={{
          listStyle:'disc', paddingLeft:24, marginBottom: isLast ? 0 : 18,
          display:'flex', flexDirection:'column', gap:8
        }}>
          {item.list.map((li, li_i) => (
            <li key={li_i} className="body-l">{li}</li>
          ))}
        </ul>
      );
    }
    return null;
  }

  return (
    <React.Fragment>
      <Nav current="privacy" />
      <section style={{paddingTop:80, paddingBottom:40}}>
        <div className="wrap">
          <div className="mono-eyebrow" style={{marginBottom:40}}>§ Privacy Policy</div>
          <h1 className="display-xl">
            <span className="chroma chroma-always" data-text="Privacy">Privacy</span><br/>
            <span className="serif-italic">Policy</span>
          </h1>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap" style={{borderTop:'1px solid var(--ink)', paddingTop:40,
          display:'grid', gridTemplateColumns:'1fr 1fr', gap:80}}>
          <p className="body-l">
            This Privacy Policy reflects a commitment to collecting only
            necessary data, using it responsibly, and giving users
            transparency and control over their information.
          </p>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
            <div style={{padding:'24px', border:'1px solid var(--ink)', background:'var(--paper-2)'}}>
              <div className="mono-label" style={{color:'var(--muted)', marginBottom:8}}>LAST UPDATED</div>
              <div className="display-s">6 March 2017</div>
            </div>
            <div style={{padding:'24px', border:'1px solid var(--ink)', background:'var(--paper-2)'}}>
              <div className="mono-label" style={{color:'var(--muted)', marginBottom:8}}>EFFECTIVE DATE</div>
              <div className="display-s">6 March 2017</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap:60}}>
            <div style={{position:'sticky', top:120, alignSelf:'flex-start'}}>
              <div className="mono-eyebrow" style={{marginBottom:16}}>Index</div>
              <ol style={{listStyle:'none', display:'flex', flexDirection:'column', gap:10,
                fontFamily:'var(--mono)', fontSize:13, textTransform:'uppercase', letterSpacing:'0.1em'}}>
                {sections.map(s => (
                  <li key={s.n} className="hoverable">
                    <a href={`#s-${s.n}`} style={{color:'var(--ink)', textDecoration:'none', display:'flex', gap:12}}>
                      <span style={{color:'var(--muted)'}}>{s.n}</span>
                      <span>{s.t}</span>
                    </a>
                  </li>
                ))}
              </ol>
            </div>

            <div>
              {sections.map((s, i) => (
                <div id={`s-${s.n}`} key={s.n}
                     style={{
                       padding:'40px 0',
                       borderTop:'1px solid var(--ink)',
                       borderBottom: i === sections.length - 1 ? '1px solid var(--ink)' : 'none'
                     }}>
                  <div style={{display:'grid', gridTemplateColumns:'80px 1fr', gap:24, alignItems:'baseline'}}>
                    <div className="serif-italic" style={{fontSize:48, lineHeight:1}}>{s.n}</div>
                    <div>
                      <h2 className="display-m" style={{marginBottom:16}}>{s.t}</h2>
                      {s.p.map((item, pIndex) =>
                        renderItem(item, `${s.n}-${pIndex}`, pIndex === s.p.length - 1)
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </React.Fragment>
  );
}
window.PrivacyApp = PrivacyApp;