const {Button,Eyebrow,SectionHeading,Rule,Input,Textarea,Select,Logo,Accordion,ChalkboardSign}=window.AllTappedOutDesignSystem_c261bd;
const BP='./assets/photography/';

/* CHECK YOUR DATE FORM
   Posts to send-inquiry.php, which emails alltappedoutsc@gmail.com.
   Fields: name, email, phone, event-date, event-type, guest-count,
   location, notes, plus the bot-field honeypot. */
const FORM_ENDPOINT='/send-inquiry.php';

const FAQ=[
  {id:'alcohol',question:'Who provides the alcohol?',answer:'You do. All beverages are supplied by the client or the event, and we do not sell or provide alcohol. What we do is help you plan it — how much to buy, and what will work best through the taps for your guest count and the shape of the day.'},
  {id:'taps',question:'What can be served through the taps?',answer:'There are two active taps. Beer, wine, prosecco and champagne-style beverages, and properly prepared batched cocktails can all be served depending on the event. We will help you land on the best setup for what you want to pour.'},
  {id:'bar',question:'Do you provide bartenders?',answer:'Yes. Professional bartending is available as an enhancement, so you can have experienced hands behind the bar for the length of your service.'},
  {id:'travel',question:'Where do you travel?',answer:'Hilton Head, Bluffton, Beaufort, Savannah and the surrounding Lowcountry are our primary service areas. Charleston may also be served depending on the event — ask us with your date.'},
  {id:'setup',question:'What do you need for setup?',answer:'A reasonably level, accessible area where the truck can be safely positioned. Exact setup requirements are confirmed with you or your venue before the event.'},
  {id:'reserve',question:'How early should we reserve a date?',answer:'As early as you can. There is one truck and we intentionally take a limited number of events, so popular dates tend to go first. There is no set booking window — send your date and we will tell you honestly whether it is open.'}
];
function FaqSection(){
  return <section id="faq" style={{background:'var(--surface-sunken)',padding:'var(--section-y) var(--gutter)'}}>
    <div style={{maxWidth:'var(--maxw-page)',margin:'0 auto',display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:'var(--space-9)',alignItems:'start'}}>
      <div style={{display:'flex',flexDirection:'column',gap:'28px'}}>
        <SectionHeading eyebrow="Good to know" title="The practical part"/>
        <ChalkboardSign width="260px"><Logo src="./assets/logo/atd-secondary-ivory.png" height={150}/></ChalkboardSign>
      </div>
      <Accordion items={FAQ}/>
    </div>
  </section>;
}

function DateSection(){
  const [sent,setSent]=React.useState(false);
  const [busy,setBusy]=React.useState(false);
  const [failed,setFailed]=React.useState(false);
  const submit=e=>{
    e.preventDefault();
    const form=e.target;
    const data=new URLSearchParams(new FormData(form));
    if(!FORM_ENDPOINT){console.warn('[All Tapped Out] FORM_ENDPOINT is not set — inquiry was not sent.',Object.fromEntries(data));form.reset();setSent(true);return;}
    setBusy(true);setFailed(false);
    fetch(FORM_ENDPOINT,{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded',Accept:'application/json'},body:data.toString()})
      .then(r=>r.json().catch(()=>({ok:r.ok})).then(d=>{if(!r.ok||!d.ok)throw new Error(d.error||r.status);form.reset();setSent(true);}))
      .catch(()=>setFailed(true))
      .finally(()=>setBusy(false));
  };
  return <section id="date" style={{position:'relative'}}>
    <div style={{position:'absolute',inset:0,overflow:'hidden'}}>
      <img src={BP+'truck-marsh-golden-hour.jpeg'} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
      <span style={{position:'absolute',inset:0,background:'rgba(23,26,27,.72)'}}/>
    </div>
    <div style={{position:'relative',maxWidth:'var(--maxw-page)',margin:'0 auto',padding:'var(--section-y) var(--gutter)',display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',gap:'var(--space-9)',alignItems:'start'}}>
      <div style={{display:'flex',flexDirection:'column',gap:'24px'}}>
        <Eyebrow tone="inverse" rule>Check your date</Eyebrow>
        <h2 style={{font:'var(--type-display-2)',color:'var(--text-on-inverse)',textWrap:'balance'}}>One truck. A limited number of events.</h2>
        <p style={{font:'var(--type-body-lg)',color:'rgba(251,247,240,.88)',maxWidth:'var(--measure-lede)'}}>There is one Ape, and we keep the calendar small on purpose so every event gets the attention it should. Popular dates are reserved first. Send yours and we will tell you honestly whether it is open.</p>
        <Rule variant="inverse" width="180px"/>
        <div style={{display:'flex',flexDirection:'column',gap:'6px'}}>
          <span style={{font:'var(--type-body)',color:'rgba(251,247,240,.82)'}}>alltappedoutsc@gmail.com</span>
          <span style={{font:'var(--type-body)',color:'rgba(251,247,240,.82)'}}>843-368-0806</span>
        </div>
      </div>
      <div className="date-card" style={{background:'var(--surface-raised)',padding:'var(--space-7)',boxShadow:'var(--shadow-raised,0 24px 60px rgba(23,40,42,.28))'}}>
        {sent
          ? <div style={{display:'flex',flexDirection:'column',gap:'14px'}}>
              <h3 style={{font:'var(--type-display-3)',fontSize:'32px'}}>That&rsquo;s in.</h3>
              <p style={{font:'var(--type-body)',color:'var(--text-body)'}}>We will come back to you on availability for that date, and go from there.</p>
              <Button variant="ghost" onClick={()=>setSent(false)}>Send another date</Button>
            </div>
          : <form name="check-your-date" method="POST" onSubmit={submit} style={{display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
            <p hidden><label>Leave blank<input name="bot-field" tabIndex={-1} autoComplete="off"/></label></p>
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(180px,1fr))',gap:'var(--space-6)'}}>
              <Input label="Name" id="bk-name" name="name" required/>
              <Input label="Email" id="bk-email" name="email" type="email" required/>
              <Input label="Phone" id="bk-phone" name="phone" type="tel"/>
              <Input label="Event date" id="bk-date" name="event-date" placeholder="October 18, 2026" required/>
              <Select label="Event type" id="bk-type" name="event-type" options={['Wedding','Cocktail hour','Rehearsal dinner','Bridal event','Golf event','Corporate event','Private party','Something else']}/>
              <Input label="Guest count" id="bk-guests" name="guest-count" hint="An estimate is fine."/>
            </div>
            <Input label="Location or venue" id="bk-venue" name="location" placeholder="Bluffton, SC"/>
            <Textarea label="Anything else" id="bk-note" name="notes" rows={3} hint="What you are hoping to serve, timing, enhancements you are curious about."/>
            {failed&&<span style={{font:'var(--type-body-sm)',color:'var(--wood-700)'}}>That didn&rsquo;t send. Please email alltappedoutsc@gmail.com or call 843-368-0806.</span>}
            <Button size="lg" type="submit" disabled={busy}>{busy?'Sending\u2026':'Check my date'}</Button>
          </form>}
      </div>
    </div>
  </section>;
}

function SiteFooter({onNavigate}){
  return <footer style={{background:'var(--surface-inverse)',color:'var(--text-on-inverse)',padding:'var(--space-9) var(--gutter) var(--space-6)',borderTop:'1px solid var(--line-on-inverse)'}}>
    <div style={{maxWidth:'var(--maxw-page)',margin:'0 auto',display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))',gap:'var(--space-8)',alignItems:'start'}}>
      <div style={{display:'flex',flexDirection:'column',gap:'20px'}}>
        <Logo src="./assets/logo/atd-primary-ivory.png" height={110}/>
        <p style={{font:'var(--type-body-sm)',color:'rgba(251,247,240,.7)',maxWidth:'34ch'}}>A vintage Italian tap truck for weddings and upscale events across the South Carolina Lowcountry.</p>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:'12px'}}>
        <Eyebrow tone="inverse">Explore</Eyebrow>
        {[['experience','The experience'],['how','How it works'],['build','Build your experience'],['gallery','Gallery'],['pricing','Pricing'],['faq','FAQ']].map(([id,l])=>
          <a key={id} href={'#'+id} onClick={e=>{e.preventDefault();onNavigate(id);}} style={{font:'var(--type-body-sm)',color:'rgba(251,247,240,.82)',border:0}}>{l}</a>)}
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:'12px'}}>
        <Eyebrow tone="inverse">Get in touch</Eyebrow>
        <span style={{font:'var(--type-body-sm)',color:'rgba(251,247,240,.82)'}}>alltappedoutsc@gmail.com</span>
        <span style={{font:'var(--type-body-sm)',color:'rgba(251,247,240,.82)'}}>843-368-0806</span>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:'12px'}}>
        <Eyebrow tone="inverse">Where we serve</Eyebrow>
        <span style={{font:'var(--type-body-sm)',color:'rgba(251,247,240,.82)'}}>Hilton Head &middot; Bluffton &middot; Beaufort &middot; Savannah and the surrounding Lowcountry</span>
        <span style={{font:'var(--type-body-sm)',color:'rgba(251,247,240,.6)'}}>Charleston depending on the event</span>
      </div>
    </div>
    <div style={{maxWidth:'var(--maxw-page)',margin:'var(--space-8) auto 0',paddingTop:'var(--space-5)',borderTop:'1px solid var(--line-on-inverse)',display:'flex',justifyContent:'space-between',gap:'16px',flexWrap:'wrap'}}>
      <span style={{font:'var(--type-caption)',color:'rgba(251,247,240,.5)'}}>&copy; 2026 All Tapped Out</span>
      <span style={{font:'var(--type-caption)',color:'rgba(251,247,240,.5)'}}>Beverages are supplied by the client. We do not sell or provide alcohol.</span>
    </div>
  </footer>;
}
Object.assign(window,{FaqSection,DateSection,SiteFooter});