// PrivacyContent.jsx — privacy policy. Deliberately narrow: Skardi has not
// shipped a product yet, so this covers the website only — the cookies set by
// the analytics we ask consent for, and the details people hand us in the
// waitlist and demo forms. It should be widened when there is a product.
const PRIVACY_UPDATED = 'August 26, 2026';

// Live control so withdrawing consent is as easy as giving it, which is the
// whole reason this component is interactive rather than static copy.
const ConsentControls = () => {
  const [state, setState] = React.useState('unknown');

  React.useEffect(() => {
    if (typeof window.skardiConsent !== 'function') return;
    const sync = () => setState(window.skardiConsent() || 'unset');
    sync();
    window.addEventListener('skardi:consent-changed', sync);
    return () => window.removeEventListener('skardi:consent-changed', sync);
  }, []);

  if (state === 'unknown') return null;

  const configured = typeof window.skardiAnalyticsConfigured === 'function' &&
    window.skardiAnalyticsConfigured();

  const label = {
    granted: 'Analytics cookies are on for this browser.',
    denied: 'Analytics cookies are off for this browser.',
    unset: 'You have not made a choice yet in this browser.',
  }[state];

  const button = {
    padding: '10px 20px', borderRadius: '2rem', cursor: 'pointer',
    fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600,
  };

  return (
    <div id="cookie-settings" style={{
      margin: '32px 0', padding: '24px 26px', borderRadius: 12,
      background: 'rgba(46,232,154,0.04)',
      border: '1px solid rgba(46,232,154,0.20)',
    }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        color: '#2ee89a', marginBottom: 12,
      }}>Your choice</div>

      {!configured ? (
        <p style={{ margin: 0, color: '#8ea3c0', fontSize: 15 }}>
          Analytics is currently switched off site-wide, so no cookies are being set.
        </p>
      ) : (
        <>
          <p style={{ margin: '0 0 18px', color: '#c4d2e2', fontSize: 15, lineHeight: 1.6 }}>
            {label}
          </p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {state !== 'granted' && (
              <button type="button" onClick={() => window.skardiSetConsent('granted')} style={{
                ...button,
                background: 'linear-gradient(90deg,#2ec47a,#1a8fe0)',
                border: '1px solid transparent', color: '#fff',
              }}>Accept analytics cookies</button>
            )}
            {state === 'granted' && (
              <button type="button" onClick={() => window.skardiWithdrawConsent()} style={{
                ...button,
                background: 'transparent',
                border: '1px solid rgba(125,211,252,0.25)', color: '#c4d2e2',
              }}>Withdraw consent and delete cookies</button>
            )}
          </div>
          <p style={{ margin: '16px 0 0', color: '#6b7e9a', fontSize: 13, lineHeight: 1.6 }}>
            Withdrawing stops tracking immediately, deletes the PostHog cookie and its
            stored identifiers from this browser, and takes effect without a reload.
            Your choice is remembered per browser and per device.
          </p>
        </>
      )}
    </div>
  );
};

const PrivacyContent = () => {
  const h2 = {
    fontFamily: 'Inter, sans-serif', fontSize: 26, fontWeight: 700,
    letterSpacing: '-0.015em', color: '#e6eef9',
    margin: '48px 0 16px', paddingTop: 14,
    borderTop: '1px solid rgba(125,211,252,0.08)',
  };
  const p = {
    fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.75,
    color: '#c4d2e2', margin: '0 0 18px',
  };
  const li = { marginBottom: 10 };
  const strong = { color: '#e6eef9', fontWeight: 600 };
  const link = { color: '#2ee89a', textDecoration: 'underline', textUnderlineOffset: 3 };
  const th = {
    padding: '10px 14px', textAlign: 'left', color: '#e6eef9', fontWeight: 600,
    background: 'rgba(10,18,32,0.6)', borderBottom: '1px solid rgba(125,211,252,0.12)',
  };
  const td = {
    padding: '10px 14px', textAlign: 'left', verticalAlign: 'top',
    borderBottom: '1px solid rgba(125,211,252,0.08)', color: '#c4d2e2',
  };
  const mono = { fontFamily: 'JetBrains Mono, monospace', fontSize: 12.5, color: '#7ef3c4' };

  return (
    <article style={{ maxWidth: 780, margin: '0 auto', padding: '130px 32px 100px' }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
        letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
        color: '#2ee89a', marginBottom: 16,
      }}>// privacy</div>

      <h1 style={{
        fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 5vw, 56px)',
        fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1,
        margin: '0 0 20px', color: '#e6eef9',
      }}>Privacy policy</h1>

      <p style={{
        fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: '#8ea3c0',
        margin: '0 0 40px', paddingBottom: 24,
        borderBottom: '1px solid rgba(125,211,252,0.1)',
      }}>Last updated {PRIVACY_UPDATED}</p>

      <p style={{ ...p, fontSize: 18 }}>
        This policy covers <strong style={strong}>skardi.ai</strong>, the website. Skardi
        is in beta and we have not shipped a product yet, so there is no account to sign
        into and no customer data in our hands. What follows is the whole of it: the
        analytics cookies we ask permission for, and the details you type into the
        waitlist and demo forms if you choose to.
      </p>
      <p style={p}>
        The site is operated by <strong style={strong}>SkardiLabs, Inc.</strong> Reach us
        about anything here at{' '}
        <a href="mailto:info@skardi.ai" style={link}>info@skardi.ai</a>.
      </p>

      <h2 style={h2}>Cookies, and what is in them</h2>
      <p style={p}>
        We set <strong style={strong}>no cookies at all</strong> until you press Accept on
        the consent banner. Declining, or ignoring the banner, means nothing is written to
        your device and no analytics code is ever downloaded. This is not the usual
        arrangement, where cookies land on page load and the banner asks afterwards.
      </p>
      <p style={p}>If you do accept, exactly one cookie is set:</p>

      <div style={{ overflowX: 'auto', margin: '0 0 22px' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14, minWidth: 520 }}>
          <thead>
            <tr>
              <th style={th}>Cookie</th>
              <th style={th}>Set by</th>
              <th style={th}>Purpose</th>
              <th style={th}>Expires</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style={td}><span style={mono}>ph_&lt;id&gt;_posthog</span></td>
              <td style={td}>PostHog</td>
              <td style={td}>
                Holds a randomly generated device identifier, a session identifier, and
                the referrer and landing page of your first visit, so repeat visits from
                this browser can be counted as one person rather than several.
              </td>
              <td style={td}>365 days</td>
            </tr>
          </tbody>
        </table>
      </div>

      <p style={p}>
        The identifier is random. It is not derived from your name, your email or your
        device, and on its own it tells us nothing about who you are. The cookie is set on{' '}
        <span style={mono}>.skardi.ai</span>, so it is shared with any subdomain. The same
        value is mirrored in your browser's local storage, alongside a small{' '}
        <span style={mono}>skardi_consent</span> entry that records your Accept or Decline
        so we do not ask again on every page.
      </p>
      <p style={p}>
        Safari limits how long scripts can keep cookies, so on Safari this generally
        resets after about a week, and you appear to us as a new visitor.
      </p>

      <h2 style={h2}>What the analytics records</h2>
      <p style={p}>
        With consent, we use <a href="https://posthog.com" target="_blank"
          rel="noopener noreferrer" style={link}>PostHog</a> to see which parts of the site
        people find useful. It records:
      </p>
      <ul style={{ ...p, paddingLeft: 24 }}>
        <li style={li}>
          <strong style={strong}>Page views</strong> — which pages you open, when, the page
          that referred you, and any campaign tags in the link you followed.
        </li>
        <li style={li}>
          <strong style={strong}>Clicks</strong> — buttons and links you press, including
          which call to action and where on the page it sat.
        </li>
        <li style={li}>
          <strong style={strong}>Sections read</strong> — which parts of the homepage stayed
          on your screen long enough to have been looked at, so we can tell how far down
          the page is worth reading.
        </li>
        <li style={li}>
          <strong style={strong}>Form outcomes</strong> — whether a waitlist or demo
          submission succeeded or failed, and blog posts opened or shared.
        </li>
        <li style={li}>
          <strong style={strong}>Technical details</strong> sent by your browser — its type
          and version, operating system, screen size, and language.
        </li>
      </ul>
      <p style={p}>
        PostHog receives your IP address as part of each request and uses it to work out
        approximate location, no finer than city level. We do not use it to identify you.
      </p>
      <p style={p}>
        <strong style={strong}>We do not record your screen.</strong> Session replay is
        switched off, as are PostHog's surveys, its error capture and its performance
        monitoring. We do not run advertising trackers, we do not use analytics to build
        advertising profiles, and we do not sell personal information.
      </p>

      <h2 style={h2}>What you type into a form</h2>
      <p style={p}>
        The waitlist and demo forms ask for your name, work email, company, role, team
        size, timeline and what you want to build. Only what you fill in is sent, and only
        when you submit. We use it to reply to you and to plan early access. It is not
        advertising data and we do not sell it.
      </p>
      <p style={p}>
        One thing worth being explicit about: if you have accepted analytics cookies and
        you then submit a form, the email address you gave is attached to the anonymous
        identifier described above. From that point, the earlier browsing recorded against
        that identifier is associated with you rather than with an anonymous visitor. If
        you would rather that did not happen, decline the cookies and the forms will still
        work exactly as they do now.
      </p>

      <h2 style={h2}>Who else sees it</h2>
      <p style={p}>
        Only the services that run the site, and only so it can function:
      </p>
      <ul style={{ ...p, paddingLeft: 24 }}>
        <li style={li}>
          <strong style={strong}>PostHog</strong> — analytics, on PostHog Cloud in the
          United States. If you are visiting from outside the US, accepting cookies means
          this data is transferred there.
        </li>
        <li style={li}>
          <strong style={strong}>Microsoft Azure</strong> — hosting for the site and the
          form endpoints, which keeps standard server logs.
        </li>
      </ul>
      <p style={p}>
        No one else. We do not share this with advertisers or data brokers.
      </p>

      <h2 style={h2}>Your choices</h2>
      <p style={p}>
        Consent is the only reason we set analytics cookies, so you can take it back at
        any time and we have to stop. Use the control below, which also deletes the cookie
        and its stored identifiers from this browser straight away.
      </p>

      <ConsentControls />

      <p style={p}>
        Your browser's own settings can block or clear cookies too, and the site works
        normally without them. To ask what we hold about you, to have it corrected, or to
        have it deleted, email{' '}
        <a href="mailto:info@skardi.ai" style={link}>info@skardi.ai</a> and we will action
        it within 30 days. Depending on where you live you may also have the right to
        complain to your local data protection authority.
      </p>

      <h2 style={h2}>How long we keep it</h2>
      <p style={p}>
        Analytics events are kept for as long as they are useful for understanding the
        site, and are deleted when they are not. Form submissions are kept while we are
        still in touch with you about early access, and deleted on request. The cookie
        itself expires 365 days after your last visit, or the moment you withdraw consent.
      </p>

      <h2 style={h2}>Children</h2>
      <p style={p}>
        This is a site about database infrastructure. It is not directed at children, and
        we do not knowingly collect anything from anyone under 16.
      </p>

      <h2 style={h2}>Changes</h2>
      <p style={p}>
        When we ship a product this policy will need to grow to cover it, and we will
        update the date at the top when it does. If a change means we would collect
        something materially different from what is described here, we will ask for
        consent again rather than assume the old answer still stands.
      </p>
    </article>
  );
};

window.PrivacyContent = PrivacyContent;