import React, { useState, useEffect } from 'react';

const BoffoCountdown = () => {
  const [timeLeft, setTimeLeft] = useState('');
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      const now = new Date();
      const nextSunday = new Date(now);
      nextSunday.setDate(now.getDate() + (7 - now.getDay()) % 7);
      nextSunday.setHours(11, 30, 0, 0);

      if (now > nextSunday) {
        nextSunday.setDate(nextSunday.getDate() + 7);
      }

      const difference = nextSunday - now;
      const totalSeconds = 7 * 24 * 60 * 60;
      const secondsPassed = totalSeconds - Math.floor(difference / 1000);
      const progressPercentage = (secondsPassed / totalSeconds) * 100;

      const days = Math.floor(difference / (1000 * 60 * 60 * 24));
      const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((difference / 1000 / 60) % 60);
      const seconds = Math.floor((difference / 1000) % 60);

      setTimeLeft(`${days}d ${hours}h ${minutes}m ${seconds}s`);
      setProgress(progressPercentage);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div style={{
      fontFamily: "'Playfair Display', Georgia, serif",
      backgroundColor: '#f8f4e9',
      color: '#3a2f2d',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      padding: '20px',
      boxSizing: 'border-box',
      textAlign: 'center',
      position: 'relative',overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute',
        top: '10%',
        left:0,
        right: 0,
        backgroundColor: '#3a2f2d',
        color: '#f8f4e9',
        padding: '15px',
        textAlign: 'center',
        fontSize: '1.8vw',
        fontWeight: 'bold',
        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
        zIndex: 1000,
        letterSpacing: '0.05em',}}>
        Give me breakfast sandwich or give me death
      </div>
      <h1 style={{
        fontSize: '4.5vw',
        marginBottom: '2vh',
        fontWeight: 'bold',
        color: '#2c5e1a',
        textShadow: '2px 2px 4px rgba(0,0,0,0.1)',
        letterSpacing: '0.05em',
        marginTop: '8vh',
      }}>Countdown to Boffo Sandwich Day</h1>
      <p style={{
        fontSize: '2vw',
        marginBottom: '4vh',
        color: '#3a2f2d',
        fontStyle: 'italic',opacity: 0.8,
      }}>Next sandwich day: Sunday at 11:30 AM PST</p>
      <div style={{
        fontSize: '6vw',
        fontWeight: 'bold',
        backgroundColor: '#fff',
        padding: '30px 40px',
        borderRadius: '15px',
        boxShadow: '0 10px 20px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.1)',
        border: '3px solid #2c5e1a',
        letterSpacing: '0.05em',
        marginBottom: '4vh',
        color: '#2c5e1a',
      }}>
        {timeLeft}
      </div>
      <div style={{
        width: '80%',
        backgroundColor: '#e0d0c1',
        borderRadius: '10px',
        overflow: 'hidden',
        boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.1)',
        marginBottom: '4vh',
      }}>
        <div style={{
          width: `${progress}%`,
          height: '20px',
          backgroundColor: '#2c5e1a',
          transition: 'width 1s ease-in-out',}}></div>
      </div>
      <p style={{
        fontSize: '1.5vw',
        marginTop: '2vh',
        fontStyle: 'italic',
        maxWidth: '80%',
        lineHeight: '1.6',
        color: '#3a2f2d',
        opacity: 0.8,
      }}>
        Boffo's rustic yet elegant sandwich cart at Fort Mason, SF
      </p>
    </div>
  );
};

export default BoffoCountdown;