site/pages/steve.js

import { Box, Textarea, Link, Grid, Image, Container, Button, Heading, Text, Input, Checkbox } from 'theme-ui'
import Head from 'next/head'
import Meta from '@hackclub/meta'
import ForceTheme from '../components/force-theme'
import Footer from '../components/footer'
import Nav from '../components/nav'
import Tilt from '../components/tilt'
import Ticker from 'react-ticker'
import { useState, useEffect } from 'react'
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const StevePage = () => {

  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const [disabledDates, setDisabledDates] = useState([]);

  useEffect(() => {
    // Fetch the disabled dates from the API endpoint when the component mounts
    const fetchDisabledDates = async () => {
      try {
        const response = await fetch('/api/steve');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const dateStrings = await response.json();
        const dateObjects = dateStrings.map(dateStr => {
            const date = new Date(Date.UTC(dateStr.substring(0, 4), dateStr.substring(5, 7) - 1, dateStr.substring(8, 10)));
            date.setDate(date.getDate() + 1); // Add one day to the date
            return date;
        });
        setDisabledDates(dateObjects);
      } catch (error) {
        console.error('Failed fetching disabled dates:', error);
      }
    };

    fetchDisabledDates();
}, []);









  const isDateDisabled = (date) => {
      return disabledDates.some(disabledDate => 
          disabledDate.getTime() === date.getTime());
  };

const isSelectingDisabledRange = (start, end) => {
    let currDate = new Date(start);
    currDate.setHours(0, 0, 0, 0); // Normalize the time component

    let normalizedEnd = new Date(end);
    normalizedEnd.setHours(0, 0, 0, 0);

    while (currDate <= normalizedEnd) {
        if (isDateDisabled(currDate)) {
            return true;
        }
        currDate.setDate(currDate.getDate() + 1);
    }
    return false;
};



const handleStartDateChange = (date) => {
  if (!endDate || !isSelectingDisabledRange(date, endDate)) {
      setStartDate(date);
  } else {
      setStartDate(date);
      setEndDate(null); // Reset end date if the new range is invalid
  }
};

const handleEndDateChange = (date) => {
  if (!isSelectingDisabledRange(startDate, date)) {
      setEndDate(date);
  } // Do nothing if the range is invalid
};
    const images = ["https://cloud-p08od8km8-hack-club-bot.vercel.app/0image.png", "https://cloud-eqvtnimxq-hack-club-bot.vercel.app/0image.png", "https://cloud-r8j7lcawc-hack-club-bot.vercel.app/0image.png", "https://cloud-8f162hv3i-hack-club-bot.vercel.app/0image.png", "https://cloud-b7gqg2qpq-hack-club-bot.vercel.app/0image.png", "https://cloud-ik2jpfk0t-hack-club-bot.vercel.app/0mountains.png"]
    const [selectedImage, setSelectedImages] = useState(0);

  return (
    <>
      <Meta
        as={Head}
        title="A Home For You At Hack Club HQ"
        description="We now have a free place for you to stay near Hack Club HQ! It's called Steve!"
        image="https://cloud-pnaovvpuv-hack-club-bot.vercel.app/0image.png"
      />
      <ForceTheme theme="light" />
      <Box
        sx={{
          background:
            'linear-gradient(0deg, rgba(15, 33, 79, 0.00) 0%, rgba(15, 33, 79, 0.00) 100%), linear-gradient(180deg, #0F214F 0%, #8B412E 100%)',
          imageRendering: 'pixelated',
        }}
      >
        <Nav sx={{ backgroundColor: '#0F214F' }} />

        <Heading
          sx={{
            marginTop: 0,
            paddingTop: 96,
            color: '#fff',
            fontSize: 96,
            textAlign: 'center',
            lineHeight: 1
          }}
        >


          Imagine a{' '}
          <Text sx={{ color: '#F8E32E', fontFamily: 'billy' }}>home</Text> for
          <br /> you to hack with friends
        </Heading>
        <Image
        alt="Pixel art of Steve"
          sx={{ width: '100%', marginTop: 48, imageRendering: 'pixelated' }}
          src="https://cloud-85qd0afpz-hack-club-bot.vercel.app/0topheroart.png"
        />
      </Box>
      <Box sx={{backgroundColor: "#8B412E"}}>
        <Container sx={{paddingBottom: 32}}>
        <Heading
  sx={{
    color: '#FFF',
    fontFamily: 'Billy',
    fontSize: 72,
    fontStyle: 'normal',
    fontWeight: 700,
    paddingTop: 32,
    paddingBottom: 32,
    lineHeight: '100%', // 76px
    textShadow: '6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000',
  }}
>
  Welcome To <Text style={{color: "#F8E32E"}}>Steve</Text>
</Heading>

<Grid
      columns={[1, '1fr 1fr 1fr']} // Three columns in a row for smaller screens and larger screens
      gap={"32px"} // Adjust the gap between items as needed
    >
              <Box
        sx={{
          backgroundColor: 'black',
          color: 'white',
          aspectRatio: 1, // Ensure a square aspect ratio
          display: 'flex',
          alignItems: 'center',
          flexDirection: "column",
          imageRendering: "pixelated",
          gap: "32px",
          justifyContent: 'center',
          background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)",
          backgroundSize: "cover",
          padding: 3, // Adjust padding as needed
        }}
      >
        <Image alt="Free" style={{width: "104px", height: "104px", imageRendering: "pixelated"}} src="https://cloud-2ccduwqc9-hack-club-bot.vercel.app/0nomoney.png"/>
        <Text sx={{color: "#fff", fontFamily: "billy", fontSize: 24, fontWeight: 600, textAlign: "center", lineHeight: 1.25}}>Stay At Steve<br/> For Free</Text>
      </Box>
      <Box
        sx={{
          backgroundColor: 'black',
          color: 'white',
          aspectRatio: 1, // Ensure a square aspect ratio
          display: 'flex',
          imageRendering: "pixelated",

          alignItems: 'center',
          flexDirection: "column",
          gap: "32px",
          justifyContent: 'center',
          background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)",
          backgroundSize: "cover",
          padding: 3, // Adjust padding as needed
        }}
      >
        <Image alt="5min walk" style={{width: "104px", height: "104px", imageRendering: "pixelated"}} src="https://cloud-2c20hobub-hack-club-bot.vercel.app/05min_walk.png"/>
        <Text sx={{color: "#fff", fontFamily: "billy", fontSize: 24, fontWeight: 600, textAlign: "center", lineHeight: 1.25}}>Walk to HQ<br/> in 5min</Text>
      </Box>

      <Box
        sx={{
          backgroundColor: 'black',
          color: 'white',
          aspectRatio: 1, // Ensure a square aspect ratio
          display: 'flex',
          imageRendering: "pixelated",

          alignItems: 'center',
          flexDirection: "column",
          gap: "32px",
          justifyContent: 'center',
          background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)",
          backgroundSize: "cover",
          padding: 3, // Adjust padding as needed
        }}
      >
        <Image alt="friends building together" style={{width: "104px", height: "104px", imageRendering: "pixelated"}} src="https://cloud-hc1t198xx-hack-club-bot.vercel.app/0wefriends.png"/>
        <Text sx={{color: "#fff", fontFamily: "billy", fontSize: 24, fontWeight: 600, textAlign: "center", lineHeight: 1.25}}>Collaborate on<br/> HQ Projects IRL</Text>
      </Box>

    </Grid>
    <Box style={{marginTop: 48, display: "flex",  padding: 24, backgroundColor: "#91979C"}} columns={'3fr 1fr'}>
        <Box style={{padding: "16px", backgroundColor: "#000"}}>
    <Image alt="Image of Steve" width={"100%"} style={{height: "100%", aspectRatio: "16/9", objectFit: "cover"}} src={images[selectedImage]}/>
    </Box>

<Box style={{flexDirection: "column", alignItems: "center", width: "142px", padding: "24px 24px 24px 0px", backgroundColor: "#000", justifyContent: "space-between", display: "flex"}}>
        {images.map((image, idx) => 
        <Image key={idx} alt="" style={{display: idx == selectedImage ? ("flex") : ("flex"), cursor: "pointer", aspectRatio: "1", objectFit: "cover",opacity: idx != selectedImage ? (0.5) : (1)}} onClick={() => setSelectedImages(idx)} width={"96px"} height={"96px"} src={image}/>
        )}
</Box>
    </Box>
      {/* <Image src="https://cloud-qutaee770-hack-club-bot.vercel.app/0untitled__1_.gif" />
      <Image src="https://cloud-qvzblkbvs-hack-club-bot.vercel.app/0ezgif-4-91825479d0.gif" />
      <Image src="https://cloud-mltm380a0-hack-club-bot.vercel.app/13__1_.gif" />
      <Image src="https://cloud-ecnni31d6-hack-club-bot.vercel.app/0ezgif-4-39f9efb85b.gif" />
      <Image src="https://cloud-mltm380a0-hack-club-bot.vercel.app/35__1_.gif" /> */}
      </Container>

      <Image alt="" sx={{marginBottom: 0, width: "100vw"}} src="https://cloud-5sry4ilri-hack-club-bot.vercel.app/0dirtrow.png"/>
      <Box style={{backgroundColor: "#000", marginTop: -8}}>
      <Container sx={{marginTop: 0}}>
      <Heading
  sx={{
    color: '#F8E32E',
    fontFamily: 'Billy',
    fontSize: 72,
    fontStyle: 'normal',
    fontWeight: 700,
    paddingTop: 32,
    paddingBottom: 32,
    lineHeight: '100%', // 76px
    textShadow: '6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000',
  }}
>
  Book Your Stay
</Heading>
<Box sx={{display: "flex", paddingBottom: 96, gap: "16px", justifyContent: "space-between"}}>
<Box sx={{width: "100%"}}>
      <Box>
        <Text sx={{fontFamily: "billy", fontSize: 24, color: "#fff"}}>Name</Text>
        <Input placeholder={"Marsha Mellow"} sx={{
          backgroundColor: "#fff",
          color: "#000",
          fontSize: 28,
          padding: 16,
          lineHeight: 1,
          borderRadius: 0,
          marginTop: "4px",
          border: "4px solid #495057"
          }} />
      </Box>
      <Box sx={{marginTop: "16px"}}>
        <Text sx={{fontFamily: "billy", fontSize: 24, color: "#fff"}}>What Do You Plan To Work On?</Text>
        <Textarea
    placeholder="I wanna try building a dock for Sprig"
    sx={{
      backgroundColor: "#fff",
      color: "#000",
      fontSize: 28,
      marginTop: "4px",
      padding: 16,
      lineHeight: 1,
      borderRadius: 0,
      border: "4px solid #495057",
    }}
    multiline={true} // Set the multiline property to true
  />
      </Box>
      <Box sx={{display: "flex"}}>
  <Box sx={{ display: "flex", flex: 1, flexDirection: "column" }}>
    <Text sx={{ fontFamily: "billy", color: "#fff", fontSize: 18 }}>Start Date</Text>
    <DatePicker
      selected={startDate}
      style={{
        width: "100%", // Set the width to 100%
        boxSizing: "border-box", // Include padding and border in the total width
      }}
      onChange={handleStartDateChange}
      selectsStart
      startDate={startDate}
      endDate={endDate}
      excludeDates={disabledDates}
      sx={{
        width: "100%", // Set the width to 100%
        boxSizing: "border-box", // Include padding and border in the total width
      }}
    />
  </Box>
      <Box sx={{display: "flex", flex: 1, flexDirection: "column"}}>
      <Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>End Date</Text>
      <DatePicker
      
                selected={endDate}
                onChange={handleEndDateChange}
                selectsEnd
                startDate={startDate}
                endDate={endDate}
                minDate={startDate}
                excludeDates={disabledDates}
            />
      </Box>
      </Box>
      </Box>
<Box sx={{width: "100%"}}>
  <Box>
  <Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>Email</Text>
        <Input placeholder={"Marsha Mellow"} sx={{
          backgroundColor: "#fff",
          color: "#000"
          }} />
  </Box>
      <Box>

      <Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>Check All That Apply <br/></Text>
       <Box sx={{display: "flex", gap: "16px"}}> 
        <Box>
        <Box sx={{display: "flex"}}>
          <Checkbox/>
          <Text sx={{color: "#fff", marginRight: "0px"}}>Club Leader</Text>
        </Box>
        <Box sx={{display: "flex"}}>
          <Checkbox/>
          <Text sx={{color: "#fff", marginRight: "0px"}}>Hackathon Organizer</Text>
        </Box>
        </Box>
        <Box>
        <Box sx={{display: "flex"}}>
          <Checkbox/>
          <Text sx={{color: "#fff", marginRight: "0px"}}>Member Of The Slack</Text>
        </Box>
        <Box sx={{display: "flex"}}>
          <Checkbox/>
          <Text sx={{color: "#fff", marginRight: "0px"}}>Project Contributor</Text>
        </Box>
        </Box>
        </Box>
      </Box>
      <Box>
        <Button type="submit">Submit</Button>
      </Box>
      <Box>
        
      </Box>
      </Box>
      </Box>

{/* 
      <Box>
        <Text>
          <strong>Frequently Asked Questions</strong>
        </Text>

        <Text>What's Tracy House, Bank, and HQ?</Text>
        <Text>What's the environment like at HQ?</Text>
        <Text>What's are the sleeping arrangements?</Text>
        <Text>How cold is it in the winter?</Text>
        <Text>Where will I get food?</Text>
        <Text>Who can stay at Steve?</Text>
        <Text>How many people can stay at Steve?</Text>
        <Text>How long can I stay at Steve?</Text>
      </Box> */}
      {/* <Box>
        Have additional questions? Send us an email at{' '}
        <Link href="mailto:steve@hackclub.com">steve@hackclub.com</Link>
      </Box> */}
      </Container>
      </Box>
            </Box>
    </>
  )
}

export default StevePage