/* eslint-disable no-undef */
// Hero + About

function Hero() {
  return (
    <section id="home" className="hero">
      <div className="container hero-inner">
        <div className="reveal eyebrow hero-eyebrow">Bay Area + Sacramento</div>
        <h1 className="hero-title reveal delay-1">Ever After By Kate</h1>
        <p className="hero-sub reveal delay-2">
          Content Creation + Super 8
        </p>
        <div className="hero-actions reveal delay-3">
          <a href="#pricing" className="btn">View Collections <Icon.Arrow/></a>
          <a href="#save" className="btn btn-ghost">Save Your Date</a>
        </div>
      </div>
      <div className="scroll-indicator">
        <span>scroll</span>
        <div className="line"></div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" className="about">
      <div className="container about-grid">
        <div>
          <h2 className="about-script reveal">About Me</h2>
          <div className="about-body reveal delay-1">
            <p>
              I'm the daughter of two hard working Mexican immigrants <em>(hablo español)</em> and the youngest of three sisters. My family and boyfriend mean the absolute world to me. When I'm not working you'll find me taking day trips around Northern California and trying new coffee shops and bakeries!
            </p>
            <p>
              Outside of content creation I'm a 9 to 5 girly, and work as a legal assistant. Advancing human rights and leading with love has and always will be at the forefront of everything I do.
            </p>
            <p>
              I cannot thank you enough for trusting me with your most precious memories. <em>Please know that your love story is in safe hands with me.</em>
            </p>
          </div>
        </div>
        <figure className="about-photo-figure reveal delay-2">
          <div className="about-photo">
            <img src="uploads/about/kate-portrait-tablescape.jpg" alt="Kate capturing content at a styled outdoor table setting" />
          </div>
          <figcaption className="about-photo-credit">
            photo by <a href="https://tonivandorst.com/" target="_blank" rel="noopener">Toni Van Dorst Photography</a>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.About = About;