// screens-terms.jsx — public Terms of Service page.
const { useState: useStateTM } = React;

function TermsScreen({ go }) {
  const updated = 'August 21, 2026';

  const sections = [
    { id: 'accept', h: 'Acceptance of terms', b: [
      'By using modaBoard you agree to these terms. If you’re using modaBoard on behalf of a company, you confirm you’re authorised to accept them for that company.',
      'If you don’t agree with any part of these terms, please don’t use the service.',
    ]},
    { id: 'accounts', h: 'Creator accounts', b: [
      'You must provide accurate information and keep your login credentials secure. You’re responsible for activity under your account.',
      'Studio access may require approval. We may decline or revoke access at our discretion, for example in cases of fraud or abuse.',
      'You must be at least 18 to earn affiliate commissions and receive payouts.',
    ]},
    { id: 'content', h: 'Your content', b: [
      'You keep ownership of the outfits, boards, notes, and images you create. You grant modaBoard a licence to host, display, and promote that content on the platform.',
      'You’re responsible for having the rights to any images or material you upload, and for making sure your content doesn’t infringe others’ rights or break the law.',
      'We may remove content that violates these terms or our guidelines.',
    ]},
    { id: 'products', h: 'Products & retailer links', b: [
      'When you import a product, modaBoard resolves the retailer and handles affiliate conversion automatically — you never need to paste an affiliate link.',
      'Product prices, availability, and descriptions come from third-party retailers and may change or be inaccurate. modaBoard isn’t the seller and isn’t responsible for retailer fulfilment, returns, or disputes.',
    ]},
    { id: 'earnings', h: 'Commissions & payouts', b: [
      'Affiliate commission is split between the creator and modaBoard per the platform commission rate shown in Studio. Commission becomes payable only after the affiliate network approves and locks the transaction.',
      'If an order is cancelled, returned, or rejected by the network, the related commission is reversed and your balance is adjusted.',
      'Payouts are made to your connected payment method once your approved balance meets the minimum threshold. You’re responsible for any taxes on your earnings.',
    ]},
    { id: 'acceptable', h: 'Acceptable use', b: [
      'Don’t misuse the service: no fraud, fake clicks, self-referrals, scraping, reverse engineering, or attempts to manipulate attribution or payouts.',
      'Don’t post content that is illegal, hateful, infringing, or misleading.',
      'We may suspend or terminate accounts that break these rules.',
    ]},
    { id: 'ip', h: 'Intellectual property', b: [
      'The modaBoard name, logo, and platform are owned by modaBoard AB. These terms don’t grant you any right to use our branding without permission.',
    ]},
    { id: 'liability', h: 'Disclaimers & liability', b: [
      'modaBoard is provided “as is”. We don’t guarantee uninterrupted service, specific earnings, or that retailer data is accurate.',
      'To the extent permitted by law, modaBoard isn’t liable for indirect or consequential losses, or for lost sales, commissions, or data.',
    ]},
    { id: 'changes', h: 'Changes & termination', b: [
      'We may update these terms; we’ll note the “last updated” date and, for material changes, give reasonable notice. Continued use means you accept the updated terms.',
      'You can close your account at any time. We may suspend or end access if you breach these terms.',
    ]},
    { id: 'law', h: 'Governing law', b: [
      'These terms are governed by the laws of Sweden. Disputes are subject to the courts of Stockholm, unless mandatory local consumer law says otherwise.',
    ]},
  ];

  return (
    <div>
      {/* Hero */}
      <section style={{ padding: '72px 40px 24px' }}>
        <div style={{ maxWidth: 900, marginInline: 'auto' }}>
          <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8a8580' }}>Legal</div>
          <h1 style={{ margin: '12px 0 0', fontSize: 'clamp(40px, 5.5vw, 72px)', lineHeight: 0.98, letterSpacing: '-0.035em', fontWeight: 400 }}>
            Terms of <em style={{ fontFamily: "'Instrument Serif',serif", fontStyle: 'italic', fontWeight: 400 }}>service</em>
          </h1>
          <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.55, maxWidth: '56ch', color: '#3a3a36' }}>
            The agreement between you and modaBoard — how accounts, content, product links, and creator earnings work.
          </p>
          <div style={{ marginTop: 18, fontSize: 12, letterSpacing: '0.06em', color: '#8a8580' }}>Last updated {updated}</div>
        </div>
      </section>

      {/* Body */}
      <section style={{ padding: '24px 40px 8px' }}>
        <div style={{ maxWidth: 900, marginInline: 'auto', display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, alignItems: 'start' }} className="dc-terms-grid">
          {/* Contents rail */}
          <nav style={{ position: 'sticky', top: 88, display: 'flex', flexDirection: 'column', gap: 8 }} className="dc-terms-toc">
            <div style={{ fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#8a8580', marginBottom: 4 }}>Contents</div>
            {sections.map(s => (
              <a key={s.id} onClick={() => { const el = document.getElementById('tm-' + s.id); el && window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); }}
                 style={{ fontSize: 12.5, color: '#5a5a54', cursor: 'pointer', lineHeight: 1.4 }}>{s.h}</a>
            ))}
          </nav>

          {/* Sections */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 40, maxWidth: '64ch' }}>
            {sections.map(s => (
              <div key={s.id} id={'tm-' + s.id}>
                <h2 style={{ margin: 0, fontSize: 24, fontWeight: 400, letterSpacing: '-0.02em' }}>{s.h}</h2>
                <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {s.b.map((line, i) => (
                    <li key={i} style={{ display: 'flex', gap: 12, fontSize: 14.5, lineHeight: 1.6, color: '#3a3a36' }}>
                      <span style={{ flexShrink: 0, width: 5, height: 5, borderRadius: '50%', background: '#1a1a18', marginTop: 9 }}/>
                      <span>{line}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}

            {/* Contact block */}
            <div style={{ marginTop: 8, padding: 24, background: '#F2EFE7', borderRadius: 14 }}>
              <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#5a5550', marginBottom: 8 }}>Questions about these terms?</div>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: '#3a3a36' }}>
                Email <a href="mailto:hi@modaboard.com" style={{ color: '#1a1a18', fontFamily: 'ui-monospace, monospace' }}>hi@modaboard.com</a> or write to modaBoard AB, Åsögatan 144, 118 24 Stockholm, Sweden. See also our{' '}
                <a onClick={() => go({ name: 'privacy' })} style={{ color: '#1a1a18', cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 2 }}>privacy policy</a>.
              </p>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 820px) {
          .dc-terms-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          .dc-terms-toc { position: static !important; }
        }
      `}</style>

      <Footer/>
    </div>
  );
}

Object.assign(window, { TermsScreen });