/**
 * Hero section — matches the layout of beachpartyballoons.com's index.html:
 * full-width image with the logo overlaid, then centered address + CTA.
 */
export default function Hero() {
  return (
    <>
      {/* Scrolling announcement bar */}
      <div className="update">
        <div id="message">
          🎈 Walk-ins welcome! · Delivery available across CT · Over 70 latex colors in stock · Custom arrangements made while you wait · 203.283.5626
        </div>
      </div>

      {/* Hero image with logo overlay */}
      <div className="container is-justify-content-center padding">
        <figure className="image" style={{ position: 'relative' }}>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/images/classic/hero.webp" alt="Beach Party Balloons" />
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            className="is-overlay"
            src="/images/logo/BeachPartyBalloons-logo.webp"
            alt="Beach Party Balloons logo"
            style={{ width: '50%', height: 'auto', margin: 'auto' }}
          />
        </figure>
      </div>

      {/* Address + contact */}
      <div className="is-flex-direction-column is-dark">
        <h1 className="is-size-3" style={{ textAlign: 'center' }}>
          Shop Online
        </h1>
        <h2 className="is-size-4" style={{ textAlign: 'center' }}>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://maps.app.goo.gl/gRk6NztgMRUsSVJf9"
          >
            554 Boston Post Road, Milford, CT 06460
          </a>
        </h2>
        <h2 className="is-size-4" style={{ textAlign: 'center' }}>
          <a href="tel:203.283.5626">203.283.5626</a>
        </h2>
        <div className="py-2 has-text-centered">
          <a href="https://beachpartyballoons.com/contact/">
            <button className="button is-info">Contact Us</button>
          </a>
        </div>
      </div>

      {/* Intro image + copy */}
      <div className="container is-justify-content-center padding">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src="/images/organic/img1.webp" alt="Organic balloon arrangement" />
      </div>

      <p className="is-size-5 has-text-centered">Walk-ins welcome!</p>
      <p className="is-size-6 has-text-centered">
        Pick up a balloon arrangement for birthdays or any occasion. We will make
        it while you wait!
      </p>
      <p className="is-size-6 has-text-centered">
        We have hundreds of foil balloon choices in stock and over 70 latex colors!
      </p>

      <p className="is-size-5 has-text-centered">
        ...Or consult with one of our designers about your balloon decorating needs.
      </p>

      <div className="container is-justify-content-center padding">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src="/images/organic/img2.webp" alt="Delivery balloon arrangement" />
      </div>

      <p className="is-size-5 has-text-centered">Delivery available!</p>
      <p className="is-size-5 has-text-centered">
        Have your balloons delivered! Our delivery staff will make sure your order
        arrives safe and sound!
      </p>

      <hr className="section-divider" />
    </>
  )
}