const {Card,Button}=window.KlayKeramikAmpCafDesignSystem_6e7cc9;

/* Buchung, Bezahlung und Gutscheineinlösung liegen beim externen Anbieter.
   Diese Datei nennt ihn nirgends beim Namen — alles kommt aus
   content/site.json unter "buchung". Ein Anbieterwechsel ist damit eine
   Inhaltsänderung. Erst beim Klick gelesen, weil die Inhalte dann sicher da sind. */
const buchung=()=>window.KLAY.buchung;

/* {anbieter} in jedem Text durch den Anbieternamen ersetzen. Damit steht der
   Name genau einmal in der Inhaltsdatei und kann sich nicht widersprechen. */
const txt=s=>String(s||'').replace(/\{anbieter\}/g,buchung().anbieter);
const buchungsUrl=()=>buchung().url;
const openBuchung=()=>window.open(buchungsUrl(),'_blank','noopener');
const gutschein=()=>buchung().gutschein||{};
const gutscheinAktiv=()=>!!gutschein().aktiv;
const openGutschein=()=>window.open(gutschein().url||buchungsUrl(),'_blank','noopener');

/** Kleiner Hinweis neben jeder Buchungs-Schaltfläche: wo es weitergeht. */
function BuchungsHinweis({text,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>
      {txt(text||buchung().hinweis)} <span aria-hidden="true">↗</span>
    </span>
  );
}

/** Sagt vor dem Absprung, dass ein Gutschein drüben eingelöst werden kann.
 *  Rendert nichts, wenn keine Gutscheine verkauft werden. */
function GutscheinHinweis({style}){
  if(!gutscheinAktiv()||!gutschein().einloesehinweis) return null;
  return <BuchungsHinweis text={gutschein().einloesehinweis} style={style} />;
}

/** Der Gutschein als Produkt — eigene Karte auf der Kursseite. */
function GutscheinKarte(){
  if(!gutscheinAktiv()) return null;
  const g=gutschein();
  return (
    <Card variant="paper" padding="clamp(24px,4vw,40px)"
      className="klay-split" style={{'--split':'1.4fr .6fr',alignItems:'center'}}>
      <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)',alignItems:'flex-start'}}>
        <span className="klay-label">{g.kennzeichen}</span>
        <h3 style={{fontFamily:'var(--font-display)',fontSize:'var(--text-h3)',color:'var(--text-display)',margin:0,fontWeight:400}}>{g.titel}</h3>
        <p style={{fontFamily:'var(--font-body)',fontWeight:300,fontSize:'var(--text-sm)',
          lineHeight:'var(--leading-body)',color:'var(--text-body)',margin:0,maxWidth:'var(--measure-prose)'}}>{g.text}</p>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)',alignItems:'flex-start'}}>
        <Button variant="clay" onClick={openGutschein}>{g.aktion}</Button>
        <BuchungsHinweis text={g.hinweis} />
      </div>
    </Card>
  );
}

/** Breites Band über der Fußzeile: erklärt die externe Buchung in drei Schritten. */
function BuchungsBand(){
  const b=buchung().band;
  return (
    <section style={{padding:'var(--space-section) var(--gutter-page-lg) 0'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto'}}>
        <Card variant="inverse" padding="clamp(28px,5vw,64px)"
          className="klay-split" style={{'--split':'1.25fr .75fr',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)'}}>{b.kennzeichen}</span>
            <h2 style={{fontSize:'var(--text-h2)',color:'var(--klay-paper)',margin:0}}>{txt(b.titel)}</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}}>{b.text}</p>
            <div style={{display:'flex',alignItems:'center',gap:'var(--space-5)',flexWrap:'wrap',marginTop:'var(--space-2)'}}>
              <Button size="lg" variant="clay" onClick={openBuchung}>{txt(b.aktion)}</Button>
              <BuchungsHinweis 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)',minWidth:0}}>
            {b.schritte.map((t,i)=>(
              <div key={i} 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'}}>{i+1}</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,{buchungsUrl,openBuchung,openGutschein,gutscheinAktiv,
  BuchungsHinweis,GutscheinHinweis,GutscheinKarte,BuchungsBand});
