"use client";

import { Eyebrow, H3, P } from "@/components/Texts";
import PodsFlow from "./animations/PodsFlow";

export function PodsHow() {
  return (
    <section className="relative w-full bg-[#121212] overflow-hidden">
      {/* ✅ Top horizontal line with spacing */}
      <div className="max-w-7xl bg-[#121212] 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" />

      <div className="max-w-7xl mx-auto px-6 lg:px-8 py-12 border border-t-0 border-b-0 border-gray-800 bg-[#111111] overflow-hidden">

        {/* ✅ Two-column layout */}
        <div className="flex flex-col lg:flex-row-reverse gap-8">

          {/* ✅ Right side animation */}
          <div className="w-full lg:w-4/9">
            <PodsFlow />
          </div>

          {/* ✅ Left side content */}
          <div className="w-full lg:w-5/9 text-white">
            <Eyebrow color="accent" className="">
              How it works
            </Eyebrow>
            <H3 color="white" className="mt-6">
              Living in a Pod 
            </H3>
            <P className="max-w-4xl text-gray-400 mt-6">
              When you use Mycelium, everything — your messages, calls, files — runs directly from your Pod.
            </P>
            <ul className="max-w-4xl text-gray-400 mt-6 space-y-3 ml-4">
              <li className="flex items-start gap-3">
                <span className="mt-1.5 inline-block size-2 rounded-full bg-cyan-400" />
                <span>When you message someone, it goes Pod to Pod, not through a central server.</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="mt-1.5 inline-block size-2 rounded-full bg-cyan-400" />
                <span>When you host a call, it runs on your Pod — no third-party data centers.</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="mt-1.5 inline-block size-2 rounded-full bg-cyan-400" />
                <span>When you save a file, it stays on your Pod, encrypted and always available.</span>
              </li>
            </ul>
            <P className="max-w-3xl text-gray-400 mt-4">
              No one else can read it, rent it, or switch it off.
              You don’t log in to the internet — you are part of it.
            </P>
          </div>
        </div>
      </div>
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
      <div className="w-full border-b border-gray-800" />
    </section>
  );
}