/* global React, Eyebrow, Display, Pill, Diamond */

function Hero() {
  return (
    <section id="top" style={{
      position: 'relative', minHeight: '92vh',
      display: 'flex', alignItems: 'flex-end',
      padding: '0 64px 88px',
      backgroundImage: "url('assets/hero-sunset.jpg')",
      backgroundSize: 'cover', backgroundPosition: 'center',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background:
          'linear-gradient(180deg, rgba(47,74,60,0.22) 0%, rgba(42,38,32,0.18) 38%, rgba(47,74,60,0.62) 100%)',
      }} />

      {/* corner ornament */}
      <div style={{
        position: 'absolute', top: 32, right: 48, color: 'var(--hg-cream-100)',
        fontFamily: 'var(--hg-font-sans)', fontSize: 11, letterSpacing: '0.22em',
        textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 10, opacity: 0.85,
      }}>
        <Diamond color="var(--hg-cream-200)" />
        Tucson, Arizona
        <Diamond color="var(--hg-cream-200)" />
      </div>

      <div style={{ position: 'relative', maxWidth: 760 }}>
        <Eyebrow light>Introducing the Signature Garden Wedding Experience</Eyebrow>
        <div style={{ height: 22 }} />
        <div style={{ color: 'var(--hg-cream-50)' }}>
          <Display size="display">
            From first look<br />
            <em style={{ fontStyle: 'italic', color: 'var(--hg-cream-100)' }}>to last dance</em>
            <span style={{ color: 'var(--hg-sun-300)' }}>—</span> handled.
          </Display>
        </div>
        <div style={{ height: 26 }} />
        <p style={{
          fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
          fontSize: 21, lineHeight: 1.55, color: 'var(--hg-cream-100)',
          margin: 0, maxWidth: '46ch',
        }}>
          One garden. One package. One team. <br/>
          Venue, food, bar, DJ, cake, setup and teardown — gathered into a single, calmly run day for 50&ndash;150 guests.
        </p>
        <div style={{ height: 36 }} />
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <Pill as="a" href="#tour" variant="onDark">Book a tour</Pill>
          <Pill as="a" href="#investment" variant="outline" style={{
            color: 'var(--hg-cream-100)', borderColor: 'var(--hg-cream-100)', background: 'transparent',
          }}>See what's included</Pill>
        </div>
        <div style={{ height: 44 }} />
        <div style={{
          display: 'flex', gap: 28, alignItems: 'center', flexWrap: 'wrap',
          fontFamily: 'var(--hg-font-sans)', fontSize: 11, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: 'var(--hg-cream-200)',
        }}>
          <span>11 hours exclusive</span>
          <Diamond color="var(--hg-cream-300)" size={10} />
          <span>50&ndash;150 guests</span>
          <Diamond color="var(--hg-cream-300)" size={10} />
          <span>October&ndash;June</span>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;