import { Link } from 'react-router'
import { HeartIcon } from '@heroicons/react/24/outline'
import PageLayout from '~/components/PageLayout'
import { SITE_NAME } from '~/lib/site-config'

export function meta() {
  return [{ title: `FAQ — ${SITE_NAME}` }]
}

const faqs: { section: string; items: { q: string; a: React.ReactNode }[] }[] = [
  {
    section: 'About Lemma',
    items: [
      {
        q: 'What is Lemma?',
        a: (<>Lemma is a long-form writing platform built on the AT Protocol — the same open network that powers Bluesky. It lets you publish articles, essays, and research under your own identity, with your content stored on your own <a href="https://atproto.com/guides/self-hosting" target="_blank" rel="noopener noreferrer" className="underline hover:text-stone-700 dark:hover:text-stone-300 transition-colors">Personal Data Server (PDS)</a>.</>),
      },
      {
        q: 'How is Lemma different from Bluesky?',
        a: 'Bluesky is designed for short-form posts. Lemma is built for long-form writing — structured publications, rich formatting, math, diagrams, and full articles. Both run on the same AT Protocol, so your identity and content are portable across the Atmosphere.',
      },
      {
        q: 'Do I need a Bluesky account to use Lemma?',
        a: (<>You need an AT Protocol <a href="https://atproto.com/specs/account" target="_blank" rel="noopener noreferrer" className="underline hover:text-stone-700 dark:hover:text-stone-300 transition-colors">account</a>, which Bluesky currently provides. If you already have a Bluesky handle, you can sign in immediately. Your Lemma publications live alongside your Bluesky identity — same <a href="https://atproto.com/specs/did" target="_blank" rel="noopener noreferrer" className="underline hover:text-stone-700 dark:hover:text-stone-300 transition-colors">DID</a>, same PDS.</>),
      },
    ],
  },
  {
    section: 'Your Content & Data',
    items: [
      {
        q: 'Who owns my writing?',
        a: 'You do. Your articles are stored as records on your Personal Data Server, not on Lemma\'s servers. Lemma reads and indexes your content from the Atmosphere — it does not hold the canonical copy.',
      },
      {
        q: 'What happens to my content if Lemma shuts down?',
        a: 'Nothing. Because your articles live on your PDS, they remain accessible through any other AT Protocol client that supports the same record types. Lemma is a lens onto your data, not a vault for it.',
      },
      {
        q: 'Are my articles public?',
        a: 'Yes. All content — including drafts — is stored as public records on your Personal Data Server. You own your data; Lemma indexes it but your PDS is the canonical source. The AT Protocol does not support private data, so while most apps won\'t surface your drafts, they are technically accessible on the open network. Don\'t store sensitive information in drafts.',
      },
      {
        q: 'Can I delete an article?',
        a: 'Yes. Deleting a document record from your PDS removes it from Lemma\'s index. You can manage your records directly through your PDS or through any AT Protocol client, not just the Lemma app.',
      },
    ],
  },
  {
    section: 'Writing & Publishing',
    items: [
      {
        q: 'What is a publication?',
        a: 'A publication is a named blog that groups your articles under a URL. You can have multiple publications — for example, a personal blog and a professional journal.',
      },
      {
        q: 'What writing features does Lemma support?',
        a: (
          <>
            The Lemma editor supports{' '}
            <a href="https://github.github.com/gfm/" target="_blank" rel="noopener noreferrer" className="underline">GitHub Flavored Markdown</a>,{' '}
            <a href="https://katex.org" target="_blank" rel="noopener noreferrer" className="underline">KaTeX</a> math notation,{' '}
            <a href="https://mermaid.js.org" target="_blank" rel="noopener noreferrer" className="underline">Mermaid</a> diagrams,{' '}
            <a href="https://paulrosen.github.io/abcjs/" target="_blank" rel="noopener noreferrer" className="underline">ABC</a> music notation,{' '}
            <a href="https://fountain.io" target="_blank" rel="noopener noreferrer" className="underline">Fountain</a> screenplays, syntax-highlighted code blocks, function plots, media embeds, image uploads, hiding spoilers, Bluesky mentions and hashtags, and stock ticker symbols (cashtags).
          </>
        ),
      },
      {
        q: 'Where are images stored?',
        a: 'Images you upload are saved directly to your Personal Data Server and served through Bluesky\'s content delivery network (CDN) — the same infrastructure that hosts the photos in your Bluesky posts.',
      },
      {
        q: 'Can I subscribe to other writers?',
        a: 'Yes. Subscribing to a publication adds their articles to your Following feed. Subscriptions are stored as records on your PDS, so they travel with your identity.',
      },
    ],
  },
  {
    section: 'Open Source',
    items: [
      {
        q: 'Is Lemma open source?',
        a: (
          <>
            Yes. Lemma is licensed under the{' '}
            <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noopener noreferrer" className="underline">GNU Affero General Public License v3.0 (AGPL-3.0)</a>.
            {' '}The source code is available on{' '}
            <a href="https://tangled.org/lemma.pub/lemma" target="_blank" rel="noopener noreferrer" className="underline">Tangled</a>.
            Anyone who modifies and deploys Lemma must publish their changes under the same license.
          </>
        ),
      },
      {
        q: 'Can I self-host Lemma?',
        a: (
          <>
            Yes. Lemma is designed to run on AWS (DynamoDB, Lambda, S3, CloudFront) with LocalStack support for local development.
            See the <a href="https://tangled.org/lemma.pub/lemma" target="_blank" rel="noopener noreferrer" className="underline">source repository</a> for deployment instructions.
            Commercial licensing is available from PiPup Technologies, LLC for organizations that need proprietary modifications.
          </>
        ),
      },
    ],
  },
]

export default function FAQ() {
  return (
    <PageLayout spacing="8">
      <div className="space-y-2">
        <h1 className="font-display text-2xl font-semibold text-stone-900 dark:text-white">Frequently Asked Questions</h1>
        <p className="text-sm text-stone-500 dark:text-stone-400">
          Still have questions?{' '}
          <Link to="/help" className="underline hover:text-stone-700 dark:hover:text-stone-300 transition-colors">
            Visit the Help page
          </Link>{' '}
          or reach us on{' '}
          <a href="https://bsky.app/profile/lemma.pub" target="_blank" rel="noopener noreferrer" className="underline hover:text-stone-700 dark:hover:text-stone-300 transition-colors">
            Bluesky
          </a>.
        </p>
      </div>

      <div className="space-y-10">
        {faqs.map((section) => (
          <div key={section.section} className="space-y-6">
            <h2 className="font-display text-lg font-semibold text-stone-900 dark:text-white border-b border-stone-200 dark:border-stone-800 pb-2">
              {section.section}
            </h2>
            <dl className="space-y-6">
              {section.items.map((item) => (
                <div key={item.q}>
                  <dt className="font-display font-semibold text-stone-900 dark:text-white text-sm mb-1.5">
                    {item.q}
                  </dt>
                  <dd className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed">
                    {item.a}
                  </dd>
                </div>
              ))}
            </dl>
          </div>
        ))}
      </div>

      <p className="text-sm text-stone-400 dark:text-stone-600 flex items-center gap-1">
        Made with <HeartIcon className="size-4 text-red-500" /> in Chicago
      </p>
    </PageLayout>
  )
}
