'use client';

import { useEffect, useState } from 'react';
import Slideshow from '@/components/Slideshow';
import CalendarStrip from '@/components/CalendarStrip';
import MeasuredText from '@/components/MeasuredText';

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

export default function HomePage() {
  const [tagline, setTagline] = useState('Hotel · Restaurant · Andean Highlands');

  useEffect(() => {
    fetch('/api/site-assets?key=tagline')
      .then((r) => r.json())
      .then((j) => {
        if (j.data) setTagline(j.data);
      })
      .catch(() => {});
  }, []);

  return (
    <main style={{ minHeight: 'calc(100vh - 56px)', background: navy, color: cream }}>
      <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,
          }}
        >
          La Huasca
        </h1>
        <p style={{ fontSize: '18px', lineHeight: 1.55, color: 'rgba(245,240,232,0.78)', maxWidth: '52ch', margin: '0 0 2rem' }}>
          Hotel · Restaurant · Andean Highlands
        </p>
      </section>

      <CalendarStrip />
    </main>
  );
}