import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import SpeakerIcon from '../components/SpeakerIcon';
import ServiceCard from '../components/ServiceCard';

const services = [
  { icon: '\u{1F50A}', title: 'Vermietung', description: 'Lautsprecher, Mischpulte, Lichtanlagen, Rigging und Komplett-Setups aus unserem 1.000+ Geräte umfassenden Mietlager in Ellzee. Geprüftes Equipment, sofort einsatzbereit.' },
  { icon: '\u{1F6D2}', title: 'Verkauf', description: 'Neu- und Gebrauchtgeräte führender Hersteller mit Beratung, Inbetriebnahme und Service. Wir liefern nicht nur – wir konfigurieren Ihre Anlage einsatzfertig.' },
  { icon: '\u{1F477}', title: 'Personal', description: 'Qualifizierte Tontechniker, Lichttechniker und Rigger für Aufbau, Betrieb und Abbau. Mit TÜV-geprüfter Ausbildung und umfangreicher Praxiserfahrung.' },
  { icon: '\u{1F69A}', title: 'Transport', description: 'Eigene Transportfahrzeuge für sichere An- und Ablieferung. Inklusive Verladekonzept, Positionierung und Rückholung – kundengerecht terminiert.' },
  { icon: '\u{1F4E6}', title: 'Lagerung', description: 'Klimatisierte und trockene Lagerung für Equipment und Veranstaltungsbestände. Mit Bestandsmanagement und regelmäßiger Funktionsprüfung.' },
  { icon: '\u{1F527}', title: 'Werkstatt', description: 'Herstellerübergreifende Reparatur und Wartung in unserer eigenen Werkstatt. Regelmäßige DGUV-Prüfungen und Kalibrierung für Ihren sicheren Betrieb.' },
  { icon: '\u26A1', title: 'Installation', description: 'Festinstallationen in Schaufenstern, Lokalen und Veranstaltungsstätten. Von der Planung über die Elektroinstallation bis zur Abnahme – alles aus einer Hand.' },
  { icon: '\u{1F4C5}', title: 'Booking', description: 'Vermittlung von Künstlern und Technik-Personal für Ihre Veranstaltung. Mit unserem branchenweiten Netzwerk finden wir die passenden Professionals für Ihr Event.' }
];

const speakerIcons = ['linearray', 'subwoofer', 'pointsource', 'column', 'monitor', 'movinghead'];

interface EquipmentItem {
  id: number;
  name: string;
  number: string | null;
  category: string | null;
  image_url: string | null;
  available: boolean;
}

export default function Index() {
  const navigate = useNavigate();
  const [highlights, setHighlights] = useState<EquipmentItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/equipment?page_size=6&sort=name_asc')
      .then(r => r.json())
      .then(data => {
        setHighlights(data.items || []);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  function goTo(route: string) {
    navigate(route);
    window.scrollTo(0, 0);
  }

  return (
    <div>
      <section className="hms-hero py-20 sm:py-32" aria-labelledby="hero-title">
        <div className="hms-hero-bg" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=1920&q=80')" }}></div>
        <div className="hms-hero-overlay"></div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="max-w-2xl">
            <span className="hms-badge hms-badge-primary mb-4">Seit 2003 · Über 20 Jahre Veranstaltungstechnik</span>
            <h1 id="hero-title" className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6" style={{ color: 'var(--text)' }}>
              Professionelle Technik<br /><span style={{ color: 'var(--color-accent)' }}>für Ihre Veranstaltung</span>
            </h1>
            <p className="text-lg sm:text-xl mb-8 max-w-xl" style={{ color: 'var(--text-muted)' }}>
              Von der Firmenevent-Beschallung bis zur Open-Air-Großproduktion: HMS Licht & Ton liefert Tontechnik, Lichttechnik, Rigging und Komplettlösungen aus Leipheim und Ellzee.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <button onClick={() => goTo('/mietkatalog')} className="hms-btn hms-btn-primary text-base px-8 py-4">
                Mietkatalog öffnen
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
              </button>
              <button onClick={() => goTo('/kontakt')} className="hms-btn hms-btn-secondary text-base px-8 py-4">Beratung anfragen</button>
            </div>
          </div>
        </div>
      </section>

      <section className="py-12 sm:py-16" style={{ background: 'var(--bg)' }} aria-labelledby="speaker-title">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="mb-8">
            <span className="text-sm font-semibold uppercase tracking-wider" style={{ color: 'var(--color-accent)' }}>Equipment-Highlights</span>
            <h2 id="speaker-title" className="text-2xl sm:text-3xl font-bold mt-1" style={{ color: 'var(--text)' }}>Lautsprecher & Strahler aus unserem Mietlager</h2>
          </div>
          <div className="hms-speaker-grid">
            {loading ? (
              Array.from({ length: 6 }).map((_, i) => (
                <div key={i} className="hms-speaker-item">
                  <div className="hms-skeleton h-12 w-12 rounded mx-auto mb-2"></div>
                  <div className="hms-skeleton h-4 w-3/4 mx-auto mb-1"></div>
                  <div className="hms-skeleton h-3 w-1/2 mx-auto"></div>
                </div>
              ))
            ) : (
              highlights.map((item, i) => (
                <div key={item.id} className="hms-speaker-item" onClick={() => goTo('/mietkatalog')} role="button" tabIndex={0} onKeyDown={(e) => e.key === 'Enter' && goTo('/mietkatalog')}>
                  <SpeakerIcon type={speakerIcons[i % speakerIcons.length]} />
                  <div className="hms-speaker-name">{item.name}</div>
                  <div className="hms-speaker-type">{item.category || 'Equipment'}</div>
                </div>
              ))
            )}
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-20" style={{ background: 'var(--panel)' }} aria-labelledby="about-title">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <span className="text-sm font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--color-accent)' }}>Unternehmen</span>
              <h2 id="about-title" className="text-3xl sm:text-4xl font-bold mb-6" style={{ color: 'var(--text)' }}>Ihr Technik-Partner mit Erfahrung</h2>
              <p className="leading-relaxed mb-4" style={{ color: 'var(--text-muted)' }}>Die <strong style={{ color: 'var(--text)' }}>Hammerschmidt u. Mössle GbR</strong> ist seit 2003 Ihr zuverlässiger Partner für Veranstaltungstechnik in der Region Leipheim / Ellzee und im gesamten süddeutschen Raum.</p>
              <p className="leading-relaxed mb-4" style={{ color: 'var(--text-muted)' }}>Mit einem Mietlager von über 1.000 Geräten, einer eigenen Werkstatt und erfahrenem Personal realisieren wir Veranstaltungen jeder Größenordnung.</p>
              <div className="grid grid-cols-3 gap-4 mt-8">
                <div className="text-center"><div className="text-3xl font-bold" style={{ color: 'var(--color-accent)' }}>20+</div><div className="text-sm" style={{ color: 'var(--secondary)' }}>Jahre Erfahrung</div></div>
                <div className="text-center"><div className="text-3xl font-bold" style={{ color: 'var(--color-accent)' }}>1.000+</div><div className="text-sm" style={{ color: 'var(--secondary)' }}>Geräte im Lager</div></div>
                <div className="text-center"><div className="text-3xl font-bold" style={{ color: 'var(--color-accent)' }}>2</div><div className="text-sm" style={{ color: 'var(--secondary)' }}>Standorte</div></div>
              </div>
            </div>
            <div className="relative">
              <div className="aspect-[4/3] rounded-lg overflow-hidden shadow-xl">
                <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=800&q=80" alt="Veranstaltungstechnik Setup" loading="lazy" className="w-full h-full object-cover" />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-20" style={{ background: 'var(--bg)' }} aria-labelledby="services-title">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <span className="text-sm font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--color-accent)' }}>Leistungen</span>
            <h2 id="services-title" className="text-3xl sm:text-4xl font-bold" style={{ color: 'var(--text)' }}>Von der Vermietung bis zur Komplettbetreuung</h2>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {services.map((s) => (
              <ServiceCard key={s.title} icon={s.icon} title={s.title} description={s.description} />
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-20" style={{ background: 'var(--panel)' }} aria-labelledby="rental-title">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="rounded-lg p-8 sm:p-12 lg:p-16 text-center" style={{ background: 'var(--bg)', border: '1px solid var(--border)' }}>
            <h2 id="rental-title" className="text-3xl sm:text-4xl font-bold mb-4" style={{ color: 'var(--text)' }}>Online-Mietkatalog</h2>
            <p className="max-w-2xl mx-auto mb-8" style={{ color: 'var(--text-muted)' }}>Durchsuchen Sie unser Equipment-Sortiment und stellen Sie Ihre Mietanfrage direkt online zusammen.</p>
            <button onClick={() => goTo('/mietkatalog')} className="hms-btn hms-btn-primary text-base px-8 py-4">
              Katalog durchsuchen
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}
