"use client";
import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { H3, P } from "@/components/Texts";


const rotating = [
  "Communities",
  "Integrators",
  "Builders",
  "Enterprises",
  "Institutions",
  "Creators",
  "Researchers",
  "Individuals",
];

// ✅ Use local image files (1–8)
const gallery = [
  "/images/audiences/1.jpg",
  "/images/audiences/2.jpg",
  "/images/audiences/3.jpg",
  "/images/audiences/4.jpg",
  "/images/audiences/5.jpg",
  "/images/audiences/6.jpg",
  "/images/audiences/7.jpg",
  "/images/audiences/8.jpg",
];

export function HomeAudience() {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % rotating.length);
    }, 3200);
    return () => clearInterval(timer);
  }, []);

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

      {/* ✅ Main content */}
      <div className="mx-auto max-w-7xl bg-white border border-t-0 border-b-0 border-gray-100">
        <div className="grid grid-cols-1 lg:grid-cols-2">

          {/* ✅ LEFT — Text & rotating headline */}
          <div className="px-6 py-14 sm:px-10 lg:px-14 flex flex-col justify-center">
            <H3 className="text-black">
              Sovereign Infrastructure for{" "}
              <span className="inline-block text-black font-semibold relative ml-2 h-[1.2em]">
                <AnimatePresence mode="wait">
                  <motion.span
                    key={rotating[index]}
                    initial={{ opacity: 0, y: 8 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -8 }}
                    transition={{ duration: 0.35 }}
                    className="absolute left-0 top-0"
                  >
                    {rotating[index]}
                  </motion.span>
                </AnimatePresence>

                {/* Invisible placeholder to avoid layout jump */}
                <span className="opacity-0">{rotating[index]}</span>
              </span>
            </H3>

            <P className="text-gray-800 mt-4">
              The internet wasn’t built for sovereignty. Today, data, AI models, and identity
              live on centralized clouds and owned by a few.
            </P>
             <P className="text-gray-800 mt-4">
            Mycelium brings infrastructure back
              to people, communities, and nations: private, resilient, and cryptographically yours.
            </P>

           
          </div>

          {/* ✅ RIGHT — Landscape image gallery synced with title */}
          <div className="relative h-64 sm:h-96 lg:h-full w-full overflow-hidden">
            <AnimatePresence mode="wait">
              <motion.img
                key={gallery[index]}
                src={gallery[index]}
                alt=""
                initial={{ opacity: 0, scale: 1.02 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 1.02 }}
                transition={{ duration: 0.6 }}
                className="absolute inset-0 w-full h-full object-cover"
              />
            </AnimatePresence>
          </div>

        </div>
      </div>

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