const { Card, Icon, Button } = window.AILifeDesignSystem_20a7b9;

const COMMITMENTS = [
  ['message-square-quote','We ask before we use.','We explain what information a product needs and why. Optional uses require separate choices.'],
  ['target','We collect for a purpose.','An AILife product should not collect information simply because it is available.'],
  ['split','We separate permissions.','Service, storage, research, model improvement, professional sharing and commercial personalization are not bundled into one vague approval.'],
  ['trash-2','We make deletion possible.','Users should be able to disconnect sources and delete their information through understandable controls.'],
  ['tag','We identify commercial influence.','Sponsored content and paid recommendations are labelled and kept separate from health guidance.'],
  ['triangle-alert','We explain important limitations.','AILife products communicate uncertainty and make clear when a professional is the right next step.'],
];

function TrustPage({ go }) {
  return (
    <main>
      <section className="sec"><div className="wrap">
        <div className="eyebrow">Trust &amp; Privacy</div>
        <h1 className="display--2" style={{ marginTop:'var(--space-4)', maxWidth:'20ch' }}>
          Your life is personal. Your information should stay under your control.
        </h1>
        <p className="lead" style={{ marginTop:'var(--space-5)' }}>
          Trust is not a legal page added at the end. It is a product requirement that shapes what AILife collects,
          how every feature works and how we make money.
        </p>
      </div></section>

      <section className="sec--compact" style={{ paddingBottom:'var(--section-y)' }}><div className="wrap">
        <SectionHead eyebrow="Our commitments" title="Six promises we design against." />
        <div className="grid-3">
          {COMMITMENTS.map(([icon,t,d]) => (
            <Card key={t} padding="md">
              <Icon name={icon} size={20} style={{ color:'var(--text-brand)' }} />
              <h4 style={{ font:'var(--text-h4)', marginTop:'var(--space-4)' }}>{t}</h4>
              <p className="muted" style={{ font:'var(--text-body-sm)', marginTop:'var(--space-2)' }}>{d}</p>
            </Card>
          ))}
        </div>
      </div></section>

      <section className="sec sec--tint"><div className="wrap grid-2">
        <SectionHead eyebrow="Plain-language summary" title="No fine print required." />
        <p className="prose">
          You choose what to connect. We use the information required to provide the service you request.
          Optional uses require separate permission. We do not sell hidden influence as independent advice.
          You can withdraw permissions and request deletion, subject to legal and safety requirements that
          will be explained clearly.
        </p>
      </div></section>

      <section className="sec--compact" style={{ paddingBottom:'var(--section-y)' }}><div className="wrap" style={{ textAlign:'center' }}>
        <h2 className="display--3">Core products should be useful to everyone.</h2>
        <p className="lead" style={{ margin:'var(--space-4) auto 0', maxWidth:'56ch' }}>
          We plan to make the core AILife experience free for consumers. Optional premium services may be
          introduced later.
        </p>
        <div style={{ marginTop:'var(--space-8)' }}><Button onClick={() => go('waitlist')}>Join the waitlist</Button></div>
      </div></section>
    </main>
  );
}
Object.assign(window, { TrustPage });