import { Small } from '@/components/Texts'

const highlights = [
  {
    label: 'Overview',
    title: 'Encrypted & Verifiable Storage',
    description:
      'Data is secured with cryptographic identity, not cloud trust.',
  },
  {
    label: 'Core Concept',
    title: 'Self-Healing Replication',
    description:
      'The system repairs corruption and restores replicas automatically.',
  },
  {
    label: 'Outcome',
    title: 'Multi-Protocol Access',
    description:
      'Serve the same dataset over S3, IPFS, or filesystem mounts, without duplicating data.',
  },
]

export function StorageOverview() {
  return (
    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
       {/* ✅ Top horizontal line with spacing */}
      <div className="max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-800" />
      <div className="w-full border-t border-l border-r border-gray-800" />

      <div className="bg-[#121212] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-800">
        <div className="grid lg:grid-cols-3">
          {highlights.map((item) => (
            <div
              key={item.title}
              className="group relative overflow-hidden border border-white/10 bg-white/4 p-8 backdrop-blur-sm transition hover:border-cyan-300/50 hover:bg-white/8"
            >
              <div className="absolute inset-0 bg-linear-to-br from-cyan-500/0 via-white/5 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
              <div className="relative">
                <Small className="text-xs uppercase tracking-[0.16em] text-cyan-200">
                  {item.label}
                </Small>
                <h3 className="mt-4 text-lg font-semibold text-white">
                  {item.title}
                </h3>
                <p className="mt-4 text-sm leading-relaxed text-gray-300">
                  {item.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="w-full border-b border-gray-800 bg-[#121212]" />
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
    </section>
  )
}