---
import BaseLayout from '../layouts/BaseLayout.astro';
import { Image } from 'astro:assets';

import HeroImage from '../images/home/hero.jpg';

const title = 'My Astro Blog';
const description = 'The perfect starter for your perfect blog.';
const permalink = Astro.site.href;
---

<BaseLayout title={title} description={description} permalink={permalink}>
  <div class="home-container">
    <div class="home-copy">
      <h1>CycleSam</h1>
      <p>Writing about walking, cycling, and urbanism in UK cities and towns.</p>
    </div>

    <div class="hero-image-container">
      <Image src={HeroImage} alt="An orange fixed gear bicycle standing against a cycle only traffic light pole" width="400" />
    </div>
  </div>
</BaseLayout>

<style>
  .home-container {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    margin: 2em 0;
    min-height: 400px;
  }

  .home-copy {
    flex: 1;
    padding: 0 1em;
  }

  .home-copy h1 {
    font-weight: 700;
    margin-bottom: 0.5em;
    line-height: 1.3;
  }

  .home-copy p {
    font-size: 1.4em;
  }

  .hero-image-container {
    margin: 0 1em;
    text-align: center;

    img {
      width: 100%;
      max-width: 550px;
      margin-bottom: 1em;
      border-radius: 20px;
    }
  }

  @media (max-width: 1200px) {
    p {
      font-size: 1.2em;
    }

    .hero-image {
      max-width: 400px;
    }
  }

  @media (max-width: 800px) {
    .home-container {
      flex-direction: column;
    }

    .home-copy {
      flex: 0;
      padding-bottom: 2em;
      text-align: center;
    }
  }
</style>
