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

function FinalCTA() {
  return (
    <section id="tour" data-screen-label="Final CTA" style={{
      position: 'relative',
      backgroundImage: "url('assets/high-tea-1.jpg')",
      backgroundSize: 'cover', backgroundPosition: 'center 35%',
      padding: '160px 48px'
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(47,74,60,0.58) 0%, rgba(42,38,32,0.72) 45%, rgba(42,38,32,0.88) 100%)'
      }} />
      <div style={{
        position: 'relative', maxWidth: 860, margin: '0 auto', textAlign: 'center',
        color: 'var(--hg-cream-100)'
      }}>
        <Eyebrow light>Your date, while it&rsquo;s still open</Eyebrow>
        <div style={{ height: 22 }} />
        <div style={{ color: 'var(--hg-cream-50)' }}>
          <Display size="display" style={{ fontSize: 72, textShadow: '0 2px 20px rgba(42,38,32,0.55)' }}>
            Your guests will remember<br />
            one afternoon this year.<br />
            <em style={{ fontStyle: 'italic', color: 'var(--hg-sun-300)' }}>Make it yours.</em>
          </Display>
        </div>
        <div style={{ height: 28 }} />
        <p style={{
          fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
          fontSize: 21, lineHeight: 1.55, color: 'var(--hg-cream-100)',
          margin: '0 auto', maxWidth: '48ch', textShadow: '0 1px 14px rgba(42,38,32,0.6)'
        }}>
          Tell us your date and your vibe &mdash; we&rsquo;ll handle everything else, and back it with a
          guarantee. Only a handful of private tea dates open each month.
        </p>
        <div style={{ height: 40 }} />
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Pill as="a" href="#" variant="onDark">Book a private tea tour</Pill>
          <Pill as="a" href="#" variant="outline" style={{
            color: 'var(--hg-cream-100)', borderColor: 'var(--hg-cream-100)', background: 'transparent'
          }}>Book a 15-minute call</Pill>
        </div>
        <div style={{ height: 56 }} />
        <div style={{
          display: 'flex', gap: 30, justifyContent: 'center', flexWrap: 'wrap',
          fontFamily: 'var(--hg-font-sans)', fontSize: 11, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: 'var(--hg-cream-200)'
        }}>
          <span>25% deposit reserves your date</span>
          <Diamond color="var(--hg-cream-300)" size={10} />
          <span>A few private dates each month</span>
          <Diamond color="var(--hg-cream-300)" size={10} />
          <span>Tucson, Arizona</span>
        </div>
      </div>
    </section>);

}

function SiteFooter() {
  return (
    <footer style={{
      background: 'var(--hg-sage-900)', color: 'var(--hg-cream-100)', padding: '64px 48px 32px'
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.2fr 1fr 1.4fr', gap: 48
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <img src="assets/logo.png" alt="Himaya Garden" style={{
            filter: 'brightness(0) invert(1) opacity(0.92)', width: '56px', height: '56px'
          }} />
          <p style={{
            fontFamily: 'var(--hg-font-display)', fontSize: 22, lineHeight: 1.25,
            margin: 0, color: 'var(--hg-cream-200)', maxWidth: '20ch'
          }}>Where celebrations feel like home</p>
        </div>
        <div>
          <p style={{
            fontFamily: 'var(--hg-font-sans)', fontSize: 11, textTransform: 'uppercase',
            letterSpacing: '0.22em', color: 'var(--hg-cream-300)', margin: '0 0 14px'
          }}>The experience</p>
          <ul style={{
            listStyle: 'none', padding: 0, margin: 0,
            fontFamily: 'var(--hg-font-serif)', fontSize: 15, lineHeight: 2
          }}>
            <li>The Afternoon</li>
            <li>What&rsquo;s Included</li>
            <li>Investment</li>
            <li>The Guarantee</li>
            <li>FAQ</li>
          </ul>
        </div>
        <div>
          <p style={{
            fontFamily: 'var(--hg-font-sans)', fontSize: 11, textTransform: 'uppercase',
            letterSpacing: '0.22em', color: 'var(--hg-cream-300)', margin: '0 0 14px'
          }}>Connect with us</p>
          <p style={{ fontFamily: 'var(--hg-font-serif)', fontSize: 14.5, margin: '4px 0' }}>427 East Limberlost Drive, Tucson, Arizona</p>
          <p style={{ fontFamily: 'var(--hg-font-serif)', fontSize: 14.5, margin: '4px 0' }}>hello@himayagarden.com</p>
          <p style={{ fontFamily: 'var(--hg-font-serif)', fontSize: 14.5, margin: '4px 0' }}>+1 (520) 467-1033</p>
        </div>
      </div>
      <div style={{
        textAlign: 'center', fontFamily: 'var(--hg-font-sans)', fontSize: 11.5,
        color: 'var(--hg-cream-300)', marginTop: 48, paddingTop: 24,
        borderTop: '1px solid rgba(250,246,238,0.18)', letterSpacing: '0.12em'
      }}>© 2026 Himaya Garden &nbsp;·&nbsp; The Dragonfly Tea Experience™ &nbsp;·&nbsp; A Dragonfly Cakes® property</div>
    </footer>);

}

window.FinalCTA = FinalCTA;
window.SiteFooter = SiteFooter;