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

function Hero() {
  return (
    <section id="top" data-screen-label="Hero" style={{
      position: 'relative', minHeight: '94vh',
      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(42,38,32,0.50) 0%, rgba(42,38,32,0.22) 32%, rgba(47,74,60,0.74) 100%)'
      }} />

      {/* corner ornament */}
      <div style={{
        position: 'absolute', top: 30, 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.9
      }}>
        <Diamond color="var(--hg-cream-200)" />
        Tucson, Arizona
        <Diamond color="var(--hg-cream-200)" />
      </div>

      <div style={{ position: 'relative', maxWidth: 880 }}>
        <Eyebrow light>The Dragonfly Tea Experience&trade;</Eyebrow>
        <div style={{ height: 22 }} />
        <div style={{ color: 'var(--hg-cream-50)' }}>
          <Display size="display" style={{ fontSize: 78 }}>
            Host the afternoon Tucson<br />
            won&rsquo;t stop talking about.
            <br />
            <em style={{ fontStyle: 'italic', color: 'var(--hg-sun-300)' }}>Without lifting a finger.</em>
          </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: '52ch'
        }}>
          A fully-styled, fully-staffed signature tea for up to 50 guests &mdash; built around
          our one-of-a-kind Filipino-inspired Dragonfly menu &mdash; ready before your first
          guest arrives, guaranteed, or your venue fee is free.
        </p>
        <div style={{ height: 36 }} />
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <Pill as="a" href="#tour" variant="onDark">Book a private tea tour</Pill>
          <Pill as="a" href="#included" variant="outline" style={{
            color: 'var(--hg-cream-100)', borderColor: 'var(--hg-cream-100)', background: 'transparent'
          }}>See what&rsquo;s included</Pill>
        </div>
        <div style={{ height: 44 }} />
        <div style={{
          display: 'flex', gap: 26, alignItems: 'center', flexWrap: 'wrap',
          fontFamily: 'var(--hg-font-sans)', fontSize: 11, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: 'var(--hg-cream-200)'
        }}>
          <span>Up to 50 guests</span>
          <Diamond color="var(--hg-cream-300)" size={10} />
          <span>From $1,975 all-in</span>
          <Diamond color="var(--hg-cream-300)" size={10} />
          <span>A few private dates each month</span>
        </div>
      </div>
    </section>);

}

window.Hero = Hero;