Campingbus von Dan

import { useState } from 'react';

const icons = {
  group: '👥',
  sleep: '🛏️',
  tent: '⛺',
  rack: '🔧',
  flex: '✨',
  mattress: '🌙',
};

export default function BulliListing() {
  const [hovered, setHovered] = useState(null);

  const features = [
    {
      id: 'seats',
      icon: '👥',
      title: 'Klappbare Sitzbänke',
      desc: 'Zugewandte Sitze hinten – perfekt für Gruppen und gemütliche Fahrten. Einfach umklappen und fertig.',
    },
    {
      id: 'sleep',
      icon: '🛏️',
      title: 'Schlafen im Bulli',
      desc: 'Sitze umgeklappt entsteht eine bequeme Schlaffläche. Ideal mit aufblasbarer oder faltbarer Matratze.',
    },
    {
      id: 'tent',
      icon: '⛺',
      title: 'Ideal für Zelt-Abenteuer',
      desc: 'Der perfekte Begleiter für Gruppen mit Zelt. Flexibel, unkompliziert, abenteuerbereit.',
    },
    {
      id: 'rack',
      icon: '🔧',
      title: 'Dachträger optional',
      desc: 'Gegen Aufpreis mit Dachträger mietbar. Mehr Stauraum für dein Gepäck.',
    },
  ];

  return (
    <div style={{
      minHeight: '100vh',
      background: '#f5f0e8',
      fontFamily: '\'Georgia\', \'Times New Roman\', serif',
      color: '#1a1208',
      padding: '0',
      overflow: 'hidden',
    }}>
      <style>{`
        @import url(\'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Lato:wght@300;400;700&display=swap\');
       
        * { box-sizing: border-box; margin: 0; padding: 0; }
       
        .bulli-hero {
          background: #1a1208;
          color: #f5f0e8;
          padding: 80px 40px 60px;
          position: relative;
          overflow: hidden;
        }
       
        .bulli-hero::before {
          content: \'\';
          position: absolute;
          top: -60px; right: -60px;
          width: 400px; height: 400px;
          border-radius: 50%;
          background: radial-gradient(circle, #c4943a33, transparent 70%);
          pointer-events: none;
        }
       
        .bulli-hero::after {
          content: \'🚐\';
          position: absolute;
          bottom: 20px; right: 40px;
          font-size: 120px;
          opacity: 0.08;
          transform: scaleX(-1);
        }
       
        .tag {
          display: inline-block;
          background: #c4943a;
          color: #1a1208;
          font-family: \'Lato\', sans-serif;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 3px;
          text-transform: uppercase;
          padding: 6px 16px;
          margin-bottom: 24px;
        }
       
        .hero-title {
          font-family: \'Playfair Display\', serif;
          font-size: clamp(48px, 8vw, 88px);
          font-weight: 900;
          line-height: 0.95;
          margin-bottom: 8px;
        }
       
        .hero-subtitle {
          font-family: \'Playfair Display\', serif;
          font-style: italic;
          font-size: clamp(22px, 4vw, 36px);
          color: #c4943a;
          margin-bottom: 32px;
        }
       
        .hero-desc {
          font-family: \'Lato\', sans-serif;
          font-weight: 300;
          font-size: 16px;
          line-height: 1.8;
          max-width: 520px;
          color: #d4c9b4;
          border-left: 2px solid #c4943a;
          padding-left: 20px;
        }
       
        .badge-row {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
          margin-top: 40px;
        }
       
        .badge {
          background: transparent;
          border: 1px solid #c4943a66;
          color: #c4943a;
          font-family: \'Lato\', sans-serif;
          font-size: 12px;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          padding: 8px 18px;
        }
       
        .features-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 0;
        }
       
        @media (max-width: 600px) {
          .features-grid { grid-template-columns: 1fr; }
        }
       
        .feature-card {
          padding: 40px 36px;
          border-right: 1px solid #d4c9b444;
          border-bottom: 1px solid #d4c9b444;
          cursor: pointer;
          transition: background 0.3s ease;
          position: relative;
        }
       
        .feature-card:nth-child(2n) { border-right: none; }
        .feature-card:nth-child(3), .feature-card:nth-child(4) { border-bottom: none; }
       
        .feature-card.active {
          background: #ede8dc;
        }
       
        .feature-icon {
          font-size: 32px;
          margin-bottom: 16px;
          display: block;
          transition: transform 0.3s;
        }
       
        .feature-card.active .feature-icon {
          transform: scale(1.2);
        }
       
        .feature-title {
          font-family: \'Playfair Display\', serif;
          font-size: 20px;
          font-weight: 700;
          margin-bottom: 10px;
          color: #1a1208;
        }
       
        .feature-desc {
          font-family: \'Lato\', sans-serif;
          font-weight: 300;
          font-size: 14px;
          line-height: 1.7;
          color: #5a4a30;
        }
       
        .accent-line {
          width: 0;
          height: 2px;
          background: #c4943a;
          transition: width 0.4s ease;
          margin-bottom: 14px;
        }
       
        .feature-card.active .accent-line { width: 40px; }
       
        .cta-section {
          background: #c4943a;
          padding: 60px 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 24px;
        }
       
        .cta-text {
          font-family: \'Playfair Display\', serif;
          font-size: 28px;
          font-weight: 700;
          color: #1a1208;
          max-width: 400px;
        }
       
        .cta-text em {
          font-style: italic;
          font-weight: 400;
        }
       
        .cta-btn {
          background: #1a1208;
          color: #f5f0e8;
          border: none;
          font-family: \'Lato\', sans-serif;
          font-size: 13px;
          letter-spacing: 2.5px;
          text-transform: uppercase;
          padding: 18px 40px;
          cursor: pointer;
          transition: background 0.2s;
        }
       
        .cta-btn:hover { background: #2d1e0a; }
       
        .footer-note {
          background: #ede8dc;
          padding: 24px 40px;
          font-family: \'Lato\', sans-serif;
          font-size: 13px;
          color: #8a7460;
          text-align: center;
          letter-spacing: 0.5px;
        }
       
        .footer-note strong { color: #1a1208; }
      `}</style>

      {/* Hero */}
      <div className='bulli-hero'>
        <div className='tag'>Camper Vermietung</div>
        <div className='hero-title'>Unser</div>
        <div className='hero-title'>Bulli.</div>
        <div className='hero-subtitle'>Minimal. Flexibel. Unvergesslich.</div>
        <p className='hero-desc'>
          Der klassische VW-Bus, neu gedacht für dein Abenteuer.
          Klappbare Sitzbänke, Platz zum Schlafen, offen für alles –
          der Bulli passt sich dir an, nicht umgekehrt.
        </p>
        <div className='badge-row'>
          <span className='badge'>Gruppen</span>
          <span className='badge'>Zelten</span>
          <span className='badge'>Roadtrip</span>
          <span className='badge'>Dachträger optional</span>
        </div>
      </div>

      {/* Features */}
      <div className='features-grid'>
        {features.map((f) => (
          <div
            key={f.id}
            className={`feature-card ${hovered === f.id ? 'active' : ''}`}
            onMouseEnter={() => setHovered(f.id)}
            onMouseLeave={() => setHovered(null)}
          >
            <span className='feature-icon'>{f.icon}</span>
            <div className='accent-line' />
            <div className='feature-title'>{f.title}</div>
            <p className='feature-desc'>{f.desc}</p>
          </div>
        ))}
      </div>

      {/* CTA */}
      <div className='cta-section'>
        <div className='cta-text'>
          Bereit für den <em>nächsten Trip?</em>
        </div>
        <button className='cta-btn'>Jetzt anfragen →</button>
      </div>

      {/* Footer note */}
      <div className='footer-note'>
        💡 <strong>Tipp:</strong> Am besten mit aufblasbarer oder faltbarer Matratze genießen — und natürlich deinem Lieblingszelt.
      </div>
    </div>
  );
}