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

function FinalCTA() {
  return (
    <section id="tour" style={{
      position: 'relative',
      backgroundImage: "url('assets/garden-at-night.jpg')",
      backgroundSize: 'cover', backgroundPosition: 'center',
      padding: '160px 48px'
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(47,74,60,0.55), rgba(42,38,32,0.78))'
      }} />
      <div style={{
        position: 'relative', maxWidth: 820, margin: '0 auto', textAlign: 'center',
        color: 'var(--hg-cream-100)'
      }}>
        <Eyebrow light>Your date, while it's still open</Eyebrow>
        <div style={{ height: 22 }} />
        <div style={{ color: 'var(--hg-cream-50)' }}>
          <Display size="display" style={{ fontSize: 76 }}>
            Walk the garden.<br />
            <em style={{ fontStyle: 'italic', color: 'var(--hg-sun-300)' }}>Then decide.</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: '46ch'
        }}>
          Tour the property, walk the ceremony lawn, see the tea house, get a custom
          quote for your guest count. If it feels like your place, reserve with a
          30% deposit and lock in your Welcome High Tea bonus within seven days.
        </p>
        <div style={{ height: 40 }} />
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Pill as="a" href="#" variant="onDark">Book a tour</Pill>
          <Pill as="a" href="#" variant="outline" style={{
            color: 'var(--hg-cream-100)', borderColor: 'var(--hg-cream-100)', background: 'transparent'
          }}>Talk to us</Pill>
        </div>
        <div style={{ height: 56 }} />
        <div style={{
          display: 'flex', gap: 36, justifyContent: 'center', flexWrap: 'wrap',
          fontFamily: 'var(--hg-font-sans)', fontSize: 11, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: 'var(--hg-cream-200)'
        }}>
          <span>30% deposit reserves the date</span>
          <Diamond color="var(--hg-cream-300)" size={10} />
          <span>October&ndash;June seasons</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 package</p>
          <ul style={{
            listStyle: 'none', padding: 0, margin: 0,
            fontFamily: 'var(--hg-font-serif)', fontSize: 15, lineHeight: 2
          }}>
            <li>The Day</li>
            <li>What's Included</li>
            <li>Investment</li>
            <li>The Promise</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' }}>📧 weddings@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; A Dragonfly Cakes® property</div>
    </footer>);

}

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