/* Hero.jsx — premium full-bleed video hero with headline, value prop + CTAs.
 * Mobile-first: text scales down, CTAs stack, overlay keeps copy legible (AA). */

function Hero({ onCta, onExplore }) {
  const book = () => { window.location.href = 'booking.html'; };
  const explore = onExplore || (() => { document.getElementById('villas')?.scrollIntoView({ behavior: 'smooth' }); });

  return (
    <>
      <style>{`
        .hero-video-section {
          position: relative;
          width: 100%;
          min-height: 92vh;
          background: #0A1623;
          overflow: hidden;
          display: flex;
          align-items: flex-end;
        }
        .hero-video {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          background: #0A1623;
        }
        /* Legibility scrim — stronger at the bottom where the copy sits. */
        .hero-scrim {
          position: absolute; inset: 0; pointer-events: none;
          background: linear-gradient(180deg, rgba(10,22,35,0.45) 0%, rgba(10,22,35,0.05) 30%, rgba(10,22,35,0.15) 55%, rgba(10,22,35,0.82) 100%);
        }
        .hero-content {
          position: relative; z-index: 2;
          width: 100%;
          max-width: 1180px;
          margin: 0 auto;
          padding: 0 24px clamp(40px, 8vh, 88px);
          color: #fff;
        }
        .hero-overline {
          font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
          font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 14px;
          display: flex; align-items: center; gap: 10px;
        }
        .hero-headline {
          font-family: 'Cormorant Garamond', Georgia, serif;
          font-weight: 500;
          font-size: clamp(38px, 7vw, 76px);
          line-height: 1.02;
          letter-spacing: -0.01em;
          margin: 0 0 16px;
          max-width: 16ch;
          text-shadow: 0 2px 30px rgba(0,0,0,0.35);
        }
        .hero-sub {
          font-size: clamp(15px, 2.2vw, 19px);
          line-height: 1.55;
          color: rgba(255,255,255,0.92);
          max-width: 46ch;
          margin: 0 0 28px;
          text-shadow: 0 1px 16px rgba(0,0,0,0.4);
        }
        .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
        .hero-btn {
          display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          padding: 15px 28px; border-radius: 999px;
          font-size: 15px; font-weight: 600; font-family: inherit;
          cursor: pointer; border: 1.5px solid transparent;
          transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
          -webkit-tap-highlight-color: transparent;
          min-height: 52px;
        }
        .hero-btn-primary {
          background: #fff; color: #0A1623;
          box-shadow: 0 8px 30px rgba(0,0,0,0.28);
        }
        .hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,0.36); }
        .hero-btn-secondary {
          background: rgba(255,255,255,0.12);
          color: #fff; border-color: rgba(255,255,255,0.55);
          backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        }
        .hero-btn-secondary:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }
        .hero-btn:focus-visible { outline: 3px solid #F5B95C; outline-offset: 3px; }
        /* Honest social proof row — facts, not fake numbers. */
        .hero-proof {
          display: flex; gap: 22px; flex-wrap: wrap; margin-top: 32px;
          font-size: 13px; color: rgba(255,255,255,0.9);
        }
        .hero-proof-item { display: flex; align-items: center; gap: 8px; }
        .hero-proof-item strong { font-weight: 700; }
        @media (max-width: 600px) {
          .hero-video-section { min-height: 88vh; }
          .hero-ctas { width: 100%; }
          .hero-btn { flex: 1; }
          .hero-proof { gap: 14px 18px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .hero-btn { transition: none; }
        }
      `}</style>
      <section className="hero-video-section" aria-label="Novus Residentials — luxury Miami villa rentals">
        <video
          className="hero-video"
          src="https://cdn.shopify.com/videos/c/o/v/d4a076e1a5ea44b39034f3e31d73295a.mp4"
          autoPlay muted loop playsInline
          preload="metadata"
          aria-hidden="true"
        />
        <div className="hero-scrim" />

        <div className="hero-content">
          <div className="hero-overline">
            <span aria-hidden="true">✦</span> Miami · Waterfront · Direct booking
          </div>
          <h1 className="hero-headline">Miami’s waterfront villas, booked direct.</h1>
          <p className="hero-sub">
            A private collection of luxury homes with heated pools, bay views and a real
            24/7 concierge — reserved straight with us, no OTA fees.
          </p>
          <div className="hero-ctas">
            <button className="hero-btn hero-btn-primary" onClick={book}>
              Book a stay
            </button>
            <button className="hero-btn hero-btn-secondary" onClick={explore}>
              Explore villas
            </button>
          </div>
          <div className="hero-proof">
            <span className="hero-proof-item"><span aria-hidden="true">🏝️</span> Waterfront homes across Miami &amp; Bimini</span>
            <span className="hero-proof-item"><span aria-hidden="true">🔑</span> Secure deposit · instant confirmation</span>
            <span className="hero-proof-item"><span aria-hidden="true">✦</span> 24/7 concierge included</span>
          </div>
        </div>
      </section>
    </>
  );
}

window.Hero = Hero;