const {Card,Field,Input,Textarea,Select,Checkbox,Button,HoursList,SectionHeader,Divider,ImageFrame,Notice}=window.KlayKeramikAmpCafDesignSystem_6e7cc9;

function BesuchScreen({onSubmit}){
  const [news,setNews]=React.useState(true);
  const {adresse}=window.KLAY.studio;
  return (
    <main style={{padding:'clamp(36px,6vw,72px) var(--gutter-page-lg) 0'}}>
      <div className="klay-split" style={{maxWidth:'var(--container-max)',margin:'0 auto','--split':'1fr 1fr',alignItems:'start'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
          <SectionHeader eyebrow="Besuch" title="Komm vorbei" intro={`${adresse.strasse}, ${adresse.ort} — ${adresse.wegbeschreibung}.`} />
          <img src="../../assets/illustrations/storefront-sketch.jpeg" alt="Zeichnung der Ladenfront" style={{width:'100%',borderRadius:'var(--radius-lg)'}} />
          <div>
            <Divider label="Öffnungszeiten" style={{marginBottom:'var(--space-4)'}} />
            <HoursList {...window.klayHours()} />
          </div>
        </div>
        <Card variant="paper" padding="clamp(24px,5vw,48px)" style={{display:'flex',flexDirection:'column',gap:'var(--space-5)'}}>
          <div style={{display:'flex',flexDirection:'column',gap:'var(--space-2)'}}>
            <span className="klay-label">Anfrage</span>
            <h2 style={{fontSize:'var(--text-h3)',margin:0}}>Gruppe oder Feier anmelden</h2>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,180px),1fr))',gap:'var(--space-4)'}}>
            <Field label="Name" htmlFor="n"><Input id="n" placeholder="Mia Berger" /></Field>
            <Field label="E-Mail" htmlFor="m"><Input id="m" placeholder="du@beispiel.de" /></Field>
            <Field label="Personen" htmlFor="p"><Select id="p" options={['6 Personen','8 Personen','10 Personen','12+ Personen']} /></Field>
            <Field label="Wunschtag" htmlFor="t"><Select id="t" options={window.klayOpenDays()} /></Field>
          </div>
          <Field label="Notiz" htmlFor="no" hint="Anlass, Zeitfenster, Allergien"><Textarea id="no" rows={3} placeholder="Geburtstag, wir würden gern Tassen machen …" /></Field>
          <Checkbox label="Newsletter — ein Brief pro Monat, keine Werbung" checked={news} onChange={e=>setNews(e.target.checked)} />
          <Button size="lg" full onClick={onSubmit}>Anfrage senden</Button>
          <Notice tone="info">Wir antworten innerhalb von zwei Werktagen — meistens noch am selben Nachmittag.</Notice>
        </Card>
      </div>
    </main>
  );
}
Object.assign(window,{BesuchScreen});