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);
  return (
    <main style={{padding:'72px var(--gutter-page-lg) 0'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'1fr 1fr',gap:64,alignItems:'start'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
          <SectionHeader eyebrow="Besuch" title="Komm vorbei" intro="Hauptstraße 12, 10827 Berlin — zwei Minuten vom U-Bahnhof, die Tür mit dem gezeichneten Schild." />
          <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 todayIndex={2} hours={[{day:'Montag'},{day:'Dienstag'},{day:'Mittwoch',hours:'10:00 – 16:00'},{day:'Donnerstag',hours:'10:00 – 16:00'},{day:'Freitag',hours:'10:00 – 16:00'},{day:'Samstag',hours:'10:00 – 16:00'},{day:'Sonntag'}]} />
          </div>
        </div>
        <Card variant="paper" padding="var(--space-7)" 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:'1fr 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={['Mittwoch','Donnerstag','Freitag','Samstag']} /></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});