"use client";

import { Eyebrow, H4, H5 } from "@/components/Texts";
import PodsFlow from "./animations/PodsFlow";
import { useEffect, useState } from "react";
import { IconClockHour5 } from "@tabler/icons-react";

const phrases = [
  "everything runs directly from your Pod.",
  "Messages travel from Pod to Pod, never through a server.",
  "Calls are hosted on your Pod, not in a data center.",
  "Files stay encrypted, available, and always yours.",
];

export function PodsHow() {
  const [index, setIndex] = useState(0);
  const [fade, setFade] = useState(true);

  useEffect(() => {
    const interval = setInterval(() => {
      setFade(false);
      setTimeout(() => {
        setIndex((prev) => (prev + 1) % phrases.length);
        setFade(true);
      }, 300);
    }, 3000);

    return () => clearInterval(interval);
  }, []);

  return (
    <section className="relative w-full bg-[#121212] overflow-hidden">
      <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: Animation */}
          <div className="w-full lg:w-4/9">
            <PodsFlow />
          </div>

          {/* Left: JUST the H3 with auto-changing sentence */}
          <div className="w-full lg:w-5/9 text-white flex items-center">

            <div>
              <Eyebrow color="accent">How it works</Eyebrow>
              <H4 color="white">A Pod in Action</H4>
              <H5 color="white" className="mt-4">
                When you use Mycelium,&nbsp;
                <span
                  className={`inline-block transition-opacity duration-300 ${
                    fade ? "opacity-100" : "opacity-0"
                  }`}
                >
                  {phrases[index]}
                </span>
              </H5>
            </div>

          </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>
  );
}