import { Hono } from 'hono'
import { cors } from 'hono/cors'
import { serveStatic } from 'hono/cloudflare-workers'

type Bindings = {
  DB: D1Database
}

const app = new Hono<{ Bindings: Bindings }>()

// Enable CORS for API routes
app.use('/api/*', cors())

// Serve static files
app.use('/static/*', serveStatic({ root: './public' }))

// ======================
// API ROUTES
// ======================

// Get all vehicles
app.get('/api/vehicles', async (c) => {
  const { DB } = c.env
  
  try {
    const { results } = await DB.prepare(`
      SELECT * FROM vehicles WHERE active = 1 ORDER BY category, name
    `).all()
    
    return c.json({ success: true, data: results })
  } catch (error) {
    console.error('Error fetching vehicles:', error)
    return c.json({ success: false, error: 'Failed to fetch vehicles' }, 500)
  }
})

// Get vehicle by ID with all service prices
app.get('/api/vehicles/:id', async (c) => {
  const { DB } = c.env
  const id = c.req.param('id')
  
  try {
    const vehicle = await DB.prepare(`
      SELECT * FROM vehicles WHERE id = ? AND active = 1
    `).bind(id).first()
    
    if (!vehicle) {
      return c.json({ success: false, error: 'Vehicle not found' }, 404)
    }
    
    return c.json({ success: true, data: vehicle })
  } catch (error) {
    console.error('Error fetching vehicle:', error)
    return c.json({ success: false, error: 'Failed to fetch vehicle' }, 500)
  }
})

// Get all extra services
app.get('/api/extras', async (c) => {
  const { DB } = c.env
  
  try {
    const { results } = await DB.prepare(`
      SELECT * FROM extra_services WHERE active = 1 ORDER BY category, name
    `).all()
    
    return c.json({ success: true, data: results })
  } catch (error) {
    console.error('Error fetching extras:', error)
    return c.json({ success: false, error: 'Failed to fetch extras' }, 500)
  }
})

// Create booking
app.post('/api/bookings', async (c) => {
  const { DB } = c.env
  
  try {
    const body = await c.req.json()
    
    // Generate unique booking code
    const bookingCode = 'SOL' + Date.now().toString(36).toUpperCase() + Math.random().toString(36).substring(2, 6).toUpperCase()
    
    // Insert booking
    const result = await DB.prepare(`
      INSERT INTO bookings (
        booking_code, customer_name, customer_email, customer_phone, customer_nif,
        vehicle_id, vehicle_plate, vehicle_km,
        selected_services, selected_extras,
        preferred_date_1, preferred_time_1,
        preferred_date_2, preferred_time_2,
        preferred_date_3, preferred_time_3,
        observations, subtotal, extras_total, total_amount, payment_type,
        payment_status, service_status
      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
    `).bind(
      bookingCode,
      body.customer_name,
      body.customer_email,
      body.customer_phone,
      body.customer_nif || null,
      body.vehicle_id,
      body.vehicle_plate || null,
      body.vehicle_km || null,
      JSON.stringify(body.selected_services),
      JSON.stringify(body.selected_extras || []),
      body.preferred_date_1,
      body.preferred_time_1,
      body.preferred_date_2 || null,
      body.preferred_time_2 || null,
      body.preferred_date_3 || null,
      body.preferred_time_3 || null,
      body.observations || null,
      body.subtotal,
      body.extras_total || 0,
      body.total_amount,
      body.payment_type || 'full',
      'pending',
      'scheduled'
    ).run()
    
    // Add status history
    await DB.prepare(`
      INSERT INTO status_history (booking_id, new_status, changed_by, notes)
      VALUES (?, 'scheduled', 'system', 'Agendamento criado')
    `).bind(result.meta.last_row_id).run()
    
    return c.json({
      success: true,
      data: {
        booking_code: bookingCode,
        booking_id: result.meta.last_row_id
      }
    })
  } catch (error) {
    console.error('Error creating booking:', error)
    return c.json({ success: false, error: 'Failed to create booking' }, 500)
  }
})

// Get booking by code (for tracking)
app.get('/api/bookings/:code', async (c) => {
  const { DB } = c.env
  const code = c.req.param('code')
  
  try {
    const booking = await DB.prepare(`
      SELECT 
        b.*,
        v.name as vehicle_name,
        v.model_year,
        v.engine_type
      FROM bookings b
      LEFT JOIN vehicles v ON b.vehicle_id = v.id
      WHERE b.booking_code = ?
    `).bind(code).first()
    
    if (!booking) {
      return c.json({ success: false, error: 'Booking not found' }, 404)
    }
    
    // Get status history
    const { results: history } = await DB.prepare(`
      SELECT * FROM status_history WHERE booking_id = ? ORDER BY created_at DESC
    `).bind(booking.id).all()
    
    return c.json({
      success: true,
      data: {
        ...booking,
        selected_services: JSON.parse(booking.selected_services as string),
        selected_extras: JSON.parse(booking.selected_extras as string || '[]'),
        history
      }
    })
  } catch (error) {
    console.error('Error fetching booking:', error)
    return c.json({ success: false, error: 'Failed to fetch booking' }, 500)
  }
})

// Admin: Get all bookings
app.get('/api/admin/bookings', async (c) => {
  const { DB } = c.env
  
  try {
    const { results } = await DB.prepare(`
      SELECT 
        b.*,
        v.name as vehicle_name,
        v.model_year
      FROM bookings b
      LEFT JOIN vehicles v ON b.vehicle_id = v.id
      ORDER BY b.created_at DESC
    `).all()
    
    return c.json({ success: true, data: results })
  } catch (error) {
    console.error('Error fetching bookings:', error)
    return c.json({ success: false, error: 'Failed to fetch bookings' }, 500)
  }
})

// Admin: Update booking status
app.patch('/api/admin/bookings/:id/status', async (c) => {
  const { DB } = c.env
  const id = c.req.param('id')
  const { status, notes } = await c.req.json()
  
  try {
    // Get current status
    const booking = await DB.prepare(`
      SELECT service_status FROM bookings WHERE id = ?
    `).bind(id).first()
    
    if (!booking) {
      return c.json({ success: false, error: 'Booking not found' }, 404)
    }
    
    // Update status
    await DB.prepare(`
      UPDATE bookings SET service_status = ?, updated_at = CURRENT_TIMESTAMP
      WHERE id = ?
    `).bind(status, id).run()
    
    // Add to history
    await DB.prepare(`
      INSERT INTO status_history (booking_id, old_status, new_status, changed_by, notes)
      VALUES (?, ?, ?, 'admin', ?)
    `).bind(id, booking.service_status, status, notes || null).run()
    
    return c.json({ success: true, message: 'Status updated successfully' })
  } catch (error) {
    console.error('Error updating status:', error)
    return c.json({ success: false, error: 'Failed to update status' }, 500)
  }
})

// Admin: Update vehicle prices
app.patch('/api/admin/vehicles/:id', async (c) => {
  const { DB } = c.env
  const id = c.req.param('id')
  const data = await c.req.json()
  
  try {
    await DB.prepare(`
      UPDATE vehicles SET
        interim_service_price = ?,
        major_service_price = ?,
        front_pads_price = ?,
        front_pads_discs_price = ?,
        rear_pads_price = ?,
        rear_pads_discs_price = ?,
        cambelt_price = ?,
        brake_fluid_price = ?,
        front_wipers_price = ?
      WHERE id = ?
    `).bind(
      data.interim_service_price,
      data.major_service_price,
      data.front_pads_price,
      data.front_pads_discs_price,
      data.rear_pads_price,
      data.rear_pads_discs_price,
      data.cambelt_price,
      data.brake_fluid_price,
      data.front_wipers_price,
      id
    ).run()
    
    return c.json({ success: true, message: 'Vehicle updated successfully' })
  } catch (error) {
    console.error('Error updating vehicle:', error)
    return c.json({ success: false, error: 'Failed to update vehicle' }, 500)
  }
})

// Admin: Add new extra service
app.post('/api/admin/extras', async (c) => {
  const { DB } = c.env
  const data = await c.req.json()
  
  try {
    const result = await DB.prepare(`
      INSERT INTO extra_services (name, description, price, category)
      VALUES (?, ?, ?, ?)
    `).bind(
      data.name,
      data.description,
      data.price,
      data.category || 'maintenance'
    ).run()
    
    return c.json({ success: true, data: { id: result.meta.last_row_id } })
  } catch (error) {
    console.error('Error adding extra service:', error)
    return c.json({ success: false, error: 'Failed to add extra service' }, 500)
  }
})

// Admin: Update extra service
app.patch('/api/admin/extras/:id', async (c) => {
  const { DB } = c.env
  const id = c.req.param('id')
  const data = await c.req.json()
  
  try {
    await DB.prepare(`
      UPDATE extra_services SET
        name = ?,
        description = ?,
        price = ?,
        category = ?
      WHERE id = ?
    `).bind(
      data.name,
      data.description,
      data.price,
      data.category,
      id
    ).run()
    
    return c.json({ success: true, message: 'Extra service updated successfully' })
  } catch (error) {
    console.error('Error updating extra service:', error)
    return c.json({ success: false, error: 'Failed to update extra service' }, 500)
  }
})

// Admin: Delete extra service
app.delete('/api/admin/extras/:id', async (c) => {
  const { DB } = c.env
  const id = c.req.param('id')
  
  try {
    await DB.prepare(`
      UPDATE extra_services SET active = 0 WHERE id = ?
    `).bind(id).run()
    
    return c.json({ success: true, message: 'Extra service deleted successfully' })
  } catch (error) {
    console.error('Error deleting extra service:', error)
    return c.json({ success: false, error: 'Failed to delete extra service' }, 500)
  }
})

// ======================
// FRONTEND PAGES
// ======================

// Main landing page
app.get('/', (c) => {
  return c.html(`
    <!DOCTYPE html>
    <html lang="pt">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Solihull Service - Revisões e Manutenção Land Rover & Jaguar</title>
        <meta name="description" content="Serviço Oficial Land Rover e Jaguar em Portugal. Revisões e manutenções certificadas com padrão premium.">
        <script src="https://cdn.tailwindcss.com"></script>
        <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">
        <style>
          @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
          
          * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }
          
          body {
            font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
            letter-spacing: 0.3px;
            background: #000000;
          }
          
          h1, h2, h3, h4, h5, h6 {
            font-family: 'Rajdhani', 'Bebas Neue', sans-serif;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
          }
          
          .hero-gradient {
            background: linear-gradient(165deg, 
              #000000 0%, 
              #0a1408 15%, 
              #0d2012 30%, 
              #003d1f 45%,
              #005c2f 60%,
              #1a3a28 75%,
              #0f1f15 90%,
              #000000 100%
            );
            position: relative;
            overflow: hidden;
          }
          
          .hero-gradient::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
              radial-gradient(ellipse at 20% 30%, rgba(201, 169, 97, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 70%, rgba(0, 93, 47, 0.25) 0%, transparent 60%),
              radial-gradient(circle at 50% 50%, rgba(201, 169, 97, 0.08) 0%, transparent 70%);
            pointer-events: none;
            animation: gradientShift 15s ease infinite;
          }
          
          @keyframes gradientShift {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
          }
          
          .card-hover {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(201, 169, 97, 0.3);
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(10, 32, 18, 0.7) 100%);
            position: relative;
            overflow: hidden;
          }
          
          .card-hover::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(201, 169, 97, 0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
          }
          
          .card-hover:hover::before {
            opacity: 1;
          }
          
          .card-hover:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 30px 60px rgba(201, 169, 97, 0.4), 0 0 80px rgba(0, 93, 47, 0.3);
            border-color: #C9A961;
          }
          
          .btn-primary {
            background: linear-gradient(135deg, #C9A961 0%, #B8935A 50%, #A68251 100%);
            transition: all 0.3s ease;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            border: 2px solid #C9A961;
            position: relative;
            overflow: hidden;
          }
          
          .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s ease;
          }
          
          .btn-primary:hover::before {
            left: 100%;
          }
          
          .btn-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 35px rgba(201, 169, 97, 0.6), 0 0 50px rgba(201, 169, 97, 0.4);
            background: linear-gradient(135deg, #D4B56E 0%, #C9A961 50%, #B8935A 100%);
          }
          
          .accent-gold {
            color: #C9A961;
          }
          
          .bg-accent-gold {
            background-color: #C9A961;
          }
          
          .text-luxury {
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            letter-spacing: 3px;
          }
          
          .bg-dark-premium {
            background: linear-gradient(135deg, #000000 0%, #0a1408 25%, #0d1a10 50%, #0a1408 75%, #000000 100%);
          }
          
          .bg-green-gradient {
            background: linear-gradient(135deg, #003d1f 0%, #005c2f 50%, #003d1f 100%);
          }
          
          .bg-gold-gradient {
            background: linear-gradient(135deg, #C9A961 0%, #B8935A 50%, #A68251 100%);
          }
          
          .text-gradient-gold {
            background: linear-gradient(135deg, #D4B56E 0%, #C9A961 50%, #B8935A 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
          }
          
          .border-gradient {
            border-image: linear-gradient(135deg, #C9A961 0%, #005c2f 50%, #C9A961 100%) 1;
          }
          
          .border-gold {
            border-color: #C9A961;
          }
          
          .shadow-gold {
            box-shadow: 0 10px 30px rgba(201, 169, 97, 0.3);
          }
          
          section {
            position: relative;
          }
          
          @keyframes fadeInUp {
            from {
              opacity: 0;
              transform: translateY(30px);
            }
            to {
              opacity: 1;
              transform: translateY(0);
            }
          }
          
          .animate-fade-in {
            animation: fadeInUp 0.8s ease-out forwards;
          }
          
          /* Garantir visibilidade dos textos */
          .card-hover h3 {
            color: #ffffff !important;
          }
          
          .card-hover p {
            color: #d1d5db !important;
          }
          
          .card-hover .text-gold {
            color: #C9A961 !important;
          }
        </style>
    </head>
    <body class="bg-black">
        <!-- Header -->
        <header class="fixed top-0 left-0 right-0 z-50 backdrop-blur-md border-b border-gold/20" style="background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(10, 20, 8, 0.95) 50%, rgba(0, 0, 0, 0.95) 100%);">
            <div class="container mx-auto px-6 py-4 flex justify-between items-center">
                <div class="flex items-center space-x-4">
                    <div class="border-2 border-gold px-6 py-2" style="box-shadow: 0 0 15px rgba(201, 169, 97, 0.5);">
                        <span class="text-2xl font-black tracking-widest text-white" style="font-family: 'Bebas Neue', sans-serif; letter-spacing: 4px;">SOLIHULL</span>
                    </div>
                </div>
                <nav class="hidden lg:flex space-x-8 items-center">
                    <a href="#configurator" class="text-luxury text-white hover:text-gradient-gold transition text-sm">SERVIÇOS</a>
                    <a href="#como-funciona" class="text-luxury text-white hover:text-gradient-gold transition text-sm">COMO FUNCIONA</a>
                    <a href="#contacto" class="text-luxury text-white hover:text-gradient-gold transition text-sm">CONTACTO</a>
                    <a href="/track" class="text-luxury text-white hover:text-gradient-gold transition text-sm">ACOMPANHAR</a>
                </nav>
                <button onclick="scrollToConfigurator()" class="btn-primary text-black px-8 py-3 rounded-sm text-sm">
                    AGENDAR AGORA
                </button>
            </div>
        </header>

        <!-- Hero Section -->
        <section class="hero-gradient text-white pt-40 pb-32 mt-16 min-h-screen flex items-center">
            <div class="container mx-auto px-6 text-center relative z-10">
                <div class="inline-block mb-12 animate-fade-in">
                    <div class="border-4 border-gold px-12 py-6 bg-white/5 backdrop-blur-sm" style="box-shadow: 0 0 30px rgba(201, 169, 97, 0.6);">
                        <h1 class="text-6xl font-black tracking-widest text-white" style="font-family: 'Bebas Neue', sans-serif; letter-spacing: 8px;">SOLIHULL</h1>
                    </div>
                </div>
                
                <h1 class="text-6xl md:text-8xl lg:text-9xl font-bold mb-8 leading-none tracking-wider animate-fade-in">
                    <span class="block text-white">LAND ROVER</span>
                    <span class="block accent-gold">& JAGUAR</span>
                    <span class="block text-white text-5xl md:text-6xl mt-4 tracking-widest">SERVICE</span>
                </h1>
                
                <div class="w-24 h-1 bg-gold mx-auto mb-8"></div>
                
                <p class="text-lg md:text-xl mb-12 text-gray-300 max-w-2xl mx-auto tracking-wide leading-relaxed">
                    Revisões e manutenções certificadas com padrão premium.<br/>
                    Especialistas em veículos Land Rover e Jaguar em Portugal.
                </p>
                
                <div class="flex flex-col md:flex-row gap-6 justify-center items-center mb-16">
                    <button onclick="scrollToConfigurator()" class="btn-primary px-12 py-5 text-base shadow-gold">
                        CONFIGURAR SERVIÇO
                    </button>
                    <a href="/track" class="border-2 border-gold text-gold px-12 py-5 hover:bg-gold hover:text-black transition text-luxury text-base">
                        ACOMPANHAR STATUS
                    </a>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-12 max-w-4xl mx-auto">
                    <div class="border border-gold/20 p-8 backdrop-blur-sm card-hover">
                        <div class="text-6xl font-bold text-gradient-gold mb-3 text-luxury">23</div>
                        <div class="text-sm text-gray-400 uppercase tracking-widest">Modelos</div>
                    </div>
                    <div class="border border-gold/20 p-8 backdrop-blur-sm card-hover">
                        <div class="text-6xl font-bold text-gradient-gold mb-3 text-luxury">100%</div>
                        <div class="text-sm text-gray-400 uppercase tracking-widest">Peças Originais</div>
                    </div>
                    <div class="border border-gold/20 p-8 backdrop-blur-sm card-hover">
                        <div class="text-6xl font-bold text-gradient-gold mb-3 text-luxury">24H</div>
                        <div class="text-sm text-gray-400 uppercase tracking-widest">Resposta</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Service Configurator -->
        <section id="configurator" class="py-32 bg-black border-t border-gold/20">
            <div class="container mx-auto px-6">
                <div class="text-center mb-20">
                    <div class="inline-block mb-6">
                        <div class="border border-gold/30 px-6 py-3">
                            <span class="text-luxury text-gold text-xs tracking-widest">
                                CONFIGURADOR DE SERVIÇOS
                            </span>
                        </div>
                    </div>
                    <h2 class="text-5xl md:text-7xl font-bold text-white mb-6 tracking-wider">
                        O SEU SERVIÇO<br/>
                        <span class="accent-gold">À MEDIDA</span>
                    </h2>
                    <div class="w-24 h-1 bg-gold mx-auto mb-8"></div>
                    <p class="text-xl text-gray-400 max-w-3xl mx-auto tracking-wide">
                        Escolha o seu veículo e personalize os serviços que necessita.<br/>
                        Transparência total nos preços e processos.
                    </p>
                </div>
                
                <div id="app" class="max-w-7xl mx-auto">
                    <div class="text-center py-20">
                        <i class="fas fa-spinner fa-spin text-6xl text-gold mb-6"></i>
                        <p class="text-gray-400 text-lg tracking-wide">A CARREGAR CONFIGURADOR...</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- How It Works -->
        <section id="como-funciona" class="py-32 border-t border-gold/20" style="background: linear-gradient(180deg, #000000 0%, #0a1408 25%, #0d2012 50%, #0a1408 75%, #000000 100%);">
            <div class="container mx-auto px-6">
                <div class="text-center mb-20">
                    <div class="inline-block mb-6">
                        <div class="border border-gold/30 px-6 py-3">
                            <span class="text-luxury text-gold text-xs tracking-widest">
                                PROCESSO SIMPLES
                            </span>
                        </div>
                    </div>
                    <h2 class="text-5xl md:text-6xl font-bold text-white mb-6 tracking-wider">
                        COMO FUNCIONA
                    </h2>
                    <div class="w-24 h-1 bg-gold mx-auto"></div>
                </div>
                
                <div class="grid md:grid-cols-4 gap-8 max-w-6xl mx-auto">
                    <div class="text-center border border-gold/20 p-10 backdrop-blur-sm hover:border-gold/50 transition card-hover">
                        <div class="w-24 h-24 border-2 border-gold flex items-center justify-center mx-auto mb-8">
                            <span class="text-5xl font-bold text-gold text-luxury">01</span>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-white text-luxury tracking-widest">ESCOLHA</h3>
                        <div class="w-12 h-1 bg-gold/30 mx-auto mb-4"></div>
                        <p class="text-gray-400 text-sm leading-relaxed">Selecione o modelo e motorização do seu veículo</p>
                    </div>
                    
                    <div class="text-center border border-gold/20 p-10 backdrop-blur-sm hover:border-gold/50 transition card-hover">
                        <div class="w-24 h-24 border-2 border-gold flex items-center justify-center mx-auto mb-8">
                            <span class="text-5xl font-bold text-gold text-luxury">02</span>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-white text-luxury tracking-widest">CONFIGURE</h3>
                        <div class="w-12 h-1 bg-gold/30 mx-auto mb-4"></div>
                        <p class="text-gray-400 text-sm leading-relaxed">Personalize os serviços conforme as suas necessidades</p>
                    </div>
                    
                    <div class="text-center border border-gold/20 p-10 backdrop-blur-sm hover:border-gold/50 transition card-hover">
                        <div class="w-24 h-24 border-2 border-gold flex items-center justify-center mx-auto mb-8">
                            <span class="text-5xl font-bold text-gold text-luxury">03</span>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-white text-luxury tracking-widest">AGENDE</h3>
                        <div class="w-12 h-1 bg-gold/30 mx-auto mb-4"></div>
                        <p class="text-gray-400 text-sm leading-relaxed">Escolha a data e horário mais conveniente</p>
                    </div>
                    
                    <div class="text-center border border-gold/20 p-10 backdrop-blur-sm hover:border-gold/50 transition card-hover">
                        <div class="w-24 h-24 border-2 border-gold flex items-center justify-center mx-auto mb-8">
                            <span class="text-5xl font-bold text-gold text-luxury">04</span>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-white text-luxury tracking-widest">ACOMPANHE</h3>
                        <div class="w-12 h-1 bg-gold/30 mx-auto mb-4"></div>
                        <p class="text-gray-400 text-sm leading-relaxed">Monitorize o serviço em tempo real</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Certifications -->
        <section class="py-32 bg-black border-t border-gold/20">
            <div class="container mx-auto px-6">
                <div class="text-center mb-20">
                    <div class="inline-block mb-6">
                        <div class="border border-gold/30 px-6 py-3">
                            <span class="text-luxury text-gold text-xs tracking-widest">
                                EXCELÊNCIA CERTIFICADA
                            </span>
                        </div>
                    </div>
                    <h2 class="text-5xl md:text-6xl font-bold text-white tracking-wider">
                        GARANTIAS
                    </h2>
                    <div class="w-24 h-1 bg-gold mx-auto mt-6"></div>
                </div>
                
                <div class="grid md:grid-cols-3 gap-12 max-w-6xl mx-auto">
                    <div class="text-center border border-gold/20 p-12 backdrop-blur-sm hover:border-gold/50 transition card-hover">
                        <div class="w-20 h-20 border-2 border-gold mx-auto mb-8 flex items-center justify-center">
                            <i class="fas fa-certificate text-4xl text-gold"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-white text-luxury tracking-widest">OFICINA CERTIFICADA</h3>
                        <div class="w-12 h-1 bg-gold/30 mx-auto mb-4"></div>
                        <p class="text-gray-400 text-sm leading-relaxed">Serviço oficial Land Rover & Jaguar</p>
                    </div>
                    
                    <div class="text-center border border-gold/20 p-12 backdrop-blur-sm hover:border-gold/50 transition card-hover">
                        <div class="w-20 h-20 border-2 border-gold mx-auto mb-8 flex items-center justify-center">
                            <i class="fas fa-tools text-4xl text-gold"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-white text-luxury tracking-widest">PEÇAS ORIGINAIS</h3>
                        <div class="w-12 h-1 bg-gold/30 mx-auto mb-4"></div>
                        <p class="text-gray-400 text-sm leading-relaxed">100% peças genuínas de fábrica</p>
                    </div>
                    
                    <div class="text-center border border-gold/20 p-12 backdrop-blur-sm hover:border-gold/50 transition card-hover">
                        <div class="w-20 h-20 border-2 border-gold mx-auto mb-8 flex items-center justify-center">
                            <i class="fas fa-shield-alt text-4xl text-gold"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-white text-luxury tracking-widest">GARANTIA TOTAL</h3>
                        <div class="w-12 h-1 bg-gold/30 mx-auto mb-4"></div>
                        <p class="text-gray-400 text-sm leading-relaxed">Garantia em todos os serviços</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Fale Connosco Section -->
        <section id="contacto" class="py-20 text-white border-t border-gold/20" style="background: linear-gradient(135deg, #003d1f 0%, #005c2f 25%, #007a3f 50%, #005c2f 75%, #003d1f 100%); position: relative; overflow: hidden;">
            <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 50%, rgba(201, 169, 97, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(201, 169, 97, 0.1) 0%, transparent 60%); pointer-events: none;"></div>
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-4xl font-bold mb-4">Fale Connosco</h2>
                    <p class="text-xl text-green-100">Estamos prontos para oferecer suporte especializado para o seu Land Rover ou Jaguar</p>
                </div>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
                    <!-- Serviços -->
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center hover:bg-white/20 transition">
                        <i class="fas fa-wrench text-4xl mb-4 text-green-300"></i>
                        <h3 class="text-lg font-bold mb-3">Serviços e Assistência</h3>
                        <a href="mailto:service@solihull.pt" class="text-green-200 hover:text-white block mb-2">
                            <i class="fas fa-envelope mr-2"></i>
                            service@solihull.pt
                        </a>
                    </div>
                    
                    <!-- WhatsApp -->
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center hover:bg-white/20 transition">
                        <i class="fab fa-whatsapp text-4xl mb-4 text-green-300"></i>
                        <h3 class="text-lg font-bold mb-3">WhatsApp</h3>
                        <a href="https://wa.me/351969014920" target="_blank" class="text-green-200 hover:text-white block mb-2">
                            <i class="fab fa-whatsapp mr-2"></i>
                            +351 969 014 920
                        </a>
                    </div>
                    
                    <!-- Telefone -->
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center hover:bg-white/20 transition">
                        <i class="fas fa-phone text-4xl mb-4 text-green-300"></i>
                        <h3 class="text-lg font-bold mb-3">Telefone Fixo</h3>
                        <a href="tel:+351289419343" class="text-green-200 hover:text-white block mb-2">
                            <i class="fas fa-phone mr-2"></i>
                            +351 289 419 343
                        </a>
                    </div>
                    
                    <!-- Contabilidade -->
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center hover:bg-white/20 transition">
                        <i class="fas fa-calculator text-4xl mb-4 text-green-300"></i>
                        <h3 class="text-lg font-bold mb-3">Contabilidade</h3>
                        <a href="mailto:office@solihull.pt" class="text-green-200 hover:text-white block mb-2">
                            <i class="fas fa-envelope mr-2"></i>
                            office@solihull.pt
                        </a>
                    </div>
                </div>
                
                <div class="mt-12 text-center">
                    <h3 class="text-2xl font-bold mb-6">Siga-nos</h3>
                    <div class="flex justify-center gap-6">
                        <a href="https://linktr.ee/Solihull.lda" target="_blank" class="bg-white/10 hover:bg-white/20 rounded-full w-16 h-16 flex items-center justify-center transition">
                            <i class="fas fa-link text-2xl"></i>
                        </a>
                        <a href="https://instagram.com/solihull" target="_blank" class="bg-white/10 hover:bg-white/20 rounded-full w-16 h-16 flex items-center justify-center transition">
                            <i class="fab fa-instagram text-2xl"></i>
                        </a>
                        <a href="https://youtube.com/@solihull" target="_blank" class="bg-white/10 hover:bg-white/20 rounded-full w-16 h-16 flex items-center justify-center transition">
                            <i class="fab fa-youtube text-2xl"></i>
                        </a>
                    </div>
                </div>
                
                <div class="mt-12 text-center">
                    <p class="text-green-100 text-sm">
                        Atendimento rápido, eficiente e especializado. Conte com a Solihull.
                    </p>
                </div>
            </div>
        </section>

        <!-- Footer -->
        <footer class="bg-gray-900 text-white py-8">
            <div class="container mx-auto px-4 text-center">
                <p class="text-gray-400">&copy; 2025 Solihull Service. Todos os direitos reservados.</p>
                <p class="text-gray-500 text-sm mt-2">Land Rover & Jaguar Service Specialist in Portugal</p>
            </div>
        </footer>

        <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
        <script src="/static/app.js"></script>
        <script>
          function scrollToConfigurator() {
            document.getElementById('configurator').scrollIntoView({ behavior: 'smooth' });
          }
        </script>
    </body>
    </html>
  `)
})

// Tracking page
app.get('/track', (c) => {
  return c.html(`
    <!DOCTYPE html>
    <html lang="pt">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Acompanhar Serviço - Solihull</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">
    </head>
    <body class="bg-gray-50">
        <div class="min-h-screen flex items-center justify-center p-4">
            <div class="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full">
                <div class="text-center mb-8">
                    <i class="fas fa-map-marker-alt text-5xl text-green-800 mb-4"></i>
                    <h1 class="text-3xl font-bold text-gray-800 mb-2">Acompanhar Serviço</h1>
                    <p class="text-gray-600">Insira o seu código de agendamento</p>
                </div>
                
                <form id="trackForm" class="space-y-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Código de Agendamento</label>
                        <input 
                            type="text" 
                            id="bookingCode"
                            placeholder="SOL123ABC"
                            class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-green-800 focus:outline-none text-lg font-mono uppercase"
                            required
                        />
                    </div>
                    
                    <button 
                        type="submit"
                        class="w-full bg-green-800 text-white py-3 rounded-lg font-semibold hover:bg-green-900 transition"
                    >
                        <i class="fas fa-search mr-2"></i>
                        Consultar Status
                    </button>
                </form>
                
                <div id="trackingResult" class="mt-6 hidden"></div>
                
                <div class="mt-6 text-center">
                    <a href="/" class="text-green-800 hover:underline">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Voltar à página inicial
                    </a>
                </div>
            </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
        <script src="/static/track.js"></script>
    </body>
    </html>
  `)
})

// Admin panel
app.get('/admin', (c) => {
  return c.html(`
    <!DOCTYPE html>
    <html lang="pt">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Admin - Solihull Service</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">
    </head>
    <body class="bg-gray-100">
        <div class="min-h-screen">
            <!-- Header -->
            <header class="bg-green-800 text-white shadow-lg">
                <div class="container mx-auto px-4 py-4">
                    <h1 class="text-2xl font-bold">
                        <i class="fas fa-tachometer-alt mr-2"></i>
                        Painel Administrativo - Solihull Service
                    </h1>
                </div>
            </header>
            
            <!-- Main Content -->
            <div class="container mx-auto px-4 py-8">
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-2xl font-bold text-gray-800">Agendamentos</h2>
                        <button onclick="loadBookings()" class="bg-green-800 text-white px-4 py-2 rounded hover:bg-green-900">
                            <i class="fas fa-sync mr-2"></i>
                            Atualizar
                        </button>
                    </div>
                    
                    <div id="bookingsList">
                        <div class="text-center py-8">
                            <i class="fas fa-spinner fa-spin text-3xl text-gray-400"></i>
                            <p class="text-gray-600 mt-4">A carregar agendamentos...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
        <script src="/static/admin.js"></script>
    </body>
    </html>
  `)
})

export default app