import { OfferCard, Offers } from '@kuppwest/apple-clean';

const pad = { padding: 24, background: 'var(--bg)' };

export function Highlighted() {
  return (
    <div style={pad}>
      <OfferCard
        highlighted
        chip="Dieses Angebot"
        title="Starres Komplettset"
        subtitle="Die bewährte Lösung — in diesem Beispielangebot enthalten."
        bullets={[
          'Starrer Kugelkopf, mit Traverse verschraubt',
          '13-poliger fahrzeugspezifischer E-Satz',
          'Montagematerial und Anleitungen',
        ]}
        buttonLabel="Dieses Set ansehen"
        buttonHref="#kwac-daten"
      />
    </div>
  );
}

export function Alternative() {
  return (
    <div style={pad}>
      <OfferCard
        chip="Mehr Komfort"
        title="Abnehmbare Varianten"
        subtitle="Alternative Kupplungssysteme für denselben Fahrzeugtyp."
        bullets={[
          'Kugelkopf bei Nichtgebrauch abnehmbar',
          'Wahlweise mit spezifischem E-Satz',
          'Varianten passend zum VW Touran 5T1',
        ]}
        buttonLabel="Varianten vergleichen"
        buttonHref="#kwac-angebote"
      />
    </div>
  );
}

export function Comparison() {
  return (
    <div style={pad}>
      <Offers>
        <OfferCard
          highlighted
          chip="Dieses Angebot"
          title="Starres Komplettset"
          subtitle="Die bewährte Lösung — in diesem Beispielangebot enthalten."
          bullets={[
            'Starrer Kugelkopf, mit Traverse verschraubt',
            '13-poliger fahrzeugspezifischer E-Satz',
            'Montagematerial und Anleitungen',
          ]}
          buttonLabel="Dieses Set ansehen"
          buttonHref="#kwac-daten"
        />
        <OfferCard
          chip="Mehr Komfort"
          title="Abnehmbare Varianten"
          subtitle="Alternative Kupplungssysteme für denselben Fahrzeugtyp."
          bullets={[
            'Kugelkopf bei Nichtgebrauch abnehmbar',
            'Wahlweise mit spezifischem E-Satz',
            'Varianten passend zum VW Touran 5T1',
          ]}
          buttonLabel="Varianten vergleichen"
          buttonHref="#kwac-angebote"
        />
      </Offers>
    </div>
  );
}