/* SuperhostBlock.jsx — "Meet your host" with imposing laurel-wreath gold award medallion. */

function SuperhostBlock() {
  return (
    <section className="section-tight" style={{
      background: 'var(--navy-900)', color: 'var(--sand-50)', position: 'relative', overflow: 'hidden',
    }}>
      {/* Sunset glow accent */}
      <div style={{
        position: 'absolute', left: '-200px', top: '50%', transform: 'translateY(-50%)',
        width: 700, height: 700, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(252,172,100,0.22) 0%, rgba(252,172,100,0) 65%)',
        pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', right: '-180px', bottom: '-180px',
        width: 520, height: 520, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(209,91,146,0.16) 0%, rgba(209,91,146,0) 60%)',
        pointerEvents: 'none',
      }}/>

      <style>{`
        .superhost-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 40px;
          align-items: center;
        }
        @media (min-width: 900px) {
          .superhost-grid {
            grid-template-columns: 1.1fr 1fr;
            gap: 56px;
          }
        }
        @media (min-width: 1180px) {
          .superhost-grid { gap: 80px; }
        }
        .superhost-stats {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
          margin-bottom: 24px;
        }
        @media (min-width: 480px) {
          .superhost-stats { grid-template-columns: repeat(4, 1fr); gap: 10px; }
        }
      `}</style>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="superhost-grid">
          {/* Left — story */}
          <div>
            <div className="overline" style={{ color: 'var(--horizon-200)', marginBottom: 14 }}>
              Meet your host
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 'clamp(28px, 4vw, 56px)', margin: '0 0 18px 0',
              letterSpacing: '-0.015em', lineHeight: 1.05, color: '#fff', textWrap: 'balance',
            }}>
              <em style={{ fontStyle: 'italic' }}>Superhost</em> across the entire portfolio.
            </h2>
            <p style={{
              color: 'rgba(255,255,255,0.78)', fontSize: 'clamp(15px, 1.6vw, 17px)', lineHeight: 1.65,
              maxWidth: 480, margin: '0 0 26px 0',
            }}>
              Superhosts are experienced, highly rated hosts committed to providing great stays for guests. We've been awarded the badge across <strong style={{ color: '#fff', fontWeight: 500 }}>every Novus residence</strong> — eight homes, one standard.
            </p>

            <div className="superhost-stats">
              <InlineStat number="24/7" label="Concierge" />
              <InlineStat number="< 20m" label="Reply time" />
              <InlineStat number="Direct" label="No OTA fees" />
              <InlineStat number="Secure" label="Stripe deposit" />
            </div>

            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <button className="btn btn-on-dark" style={{ flexShrink: 0 }} onClick={() => { window.location.href = 'villas.html'; }}>Explore villas</button>
              <button className="btn" style={{
                background: 'transparent', color: '#fff',
                borderColor: 'rgba(255,255,255,0.32)', flexShrink: 0,
              }}>Meet Miguel</button>
            </div>
          </div>

          {/* Right — Award medallion */}
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', overflow: 'hidden' }}>
            <AwardBadge
              level="gold"
              title="SUPERHOST"
              subtitle={"Awarded by Airbnb\nVerified portfolio-wide"}
              recipient={"NOVUS RESIDENTIALS\nMIAMI"}
              date="Recognized 2024 — 2026"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function InlineStat({ number, label }) {
  return (
    <div style={{
      padding: '12px 14px',
      border: '1px solid rgba(165,207,230,0.16)',
      borderRadius: 12,
      background: 'rgba(255,255,255,0.02)',
      transition: 'background 240ms var(--ease-novus), border-color 240ms var(--ease-novus)',
    }}
      onMouseEnter={e => {
        e.currentTarget.style.background = 'rgba(255,255,255,0.04)';
        e.currentTarget.style.borderColor = 'rgba(165,207,230,0.30)';
      }}
      onMouseLeave={e => {
        e.currentTarget.style.background = 'rgba(255,255,255,0.02)';
        e.currentTarget.style.borderColor = 'rgba(165,207,230,0.16)';
      }}>
      <div style={{
        fontFamily: 'var(--font-display)', fontWeight: 400,
        fontSize: 'clamp(22px, 2.4vw, 30px)', lineHeight: 1, color: '#fff',
        fontFeatureSettings: '"tnum"', letterSpacing: '-0.01em',
      }}>{number}</div>
      <div style={{
        marginTop: 7, fontSize: 9, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: 'var(--horizon-200)', fontWeight: 600,
      }}>{label}</div>
    </div>
  );
}

window.SuperhostBlock = SuperhostBlock;