// App support page for xCIPHR and SciPHR.

function SupportPage() {
  const supportCards = [
    {
      title: 'App help',
      body: 'Questions about onboarding, Sign in with Apple, device authorization, wallet display, or transaction review.',
    },
    {
      title: 'Account access',
      body: 'Help understanding recovery flows, device setup, and what information remains controlled by your device.',
    },
    {
      title: 'Billing support',
      body: 'Questions about optional App Store developer tips or App Store purchase state.',
    },
  ];

  const includeItems = [
    'Device model and iOS version',
    'xCIPHR app version and build number',
    'A short description of what happened',
    'Screenshots with private details hidden',
  ];

  const neverSendItems = [
    'Wallet seed or private key',
    'Recovery code',
    'Apple ID credentials',
    'Full screenshots showing secrets',
  ];

  const ListCard = ({ title, items }) => (
    <ContentCard title={title}>
      <ul style={{ margin: 0, padding: '0 0 0 18px' }}>
        {items.map(item => (
          <li key={item} style={{ marginBottom: 10 }}>{item}</li>
        ))}
      </ul>
    </ContentCard>
  );

  return (
    <SiteShell current="support">
      <PageHeader
        eyebrow="Support · xCIPHR"
        title="Support for SciPHR and xCIPHR."
        lede="For app help, account questions, billing support, or security reporting, use the contacts below. We aim to respond within 1-2 business days."
      />

      <section style={{
        display: 'grid',
        gridTemplateColumns: '1.2fr 0.8fr',
        gap: 28,
      }}>
        <ContentCard title="Contact support">
          <p style={{ margin: '0 0 14px 0' }}>
            Email{' '}
            <a href={SP_LINKS.emailSupport}
               style={{ color: SP_COL.white, textDecoration: 'none',
                        borderBottom: `1px solid ${SP_COL.grayDark}` }}>support@sciphr.io</a>
            {' '}for help with the xCIPHR app.
          </p>
          <p style={{ margin: 0 }}>
            SciPHR is a self-custody app. Support can help with app behavior,
            onboarding, transaction review, and account questions, but cannot
            recover or reset wallet secret material.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 22 }}>
            <CommandButton label="Email support" href={SP_LINKS.emailSupport} variant="solid" />
            <CommandButton label="Security reports" href={SP_LINKS.emailSecurity} variant="ghost" />
          </div>
        </ContentCard>

        <TerminalCard title="support channel">
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 12,
            fontFamily: SP_MONO_W,
            fontSize: 13,
            lineHeight: 1.7,
            color: SP_COL.grayLight,
          }}>
            <p style={{ margin: 0 }}>{'>'} contact: support@sciphr.io</p>
            <p style={{ margin: 0 }}>{'>'} security: security@sciphr.io</p>
            <p style={{ margin: 0 }}>{'>'} status: accepting support requests.</p>
          </div>
        </TerminalCard>
      </section>

      <section style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 20,
      }}>
        {supportCards.map(card => (
          <OutlineCard key={card.title} title={card.title}>
            <p style={{
              margin: 0,
              fontFamily: SP_MONO_W,
              fontSize: 13,
              lineHeight: 1.7,
              color: SP_COL.grayLight,
            }}>{card.body}</p>
          </OutlineCard>
        ))}
      </section>

      <section style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 20,
      }}>
        <ListCard title="Include this" items={includeItems} />
        <ListCard title="Never send this" items={neverSendItems} />
      </section>
    </SiteShell>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SupportPage />);