FormCheckout Forms

---
/**
 * FormCheckout
 * Eenvoudig bestel-/checkout-formulier met productoverzicht
 */
interface Props {
  headline?: string;
  products?: { name: string; price: string }[];
}
const {
  headline = 'Bestelling afronden',
  products = [
    { name: 'SEO Maandpakket — Starter', price: '€ 449 / mnd' },
    { name: 'Google Ads beheer', price: '€ 299 / mnd' },
  ],
} = Astro.props;
---

<section class="fco">
  <div class="fco__inner">
    <div class="fco__left">
      <h2 class="fco__headline">{headline}</h2>
      <form class="fco__form" novalidate>
        <fieldset class="fco__fieldset">
          <legend class="fco__legend">Contactgegevens</legend>
          <div class="fco__row">
            <div class="fco__field">
              <label class="fco__label" for="fco-voornaam">Voornaam</label>
              <input class="fco__input" id="fco-voornaam" type="text" placeholder="Emma" required />
            </div>
            <div class="fco__field">
              <label class="fco__label" for="fco-achternaam">Achternaam</label>
              <input class="fco__input" id="fco-achternaam" type="text" placeholder="Bakker" required />
            </div>
          </div>
          <div class="fco__field">
            <label class="fco__label" for="fco-email">E-mail</label>
            <input class="fco__input" id="fco-email" type="email" placeholder="emma@bedrijf.nl" required />
          </div>
          <div class="fco__field">
            <label class="fco__label" for="fco-bedrijf">Bedrijfsnaam</label>
            <input class="fco__input" id="fco-bedrijf" type="text" placeholder="Mijn BV" />
          </div>
        </fieldset>
        <fieldset class="fco__fieldset">
          <legend class="fco__legend">Factuuradres</legend>
          <div class="fco__field">
            <label class="fco__label" for="fco-straat">Straat &amp; huisnummer</label>
            <input class="fco__input" id="fco-straat" type="text" placeholder="Keizersgracht 123" required />
          </div>
          <div class="fco__row">
            <div class="fco__field">
              <label class="fco__label" for="fco-postcode">Postcode</label>
              <input class="fco__input" id="fco-postcode" type="text" placeholder="1234 AB" required />
            </div>
            <div class="fco__field">
              <label class="fco__label" for="fco-plaats">Plaats</label>
              <input class="fco__input" id="fco-plaats" type="text" placeholder="Amsterdam" required />
            </div>
          </div>
        </fieldset>
        <button class="fco__btn" type="submit">Bestelling plaatsen</button>
      </form>
    </div>
    <aside class="fco__summary">
      <h3 class="fco__summary-title">Overzicht</h3>
      <ul class="fco__products">
        {products.map(p => (
          <li class="fco__product">
            <span class="fco__product-name">{p.name}</span>
            <span class="fco__product-price">{p.price}</span>
          </li>
        ))}
      </ul>
      <div class="fco__divider"></div>
      <div class="fco__note">Facturering per e-mail. Opzegging maandelijks mogelijk.</div>
    </aside>
  </div>
</section>

<style>
  .fco {
    background: #fff;
    padding: 4rem 1.5rem;
  }
  .fco__inner {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
  }
  .fco__headline {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1.75rem;
  }
  .fco__form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .fco__fieldset {
    border: 1.5px solid #ececec;
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .fco__legend {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent, #6366f1);
    padding: 0 0.4rem;
  }
  .fco__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .fco__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .fco__label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #666;
  }
  .fco__input {
    padding: 0.65rem 0.9rem;
    border: 1.5px solid #e0e0e0;
    border-radius: 7px;
    font-size: 0.93rem;
    color: var(--color-primary, #0a0a0a);
    background: #fafafa;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
  }
  .fco__input:focus {
    border-color: var(--color-accent, #6366f1);
    background: #fff;
  }
  .fco__btn {
    padding: 0.9rem 2rem;
    background: var(--color-accent, #6366f1);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    width: 100%;
  }
  .fco__btn:hover { opacity: 0.88; }
  .fco__summary {
    background: #f6f6fb;
    border-radius: 12px;
    padding: 1.5rem;
    position: sticky;
    top: 2rem;
  }
  .fco__summary-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1rem;
  }
  .fco__products {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .fco__product {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: #444;
  }
  .fco__product-name { flex: 1; }
  .fco__product-price { font-weight: 600; white-space: nowrap; }
  .fco__divider {
    height: 1px;
    background: #ddd;
    margin: 1rem 0;
  }
  .fco__note {
    font-size: 0.8rem;
    color: #888;
    line-height: 1.5;
  }
  @media (max-width: 760px) {
    .fco__inner { grid-template-columns: 1fr; }
    .fco__row { grid-template-columns: 1fr; }
  }
</style>