Baye Hero

import React, { useState } from 'react';
import { motion } from 'framer-motion';

interface StatusPill {
  label: string;
  variant: 'accent' | 'muted';
}

interface BayeMLBHeroProps {
  eyebrow?: string;
  headline?: string;
  headlineAccent?: string;
  subtitle?: string;
  statusPills?: StatusPill[];
}

const BayeMLBHero: React.FC<BayeMLBHeroProps> = ({
  eyebrow = 'MLB DATA BRIEF AGENT',
  headline = 'Pre-Game Intelligence for',
  headlineAccent = 'Baye',
  subtitle = 'Real-time MLB analytics and data aggregation from verified sources',
  statusPills = [
    { label: 'MLB PRE-GAME ONLY', variant: 'accent' },
    { label: 'NO PICKS', variant: 'muted' },
    { label: 'SOURCES SHOWN', variant: 'muted' }
  ]
}) => {
  return (
    <section 
      className="relative w-full min-h-[400px] flex items-center justify-center px-6 py-16 overflow-hidden"
      style={{
        backgroundColor: '#111111',
        fontFamily: 'Inter, system-ui, -apple-system, sans-serif'
      }}
    >
      {/* Background Pattern */}
      <div 
        className="absolute inset-0 opacity-30"
        style={{
          backgroundImage: `
            linear-gradient(to right, #262626 1px, transparent 1px),
            linear-gradient(to bottom, #262626 1px, transparent 1px)
          `,
          backgroundSize: '40px 40px'
        }}
      />

      {/* Content Container */}
      <div className="relative z-10 w-full max-w-6xl mx-auto">
        <div className="flex flex-col lg:flex-row items-center lg:items-start gap-8 lg:gap-12">
          
          {/* Left Content */}
          <motion.div 
            className="flex-1 text-center lg:text-left"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            {/* Eyebrow */}
            <div 
              className="inline-block mb-4"
              style={{
                fontSize: '11px',
                fontWeight: 700,
                letterSpacing: '0.16em',
                color: '#ff6a00',
                textTransform: 'uppercase'
              }}
            >
              {eyebrow}
            </div>

            {/* Headline */}
            <h1 
              className="mb-4"
              style={{
                fontSize: 'clamp(28px, 5vw, 42px)',
                fontWeight: 800,
                lineHeight: 1.2,
                color: '#f6f1e8'
              }}
            >
              {headline}{' '}
              <span style={{ color: '#ff6a00' }}>{headlineAccent}</span>
            </h1>

            {/* Subtitle */}
            <p 
              className="mb-6 max-w-xl mx-auto lg:mx-0"
              style={{
                fontSize: '14px',
                lineHeight: 1.6,
                color: '#7c7468'
              }}
            >
              {subtitle}
            </p>

            {/* Status Pills - Mobile */}
            <div className="flex flex-wrap gap-2 justify-center lg:hidden">
              {statusPills.map((pill, index) => (
                <div
                  key={index}
                  className="px-3 py-1.5 rounded-full text-xs font-medium"
                  style={{
                    backgroundColor: pill.variant === 'accent' ? 'rgba(255,106,0,0.08)' : 'transparent',
                    border: `1px solid ${pill.variant === 'accent' ? 'rgba(255,106,0,0.35)' : '#262626'}`,
                    color: pill.variant === 'accent' ? '#ff6a00' : '#7c7468'
                  }}
                >
                  {pill.label}
                </div>
              ))}
            </div>
          </motion.div>

          {/* Right Content - Status Pills Desktop */}
          <motion.div 
            className="hidden lg:flex flex-col gap-3 min-w-[240px]"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            {statusPills.map((pill, index) => (
              <div
                key={index}
                className="px-4 py-3 rounded-lg text-sm font-medium"
                style={{
                  backgroundColor: pill.variant === 'accent' ? 'rgba(255,106,0,0.08)' : 'transparent',
                  border: `1px solid ${pill.variant === 'accent' ? 'rgba(255,106,0,0.35)' : '#262626'}`,
                  color: pill.variant === 'accent' ? '#ff6a00' : '#7c7468'
                }}
              >
                {pill.label}
              </div>
            ))}
          </motion.div>
        </div>
      </div>

      {/* Subtle Accent Line */}
      <div 
        className="absolute bottom-0 left-0 right-0 h-px"
        style={{
          background: 'linear-gradient(90deg, transparent, rgba(255,106,0,0.35), transparent)'
        }}
      />
    </section>
  );
};

export default function BayeMLBHeroDemo() {
  return (
    <div className="min-h-screen bg-[#111111]">
      <BayeMLBHero />
    </div>
  );
}