'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 { t, useLanguage } from '@/lib/i18n';

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

const homeCopy = {
  en: {
    title: 'La Huasca',
    subtitle: 'A mountain retreat with warm hospitality and local flavor.',
    highlights: ['common.hotel', 'common.restaurant', 'common.andean_highlands'],
  },
  es: {
    title: 'La Huasca',
    subtitle: 'Un refugio de montaña con hospitalidad cálida y sabor local.',
    highlights: ['common.hotel', 'common.restaurant', 'common.andean_highlands'],
  },
} as const;

const fallbackTaglineKey = 'common.home_tagline';

export default function HomePage() {
  const language = useLanguage();
  const [tagline, setTagline] = useState(t(fallbackTaglineKey, language));

  useEffect(() => {
    let cancelled = false;
    const fallbackTagline = t(fallbackTaglineKey, language);
    setTagline(fallbackTagline);
    fetch('/api/site-assets?key=tagline')
      .then((r) => r.json())
      .then((j) => {
        if (!cancelled && j.data) setTagline(j.data);
      })
      .catch(() => {});

    return () => {
      cancelled = true;
    };
  }, [language]);

  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 />

      <section
        style={{
          padding: 'clamp(3rem, 9vw, 7rem) 2rem',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          textAlign: 'center',
        }}
      >
        <p
          style={{
            fontFamily: 'monospace',
            fontSize: '12px',
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: gold,
            margin: '0 0 1rem',
          }}
        >
          {tagline}
        </p>
        <h1
          style={{
            fontSize: 'clamp(44px, 7vw, 84px)',
            fontWeight: 400,
            fontStyle: 'italic',
            lineHeight: 1.08,
            margin: '0 0 1.25rem',
            color: cream,
          }}
        >
          {copy.title}
        </h1>
        <p style={{ fontSize: '18px', lineHeight: 1.55, color: 'rgba(245,240,232,0.78)', maxWidth: '52ch', margin: '0 0 2rem' }}>
          {copy.highlights.map((key, index) => (
            <span key={key}>
              {t(key, language)}
              {index < copy.highlights.length - 1 ? ' · ' : ''}
            </span>
          ))}
        </p>
        <p style={{ fontSize: '16px', lineHeight: 1.65, color: 'rgba(245,240,232,0.7)', maxWidth: '58ch', margin: 0 }}>
          {copy.subtitle}
        </p>
      </section>

      <CalendarStrip />
    </main>
  );
}