const {Button,Eyebrow,Rule}=window.AllTappedOutDesignSystem_c261bd;
const ATD_P='./assets/photography/';

function Hero({onNavigate}){
  return <header id="top" style={{position:'relative',minHeight:'min(860px,100vh)',display:'flex',flexDirection:'column'}}>
    <div style={{position:'absolute',inset:0,overflow:'hidden'}}>
      <img src={ATD_P+'hero-wedding-sunset.png'} alt="The All Tapped Out Piaggio Ape tap truck open and serving at a Lowcountry wedding at sunset" style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'center 55%'}}/>
      <span style={{position:'absolute',inset:0,background:'linear-gradient(to right,rgba(23,26,27,.66),rgba(23,26,27,.34) 52%,rgba(23,26,27,.12) 100%)'}}/>
      <span style={{position:'absolute',inset:0,background:'var(--scrim-bottom)'}}/>
    </div>
    <div style={{position:'relative',flex:1,display:'flex',flexDirection:'column',justifyContent:'flex-end',padding:'0 var(--gutter)',maxWidth:'var(--maxw-page)',margin:'0 auto',width:'100%',boxSizing:'border-box'}}>
      <div className="hero-pad" style={{maxWidth:'660px',display:'flex',flexDirection:'column',gap:'26px',padding:'180px 0 84px'}}>
        <Eyebrow tone="inverse" rule>Lowcountry &middot; Vintage Italian mobile bar</Eyebrow>
        <h1 style={{font:'400 clamp(40px,5.4vw,80px)/1.04 var(--font-serif)',letterSpacing:'var(--track-display)',color:'var(--text-on-inverse)',textWrap:'balance'}}>A vintage Italian bar at the heart of your celebration.</h1>
        <p style={{font:'var(--type-body-lg)',color:'rgba(251,247,240,.9)',maxWidth:'var(--measure-lede)'}}>Our 1987 Piaggio Ape transforms into a one-of-a-kind mobile bar experience for weddings, parties and events throughout the Lowcountry.</p>
        <div className="hero-cta" style={{display:'flex',gap:'14px',flexWrap:'wrap',paddingTop:'6px'}}>
          <Button variant="inverse" size="lg" href="#date" onClick={e=>{e.preventDefault();onNavigate('date');}}>Check your date</Button>
          <Button variant="inverseOutline" size="lg" href="#experience" onClick={e=>{e.preventDefault();onNavigate('experience');}}>See the experience</Button>
        </div>
      </div>
    </div>
    <div className="hero-strip" style={{position:'relative',borderTop:'1px solid var(--line-on-inverse)',background:'rgba(23,26,27,.5)',backdropFilter:'var(--blur-glass)'}}>
      <div style={{maxWidth:'var(--maxw-page)',margin:'0 auto',padding:'20px var(--gutter)',display:'flex',flexWrap:'wrap',gap:'14px 34px',alignItems:'center',justifyContent:'space-between'}}>
        {['One truck, a limited number of events','Two working taps','Professional bartending available','Hilton Head &middot; Bluffton &middot; Beaufort &middot; Savannah'].map((t,i)=>
          <span key={i} style={{font:'var(--type-label)',letterSpacing:'var(--track-label)',textTransform:'uppercase',color:'rgba(251,247,240,.8)'}} dangerouslySetInnerHTML={{__html:t}}/>)}
      </div>
    </div>
  </header>;
}
Object.assign(window,{Hero});