'use client';

import { useEffect, useState } from 'react';
import Slideshow from '@/components/Slideshow';
import CalendarStrip from '@/components/CalendarStrip';
import WeatherWidget from '@/components/WeatherWidget';
import LanguageSwitcher from '@/components/LanguageSwitcher';
import Link from 'next/link';
import { t, useLanguage } from '@/lib/i18n';

const gold = '#E8A849';
const navy = '#010D1E';
const cream = '#f5f0e8';

const homeCopy = {
  en: {
    tagline: 'Welcome to the Heart of Imbabura',
    cta_rooms: 'Book a Room',
    cta_menu: 'View Our Menu',
    cta_contact: 'Contact Us',
  },
  es: {
    tagline: 'Bienvenidos al Corazón de Imbabura',
    cta_rooms: 'Reservar Habitación',
    cta_menu: 'Ver Menú',
    cta_contact: 'Contáctenos',
  },
} as const;

export default function HomePage() {
  const language = useLanguage();
  const copy = homeCopy[language];

  return (
    <main style={{ minHeight: 'calc(100vh - 56px)', background: navy, color: cream }}>
      <LanguageSwitcher />
      <div style={{ position: 'absolute', top: '4rem', right: '1rem', zIndex: 10 }}>
        <WeatherWidget />
      </div>

      <Slideshow />

      {/* Compact CTA section */}
      <section
        style={{
          padding: 'clamp(1.5rem, 4vw, 2.5rem) 2rem',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          textAlign: 'center',
          gap: '1.5rem',
        }}
      >
        <p
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: gold,
            margin: 0,
          }}
        >
          {copy.tagline}
        </p>

        {/* CTA Buttons */}
        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
          <Link
            href="/rooms"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '0.5rem',
              padding: '0.875rem 1.75rem',
              background: gold,
              color: navy,
              fontWeight: 600,
              fontSize: '15px',
              borderRadius: '8px',
              textDecoration: 'none',
              transition: 'transform 200ms, box-shadow 200ms',
              boxShadow: '0 4px 12px rgba(232,168,73,0.25)',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-2px)';
              e.currentTarget.style.boxShadow = '0 6px 20px rgba(232,168,73,0.35)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.boxShadow = '0 4px 12px rgba(232,168,73,0.25)';
            }}
          >
            🛏️ {copy.cta_rooms}
          </Link>
          <Link
            href="/menu"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '0.5rem',
              padding: '0.875rem 1.75rem',
              background: 'transparent',
              color: cream,
              fontWeight: 600,
              fontSize: '15px',
              borderRadius: '8px',
              textDecoration: 'none',
              border: `2px solid ${gold}`,
              transition: 'background 200ms, color 200ms',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = gold;
              e.currentTarget.style.color = navy;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = 'transparent';
              e.currentTarget.style.color = cream;
            }}
          >
            🍽️ {copy.cta_menu}
          </Link>
          <Link
            href="/contact"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '0.5rem',
              padding: '0.875rem 1.75rem',
              background: 'transparent',
              color: 'rgba(245,240,232,0.8)',
              fontWeight: 600,
              fontSize: '15px',
              borderRadius: '8px',
              textDecoration: 'none',
              border: '2px solid rgba(245,240,232,0.3)',
              transition: 'border-color 200ms, color 200ms',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = 'rgba(245,240,232,0.6)';
              e.currentTarget.style.color = cream;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = 'rgba(245,240,232,0.3)';
              e.currentTarget.style.color = 'rgba(245,240,232,0.8)';
            }}
          >
            ✉️ {copy.cta_contact}
          </Link>
        </div>
      </section>

      <CalendarStrip />
    </main>
  );
}