// TermsPage.jsx — Terms of Service for Tiber Course
// Plain-English, premium-feeling. Not a legal substitute — drafted as a
// working starting point for the founder/legal review.

const TERMS_SECTIONS = [
  {
    id: 'individual',
    title: 'Individual course licences',
    body: (
      <>
        <p>An individual course purchase grants <strong>one named employee</strong> access to <strong>one selected course</strong>, including the lesson content, the end-of-course test, and the digital certificate where applicable.</p>
        <p>Each licence is non-transferable once a learner has started. Until a learner starts, you can reassign the licence to a different named employee on request.</p>
        <p>You may purchase as many licences as you need — for example, five employees needing Food Safety Level 2 means five separate licences. There is no minimum order.</p>
      </>
    ),
  },
  {
    id: 'one-employee',
    title: 'One employee, one course rule',
    body: (
      <>
        <p>Each licence is for a single named employee and a single course. Multiple employees cannot share a single licence, and a single licence cannot be used to cover multiple courses.</p>
        <p>This rule exists so that certificates and completion records remain accurate against the right person — it is what makes the records meaningful for internal evidence and inspections.</p>
      </>
    ),
  },
  {
    id: 'subscriptions',
    title: 'Subscriptions — 6-month minimum contract',
    body: (
      <>
        <p>All subscription plans (Micro Team, Venue Starter, Completion Plus, Group / Multi-site) operate on a <strong>6-month minimum contract</strong>. The subscription starts on the day of activation and runs for at least six full calendar months.</p>
        <p>After the minimum term, you can cancel with reasonable notice. There is no automatic lock-in beyond the initial six months — your subscription will simply continue month-to-month until you cancel.</p>
        <p>Within the minimum term, downgrades are not available; upgrades are available at any time and take effect from the next billing cycle.</p>
      </>
    ),
  },
  {
    id: 'refunds',
    title: 'Refund policy',
    body: (
      <>
        <p><strong>Full refunds are available as long as no course has been started.</strong></p>
        <ul>
          <li>For an individual course purchase, this means the named learner has not begun the course.</li>
          <li>For a subscription, this means no learner has started any course under that subscription.</li>
        </ul>
        <p>Once a course has been started, the purchase or subscription is normally non-refundable. For subscriptions, once a learner has started a course, the 6-month minimum contract still applies.</p>
        <p>Refund requests can be submitted to <a href="mailto:accounts@tibercourse.com">accounts@tibercourse.com</a>. Refunds are typically processed within 5 working days to the original payment method.</p>
      </>
    ),
  },
  {
    id: 'certificates',
    title: 'Certificates and completion evidence',
    body: (
      <>
        <p>When a learner passes a course assessment, Tiber Course issues a named, dated digital certificate with a unique reference number. Certificates are stored against the learner record and are downloadable by the learner and (where applicable) the organisation administrator.</p>
        <p>Certificates and completion records are intended as <strong>internal training evidence</strong> for the buying organisation — a record that the named employee has completed the training. They are not a substitute for any statutory qualification or formal accreditation unless explicitly stated for the specific course.</p>
      </>
    ),
  },
  {
    id: 'compliance',
    title: 'Compliance and accreditation — what we don\'t claim',
    body: (
      <>
        <p>Tiber Course content is aligned to current UK legislation and official guidance, with sources cited per course. We do not overclaim formal legal acceptance or external accreditation. Where any course is formally accredited or endorsed by a third party, this will be stated explicitly on the course page.</p>
        <p>It remains the buying organisation's responsibility to ensure that the training meets the specific obligations of their sector and jurisdiction. We are happy to help you map our content against your specific needs — get in touch.</p>
      </>
    ),
  },
  {
    id: 'account-sharing',
    title: 'Account sharing not allowed',
    body: (
      <>
        <p>Each learner account is for the named individual only. Sharing a login between people, using a single account to complete training on behalf of others, or buying a single licence to cover multiple employees is not permitted and breaks the integrity of completion records.</p>
        <p>If we identify shared use, we may suspend the relevant accounts and invalidate any certificates issued from shared use, without refund.</p>
      </>
    ),
  },
  {
    id: 'misc',
    title: 'Other',
    body: (
      <>
        <p><strong>Changes to these terms.</strong> We may update these terms from time to time. Material changes will be communicated by email to organisation administrators with a reasonable notice period.</p>
        <p><strong>Governing law.</strong> These terms are governed by the law of England and Wales. Any dispute will be subject to the exclusive jurisdiction of the courts of England and Wales.</p>
        <p><strong>Provider.</strong> Tiber Course is operated by Dopara Group Ltd, a company registered in England and Wales.</p>
      </>
    ),
  },
];

const TermsPage = ({ onNav }) => (
  <div style={{ paddingTop: 124, background: C.parchment, minHeight: '100vh' }}>
    {/* Header */}
    <div style={{ background: C.linen, borderBottom: `1px solid ${C.border}`, padding: '56px 40px 48px' }}>
      <div style={{ maxWidth: 920, margin: '0 auto' }}>
        <Label color={C.brass}>Legal</Label>
        <h1 style={{ fontFamily: F.display, fontSize: 'clamp(34px, 4.4vw, 46px)', fontWeight: 400, fontStyle: 'italic', color: C.ink, lineHeight: 1.15, marginBottom: 14, maxWidth: 760 }}>
          Terms of Service.
        </h1>
        <p style={{ fontFamily: F.body, fontSize: 16, color: C.ash, lineHeight: 1.65, maxWidth: 620 }}>
          The plain-English version of how buying, using and cancelling Tiber Course works. Last updated 19 May 2026.
        </p>
      </div>
    </div>

    {/* Body — TOC + sections */}
    <div style={{ maxWidth: 920, margin: '0 auto', padding: '48px 40px 96px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 48, alignItems: 'start' }}>

      {/* Table of contents */}
      <aside style={{ position: 'sticky', top: 100, alignSelf: 'start' }}>
        <Label color={C.dust} mb={14}>On this page</Label>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {TERMS_SECTIONS.map((s, i) => (
            <a key={s.id} href={'#' + s.id} style={{
              display: 'block', padding: '6px 0',
              fontFamily: F.body, fontSize: 13.5, color: C.ash, textDecoration: 'none',
              borderLeft: `2px solid ${C.borderSubtle}`, paddingLeft: 12,
              transition: 'color 0.15s, border-color 0.15s',
            }}
              onMouseEnter={e => { e.currentTarget.style.color = C.brass; e.currentTarget.style.borderColor = C.brass; }}
              onMouseLeave={e => { e.currentTarget.style.color = C.ash; e.currentTarget.style.borderColor = C.borderSubtle; }}
            >
              <span style={{ fontFamily: F.mono, fontSize: 11, color: C.dust, marginRight: 10 }}>{String(i + 1).padStart(2, '0')}</span>
              {s.title}
            </a>
          ))}
        </nav>
      </aside>

      {/* Sections */}
      <main style={{ minWidth: 0, gridColumn: 'span 2' }}>
        {TERMS_SECTIONS.map((s, i) => (
          <section key={s.id} id={s.id} style={{ marginBottom: 56, scrollMarginTop: 100 }}>
            <div style={{ fontFamily: F.mono, fontSize: 11, color: C.brass, marginBottom: 6 }}>{String(i + 1).padStart(2, '0')}</div>
            <h2 style={{ fontFamily: F.sans, fontSize: 22, fontWeight: 600, color: C.ink, lineHeight: 1.25, letterSpacing: '-0.3px', marginBottom: 16 }}>{s.title}</h2>
            <div style={{
              fontFamily: F.body, fontSize: 15, color: C.ash, lineHeight: 1.75,
            }} className="terms-body">{s.body}</div>
            <div style={{ marginTop: 22, height: 1, background: C.borderSubtle }} />
          </section>
        ))}

        {/* Contact strip */}
        <div style={{
          background: C.linen, border: `1px solid ${C.border}`, borderRadius: 12,
          padding: '22px 26px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 16, flexWrap: 'wrap', marginTop: 16,
        }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.brass, marginBottom: 6 }}>Questions?</div>
            <div style={{ fontFamily: F.body, fontSize: 14, color: C.ink, lineHeight: 1.55 }}>
              We try to keep these terms straightforward. Anything unclear, email <a href="mailto:accounts@tibercourse.com" style={{ color: C.brass, textDecoration: 'underline', textUnderlineOffset: 3 }}>accounts@tibercourse.com</a>.
            </div>
          </div>
          <button onClick={() => onNav('contact')} style={{
            background: C.ink, color: C.textInverse, border: 'none', borderRadius: 9999,
            padding: '12px 22px', cursor: 'pointer',
            fontFamily: F.sans, fontSize: 11, fontWeight: 600,
            letterSpacing: '1.5px', textTransform: 'uppercase', flexShrink: 0,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>Contact us</button>
        </div>
      </main>
    </div>

    {/* Style for the body lists/paragraphs (Babel inline doesn't take a CSS file). */}
    <style>{`
      .terms-body p { margin: 0 0 12px 0; }
      .terms-body p:last-child { margin-bottom: 0; }
      .terms-body ul { margin: 8px 0 12px 22px; padding: 0; }
      .terms-body li { margin-bottom: 6px; }
      .terms-body a { color: #6B2E2E; text-decoration: underline; text-underline-offset: 3px; }
    `}</style>
  </div>
);

Object.assign(window, { TermsPage });
