import Image from 'next/image';

export default function HeroSection() {
  return (
    <section id="hero" className="hero-section">
      {/* Left half — photo */}
      <div className="hero-photo">
        <Image
          src="/red.jpg"
          alt="Teressa Copeland"
          fill
          style={{ objectFit: 'cover', objectPosition: 'center 20%' }}
          priority
        />
      </div>

      {/* Right half — copy */}
      <div className="hero-copy">
        {/* PLACEHOLDER HEADLINE — replace before launch */}
        <h1 className="hero-headline">
          Your Trusted Utah Real Estate Partner
        </h1>

        {/* PLACEHOLDER SUBHEADING — replace before launch */}
        <p className="hero-subheading">
          Helping Utah families find the home they deserve
        </p>

        {/* PLACEHOLDER BIO — replace before launch */}
        <p className="hero-bio">
          With years of experience navigating the Utah real estate market,
          Teressa Copeland brings deep local knowledge and a genuine commitment
          to every client she serves. Whether you&apos;re buying your first home
          in the Salt Lake Valley or selling a property along the Wasatch Front,
          Teressa guides you through every step with patience, transparency, and
          skill. Her clients don&apos;t just find houses — they find the right
          home.
        </p>

        <a href="#contact" className="hero-cta">
          Get in Touch
        </a>
      </div>

      <style>{`
        .hero-section {
          display: flex;
          min-height: 600px;
          background-color: #FAF9F7;
        }
        .hero-photo {
          flex: 1;
          position: relative;
          min-height: 500px;
        }
        .hero-copy {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 4rem 3rem;
          background-color: #FAF9F7;
        }
        .hero-headline {
          font-size: clamp(1.75rem, 3vw, 2.5rem);
          font-weight: 700;
          color: #1B2B4B;
          line-height: 1.2;
          margin-bottom: 1rem;
        }
        .hero-subheading {
          font-size: 1.125rem;
          color: #1B2B4B;
          opacity: 0.75;
          margin-bottom: 1.5rem;
          font-style: italic;
        }
        .hero-bio {
          font-size: 1rem;
          color: #1B2B4B;
          line-height: 1.75;
          margin-bottom: 2rem;
          max-width: 480px;
        }
        .hero-cta {
          display: inline-block;
          background-color: #C9A84C;
          color: #1B2B4B;
          font-weight: 600;
          padding: 0.75rem 2rem;
          border-radius: 4px;
          text-decoration: none;
          font-size: 1rem;
          align-self: flex-start;
          transition: opacity 0.2s;
        }
        .hero-cta:hover {
          opacity: 0.85;
        }
        @media (max-width: 767px) {
          .hero-section {
            flex-direction: column;
          }
          .hero-photo {
            min-height: 300px;
          }
        }
      `}</style>
    </section>
  );
}
