export function Philosophy() {
  return (
    <section className="border-b border-border py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
          <div>
            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
              The Internet as It Was <span className="text-secondary">Always Meant to Be</span>
            </h2>
            <div className="mt-6 space-y-4 text-base leading-relaxed text-muted-foreground">
              <p>
                The legacy internet has become a collection of walled gardens controlled by a handful of corporations.
                Your data is commodified. Your attention is sold. Your privacy is an illusion.
              </p>
              <p>
                <span className="font-semibold text-primary">rspace</span> is built on a simple principle: technology
                should serve people, not profit margins.
              </p>
              <p>
                We're bringing back the spirit of the early web - when MySpace let you express yourself, when
                communities formed around shared purpose, when the internet felt like it belonged to everyone.
              </p>
            </div>
          </div>

          <div className="space-y-6">
            <div className="rounded-lg border border-primary/20 bg-card p-6">
              <h3 className="mb-3 text-xl font-semibold text-primary">Local-First Principles</h3>
              <p className="text-sm leading-relaxed text-muted-foreground">
                Your data lives on your devices. Work offline. Sync when connected. No central servers controlling your
                access or mining your information.
              </p>
            </div>

            <div className="rounded-lg border border-secondary/20 bg-card p-6">
              <h3 className="mb-3 text-xl font-semibold text-secondary">Communities of Purpose</h3>
              <p className="text-sm leading-relaxed text-muted-foreground">
                Build spaces around what matters - not what drives engagement metrics. Organize, collaborate, and govern
                democratically.
              </p>
            </div>

            <div className="rounded-lg border border-primary/20 bg-card p-6">
              <h3 className="mb-3 text-xl font-semibold text-primary">Zero Knowledge Privacy</h3>
              <p className="text-sm leading-relaxed text-muted-foreground">
                End-to-end encrypted by default. Your data never exists unencrypted outside your control. Surveillance
                capitalism has no place here.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}