const {Button,Eyebrow,SectionHeading,Rule,Badge,Card,PhotoFrame}=window.AllTappedOutDesignSystem_c261bd;
const P='./assets/photography/';
const Band=({children,tone='page',id,pad=true})=>{
  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:pad?'var(--section-y) var(--gutter)':0}}>
    <div style={{maxWidth:'var(--maxw-page)',margin:'0 auto'}}>{children}</div></section>;
};

function ExperienceSection(){
  const cols=[
    {t:'The truck',c:'A hand-restored Piaggio Ape in pistachio green, with a pine bar built into the back. It is a design object first and a bar second — which is exactly why it works.'},
    {t:'The service',c:'Two working taps, chilled glassware and a pour that keeps moving. Professional bartending is available when you want hands behind the bar all evening.'},
    {t:'The setting',c:'Styled to your palette with signage, florals and finishing details, so the truck belongs in your photographs rather than sitting behind them.'}
  ];
  return <Band id="experience">
    <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',gap:'var(--space-9)',alignItems:'center'}}>
      <div className="exp-photos" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'16px'}}>
        <PhotoFrame src={P+'truck-portrait-chalkboard.jpeg'} ratio="3 / 4" alt="The mint Piaggio Ape with the All Tapped Out chalkboard sign"/>
        <PhotoFrame src={P+'bar-interior-taps.jpeg'} ratio="3 / 4" alt="Pine bar interior with two taps and marquee PROSECCO letters" style={{marginTop:'48px'}}/>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:'26px'}}>
        <SectionHeading eyebrow="The experience" title="More than a mobile bar. A centerpiece."
          lede="Most bars get tucked out of the way. This one gets a spot in the photos. The Ape came over from Italy, went down to the frame, and came back out as something guests gather around all night."/>
        <Rule variant="ornament" width="200px"/>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(200px,1fr))',gap:'24px'}}>
          {cols.map(c=><div key={c.t}>
            <h3 style={{font:'var(--type-title)',fontSize:'22px'}}>{c.t}</h3>
            <p style={{font:'var(--type-body)',color:'var(--text-body)',marginTop:'8px'}}>{c.c}</p>
          </div>)}
        </div>
      </div>
    </div>
  </Band>;
}

const STEPS=[
  {n:'01',t:'Check your date',c:'Send us the date first. We have one truck, so availability is the only place to start.'},
  {n:'02',t:'Tell us about the event',c:'Where it is, how many guests, the shape of the day and the look you are after.'},
  {n:'03',t:'We help plan the bar',c:'What to serve, how much to buy, how the taps and service should run.'},
  {n:'04',t:'You provide the beverages',c:'The alcohol is always supplied by you. We guide the quantities and selections.'},
  {n:'05',t:'We arrive and serve',c:'The truck is positioned, styled and opened, and the pour is handled from there.'}
];
function HowItWorksSection(){
  return <Band id="how" tone="sunken">
    <SectionHeading eyebrow="How it works" title="Five steps, no guesswork"
      lede="We handle the bar. You choose what goes in it."/>
    <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(210px,1fr))',gap:'0',marginTop:'var(--space-8)',borderTop:'1px solid var(--line-hairline)'}}>
      {STEPS.map(s=><div key={s.n} className="step" style={{padding:'28px 26px 32px 0',display:'flex',flexDirection:'column',gap:'12px'}}>
        <span style={{font:'var(--type-label)',fontSize:'14px',letterSpacing:'var(--track-label)',color:'var(--brass-700)'}}>{s.n}</span>
        <h3 style={{font:'var(--type-title)',fontSize:'23px'}}>{s.t}</h3>
        <p style={{font:'var(--type-body)',color:'var(--text-body)'}}>{s.c}</p>
      </div>)}
    </div>
  </Band>;
}

const OCCASIONS=['Weddings','Cocktail hours','Rehearsal dinners','Bridal events','Golf events','Corporate events','Private parties','Upscale celebrations'];
function PerfectForSection(){
  return <Band id="occasions">
    <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',gap:'var(--space-9)',alignItems:'center'}}>
      <div style={{display:'flex',flexDirection:'column',gap:'26px'}}>
        <SectionHeading eyebrow="Perfect for" title="Built for the occasions that deserve it"
          lede="Anywhere a conventional bar would feel like furniture, the Ape feels like part of the celebration."/>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'0',borderTop:'1px solid var(--line-hairline)'}}>
          {OCCASIONS.map(o=><span key={o} className="occ-item" style={{font:'var(--type-body)',color:'var(--text-display)',padding:'14px 0',borderBottom:'1px solid var(--line-hairline)'}}>{o}</span>)}
        </div>
      </div>
      <PhotoFrame src={P+'truck-guests-event.jpeg'} ratio="4 / 5" alt="Guests gathered at the truck during an event"/>
    </div>
  </Band>;
}
Object.assign(window,{Band,ExperienceSection,HowItWorksSection,PerfectForSection});