"use client";
import { TypeAnimation } from 'react-type-animation';

const rotatingWords = [
  "everyone",
  1500,
  "creators",
  1500,
  "dreamers",
  1500,
  "developers",
  1500,
  "communities",
  1500,
  "humanity",
  1500,
  "builders",
  1500,
  "thinkers",
  1500,
  "doers",
  1500,
  "pioneers",
  1500,
  "the next billion",
  1500,
  "All",
  1500,
];

export function AboutHero() {
  return (
    <section className="lg:max-w-6xl flex flex-col items-start justify-center min-h-[60vh] px-6 md:px-16  text-white">
      <h1 className="text-5xl lg:text-6xl font-medium leading-none">
        Building a Decentralized Internet for{" "}
        <TypeAnimation
          sequence={rotatingWords}
          wrapper="span"
          speed={50}
          className="relative inline-block text-white drop-shadow-[0_0_20px_#ffffff]"
          repeat={Infinity}
        />        .
      </h1>
      <p className="max-w-3xl mt-6 text-lg md:text-2xl text-gray-800">
        At <span className="text-white font-semibold">ThreeFold</span>, we are empowering
        individuals and organizations to shape an open, resilient, and sustainable internet.
      </p>
    </section>
  );
}