import {
  ChatBubbleLeftRightIcon,
  CalendarDaysIcon,
  UserGroupIcon,
  ShieldCheckIcon,
} from '@heroicons/react/24/solid'

import { Eyebrow, H3, P } from '@/components/Texts'

export function PodsCapabilities() {
  return (
    <section className="w-full max-w-8xl mx-auto bg-[#121212]">

      {/* ✅ Top horizontal line with spacing */}
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
      <div className="w-full border-t border-l border-r border-gray-800" />

      {/* ✅ Main content */}
      <div className="mx-auto max-w-7xl px-6 bg-[#111111] lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-800">
        
        {/* ✅ LEFT SIDE — Title + Intro */}
        <div className="max-w-xl ">
          <Eyebrow>What You Can Do</Eyebrow>

          <H3  className="mt-6 text-white">
            Pods Features
          </H3>

          <P className="mt-6 text-gray-200">
            Access everything from any device — your data follows you, not the other way around.
            💡 It’s like having your own tiny cloud that belongs only to you.
          </P>
        </div>

        {/* ✅ RIGHT SIDE — 4 stacked features */}
        <div className="space-y-8">

          {/* 1 — Communicate */}
          <div>
            <h3 className="text-lg font-semibold text-white flex items-center">
              <ChatBubbleLeftRightIcon className="h-6 w-6 text-cyan-500 mr-3" />
              Communicate
            </h3>
            <p className="mt-2 text-gray-200 max-w-2xl">
              Message, call, and share files privately — no tracking or ads.
            </p>
            <div className="mt-8 h-px w-full bg-cyan-500/50" />
          </div>

          {/* 2 — Organization */}
          <div>
            <h3 className="text-lg font-semibold text-white flex items-center">
              <CalendarDaysIcon className="h-6 w-6 text-cyan-500 mr-3" />
              Organization
            </h3>
            <p className="mt-2 text-gray-200 max-w-2xl">
              Organize your calendar and meetings inside your own space.
            </p>
            <div className="mt-8 h-px w-full bg-cyan-500/50" />
          </div>

          {/* 3 — Manage */}
          <div>
            <h3 className="text-lg font-semibold text-white flex items-center">
              <UserGroupIcon className="h-6 w-6 text-cyan-500 mr-3" />
              Manage
            </h3>
            <p className="mt-2 text-gray-200 max-w-2xl">
              Create small communities or teams that interact directly, Pod-to-Pod.
            </p>
            <div className="mt-8 h-px w-full bg-cyan-500/50" />
          </div>

          {/* 4 — Storage */}
          <div>
            <h3 className="text-lg font-semibold text-white flex items-center">
              <ShieldCheckIcon className="h-6 w-6 text-cyan-500 mr-3" />
              Storage
            </h3>
            <p className="mt-2 text-gray-200 max-w-2xl">
              Store data safely with Quantum Safe File System (QSFS) built in.
            </p>
          </div>
        </div>
      </div>

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