import Image from "next/image"

export function Footer() {
  return (
    <footer className="bg-card py-12">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
          <div className="text-center sm:text-left">
            <div className="flex items-center gap-3">
              <Image src="/logo.png" alt="rSpace logo" width={40} height={40} className="rounded" />
              <p className="text-lg font-bold">
                <span className="text-primary">r</span>
                <span className="text-foreground">Space</span>
                <span className="text-secondary">.online</span>
              </p>
            </div>
            <p className="mt-1 text-sm text-muted-foreground">building collaborative spaces for digital revolution</p>
          </div>

          <div className="flex flex-col items-center gap-2 text-sm text-muted-foreground sm:items-end">
            <p>Built for communities, by communities</p>
            <p className="text-xs">Outside the walls of big tech monopolies</p>
          </div>
        </div>

        <div className="mt-8 border-t border-border pt-8 text-center">
          <p className="text-sm text-muted-foreground mb-2">
            rSpace.online - building collaborative spaces for digital revolution
          </p>
          <p className="text-xs text-muted-foreground">Local-first • Zero-knowledge • Community-owned</p>
        </div>
      </div>
    </footer>
  )
}