import React, { useState } from 'react';
import { BannerGraphic } from './BannerGraphic';

export const Hero: React.FC = () => {
  const [imgError, setImgError] = useState(false);

  return (
    <header className="relative w-full overflow-hidden bg-[#f4eee1]">
      {/* Attached Design Banner Graphic - Checks for uploaded sst.png first */}
      {!imgError ? (
        <div className="w-full relative overflow-hidden bg-[#e8f4f5] border-b-4 border-[#3d9ca8] shadow-md">
          <img
            src="/sst.png"
            alt="Simply Sorted Tech - Across Southwest Cornwall"
            className="w-full h-auto max-h-[440px] object-cover block mx-auto"
            onError={() => setImgError(true)}
            referrerPolicy="no-referrer"
          />
        </div>
      ) : (
        <BannerGraphic />
      )}

      {/* Hero Headline Bar */}
      <div className="w-full bg-white/80 backdrop-blur-sm border-b border-stone-200/80 py-4 sm:py-5 px-4 sm:px-6 lg:px-8 shadow-sm">
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-3 text-center sm:text-left">
          <p className="font-montserrat font-bold text-[#56a0ab] text-sm sm:text-base tracking-wider uppercase">
            📍 Across Southwest Cornwall
          </p>

          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#8b5e3c]/10 text-[#8b5e3c] border border-[#8b5e3c]/20 font-inter font-medium text-xs sm:text-sm tracking-wider uppercase shrink-0">
            <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse" />
            <span>Tech Doesn't Have To Be Tricky!</span>
          </div>
        </div>
      </div>
    </header>
  );
};