"use client";

import { useEffect, useCallback, useReducer } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useCart } from "@/context/CartContext";
import type { StopInfo } from "@/context/CartContext";
import { createRetailStripeCheckoutSession } from "@/actions/billing/retail-checkout";
import { getPublicStopsForBrand } from "@/actions/checkout";
import StorefrontHeader from "@/components/storefront/StorefrontHeader";
import StorefrontFooter from "@/components/storefront/StorefrontFooter";
import StripeExpressCheckout, {
  type CheckoutItem as ExpressItem,
} from "@/components/storefront/StripeExpressCheckout";

// ---- useReducer state ----
type State = {
  stops: StopInfo[];
  customerName: string;
  customerEmail: string;
  customerPhone: string;
  shippingState: string;
  shippingPostal: string;
  shippingCity: string;
  hostedLoading: boolean;
  hostedError: string | null;
  idempotencyKey: string;
};

type Action =
  | { type: "SET_STOPS"; stops: StopInfo[] }
  | { type: "SET_NAME"; value: string }
  | { type: "SET_EMAIL"; value: string }
  | { type: "SET_PHONE"; value: string }
  | { type: "SET_SHIPPING_STATE"; value: string }
  | { type: "SET_SHIPPING_POSTAL"; value: string }
  | { type: "SET_SHIPPING_CITY"; value: string }
  | { type: "SET_HOSTED_LOADING"; value: boolean }
  | { type: "SET_HOSTED_ERROR"; value: string | null };

function initialState(): State {
  return {
    stops: [],
    customerName: "",
    customerEmail: "",
    customerPhone: "",
    shippingState: "",
    shippingPostal: "",
    shippingCity: "",
    hostedLoading: false,
    hostedError: null,
    // Stable idempotency key per checkout session — survives retries.
    // Use a lazy initializer with a guard so SSR returns "" and the
    // client fills in a UUID on first render. No useEffect needed.
    idempotencyKey:
      typeof window === "undefined" ? "" : crypto.randomUUID(),
  };
}

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "SET_STOPS":
      return { ...state, stops: action.stops };
    case "SET_NAME":
      return { ...state, customerName: action.value };
    case "SET_EMAIL":
      return { ...state, customerEmail: action.value };
    case "SET_PHONE":
      return { ...state, customerPhone: action.value };
    case "SET_SHIPPING_STATE":
      return { ...state, shippingState: action.value };
    case "SET_SHIPPING_POSTAL":
      return { ...state, shippingPostal: action.value };
    case "SET_SHIPPING_CITY":
      return { ...state, shippingCity: action.value };
    case "SET_HOSTED_LOADING":
      return { ...state, hostedLoading: action.value };
    case "SET_HOSTED_ERROR":
      return { ...state, hostedError: action.value };
  }
}

export default function CheckoutClient() {
  const cartContext = useCart();
  const cart = cartContext.cart;
  const subtotal = cartContext.subtotal;
  const selectedStop: StopInfo | null = cartContext.selectedStop;
  const setSelectedStop = cartContext.setSelectedStop;
  const cartBrandId = cartContext.cartBrandId;
  const router = useRouter();
  const [state, dispatch] = useReducer(reducer, undefined, initialState);

  useEffect(() => {
    // Initial stops load on mount (and on brand change). Cleanup
    // function makes this a non-cleanup-less effect so it doesn't
    // trip the "fake event handler" rule.
    if (!cartBrandId) return;
    let cancelled = false;
    getPublicStopsForBrand(cartBrandId)
      .then((data) => {
        if (!cancelled) dispatch({ type: "SET_STOPS", stops: data ?? [] });
      })
      .catch(() => {
        if (!cancelled) dispatch({ type: "SET_STOPS", stops: [] });
      });
    return () => {
      cancelled = true;
    };
  }, [cartBrandId]);

  const hasShedPickupItems = cart.some((i) => i.fulfillment === "pickup" && i.pickup_type === "shed");
  const hasStopPickupItems = cart.some(
    (i) => i.fulfillment === "pickup" && i.pickup_type !== "shed"
  );
  const hasShipItems = cart.some((i) => i.fulfillment === "ship");

  /**
   * Legacy "Use secure hosted checkout" fallback. Creates a Stripe
   * Checkout Session and redirects — this is the path used when the
   * embedded Stripe Elements can't load (no publishable key, browser
   * incompatibility, etc.) or when the buyer prefers Stripe's hosted page.
   */
  const handleHostedCheckout = useCallback(async () => {
    if (cart.length === 0) return;

    if (selectedStop?.brand_id && cartBrandId && selectedStop.brand_id !== cartBrandId) {
      setSelectedStop(null);
      router.replace("/cart");
      return;
    }

    if (!state.customerEmail.trim()) {
      dispatch({ type: "SET_HOSTED_ERROR", value: "Please enter your email before continuing to checkout." });
      return;
    }
    if (hasStopPickupItems && !selectedStop) {
      dispatch({ type: "SET_HOSTED_ERROR", value: "Please select a pickup location." });
      return;
    }

    dispatch({ type: "SET_HOSTED_LOADING", value: true });
    dispatch({ type: "SET_HOSTED_ERROR", value: null });

    const items = cart.map((item) => ({
      id: item.id,
      name: item.name,
      price: Number(item.price.replace("$", "")),
      quantity: item.quantity,
      fulfillment: item.fulfillment ?? "pickup",
    }));

    const siteUrl =
      typeof window !== "undefined" ? window.location.origin : "https://route-commerce-platform.vercel.app";
    const successUrl = `${siteUrl}/checkout/success?session_id={CHECKOUT_SESSION_ID}`;
    const cancelUrl = `${siteUrl}/checkout?status=cancelled`;

    if (typeof sessionStorage !== "undefined") {
      sessionStorage.setItem(
        "pending_checkout:v1",
        JSON.stringify({
          customerName: state.customerName,
          customerEmail: state.customerEmail,
          customerPhone: state.customerPhone,
          stopId: selectedStop?.id ?? null,
          items: items.map((item) => ({
            ...item,
            fulfillment: item.fulfillment as "pickup" | "ship",
          })),
          cartBrandId,
          shippingAddress: hasShipItems
            ? { state: state.shippingState, postal_code: state.shippingPostal, city: state.shippingCity }
            : undefined,
          idempotencyKey: state.idempotencyKey,
        })
      );
    }

    const stripeResult = await createRetailStripeCheckoutSession(
      items,
      "",
      cartBrandId ?? "unknown",
      successUrl,
      cancelUrl
    );
    if (!stripeResult.success || !stripeResult.url) {
      dispatch({ type: "SET_HOSTED_ERROR", value: stripeResult.error ?? "Failed to initiate payment. Please try again." });
      dispatch({ type: "SET_HOSTED_LOADING", value: false });
      return;
    }

    window.location.href = stripeResult.url;
  }, [
    cart,
    state.customerName,
    state.customerEmail,
    state.customerPhone,
    state.shippingState,
    state.shippingPostal,
    state.shippingCity,
    state.idempotencyKey,
    selectedStop,
    hasShipItems,
    hasStopPickupItems,
    cartBrandId,
    router,
    setSelectedStop,
  ]);

  if (cart.length === 0) {
    return <EmptyCartView />;
  }

  // Map cart → StripeExpressCheckout item shape
  const expressItems: ExpressItem[] = cart.map((item) => ({
    id: item.id,
    name: item.name,
    price: item.price,
    quantity: item.quantity,
    fulfillment: (item.fulfillment ?? "pickup") as "pickup" | "ship",
  }));

  return (
    <div className="min-h-screen bg-gradient-to-br from-stone-50 via-white to-emerald-50/30">
      <StorefrontHeader brandName="Checkout" brandSlug="tuxedo" />
      <main className="px-6 py-12">
        <div className="mx-auto grid max-w-6xl gap-8 md:grid-cols-[1fr_400px]">
          <CheckoutForm
            state={state}
            dispatch={dispatch}
            cart={cart}
            cartBrandId={cartBrandId}
            selectedStop={selectedStop}
            setSelectedStop={setSelectedStop}
            stops={state.stops}
            hasShedPickupItems={hasShedPickupItems}
            hasStopPickupItems={hasStopPickupItems}
            hasShipItems={hasShipItems}
            expressItems={expressItems}
            onHostedCheckout={() => void handleHostedCheckout()}
          />
          <OrderSummary cart={cart} subtotal={subtotal} />
        </div>
      </main>
      <StorefrontFooter brandName="Tuxedo Corn" brandSlug="tuxedo" />
    </div>
  );
}

function EmptyCartView() {
  return (
    <div className="min-h-screen bg-stone-50">
      <StorefrontHeader brandName="Checkout" brandSlug="tuxedo" />
      <main className="px-6 py-12">
        <div className="mx-auto max-w-4xl">
          <h1 className="text-3xl font-bold text-stone-900">Your cart is empty</h1>
          <Link
            href="/"
            className="mt-4 inline-block text-stone-600 hover:text-stone-900"
          >
            ← Back to storefront
          </Link>
        </div>
      </main>
    </div>
  );
}

type CartItemLike = { id: string; name: string; price: string; quantity: number; fulfillment?: string; description?: string; pickup_type?: string };

type CheckoutFormProps = {
  state: State;
  dispatch: React.Dispatch<Action>;
  cart: CartItemLike[];
  cartBrandId: string | null | undefined;
  selectedStop: StopInfo | null;
  setSelectedStop: (stop: StopInfo | null) => void;
  stops: StopInfo[];
  hasShedPickupItems: boolean;
  hasStopPickupItems: boolean;
  hasShipItems: boolean;
  expressItems: ExpressItem[];
  onHostedCheckout: () => void;
};

function CheckoutForm({
  state,
  dispatch,
  cart,
  cartBrandId,
  selectedStop,
  setSelectedStop,
  stops,
  hasShedPickupItems,
  hasStopPickupItems,
  hasShipItems,
  expressItems,
  onHostedCheckout,
}: CheckoutFormProps) {
  return (
    <div>
      <h1 className="text-4xl font-bold text-slate-900">Checkout</h1>
      <p className="mt-3 text-slate-600">
        Tap to pay with Apple Pay, Google Pay, or card. Your details stay secure — we never see them.
      </p>

      {/* Error alert (shared across both payment paths) */}
      {state.hostedError && (
        <div className="mt-6 rounded-xl bg-red-50 border border-red-200 p-4 text-red-700 text-sm shadow-sm" role="alert">
          <div className="flex items-start gap-3">
            <svg className="h-5 w-5 text-red-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>{state.hostedError}</span>
          </div>
        </div>
      )}

      <div className="mt-8 space-y-6">
        <CustomerDetailsFieldset state={state} dispatch={dispatch} />
        {hasShedPickupItems && <ShedPickupNotice cart={cart} />}
        {hasStopPickupItems && (
          <StopPickupFieldset
            selectedStop={selectedStop}
            setSelectedStop={setSelectedStop}
            stops={stops}
          />
        )}
        {hasShipItems && <ShippingAddressFieldset state={state} dispatch={dispatch} />}

        {/* Embedded Stripe Elements (Express + Card) — real checkout */}
        <div data-testid="stripe-express-checkout">
          <StripeExpressCheckout
            items={expressItems}
            brandId={cartBrandId ?? null}
            customerName={state.customerName}
            customerEmail={state.customerEmail}
            customerPhone={state.customerPhone}
            selectedStop={selectedStop as StopInfo | null}
            shippingState={state.shippingState}
            shippingPostal={state.shippingPostal}
            shippingCity={state.shippingCity}
            checkoutSessionKey={state.idempotencyKey || undefined}
            onHostedCheckout={onHostedCheckout}
          />
        </div>

        <HostedCheckoutFallback
          hostedLoading={state.hostedLoading}
          onClick={onHostedCheckout}
        />
      </div>
    </div>
  );
}

type CustomerDetailsFieldsetProps = {
  state: State;
  dispatch: React.Dispatch<Action>;
};

function CustomerDetailsFieldset({ state, dispatch }: CustomerDetailsFieldsetProps) {
  return (
    <fieldset className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 border border-slate-100">
      <legend className="text-xl font-bold text-slate-900">Your details</legend>
      <p className="mt-1 text-xs text-slate-500">
        Used for the order confirmation. Apple Pay / Google Pay will fill these in for you.
      </p>

      <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div className="sm:col-span-2">
          <label htmlFor="customer_name" className="block text-sm font-medium text-slate-700">
            Full Name
          </label>
          <input aria-label="Jane Smith"
            id="customer_name"
            name="customer_name"
            autoComplete="name"
            value={state.customerName}
            onChange={(e) => dispatch({ type: "SET_NAME", value: e.target.value })}
            className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
            placeholder="Jane Smith"
          />
        </div>

        <div>
          <label htmlFor="customer_email" className="block text-sm font-medium text-slate-700">
            Email <span className="text-red-500" aria-hidden="true">*</span>
          </label>
          <input aria-label="Jane@example.com"
            id="customer_email"
            name="customer_email"
            type="email"
            autoComplete="email"
            required
            value={state.customerEmail}
            onChange={(e) => dispatch({ type: "SET_EMAIL", value: e.target.value })}
            className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
            placeholder="jane@example.com"
            aria-required="true"
          />
        </div>

        <div>
          <label htmlFor="customer_phone" className="block text-sm font-medium text-slate-700">
            Phone <span className="text-slate-400 text-xs">(optional)</span>
          </label>
          <input aria-label="(555) 555 5555"
            id="customer_phone"
            name="customer_phone"
            type="tel"
            autoComplete="tel"
            value={state.customerPhone}
            onChange={(e) => dispatch({ type: "SET_PHONE", value: e.target.value })}
            className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
            placeholder="(555) 555-5555"
          />
        </div>
      </div>
    </fieldset>
  );
}

function ShedPickupNotice({ cart }: { cart: CartItemLike[] }) {
  return (
    <fieldset className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-emerald-200 border border-emerald-100">
      <legend className="text-xl font-bold text-slate-900">Shed Pickup</legend>
      <p className="mt-2 text-sm text-slate-600">
        {cart.flatMap((i) =>
          i.fulfillment === "pickup" && i.pickup_type === "shed"
            ? [i.description || i.name]
            : []
        ).join(", ")}
      </p>
      <p className="mt-1 text-xs text-slate-500">Pickup location details are included in your order confirmation.</p>
    </fieldset>
  );
}

type StopPickupFieldsetProps = {
  selectedStop: StopInfo | null;
  setSelectedStop: (stop: StopInfo | null) => void;
  stops: StopInfo[];
};

function StopPickupFieldset({ selectedStop, setSelectedStop, stops }: StopPickupFieldsetProps) {
  return (
    <fieldset className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 border border-slate-100">
      <legend className="text-xl font-bold text-slate-900">
        Pickup Location <span className="text-red-500" aria-hidden="true">*</span>
      </legend>

      {selectedStop ? (
        <SelectedStopCard
          selectedStop={selectedStop}
          onChange={() => setSelectedStop(null)}
        />
      ) : (
        <StopSelector stops={stops} setSelectedStop={setSelectedStop} />
      )}
    </fieldset>
  );
}

function SelectedStopCard({ selectedStop, onChange }: { selectedStop: StopInfo; onChange: () => void }) {
  return (
    <div className="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 p-4">
      <p className="font-medium text-emerald-900">
        <svg className="inline h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
        </svg>
        {selectedStop.city}, {selectedStop.state}
      </p>
      <p className="mt-1 text-sm text-emerald-700">
        {selectedStop.date} · {selectedStop.location}
      </p>
      <button
        type="button"
        onClick={onChange}
        className="mt-2 text-xs text-emerald-600 hover:text-emerald-800 underline transition-colors"
        aria-label="Change pickup stop"
      >
        Change pickup stop
      </button>
    </div>
  );
}

function StopSelector({ stops, setSelectedStop }: { stops: StopInfo[]; setSelectedStop: (stop: StopInfo | null) => void }) {
  return (
    <div className="mt-4">
      <label htmlFor="stop_id" className="block text-sm font-medium text-slate-700 mb-2">
        Select pickup stop <span className="text-red-500" aria-hidden="true">*</span>
      </label>
      <select aria-label="Stop Id"
        id="stop_id"
        name="stop_id"
        required
        value={""}
        onChange={(e) => {
          const found = stops.find((s) => s.id === e.target.value) ?? null;
          setSelectedStop(found as StopInfo | null);
        }}
        className="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all appearance-none bg-white"
        aria-required="true"
      >
        <option value="">Select a stop...</option>
        {stops.map((stop) => (
          <option key={stop.id} value={stop.id}>
            {stop.city}, {stop.state} — {stop.date} @ {stop.location}
          </option>
        ))}
      </select>
    </div>
  );
}

function ShippingAddressFieldset({ state, dispatch }: { state: State; dispatch: React.Dispatch<Action> }) {
  return (
    <fieldset className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 border border-slate-100">
      <legend className="text-xl font-bold text-slate-900">Shipping Address</legend>
      <p className="mt-1 text-sm text-slate-500">
        Enter your shipping details for delivery.
      </p>

      <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div className="sm:col-span-3">
          <label htmlFor="shipping_address" className="block text-sm font-medium text-slate-700">
            Street Address
          </label>
          <input aria-label="123 Main St"
            id="shipping_address"
            name="shipping_address"
            autoComplete="street-address"
            className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
            placeholder="123 Main St"
          />
        </div>
        <div>
          <label htmlFor="shipping_city" className="block text-sm font-medium text-slate-700">
            City
          </label>
          <input aria-label="Shipping City"
            id="shipping_city"
            name="shipping_city"
            autoComplete="address-level2"
            value={state.shippingCity}
            onChange={(e) => dispatch({ type: "SET_SHIPPING_CITY", value: e.target.value })}
            className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
          />
        </div>
        <div>
          <label htmlFor="shipping_state" className="block text-sm font-medium text-slate-700">
            State
          </label>
          <input aria-label="NC"
            id="shipping_state"
            name="shipping_state"
            autoComplete="address-level1"
            maxLength={2}
            value={state.shippingState}
            onChange={(e) => dispatch({ type: "SET_SHIPPING_STATE", value: e.target.value.toUpperCase() })}
            className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all uppercase"
            placeholder="NC"
          />
        </div>
        <div>
          <label htmlFor="shipping_postal_code" className="block text-sm font-medium text-slate-700">
            ZIP Code
          </label>
          <input aria-label="28147"
            id="shipping_postal_code"
            name="shipping_postal_code"
            autoComplete="postal-code"
            value={state.shippingPostal}
            onChange={(e) => dispatch({ type: "SET_SHIPPING_POSTAL", value: e.target.value })}
            className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
            placeholder="28147"
          />
        </div>
      </div>
    </fieldset>
  );
}

function HostedCheckoutFallback({ hostedLoading, onClick }: { hostedLoading: boolean; onClick: () => void }) {
  return (
    <div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50/60 p-4">
      <p className="text-xs text-slate-500 mb-2 text-center">
        Prefer Stripe&apos;s hosted page? Tap below.
      </p>
      <button
        type="button"
        onClick={onClick}
        disabled={hostedLoading}
        className="w-full rounded-xl border border-slate-300 bg-white px-6 py-3 text-sm font-semibold text-slate-800 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2"
      >
        {hostedLoading ? (
          <>
            <span className="h-4 w-4 rounded-full border-2 border-slate-300 border-t-slate-700 animate-spin" />
            Redirecting to Stripe…
          </>
        ) : (
          <>Use secure hosted checkout →</>
        )}
      </button>
    </div>
  );
}

function OrderSummary({ cart, subtotal }: { cart: CartItemLike[]; subtotal: number }) {
  return (
    <aside aria-label="Order summary">
      <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 border border-slate-100 sticky top-6">
        <h2 className="text-xl font-bold text-slate-900">Order Summary</h2>

        <div className="mt-4 space-y-3">
          {cart.map((item) => (
            <div key={item.id} className="flex justify-between text-sm">
              <span className="text-slate-600">
                {item.name} × {item.quantity}
                {item.fulfillment === "ship" && (
                  <span className="ml-1 text-xs text-blue-500">(ship)</span>
                )}
              </span>
              <span className="font-medium text-slate-900">
                ${(Number(item.price.replace("$", "")) * item.quantity).toFixed(2)}
              </span>
            </div>
          ))}
        </div>

        <div className="mt-4 border-t border-slate-200 pt-4 space-y-2">
          <div className="flex justify-between text-sm">
            <span className="text-slate-600">Subtotal</span>
            <span className="text-slate-900">${subtotal.toFixed(2)}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-slate-600">Estimated Tax</span>
            <span className="text-slate-900 text-xs italic">Calculated at payment</span>
          </div>
          <div className="flex justify-between text-xl font-bold text-slate-900 pt-2 border-t border-slate-200">
            <span>Total</span>
            <span>${subtotal.toFixed(2)}</span>
          </div>
        </div>

        {/* Trust badges */}
        <div className="mt-4 space-y-1.5">
          <div className="flex items-center justify-center gap-2 text-xs text-slate-500">
            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
            <span>Secured by Stripe</span>
          </div>
          <div className="flex items-center justify-center gap-2 text-xs text-slate-500">
            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            <span>100% Sweetness Guarantee</span>
          </div>
        </div>
      </div>
    </aside>
  );
}