// Hero: centered Apple-store-ish headline, sub, dual CTAs, and a big full-bleed
// image tile below it. Uses an engineered "visual" placeholder since no real
// imagery was provided.

function Hero() {
  const [ref, inView] = useInView();
  return (
    <section id="top" ref={ref} style={{
      paddingTop: 68, paddingBottom: 24,
      textAlign: 'center',
      background: 'var(--bg)',
    }}>
      <div className="wrap" style={{
        maxWidth: 900,
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(12px)',
        transition: 'opacity .8s ease, transform .8s ease',
      }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>
          H A Carpet Cleaning Corp. · Hollywood, FL · Est. serving multifamily
        </div>
        <h1 className="h-hero" style={{ margin: 0 }}>
          Turn-ready in a day.
          <br/>
          <span style={{ color: 'var(--muted)' }}>Every unit, every property.</span>
        </h1>
        <p className="sub" style={{ marginTop: 18, marginBottom: 28, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' }}>
          Carpet, tile, duct and water-damage service built for property managers.
          Five properties on standing schedule. Twenty-four-hour response in Broward and Miami-Dade.
        </p>
        <div style={{ display:'inline-flex', gap: 14, flexWrap:'wrap', justifyContent:'center' }}>
          <a href="#quote" className="btn btn-primary">Request a quote <Icon.Chevron /></a>
          <a href="Services.html" className="btn btn-secondary">Explore services <Icon.Chevron /></a>
        </div>
      </div>

      {/* Hero visual — a clean, stage-like "hero tile" */}
      <div className="wrap-wide" style={{ marginTop: 44 }} data-reveal>
        <div className="zoom-host" style={{
          position: 'relative',
          aspectRatio: '2.4 / 1',
          minHeight: 320,
          borderRadius: 'var(--radius-xl)',
          background: 'linear-gradient(180deg, #eef1f4 0%, #dde3ea 100%)',
          overflow: 'hidden',
        }}>
          {/* Vignette floor perspective */}
          <svg viewBox="0 0 1200 500" preserveAspectRatio="xMidYMid slice" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
            <defs>
              <linearGradient id="floor" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="#e9ecf1" />
                <stop offset="1" stopColor="#c7cfd8" />
              </linearGradient>
              <linearGradient id="back" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="#f3f5f8" />
                <stop offset="1" stopColor="#dfe4ea" />
              </linearGradient>
            </defs>
            <rect width="1200" height="280" fill="url(#back)"/>
            <polygon points="0,280 1200,280 1400,500 -200,500" fill="url(#floor)"/>
            {/* Carpet stripe guides */}
            {Array.from({length: 18}).map((_, i) => (
              <line key={i}
                x1={-200 + i * 95} y1={500}
                x2={300 + i * 45} y2={280}
                stroke="#b4bdc7" strokeWidth="0.6" opacity="0.4"/>
            ))}
            {/* Light wash */}
            <ellipse cx="600" cy="200" rx="380" ry="140" fill="#ffffff" opacity="0.55"/>
          </svg>

          {/* Floating label chips */}
          <div style={{
            position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
            display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center',
          }}>
            {[
              { k: 'Pre-condition', v: 'Applied' },
              { k: 'Hot-water extraction', v: '220°F' },
              { k: 'Deodorizer', v: 'Active' },
              { k: 'Dry time', v: '< 4 hrs' },
            ].map((c, i) => (
              <div key={c.k} className="lift" style={{
                background: 'rgba(255,255,255,0.88)',
                backdropFilter: 'blur(8px)',
                padding: '10px 14px', borderRadius: 999,
                fontSize: 13, color: 'var(--ink)',
                border: '1px solid rgba(0,0,0,0.06)',
                boxShadow: '0 4px 16px rgba(0,0,0,0.06)',
                animation: `fadeUp .8s cubic-bezier(.2,.7,.2,1) both`,
                animationDelay: `${400 + i * 120}ms`,
              }}>
                <span style={{ color: 'var(--muted)', marginRight: 6 }}>{c.k}</span>
                <span style={{ fontWeight: 500 }}>{c.v}</span>
              </div>
            ))}
          </div>

          <div className="placeholder" data-label="placeholder · hero photograph"
            style={{
              position: 'absolute', inset: 'auto 22px 22px auto',
              width: 168, height: 104, borderRadius: 10, fontSize: 11,
              background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.6) 0 10px, rgba(255,255,255,0.9) 10px 20px)',
            }}
          />
        </div>
      </div>

      {/* Trust strip */}
      <div className="wrap-wide" style={{
        marginTop: 36,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        gap: 40, flexWrap: 'wrap',
        color: 'var(--muted)', fontSize: 14,
      }}>
        <span>Alvista Hollywood</span>
        <span style={{ opacity: 0.35 }}>·</span>
        <span>Cortland at The Hammocks</span>
        <span style={{ opacity: 0.35 }}>·</span>
        <span>Blue Coast</span>
        <span style={{ opacity: 0.35 }}>·</span>
        <span>CH Global</span>
        <span style={{ opacity: 0.35 }}>·</span>
        <span>Cortland at Harbour Cove</span>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });