"use client";

import { Container } from "@/components/Container";
import { CP, Small } from "@/components/Texts";

const useCases = [
  {
    title: "Private Messaging & Calling",
    description:
      "Communicate directly Pod-to-Pod with no centralized routing.",
    bullets: [
      "End-to-end encrypted messaging and voice calling.",
      "No intermediaries — connections flow directly between Pods.",
      "Zero metadata profiling, tracking, or data resale.",
    ],
  },
  {
    title: "Safe File Storage & Sharing",
    description:
      "Store and share files securely without exposing data to third parties.",
    bullets: [
      "Files remain private with no platform-level scanning or analysis.",
      "Share documents and media directly with trusted contacts.",
      "Full ownership of your content — no cloud vendor dependencies.",
    ],
  },
  {
    title: "Personal Calendar & Meetings",
    description:
      "Manage your schedule within your own sovereign digital space.",
    bullets: [
      "Keep events, appointments, and reminders fully private.",
      "Coordinate calls and meetings entirely inside your Pod.",
      "No syncing with external servers or corporate platforms.",
    ],
  },
  {
    title: "Private Communities & Teams",
    description:
      "Create groups or collaborative spaces without platform ownership.",
    bullets: [
      "Form teams, friendship circles, and micro-communities.",
      "All interactions occur directly Pod-to-Pod.",
      "No hosting company or service provider controls your group data.",
    ],
  },
  {
    title: "Quantum Safe File System (QSFS)",
    description:
      "Store data using a self-healing, encrypted, quantum-resistant system.",
    bullets: [
      "Files are encrypted, split, and distributed across trusted nodes.",
      "Designed to withstand future quantum-level attacks.",
      "Automatic repair and reconstruction of data fragments.",
    ],
  },
  {
    title: "Access From Any Device",
    description:
      "Your Pod travels with you — always accessible, always yours.",
    bullets: [
      "Use your Pod from phones, laptops, tablets, or shared machines.",
      "Your identity, apps, and files follow you securely.",
      "No syncing or duplicated copies — direct access to your environment.",
    ],
  },
];

export function PodsFeatures() {
  return (
    <section className="w-full max-w-8xl mx-auto bg-transparent">
      {/* Top horizontal spacing */}
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
      <div className="w-full border-t border-l border-r border-gray-100" />

      <Container className="py-12 border border-t-0 border-b-0 border-gray-100">
        {/* Header */}
        <div className="mx-auto max-w-4xl sm:text-center">
          <h2 className="text-base/7 font-semibold text-cyan-500">
            WHAT YOU CAN DO
          </h2>

          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
            A Fully Personal, Sovereign Digital Environment
          </p>

          <p className="mt-6 text-lg text-gray-600">
            Pods use open standard protocols like Matrix and Nostr. Everything runs directly through the Mycelium Network.
          </p>
        </div>

        {/* Cards */}
        <ul
          role="list"
          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6
                     sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
        >
          {useCases.map((useCase) => (
            <li
              key={useCase.title}
              className="rounded-md border border-gray-100 bg-white p-6 transition-all duration-300
                         hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 flex flex-col"
            >
              {/* Title + label */}
              <div className="flex items-center justify-between">
                <h3 className="font-semibold text-gray-900">
                  {useCase.title}
                </h3>
                <Small className="uppercase tracking-[0.25em] text-cyan-500">
                  Feature
                </Small>
              </div>

              {/* Short description */}
              <p className="mt-4 text-gray-700 leading-snug">
                {useCase.description}
              </p>

              {/* Bullet list */}
              <ul className="mt-6 space-y-3 text-sm text-gray-600">
                {useCase.bullets.map((bullet) => (
                  <li
                    key={bullet}
                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
                  >
                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
                    <span>{bullet}</span>
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      </Container>

      {/* Bottom spacing */}
      <div className="w-full border-b border-gray-100" />
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
    </section>
  );
}