"use client";

// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "hero" section.

import React, { useState, useEffect } from 'react';
import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import Button from "@/components/ui/Button";

const IMAGES = [
  "http://img.b2bpic.net/free-photo/group-friends-planning-trip-cafe_23-2148952344.jpg",
  "https://images.unsplash.com/photo-1522071820075-bc879564763a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1552664730-d307ca8849d1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1517245381810-b23468734b09?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
];

export default function HeroSection(): React.JSX.Element {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const duration = 5000; // 5 seconds per image
    const interval = 50; // update progress every 50ms
    const step = (interval / duration) * 100;

    const timer = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          setCurrentImageIndex((prevIndex) => (prevIndex + 1) % IMAGES.length);
          return 0;
        }
        return prev + step;
      });
    }, interval);

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

  return (
    <div id="hero" data-webild-section="hero" className="relative w-full pt-24 pb-12 px-4 sm:px-6 lg:px-8">
      <div className="container mx-auto mb-12">
        <h1 className="text-6xl md:text-8xl font-bold tracking-tight mb-8 text-center">
          Innovate Marketing
        </h1>
        
        <div className="flex flex-col md:flex-row justify-end items-end gap-6">
          <div className="max-w-md text-right">
            <p className="text-base md:text-lg text-muted-foreground mb-6">
              Your Vision, Amplified. We craft data-driven strategies and compelling narratives to elevate your brand and drive measurable results. Let's grow together.
            </p>
            <div className="flex items-center justify-end gap-4">
              <Button href="#services" text="Our Services" variant="primary" />
              <Button href="#contact" text="Contact Us" variant="secondary" />
            </div>
          </div>
        </div>
      </div>

      <div className="w-full container mx-auto relative rounded-3xl overflow-hidden aspect-[16/9] md:aspect-[21/9] shadow-2xl bg-muted">
        {IMAGES.map((src, index) => (
          <div
            key={src}
            className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
              index === currentImageIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'
            }`}
          >
            <img
              src={src}
              alt={`Slide ${index + 1}`}
              className="w-full h-full object-cover"
            />
          </div>
        ))}
        
        {/* Progress Bars Overlay */}
        <div className="absolute bottom-6 left-0 right-0 z-20 flex justify-center gap-3 px-6">
          {IMAGES.map((_, index) => (
            <div 
              key={index} 
              className="h-1.5 w-16 sm:w-24 bg-white/30 rounded-full overflow-hidden backdrop-blur-sm cursor-pointer"
              onClick={() => {
                setCurrentImageIndex(index);
                setProgress(0);
              }}
            >
              <div
                className="h-full bg-white transition-all duration-75 ease-linear"
                style={{
                  width: index === currentImageIndex 
                    ? `${progress}%` 
                    : index < currentImageIndex ? '100%' : '0%'
                }}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}