<?php
// ---------------------------------------------------------------------------
// Hosted checkout.
//
// PAYMENT: this page collects the customer's contact + shipping details, then
// hands off to a PCI-compliant payment provider for the card step. Put your
// provider's hosted-checkout / payment link below and the "Pay securely"
// button will send the customer there. Do NOT collect raw card numbers on
// this page — a hosted provider (Stripe, PayPal, etc.) keeps you compliant
// and keeps card data off your server.
$paymentUrl = ''; // e.g. 'https://buy.stripe.com/xxxxxxxx'  or a PayPal button link

// With no provider link set, the card step runs on this page (details -> card ->
// thankyou.php). Those fields are validated in the browser only — nothing is
// submitted to the server and nothing is stored. Set $paymentUrl above and the
// page switches to the hosted hand-off instead.
$cardStep = ($paymentUrl === '');

// Read the selection passed from the product page (display only).
$color = isset($_GET['color']) ? trim($_GET['color']) : 'Blue';
$width = isset($_GET['width']) ? trim($_GET['width']) : 'Medium';
$size  = isset($_GET['size'])  ? trim($_GET['size'])  : 'Men 9';
$qty   = isset($_GET['qty'])   ? max(1, min(10, (int)$_GET['qty'])) : 1;

$unit  = 41.99;
$sub   = $unit * $qty;
$shipping = $sub >= 60 ? 0.0 : 6.99;
$total = $sub + $shipping;

$e = function ($s) { return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); };
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout | shopdilema</title>
<meta name="robots" content="noindex, nofollow">
<link rel="canonical" href="https://shopdilema.com/order">
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="assets/advertorial.css?v=3">
</head>
<body>

<div class="promo-bar">
  <span>☁ FREE SHIPPING OVER $60</span>
  <span>☁ 30-DAY COMFORT GUARANTEE</span>
</div>

<header class="site-header">
  <div class="shell header-inner">
    <a href="/" class="brand" aria-label="shopdilema — home">
      <img src="images/logo.png" alt="shopdilema" class="brand-logo" width="512" height="149">
    </a>
    <span class="header-trust">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" width="15" height="15"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
      Secure checkout
    </span>
  </div>
</header>

<main class="checkout">
  <div class="shell">
    <a href="/" class="co-back">&larr; Back to product</a>

    <div class="checkout-grid">

      <!-- LEFT: details + payment -->
      <div>
        <h1>Checkout</h1>
<?php if ($cardStep): ?>
        <p class="checkout-intro">Enter your details and card below to finish your order.</p>
<?php else: ?>
        <p class="checkout-intro">Enter your details, then continue to our secure payment provider to finish your order.</p>
<?php endif; ?>

        <div class="co-steps">
          <span class="co-step is-on" id="coStep1"><i>1</i> Your details</span>
          <span class="co-rule" aria-hidden="true"></span>
          <span class="co-step<?= $cardStep ? ' is-on' : '' ?>" id="coStep2"><i>2</i> Secure payment</span>
        </div>

        <!-- STEP 1 -->
        <form id="detailsForm" novalidate>
          <div class="co-card">
            <h2><span aria-hidden="true">1</span> Contact</h2>
            <div class="field-grid">
              <p class="field field-wide">
                <label for="d-email">Email address *</label>
                <input type="email" id="d-email" name="email" autocomplete="email" required>
                <span class="field-err" id="d-email-err" hidden></span>
              </p>
              <p class="field">
                <label for="d-first">First name *</label>
                <input type="text" id="d-first" name="first_name" autocomplete="given-name" maxlength="60" required>
                <span class="field-err" id="d-first-err" hidden></span>
              </p>
              <p class="field">
                <label for="d-last">Last name *</label>
                <input type="text" id="d-last" name="last_name" autocomplete="family-name" maxlength="60" required>
                <span class="field-err" id="d-last-err" hidden></span>
              </p>
              <p class="field field-wide">
                <label for="d-phone">Phone (for delivery updates)</label>
                <input type="tel" id="d-phone" name="phone" autocomplete="tel" maxlength="30">
                <span class="field-err" id="d-phone-err" hidden></span>
              </p>
            </div>
          </div>

          <div class="co-card">
            <h2><span aria-hidden="true">2</span> Shipping address</h2>
            <div class="field-grid">
              <p class="field field-wide">
                <label for="d-addr">Address *</label>
                <input type="text" id="d-addr" name="address" autocomplete="address-line1" maxlength="120" required>
                <span class="field-err" id="d-addr-err" hidden></span>
              </p>
              <p class="field field-wide">
                <label for="d-addr2">Apartment, suite, etc. (optional)</label>
                <input type="text" id="d-addr2" name="address2" autocomplete="address-line2" maxlength="120">
              </p>
              <p class="field">
                <label for="d-city">City *</label>
                <input type="text" id="d-city" name="city" autocomplete="address-level2" maxlength="80" required>
                <span class="field-err" id="d-city-err" hidden></span>
              </p>
              <p class="field">
                <label for="d-state">State / Province *</label>
                <input type="text" id="d-state" name="state" autocomplete="address-level1" maxlength="80" required>
                <span class="field-err" id="d-state-err" hidden></span>
              </p>
              <p class="field">
                <label for="d-zip">ZIP / Postcode *</label>
                <input type="text" id="d-zip" name="zip" autocomplete="postal-code" maxlength="16" required>
                <span class="field-err" id="d-zip-err" hidden></span>
              </p>
              <p class="field">
                <label for="d-country">Country *</label>
                <select id="d-country" name="country" autocomplete="country-name" required>
                  <option value="United States" selected>United States</option>
                  <option value="Canada">Canada</option>
                  <option value="United Kingdom">United Kingdom</option>
                  <option value="Australia">Australia</option>
                  <option value="France">France</option>
                  <option value="Germany">Germany</option>
                </select>
              </p>
            </div>
          </div>

          <p class="hp" aria-hidden="true">
            <label for="d-website">Leave this empty</label>
            <input type="text" id="d-website" name="website" tabindex="-1" autocomplete="off">
          </p>

<?php if (!$cardStep): ?>
          <button type="submit" class="btn btn-buy btn-lg">Continue to secure payment &rarr;</button>
<?php endif; ?>
        </form>

<?php if ($cardStep): ?>
        <!-- STEP 2: card. Values are read by the browser only — validated in JS,
             never posted here. On success we continue to the thank-you page with
             the order details (plus the last 4 digits) in the query string. -->
        <div class="co-card pay-card" id="payPanel" tabindex="-1">
          <div class="pay-head">
            <span class="lock" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            </span>
            <div class="pay-head-copy">
              <h2>Payment</h2>
              <p>Encrypted end to end. Your card details stay private.</p>
            </div>
            <span class="accepted" aria-label="We accept Visa, Mastercard, American Express and Discover">
              <span class="mark mark-visa">VISA</span>
              <span class="mark mark-mc" aria-hidden="true"><i></i><i></i></span>
              <span class="mark mark-amex">AMEX</span>
              <span class="mark mark-disc">DISC<i></i></span>
            </span>
          </div>

          <!-- live preview of what's being typed; flips when the CVC is focused -->
          <div class="card-preview" id="cardPreview" data-brand="" aria-hidden="true">
            <div class="cp-inner">
              <div class="cp-face cp-front">
                <div class="cp-top">
                  <span class="cp-chip"></span>
                  <span class="cp-wave">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M8.5 8.5a5 5 0 0 1 0 7"/><path d="M12 5.5a9 9 0 0 1 0 13"/><path d="M5 11.2a2 2 0 0 1 0 1.6"/></svg>
                  </span>
                  <span class="cp-brand" id="cpBrand"></span>
                </div>
                <div class="cp-number" id="cpNumber">•••• •••• •••• ••••</div>
                <div class="cp-bottom">
                  <span class="cp-col">
                    <em>Card holder</em>
                    <b id="cpName">YOUR NAME</b>
                  </span>
                  <span class="cp-col cp-col-exp">
                    <em>Expires</em>
                    <b id="cpExp">MM/YY</b>
                  </span>
                </div>
              </div>
              <div class="cp-face cp-back">
                <span class="cp-stripe"></span>
                <span class="cp-sigrow">
                  <span class="cp-sig"></span>
                  <b id="cpCvc">•••</b>
                </span>
                <span class="cp-fine">This card is issued subject to the cardholder agreement.</span>
              </div>
            </div>
          </div>

          <form id="cardForm" class="card-form" novalidate autocomplete="off"
                data-next="thankyou.php"
                data-qty="<?= $e($qty) ?>"
                data-color="<?= $e($color) ?>"
                data-width="<?= $e($width) ?>"
                data-size="<?= $e($size) ?>">
            <div class="field-grid">
              <p class="field field-wide">
                <label for="c-number">Card number *</label>
                <span class="card-input">
                  <span class="card-input-icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2.5"/><path d="M2 10h20"/><path d="M6 15h4"/></svg>
                  </span>
                  <input type="text" id="c-number" name="card_number" inputmode="numeric"
                         maxlength="23" placeholder="1234 5678 9012 3456" autocomplete="off">
                  <span class="card-brand" id="cardBrand" aria-hidden="true"></span>
                </span>
                <span class="field-err" id="c-number-err" hidden></span>
              </p>
              <p class="field field-wide">
                <label for="c-name">Name on card *</label>
                <span class="card-input">
                  <span class="card-input-icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"/><path d="M4.5 20a7.5 7.5 0 0 1 15 0"/></svg>
                  </span>
                  <input type="text" id="c-name" name="card_name" maxlength="80" placeholder="As printed on the card" autocomplete="off">
                </span>
                <span class="field-err" id="c-name-err" hidden></span>
              </p>
              <p class="field">
                <label for="c-exp">Expiry date *</label>
                <span class="card-input">
                  <span class="card-input-icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="2.5"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>
                  </span>
                  <input type="text" id="c-exp" name="card_exp" inputmode="numeric" maxlength="5" placeholder="MM/YY" autocomplete="off">
                </span>
                <span class="field-err" id="c-exp-err" hidden></span>
              </p>
              <p class="field">
                <label for="c-cvc">Security code * <span class="cvc-hint" title="3 digits on the back of your card (4 on the front for Amex)">?</span></label>
                <span class="card-input">
                  <span class="card-input-icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                  </span>
                  <input type="text" id="c-cvc" name="card_cvc" inputmode="numeric" maxlength="4" placeholder="CVC" autocomplete="off">
                </span>
                <span class="field-err" id="c-cvc-err" hidden></span>
              </p>
            </div>

            <button type="submit" class="btn btn-buy btn-lg" id="cardSubmit">
              <svg class="btn-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
              <span>Pay $<?= number_format($total, 2) ?></span>
            </button>
            <p class="card-note">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 5 6v5.5c0 4.2 2.9 7.6 7 9.5 4.1-1.9 7-5.3 7-9.5V6l-7-3Z"/></svg>
              Secured with 256-bit encryption. You can cancel within 30 days for a full refund.
            </p>
          </form>
        </div>
<?php else: ?>
        <!-- STEP 2: hosted payment hand-off, revealed once the details validate -->
        <div class="co-card pay-panel" id="payPanel" hidden tabindex="-1">
          <span class="lock" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          </span>
          <h2>Secure payment</h2>
          <p>Your details are saved. You'll enter your card on our payment provider's secure, encrypted page — we never see or store your card number.</p>
          <div class="pay-methods">
            <span>VISA</span><span>Mastercard</span><span>AMEX</span><span>PayPal</span><span>Apple&nbsp;Pay</span>
          </div>
          <a href="#" id="payBtn" class="btn btn-buy btn-lg" data-payurl="<?= $e($paymentUrl) ?>">Pay securely — $<?= number_format($total, 2) ?> &rarr;</a>
        </div>
<?php endif; ?>
      </div>

      <!-- RIGHT: order summary -->
      <aside class="co-summary">
        <h2>Order summary</h2>
        <div class="co-line">
          <img src="images/g01.webp" alt="Outdoor non-slip arch-support walking shoe">
          <div>
            <div class="co-title">Outdoor Non-slip Comfy Arch Support Walking Shoes</div>
            <div class="co-variant"><?= $e($color) ?> · <?= $e($width) ?> · <?= $e($size) ?> · Qty <?= $e($qty) ?></div>
          </div>
        </div>
        <div class="co-totals">
          <div class="row"><span>Subtotal</span><span>$<?= number_format($sub, 2) ?></span></div>
          <div class="row"><span>Shipping</span><span><?= $shipping == 0 ? '<span class="free">Free</span>' : '$' . number_format($shipping, 2) ?></span></div>
          <div class="row total"><span>Total</span><span>$<?= number_format($total, 2) ?></span></div>
        </div>
        <ul class="co-guarantees">
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> 30-night comfort guarantee</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> Tracked shipping, 2–3 business days</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> Encrypted, PCI-compliant payment</li>
        </ul>
      </aside>

    </div>
  </div>
</main>

<footer class="site-footer">
  <div class="shell">
    <div class="footer-inner">
      <p class="footer-brand"><img src="images/logo.png" alt="shopdilema" class="footer-logo" width="512" height="149"></p>
      <nav class="footer-nav" aria-label="Footer">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
        <a href="/disclaimer">Disclaimer</a>
        <a href="/privacy">Privacy Policy</a>
        <a href="/terms">Terms and Conditions</a>
      </nav>
      <div class="footer-company">
        <p>Shop Dilema LLC</p>
        <p>201 E 5th St, Suite 1900, Cincinnati, OH 45202, USA</p>
        <p>Phone: +1-513-555-1003</p>
        <p>Email: <a href="mailto:office@shopdilema.com">office@shopdilema.com</a></p>
      </div>
      <p class="footer-copy">&copy; 2026 All rights reserved.</p>
    </div>
  </div>
</footer>

<script src="assets/script.js?v=3"></script>
</body>
</html>
