import {
  ChatBubbleLeftRightIcon,
  CalendarDaysIcon,
  UsersIcon,
  CpuChipIcon,
} from '@heroicons/react/24/solid'
import { Eyebrow, H4, P } from '@/components/Texts'

export function PodsComing() {
  return (
    <section className="w-full max-w-8xl mx-auto bg-white">

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

      {/* Main content */}
      <div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-200">
        
        {/* LEFT SIDE – Title + Intro */}
        <div className="max-w-xl">
          <Eyebrow className="text-cyan-600">COMING SOON</Eyebrow>

          <H4 className="mt-6 text-gray-900">
            Be Among The First
          </H4>

          <P className="mt-6 text-gray-700">
            The first Pods are launching soon.
10,000 early Pods will be available for early adopters. Next, Pods will support peer-to-peer AI Agents that live inside your environment.
Your own AI, powered by your data without any data leaks.
          </P>
        </div>

        {/* RIGHT SIDE — 4 upcoming features */}
        <div className="space-y-10">

          {/* 1 — Private Chat & Calls */}
          <div>
            <h3 className="text-lg font-semibold text-gray-900 flex items-center">
              <ChatBubbleLeftRightIcon className="h-6 w-6 text-cyan-600 mr-3" />
              Private Chat & Calls
            </h3>
            <p className="mt-2 text-gray-700 max-w-2xl">
              Peer-to-peer conversations and calling routed directly between Pods.
            </p>
            <div className="mt-8 h-px w-full bg-cyan-200" />
          </div>

          {/* 2 — Calendar & File Sync */}
          <div>
            <h3 className="text-lg font-semibold text-gray-900 flex items-center">
              <CalendarDaysIcon className="h-6 w-6 text-cyan-600 mr-3" />
              Calendar & File Sync
            </h3>
            <p className="mt-2 text-gray-700 max-w-2xl">
              Your schedules, documents, and files synced across your Pods with no central cloud.
            </p>
            <div className="mt-8 h-px w-full bg-cyan-200" />
          </div>

          {/* 3 — Secure Team Spaces */}
          <div>
            <h3 className="text-lg font-semibold text-gray-900 flex items-center">
              <UsersIcon className="h-6 w-6 text-cyan-600 mr-3" />
              Secure Team Spaces
            </h3>
            <p className="mt-2 text-gray-700 max-w-2xl">
              Create shared Pods for teams, communities, or groups. Fully encrypted, fully sovereign.
            </p>
            <div className="mt-8 h-px w-full bg-cyan-200" />
          </div>

          {/* 4 — Early AI Agent Integration */}
          <div>
            <h3 className="text-lg font-semibold text-gray-900 flex items-center">
              <CpuChipIcon className="h-6 w-6 text-cyan-600 mr-3" />
              Early AI Agent Integration 
              <span className="ml-2 text-xs text-gray-400">🕒</span>
            </h3>
            <p className="mt-2 text-gray-700 max-w-2xl">
              Host your personal AI agent inside your Pod. Private, local-first, and fully under your control.
            </p>
          </div>

        </div>
      </div>

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