a97a02cf-6585-4cd6-94f9-c90f6a08bd94/src/components/sections/hero/HeroLogoBillboardSplit.tsx

'use client';

import React, { useState } from 'react';
import Image from 'next/image';

interface Button {
  text: string;
  href: string;
}

interface Background {
  variant: 'radial-gradient' | 'linear-gradient' | 'solid';
}

interface HeroLogoBillboardSplitProps {
  logoText: string;
  description: string;
  background: Background;
  buttons: Button[];
  layoutOrder: 'default' | 'reverse';
  imageSrc: string;
  imageAlt: string;
  frameStyle: 'card' | 'none';
  buttonAnimation: 'slide-up' | 'fade' | 'none';
  mediaAnimation: 'opacity' | 'scale' | 'none';
}

export default function HeroLogoBillboardSplit({
  logoText,
  description,
  background,
  buttons,
  layoutOrder,
  imageSrc,
  imageAlt,
  frameStyle,
  buttonAnimation,
  mediaAnimation,
}: HeroLogoBillboardSplitProps) {
  const [isFlipped, setIsFlipped] = useState(false);

  const getBackgroundClass = () => {
    switch (background.variant) {
      case 'radial-gradient':
        return 'bg-gradient-to-br from-blue-50 via-white to-purple-50';
      case 'linear-gradient':
        return 'bg-gradient-to-r from-blue-50 to-purple-50';
      case 'solid':
        return 'bg-white';
      default:
        return 'bg-white';
    }
  };

  const getButtonAnimationClass = () => {
    switch (buttonAnimation) {
      case 'slide-up':
        return 'transform transition-all duration-500 hover:translate-y-[-4px]';
      case 'fade':
        return 'transition-opacity duration-300 hover:opacity-80';
      case 'none':
        return '';
      default:
        return '';
    }
  };

  const getMediaAnimationClass = () => {
    switch (mediaAnimation) {
      case 'opacity':
        return 'transition-opacity duration-500 hover:opacity-90';
      case 'scale':
        return 'transition-transform duration-500 hover:scale-105';
      case 'none':
        return '';
      default:
        return '';
    }
  };

  const getFrameClass = () => {
    switch (frameStyle) {
      case 'card':
        return 'rounded-2xl shadow-lg overflow-hidden';
      case 'none':
        return '';
      default:
        return '';
    }
  };

  const isReverse = layoutOrder === 'reverse';

  return (
    <section className={`w-full min-h-screen flex items-center justify-center ${getBackgroundClass()} py-20 px-4 sm:px-6 lg:px-8`}>
      <div className="max-w-7xl w-full mx-auto">
        <div className={`grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center ${isReverse ? 'lg:grid-flow-dense' : ''}`}>
          {/* Content Section */}
          <div className={`flex flex-col justify-center space-y-8 ${isReverse ? 'lg:col-start-2' : ''}`}>
            <div className="space-y-4">
              <h1 className="text-5xl sm:text-6xl font-bold text-gray-900 leading-tight">
                {logoText}
              </h1>
              <p className="text-xl text-gray-600 leading-relaxed max-w-lg">
                {description}
              </p>
            </div>

            {/* Buttons */}
            <div className="flex flex-wrap gap-4 pt-4">
              {buttons.map((button, index) => (
                <a
                  key={index}
                  href={button.href}
                  className={`px-8 py-3 rounded-lg font-semibold transition-all duration-300 ${
                    index === 0
                      ? 'bg-blue-600 text-white hover:bg-blue-700 shadow-lg'
                      : 'bg-gray-200 text-gray-900 hover:bg-gray-300'
                  } ${getButtonAnimationClass()}`}
                >
                  {button.text}
                </a>
              ))}
            </div>
          </div>

          {/* Image Section with Flip Card */}
          <div className={`flex justify-center items-center ${isReverse ? 'lg:col-start-1' : ''}`}>
            <div
              className="w-full max-w-md h-96 cursor-pointer perspective"
              onMouseEnter={() => setIsFlipped(true)}
              onMouseLeave={() => setIsFlipped(false)}
            >
              <div
                className={`relative w-full h-full transition-transform duration-500 ${getFrameClass()} ${getMediaAnimationClass()}`}
                style={{
                  transformStyle: 'preserve-3d',
                  transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
                }}
              >
                {/* Front Side - Image */}
                <div
                  className={`absolute w-full h-full ${getFrameClass()}`}
                  style={{
                    backfaceVisibility: 'hidden',
                  }}
                >
                  <Image
                    src={imageSrc}
                    alt={imageAlt}
                    fill
                    className="object-cover"
                    priority
                  />
                </div>

                {/* Back Side - Testimonial */}
                <div
                  className={`absolute w-full h-full bg-gradient-to-br from-blue-600 to-purple-600 p-8 flex flex-col justify-center items-center text-white ${getFrameClass()}`}
                  style={{
                    backfaceVisibility: 'hidden',
                    transform: 'rotateY(180deg)',
                  }}
                >
                  <div className="text-center space-y-4">
                    <svg
                      className="w-12 h-12 mx-auto opacity-80"
                      fill="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path d="M3 21c3 0 7-1 7-8V5c0-1.25-4.716-5-7-5-6 0-6.002 4-6 7v11c0 1 0 7 6 7z" />
                      <path d="M15 21c3 0 7-1 7-8V5c0-1.25-4.716-5-7-5-6 0-6.002 4-6 7v11c0 1 0 7 6 7z" />
                    </svg>
                    <p className="text-lg font-semibold leading-relaxed">
                      "CompClub has transformed how I connect with fellow tech enthusiasts. The projects are innovative and the community is incredibly supportive!"
                    </p>
                    <p className="text-sm opacity-90">- Sarah Chen, Tech Innovator</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}