const {Button,Eyebrow,SectionHeading,Rule,Badge,Card,PhotoFrame}=window.AllTappedOutDesignSystem_c261bd;
const OP='./assets/photography/';
const OBand=({children,tone='page',id})=>{
  const bg={page:'var(--surface-page)',sunken:'var(--surface-sunken)',ink:'var(--surface-inverse)',mint:'var(--mint-50)'}[tone];
  return <section id={id} style={{background:bg,padding:'var(--section-y) var(--gutter)'}}>
    <div style={{maxWidth:'var(--maxw-page)',margin:'0 auto'}}>{children}</div></section>;
};

const ENHANCEMENTS=[
  {t:'Professional bartending',c:'Experienced bartenders behind the bar for the length of your service.'},
  {t:'Signature cocktail service',c:'We help design and plan a signature pour, then serve it from the truck.'},
  {t:'Styling & finishing details',c:'Optional signage, florals and finishing details can be discussed for your event.'},
  {t:'Other enhancements',c:'Tell us what the event needs. If we can do it well, we will quote it.'}
];
function BuildSection(){
  return <OBand id="build" tone="mint">
    <div className="build-grid" style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:'var(--space-9)',alignItems:'start'}}>
      <div className="build-col" style={{display:'flex',flexDirection:'column',gap:'24px'}}>
        <SectionHeading eyebrow="Build your experience" title="Start with the truck. Add what the day needs."
          lede="Every booking starts with the truck experience — the Ape, the taps, the setup and the service. Everything below is selected per event, so nothing is assumed and nothing is padded."/>
        <Card tone="ivory" padding="var(--space-6)" style={{display:'flex',flexDirection:'column',gap:'12px'}}>
          <Badge tone="mint">The foundation</Badge>
          <h3 style={{font:'var(--type-display-3)',fontSize:'28px'}}>The truck experience</h3>
          <p style={{font:'var(--type-body)',color:'var(--text-body)'}}>The restored Piaggio Ape positioned and opened at your event, two working taps, and a bar ready to serve what you have chosen.</p>
        </Card>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr',gap:'0',borderTop:'1px solid var(--line-hairline)'}}>
        {ENHANCEMENTS.map(e=><div key={e.t} className="enh-row" style={{padding:'22px 0',borderBottom:'1px solid var(--line-hairline)',display:'flex',gap:'18px',alignItems:'baseline'}}>
          <i style={{flex:'0 0 auto',width:'5px',height:'5px',transform:'rotate(45deg)',background:'var(--brass-500)'}}/>
          <div><h4 style={{font:'var(--type-title)',fontSize:'22px'}}>{e.t}</h4>
          <p style={{font:'var(--type-body)',color:'var(--text-body)',marginTop:'6px'}}>{e.c}</p></div>
        </div>)}
        <p style={{font:'var(--type-caption)',color:'var(--text-muted)',marginTop:'18px'}}>Enhancements are chosen per event and are not automatically included.</p>
      </div>
    </div>
  </OBand>;
}

const SHOTS=['hero-wedding-sunset.png','truck-marsh-deck-dusk.jpeg','truck-prosecco-umbrella.jpeg','truck-autumn-oaks.jpeg','bar-interior-taps.jpeg','truck-prosecco-detail.jpeg','truck-courtyard.jpeg','truck-marsh-wide.jpeg'];
function GallerySection(){
  return <section id="gallery" style={{background:'var(--surface-inverse)',padding:'var(--section-y) 0'}}>
    <div style={{maxWidth:'var(--maxw-page)',margin:'0 auto',padding:'0 var(--gutter)'}}>
      <SectionHeading tone="inverse" align="center" eyebrow="Gallery" title="Picture this at your event"
        lede="A mix of photography from the truck and illustrative imagery showing how the Ape can look at an event." style={{margin:'0 auto'}}/>
    </div>
    <div className="gal-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gridAutoRows:'clamp(150px,14vw,220px)',gap:'10px',marginTop:'var(--space-8)',padding:'0 10px'}}>
      {SHOTS.map((s,i)=><div key={s} style={{gridColumn:i===0?'span 2':(i===SHOTS.length-1?'span 2':'auto'),gridRow:i===0?'span 2':'auto',overflow:'hidden'}}>
        <img src={OP+s} alt="" style={{width:'100%',height:'100%',objectFit:'cover',transition:'var(--motion-image)'}}
          onMouseEnter={e=>e.currentTarget.style.transform='scale(1.04)'} onMouseLeave={e=>e.currentTarget.style.transform='none'}/>
      </div>)}
    </div>
  </section>;
}

function PricingSection({onNavigate}){
  return <OBand id="pricing">
    <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:'var(--space-9)',alignItems:'center'}}>
      <SectionHeading eyebrow="Pricing" title="Simple, and built around your event"/>
      <div style={{display:'flex',flexDirection:'column',gap:'22px'}}>
        <p style={{font:'var(--type-display-3)',fontSize:'clamp(30px,3.4vw,44px)',color:'var(--text-display)'}}>Custom experiences starting at $1,750.</p>
        <Rule variant="hairline"/>
        <p style={{font:'var(--type-body)',color:'var(--text-body)',maxWidth:'var(--measure-lede)'}}>Final pricing depends on the details — date, location, length of service and which enhancements you choose. Send us the date and we will put together a quote for your event specifically.</p>
        <div><Button size="lg" href="#date" onClick={e=>{e.preventDefault();onNavigate('date');}}>Check your date</Button></div>
      </div>
    </div>
  </OBand>;
}
Object.assign(window,{BuildSection,GallerySection,PricingSection});