const {Card,Button,Badge,Divider}=window.KlayKeramikAmpCafDesignSystem_6e7cc9;

/* Klay's Setmore booking page. Replace SETMORE_URL with the studio's real
   booking link (e.g. https://klay-keramik.setmore.com). */
const SETMORE_URL='https://klay-keramik.setmore.com';
const openSetmore=()=>window.open(SETMORE_URL,'_blank','noopener');

/** Small "opens Setmore" hint used next to every booking CTA. */
function SetmoreHint({style}){
  return (
    <span style={{display:'inline-flex',alignItems:'center',gap:'var(--space-2)',
      fontFamily:'var(--font-body)',fontSize:'var(--text-xs)',fontWeight:300,
      color:'var(--text-muted)',letterSpacing:'var(--tracking-wide)',...style}}>
      <span aria-hidden="true" style={{width:5,height:5,borderRadius:'999px',background:'var(--klay-clay-300)'}}></span>
      Buchung über Setmore <span aria-hidden="true">↗</span>
    </span>
  );
}

/** Full-width band explaining the external booking, placed above the footer. */
function SetmoreBand(){
  return (
    <section style={{padding:'96px var(--gutter-page-lg) 0'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto'}}>
        <Card variant="inverse" padding="var(--space-8)"
          style={{display:'grid',gridTemplateColumns:'1.25fr .75fr',gap:'var(--space-8)',alignItems:'center'}}>
          <div style={{display:'flex',flexDirection:'column',gap:'var(--space-4)',alignItems:'flex-start'}}>
            <span className="klay-label" style={{color:'rgba(247,244,238,.55)'}}>Kursbuchung</span>
            <h2 style={{fontSize:'var(--text-h2)',color:'var(--klay-paper)',margin:0}}>Alle Termine liegen in unserem Setmore-Kalender.</h2>
            <p style={{fontFamily:'var(--font-body)',fontWeight:300,fontSize:'var(--text-lead)',
              lineHeight:'var(--leading-body)',color:'rgba(247,244,238,.72)',maxWidth:'46ch',margin:0}}>
              Du siehst dort in Echtzeit, welche Plätze frei sind, buchst in zwei Schritten und bekommst die
              Bestätigung sofort per Mail. Umbuchen und absagen geht über denselben Link.
            </p>
            <div style={{display:'flex',alignItems:'center',gap:'var(--space-5)',flexWrap:'wrap',marginTop:'var(--space-2)'}}>
              <Button size="lg" variant="clay" onClick={openSetmore}>Termin bei Setmore wählen</Button>
              <SetmoreHint style={{color:'rgba(247,244,238,.55)'}} />
            </div>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)',
            paddingLeft:'var(--space-6)',borderLeft:'1px solid rgba(247,244,238,.18)'}}>
            {[['1','Kurs und Termin im Kalender wählen'],['2','Name und Mail eintragen'],['3','Bestätigung kommt direkt per Mail']].map(([n,t])=>(
              <div key={n} style={{display:'flex',gap:'var(--space-3)',alignItems:'baseline'}}>
                <span style={{fontFamily:'var(--font-display)',fontSize:'var(--text-h4)',color:'var(--klay-clay-200)',flex:'0 0 auto'}}>{n}</span>
                <span style={{fontFamily:'var(--font-body)',fontWeight:300,fontSize:'var(--text-sm)',
                  lineHeight:'var(--leading-snug)',color:'rgba(247,244,238,.8)'}}>{t}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </section>
  );
}

Object.assign(window,{SETMORE_URL,openSetmore,SetmoreHint,SetmoreBand});