import {
  formatPrice,
  getDescriptionContent,
  getStockStatus,
  getProductPrice,
  getProductPriceInfo,
  getCartTotals,
  getCartItemName,
  getCartItemImage,
} from 'brainerce';

// Format price for display
const priceText = formatPrice(product.basePrice, { currency: 'USD' }); // "$99.99"

// Get product description (handles HTML vs plain text)
const description = getDescriptionContent(product);

// Get stock status text
const stockText = getStockStatus(product.inventory); // "In Stock", "Low Stock", "Out of Stock"

// Get effective price (handles sale prices automatically)
const price = getProductPrice(product); // Returns number: 29.99

// Get full price info including sale status
const priceInfo = getProductPriceInfo(product);
// { price: 19.99, originalPrice: 29.99, isOnSale: true, discountPercent: 33 }

// Calculate cart totals
const totals = getCartTotals(cart, shippingRate?.price);
// { subtotal: 59.98, discount: 10, shipping: 5.99, total: 55.97 }

// Access cart item details (handles nested structure)
const itemName = getCartItemName(cartItem); // "Blue T-Shirt - Large"
const itemImage = getCartItemImage(cartItem); // "https://..."

// On your checkout/payment page, ALWAYS call this first:
const { hasPayments, providers } = await client.getPaymentProviders();

if (!hasPayments) {
  // Show error - payment is not configured
  return <div>Payment not configured for this store</div>;
}

// Show payment forms for available providers
const stripeProvider = providers.find(p => p.provider === 'stripe');
const paypalProvider = providers.find(p => p.provider === 'paypal');

import { BrainerceClient } from 'brainerce';

// Initialize with your Connection ID
const client = new BrainerceClient({
  connectionId: 'vc_YOUR_CONNECTION_ID',
});

// Fetch products
const { data: products } = await client.getProducts();

// ✅ CORRECT - Use startGuestCheckout() for guest users
const result = await client.startGuestCheckout();
if (result.tracked) {
  const checkout = await client.getCheckout(result.checkoutId);
  // Continue with payment flow...
}

// ✅ ALTERNATIVE - Use submitGuestOrder() for simple checkout without payment UI
const order = await client.submitGuestOrder();

// ❌ WRONG - Don't create your own interfaces!
interface CartItem {
  id: string;
  name: string; // WRONG - it's item.product.name!
  price: number; // WRONG - prices are strings!
}

// ❌ WRONG - Don't use 'as unknown as' casting!
const item = result as unknown as MyLocalType;

// ✅ CORRECT - Import ALL types from SDK
import type {
  Product,
  ProductVariant,
  Cart,
  CartItem,
  Checkout,
  CheckoutLineItem,
  Order,
  OrderItem,
  CustomerProfile,
  CustomerAddress,
  ShippingRate,
  PaymentProvider,
  PaymentIntent,
  PaymentStatus,
  SearchSuggestions,
  ProductSuggestion,
  CategorySuggestion,
  OAuthAuthorizeResponse,
  CustomerOAuthProvider,
} from 'brainerce';

// ❌ WRONG
formatPrice(amount, 'USD');

// ✅ CORRECT
formatPrice(amount, { currency: 'USD' });

// CartItem and CheckoutLineItem - NESTED product
cart.items.forEach((item) => {
  console.log(item.product.name); // ✅ Correct for Cart/Checkout
  console.log(item.product.sku);
  console.log(item.product.images);
});

// OrderItem - FLAT structure
order.items.forEach((item) => {
  console.log(item.name); // ✅ Correct for Orders
  console.log(item.sku);
  console.log(item.image); // singular, not images
});

// ❌ WRONG
if (status.status === 'completed')

// ✅ CORRECT
if (status.status === 'succeeded')

// ProductSuggestion has:
{
  (id, name, slug, image, basePrice, salePrice, type);
}

// Product has many more fields

// ❌ WRONG - assuming number
const total = item.price * quantity;

// ✅ CORRECT - parse first
const total = parseFloat(item.price) * quantity;

// Or use SDK helper
import { formatPrice } from 'brainerce';
const display = formatPrice(item.price, { currency: 'USD' });

// Accessing variant attributes:
const color = variant.attributes?.['Color']; // string
const size = variant.attributes?.['Size']; // string

// ❌ WRONG
const address = {
  state: 'NY', // This field doesn't exist!
};

// ✅ CORRECT
const address: SetShippingAddressDto = {
  firstName: 'John',
  lastName: 'Doe',
  line1: '123 Main St',
  city: 'New York',
  region: 'NY', // Use 'region' for state/province
  postalCode: '10001',
  country: 'US',
};

// ❌ WRONG
const response = await client.getOAuthAuthorizeUrl('GOOGLE', { redirectUrl });
window.location.href = response.url; // 'url' doesn't exist!

// ✅ CORRECT
const response = await client.getOAuthAuthorizeUrl('GOOGLE', { redirectUrl });
window.location.href = response.authorizationUrl; // Correct property name

// ❌ WRONG - creating your own type
type Provider = 'google' | 'facebook'; // lowercase won't work!

// ✅ CORRECT - import from SDK
import { CustomerOAuthProvider } from 'brainerce';
// CustomerOAuthProvider = 'GOOGLE' | 'FACEBOOK' | 'GITHUB'  (UPPERCASE)

const provider: CustomerOAuthProvider = 'GOOGLE';
await client.getOAuthAuthorizeUrl(provider, { redirectUrl });

// ❌ WRONG - expecting array directly
const providers = await client.getAvailableOAuthProviders();
providers.forEach(p => ...);  // Error! providers is not an array

// ✅ CORRECT - access the providers property
const response = await client.getAvailableOAuthProviders();
response.providers.forEach(p => ...);  // response.providers is the array

// SDK types use:
slug: string | null;
salePrice: string | null;

// So when checking:
if (product.slug !== null) {
  // ✅ Check for null
  // ...
}

// ❌ WRONG - these fields don't exist on Cart
const total = cart.total; // ← 'total' doesn't exist!
const discount = cart.discount; // ← 'discount' doesn't exist! It's 'discountAmount'

// ✅ CORRECT - use the helper function (RECOMMENDED)
import { getCartTotals } from 'brainerce';
const totals = getCartTotals(cart, shippingPrice);
// Returns: { subtotal: 59.98, discount: 10, shipping: 5.99, total: 55.97 }

// ✅ CORRECT - or calculate manually
const subtotal = parseFloat(cart.subtotal);
const discount = parseFloat(cart.discountAmount); // ← Note: 'discountAmount', NOT 'discount'
const total = subtotal - discount;

// In SearchSuggestions, ProductSuggestion has:
// - price: effective price (sale price if on sale, otherwise base price)
// - basePrice: original price
// - salePrice: sale price if on sale

// ✅ Use 'price' for display (it's already the correct price)
suggestions.products.map(p => (
  <div>{p.name} - {formatPrice(p.price, { currency })}</div>
));

// ❌ WRONG - Cart items remain after payment!
// In your success page:
export default function SuccessPage() {
  return <div>Thank you for your order!</div>;
  // User goes back to shop → still sees purchased items in cart!
}

// ✅ CORRECT - Call completeGuestCheckout() on success page
export default function SuccessPage() {
  const checkoutId = new URLSearchParams(window.location.search).get('checkout_id');

  useEffect(() => {
    if (checkoutId) {
      // Send order to server AND clear cart
      client.completeGuestCheckout(checkoutId);
    }
  }, []);

  return <div>Thank you for your order!</div>;
}

// Add to cart — works for both guests and logged-in users
await client.smartAddToCart({ productId: 'prod_123', quantity: 2 });

// Get cart
const cart = await client.smartGetCart();

// Update quantity
await client.smartUpdateCartItem('prod_123', 5);

// Remove item
await client.smartRemoveFromCart('prod_123');

// Get totals (works for all carts)
import { getCartTotals } from 'brainerce';
const totals = getCartTotals(cart); // { subtotal, discount, shipping, total }

// After setting customer token
client.setCustomerToken(token);
await client.syncCartOnLogin(); // Merges session cart into customer cart

// Guest checkout creates a checkout from the session cart
const result = await client.startGuestCheckout();

if (result.tracked) {
  const checkout = await client.getCheckout(result.checkoutId);
  await client.setShippingAddress(result.checkoutId, shippingAddress);
  // ... continue with shipping rates, payment, etc.
}

// 1. Make sure customer token is set (after login)
client.setCustomerToken(authResponse.token);

// 2. Add items to cart (smart methods handle server cart automatically)
await client.smartAddToCart({
  productId: products[0].id,
  quantity: 1,
});

// 3. Get cart and create checkout
const cart = await client.smartGetCart();
const checkout = await client.createCheckout({ cartId: cart.id });

// 4. Set customer info (REQUIRED - email is needed for order!)
await client.setCheckoutCustomer(checkout.id, {
  email: 'customer@example.com',
  firstName: 'John',
  lastName: 'Doe',
});

// 5. Set shipping address
await client.setShippingAddress(checkout.id, {
  firstName: 'John',
  lastName: 'Doe',
  line1: '123 Main St',
  city: 'New York',
  postalCode: '10001',
  country: 'US',
});

// 6. Get shipping rates and select one
const rates = await client.getShippingRates(checkout.id);
await client.selectShippingMethod(checkout.id, rates[0].id);

// 7. Complete checkout - order is linked to customer!
const { orderId } = await client.completeCheckout(checkout.id);
console.log('Order created:', orderId);

// Customer can now see this order in client.getMyOrders()

// Add to cart (guest or logged-in — same code!)
await client.smartAddToCart({ productId: 'prod_123', quantity: 2 });

// Get cart
const cart = await client.smartGetCart();
console.log('Items:', cart.items.length);
console.log('Total:', getCartTotals(cart).total);

// Update quantity
await client.smartUpdateCartItem('prod_123', 5);

// Remove item
await client.smartRemoveFromCart('prod_123');

client.setCustomerToken(token);
const mergedCart = await client.syncCartOnLogin();
// Guest session cart items are merged into the customer's server cart

client.onCheckoutComplete();
// Clears session cart reference so next visit starts fresh

client.clearCustomerToken();
client.onLogout();
// Session cart is preserved — guest can continue browsing

import { BrainerceClient } from 'brainerce';

export const client = new BrainerceClient({
  connectionId: 'vc_YOUR_CONNECTION_ID', // Your Connection ID from Brainerce
});

// ----- Cart Helpers -----

export async function getCart() {
  return client.smartGetCart();
}

export function getCartItemCount(): number {
  return client.getSmartCartItemCount();
}

// ----- Customer Token Helpers -----

export function setCustomerToken(token: string | null): void {
  if (token) {
    localStorage.setItem('customerToken', token);
    client.setCustomerToken(token);
  } else {
    localStorage.removeItem('customerToken');
    client.clearCustomerToken();
  }
}

export function restoreCustomerToken(): string | null {
  const token = localStorage.getItem('customerToken');
  if (token) client.setCustomerToken(token);
  return token;
}

export function isLoggedIn(): boolean {
  return !!localStorage.getItem('customerToken');
}

// WRONG - product name is NOT at top level
const name = item.name; // undefined!
const sku = item.sku; // undefined!

// CORRECT - access via nested objects
const name = item.product.name;
const sku = item.product.sku;
const variantName = item.variant?.name;
const variantSku = item.variant?.sku;

// Monetary fields that are strings:
// - CartItem: unitPrice, discountAmount
// - Cart: subtotal, discountAmount
// - CheckoutLineItem: unitPrice, discountAmount
// - Checkout: subtotal, discountAmount, shippingAmount, taxAmount, total
// - ShippingRate: price

import { formatPrice } from 'brainerce';

// Option 1: Using formatPrice helper (recommended)
const cart = await client.getCart(cartId);
const total = formatPrice(cart.subtotal); // "$59.98"
const totalNum = formatPrice(cart.subtotal, { asNumber: true }); // 59.98

// Option 2: Manual parseFloat
const subtotal = parseFloat(cart.subtotal);
const discount = parseFloat(cart.discountAmount);
const total = subtotal - discount;

// Line item total
cart.items.forEach((item) => {
  const lineTotal = parseFloat(item.unitPrice) * item.quantity;
  console.log(`${item.product.name}: $${lineTotal.toFixed(2)}`);
});

import type { CartItem } from 'brainerce';
import { formatPrice } from 'brainerce';

function CartItemRow({ item }: { item: CartItem }) {
  // Access nested product data
  const productName = item.product.name;
  const productSku = item.product.sku;
  const productImage = item.product.images?.[0]?.url;

  // Access nested variant data (if exists)
  const variantName = item.variant?.name;
  const displayName = variantName ? `${productName} - ${variantName}` : productName;

  // Format price using helper
  const unitPrice = formatPrice(item.unitPrice);
  const lineTotal = formatPrice(item.unitPrice, { asNumber: true }) * item.quantity;

  return (
    <div className="flex items-center gap-4">
      <img src={productImage} alt={displayName} className="w-16 h-16 object-cover" />
      <div className="flex-1">
        <h3 className="font-medium">{displayName}</h3>
        <p className="text-sm text-gray-500">SKU: {item.variant?.sku || productSku}</p>
      </div>
      <span className="text-gray-600">Qty: {item.quantity}</span>
      <span className="font-medium">${lineTotal.toFixed(2)}</span>
    </div>
  );
}

import { client } from '@/lib/brainerce';
import type { Product, PaginatedResponse } from 'brainerce';

const response: PaginatedResponse<Product> = await client.getProducts({
  page: 1,
  limit: 12,
  search: 'shirt', // Optional: search by name
  status: 'active', // Optional: 'active' | 'draft' | 'archived'
  type: 'SIMPLE', // Optional: 'SIMPLE' | 'VARIABLE'
  sortBy: 'createdAt', // Optional: 'name' | 'createdAt' | 'updatedAt' | 'basePrice'
  sortOrder: 'desc', // Optional: 'asc' | 'desc'
});

console.log(response.data); // Product[]
console.log(response.meta.total); // Total number of products
console.log(response.meta.totalPages); // Total pages

const product: Product = await client.getProduct('product_id');

console.log(product.name);
console.log(product.basePrice);
console.log(product.salePrice); // null if no sale
console.log(product.images); // ProductImage[]
console.log(product.variants); // ProductVariant[] (for VARIABLE products)
console.log(product.inventory); // { total, reserved, available }

import type { SearchSuggestions } from 'brainerce';

// Basic autocomplete
const suggestions: SearchSuggestions = await client.getSearchSuggestions('shirt');

console.log(suggestions.products);
// [{ id, name, image, basePrice, salePrice, type }]

console.log(suggestions.categories);
// [{ id, name, productCount }]

// With custom limit (default: 5, max: 10)
const suggestions = await client.getSearchSuggestions('dress', 3);

function SearchInput() {
  const [query, setQuery] = useState('');
  const [suggestions, setSuggestions] = useState<SearchSuggestions | null>(null);

  // Debounce search requests
  useEffect(() => {
    if (query.length < 2) {
      setSuggestions(null);
      return;
    }

    const timer = setTimeout(async () => {
      const results = await client.getSearchSuggestions(query, 5);
      setSuggestions(results);
    }, 300);

    return () => clearTimeout(timer);
  }, [query]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search products..."
      />
      {suggestions && (
        <div className="suggestions">
          {suggestions.products.map((product) => (
            <a key={product.id} href={`/products/${product.slug}`}>
              <img src={product.image || '/placeholder.png'} alt={product.name} />
              <span>{product.name}</span>
              <span>${product.basePrice}</span>
            </a>
          ))}
          {suggestions.categories.map((category) => (
            <a key={category.id} href={`/category/${category.id}`}>
              {category.name} ({category.productCount} products)
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

interface Product {
  id: string;
  name: string;
  description?: string | null;
  descriptionFormat?: 'text' | 'html' | 'markdown'; // Format of description content
  sku: string;
  basePrice: number;
  salePrice?: number | null;
  status: 'active' | 'draft' | 'archived';
  type: 'SIMPLE' | 'VARIABLE';
  images?: ProductImage[];
  inventory?: InventoryInfo | null;
  variants?: ProductVariant[];
  categories?: string[];
  tags?: string[];
  createdAt: string;
  updatedAt: string;
}

interface ProductImage {
  url: string;
  position?: number;
  isMain?: boolean;
}

interface ProductVariant {
  id: string;
  sku?: string | null;
  name?: string | null;
  price?: number | null;
  salePrice?: number | null;
  attributes?: Record<string, string>;
  inventory?: InventoryInfo | null;
}

interface InventoryInfo {
  total: number;
  reserved: number;
  available: number;
  trackingMode?: 'TRACKED' | 'UNLIMITED' | 'DISABLED';
  inStock: boolean; // Pre-calculated - use this for display!
  canPurchase: boolean; // Pre-calculated - use this for add-to-cart
}

import {
  getProductMetafield,
  getProductMetafieldValue,
  getProductMetafieldsByType,
} from 'brainerce';
import type { ProductMetafield } from 'brainerce';

const product = await client.getProductBySlug('blue-shirt');

// Render metafield value based on type
function renderMetafieldValue(field: ProductMetafield): string | JSX.Element {
  switch (field.type) {
    case 'IMAGE':
      return field.value ? <img src={field.value} alt={field.definitionName} className="h-16 w-16 rounded object-cover" /> : '-';
    case 'GALLERY': {
      let urls: string[] = [];
      try { urls = JSON.parse(field.value); } catch { urls = field.value ? [field.value] : []; }
      return <div className="flex gap-2">{urls.map((url, i) => <img key={i} src={url} className="h-16 w-16 rounded object-cover" />)}</div>;
    }
    case 'URL':
      return field.value ? <a href={field.value} target="_blank" rel="noopener noreferrer">{field.value}</a> : '-';
    case 'COLOR':
      return <span><span style={{ backgroundColor: field.value }} className="inline-block h-4 w-4 rounded-full" /> {field.value}</span>;
    case 'BOOLEAN':
      return field.value === 'true' ? 'Yes' : 'No';
    case 'DATE':
      return field.value ? new Date(field.value).toLocaleDateString() : '-';
    case 'DATETIME':
      return field.value ? new Date(field.value).toLocaleString() : '-';
    default:
      return field.value || '-';
  }
}

// Display in a spec table
product.metafields?.forEach((field) => {
  console.log(`${field.definitionName}: ${renderMetafieldValue(field)}`);
});

// Get a specific metafield by key
const material = getProductMetafieldValue(product, 'material'); // auto-parsed (string | number | boolean | null)
const careField = getProductMetafield(product, 'care_instructions'); // full ProductMetafield object

// Filter metafields by type
const textFields = getProductMetafieldsByType(product, 'TEXT');

// Fetch metafield definitions (schema) to build dynamic UI
const { definitions } = await client.getPublicMetafieldDefinitions();
definitions.forEach((def) => {
  console.log(`${def.name} (${def.key}): ${def.type}, required: ${def.required}`);
});

// Helper function to get price range from variants
function getPriceRange(product: Product): { min: number; max: number } | null {
  if (product.type !== 'VARIABLE' || !product.variants?.length) {
    return null;
  }

  const prices = product.variants
    .map(v => v.price ?? product.basePrice)
    .filter((p): p is number => p !== null);

  if (prices.length === 0) return null;

  const min = Math.min(...prices);
  const max = Math.max(...prices);

  // Return null if all variants have the same price
  return min !== max ? { min, max } : null;
}

// Usage in component
function ProductPrice({ product }: { product: Product }) {
  const priceRange = getPriceRange(product);

  if (priceRange) {
    // Variable product with different variant prices - show range
    return <span>${priceRange.min} - ${priceRange.max}</span>;
  }

  // Simple product or all variants same price - show single price
  return product.salePrice ? (
    <>
      <span className="text-red-600">${product.salePrice}</span>
      <span className="line-through text-gray-400 ml-2">${product.basePrice}</span>
    </>
  ) : (
    <span>${product.basePrice}</span>
  );
}

await client.smartAddToCart({
  productId: 'prod_123',
  variantId: 'var_456', // Optional: for products with variants
  quantity: 2,
});

const cart = await client.smartGetCart();

console.log(cart.items); // Array of CartItem
console.log(cart.itemCount); // Total item count
console.log(cart.couponCode); // Applied coupon (if any)

// Set quantity to 5
await client.smartUpdateCartItem('prod_123', 5);

// For variant products
await client.smartUpdateCartItem('prod_123', 3, 'var_456');

// Set to 0 to remove
await client.smartUpdateCartItem('prod_123', 0);

await client.smartRemoveFromCart('prod_123');
await client.smartRemoveFromCart('prod_123', 'var_456'); // With variant

// Returns cached count from session reference — instant, no API call
const count = client.getSmartCartItemCount();
console.log(`${count} items in cart`);
// For accurate count, use: (await client.smartGetCart()).itemCount

const cart = await client.smartGetCart();
const updated = await client.applyCoupon(cart.id, 'SAVE20');
console.log(updated.discountAmount); // "10.00"
console.log(updated.couponCode); // "SAVE20"

// Remove coupon
await client.removeCoupon(cart.id);

import { getCartTotals } from 'brainerce';

const cart = await client.smartGetCart();
const totals = getCartTotals(cart);
// { subtotal: 59.98, discount: 10, shipping: 5.99, total: 55.97 }

// Make sure cart has items, customer email, and shipping address
const order = await client.submitGuestOrder();

console.log(order.orderId); // 'order_abc123...'
console.log(order.orderNumber); // 'ORD-12345'
console.log(order.status); // 'pending'
console.log(order.total); // 59.98
console.log(order.message); // 'Order created successfully'

// Cart is automatically cleared after successful order

// If you want to keep the cart data (e.g., for order review page)
const order = await client.submitGuestOrder({ clearCartOnSuccess: false });

const order = await client.createGuestOrder({
  items: [
    { productId: 'prod_123', quantity: 2 },
    { productId: 'prod_456', variantId: 'var_789', quantity: 1 },
  ],
  customer: {
    email: 'customer@example.com',
    firstName: 'John',
    lastName: 'Doe',
  },
  shippingAddress: {
    firstName: 'John',
    lastName: 'Doe',
    line1: '123 Main St',
    city: 'New York',
    postalCode: '10001',
    country: 'US',
  },
  couponCode: 'SAVE20', // Optional
  notes: 'Please gift wrap', // Optional
});

interface GuestOrderResponse {
  orderId: string;
  orderNumber: string;
  status: string;
  total: number;
  message: string;
}

// 1. Start tracked checkout (sends cart items to server)
const checkout = await client.startGuestCheckout();

if (checkout.tracked) {
  // 2. Update with shipping address
  await client.updateGuestCheckoutAddress(checkout.checkoutId, {
    shippingAddress: {
      firstName: 'John',
      lastName: 'Doe',
      line1: '123 Main St',
      city: 'New York',
      postalCode: '10001',
      country: 'US',
    },
  });

  // 3. Complete the checkout
  const order = await client.completeGuestCheckout(checkout.checkoutId);
  console.log('Order created:', order.orderId);
} else {
  // Fallback to regular guest checkout
  const order = await client.submitGuestOrder();
}

type GuestCheckoutStartResponse =
  | {
      tracked: true;
      checkoutId: string;
      cartId: string;
      message: string;
    }
  | {
      tracked: false;
      message: string;
    };

const cart = await client.createCart();

const cartId = getCartId();
if (cartId) {
  const cart = await client.getCart(cartId);
  console.log(cart.items); // CartItem[]
  console.log(cart.itemCount); // Total items
  console.log(cart.subtotal); // Subtotal amount
}

const cart = await client.addToCart(cartId, {
  productId: 'product_id',
  variantId: 'variant_id', // Optional: for VARIABLE products
  quantity: 2,
  notes: 'Gift wrap please', // Optional
});

const cart = await client.updateCartItem(cartId, itemId, {
  quantity: 3,
});

const cart = await client.removeCartItem(cartId, itemId);

const cart = await client.applyCoupon(cartId, 'SAVE20');
console.log(cart.discountAmount); // Discount applied
console.log(cart.couponCode); // 'SAVE20'

const cart = await client.removeCoupon(cartId);

interface Cart {
  id: string;
  sessionToken?: string | null;
  customerId?: string | null;
  status: 'ACTIVE' | 'MERGED' | 'CONVERTED' | 'ABANDONED';
  currency: string;
  subtotal: string;
  discountAmount: string;
  couponCode?: string | null;
  items: CartItem[];
  itemCount: number;
  createdAt: string;
  updatedAt: string;
}

interface CartItem {
  id: string;
  productId: string;
  variantId?: string | null;
  quantity: number;
  unitPrice: string;
  discountAmount: string;
  notes?: string | null;
  product: {
    id: string;
    name: string;
    sku: string;
    images?: unknown[];
  };
  variant?: {
    id: string;
    name?: string | null;
    sku?: string | null;
  } | null;
}

const checkout = await client.createCheckout({
  cartId: cartId,
});

// 1. In your cart page, track selected items
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());

// 2. Create checkout with only selected items
const checkout = await client.createCheckout({
  cartId: cart.id,
  selectedItemIds: Array.from(selectedItems), // Only these items go to checkout
});

// 3. Before checkout, check stock ONLY for selected items
const stockCheck = await client.checkCartStock(cart, Array.from(selectedItems));
if (!stockCheck.allAvailable) {
  // Handle out-of-stock items
}

// After successful payment:
// - Selected items are REMOVED from cart
// - Unselected items REMAIN in cart (cart stays ACTIVE)
// - Customer can continue shopping and checkout remaining items later

const checkout = await client.setCheckoutCustomer(checkoutId, {
  email: 'customer@example.com',
  firstName: 'John',
  lastName: 'Doe',
  phone: '+1234567890', // Optional
});

const { checkout, rates } = await client.setShippingAddress(checkoutId, {
  firstName: 'John',
  lastName: 'Doe',
  line1: '123 Main St',
  line2: 'Apt 4B', // Optional
  city: 'New York',
  region: 'NY', // State/Province
  postalCode: '10001',
  country: 'US',
  phone: '+1234567890', // Optional
});

// rates contains available shipping options
console.log(rates); // ShippingRate[]

const checkout = await client.selectShippingMethod(checkoutId, rates[0].id);

// Same as shipping
const checkout = await client.setBillingAddress(checkoutId, {
  ...shippingAddress,
  sameAsShipping: true, // Optional shortcut
});

const { orderId } = await client.completeCheckout(checkoutId);
clearCartId(); // Clear cart from localStorage
console.log('Order created:', orderId);

interface Checkout {
  id: string;
  status: CheckoutStatus;
  email?: string | null;
  shippingAddress?: CheckoutAddress | null;
  billingAddress?: CheckoutAddress | null;
  shippingMethod?: ShippingRate | null;
  currency: string;
  subtotal: string;
  discountAmount: string;
  shippingAmount: string;
  taxAmount: string;
  total: string;
  couponCode?: string | null;
  items: CheckoutLineItem[];
  itemCount: number;
  availableShippingRates?: ShippingRate[];
}

type CheckoutStatus = 'PENDING' | 'SHIPPING_SET' | 'PAYMENT_PENDING' | 'COMPLETED' | 'FAILED';

interface ShippingRate {
  id: string;
  name: string;
  description?: string | null;
  price: string;
  currency: string;
  estimatedDays?: number | null;
}

// Step 1: Set shipping address - this returns available rates
const { checkout, rates } = await client.setShippingAddress(checkoutId, {
  firstName: 'John',
  lastName: 'Doe',
  line1: '123 Main St',
  city: 'New York',
  region: 'NY',
  postalCode: '10001',
  country: 'US',
});

// Step 2: Handle empty rates (edge case)
if (rates.length === 0) {
  // No shipping options available for this address
  // This can happen when:
  // - Store doesn't ship to this address/country
  // - All shipping methods have restrictions that exclude this address
  // - Shipping rates haven't been configured in the store

  return (
    <div className="bg-yellow-50 p-4 rounded">
      <p className="font-medium">No shipping options available</p>
      <p className="text-sm text-gray-600">
        We currently cannot ship to this address. Please try a different address or contact us for
        assistance.
      </p>
    </div>
  );
}

// Step 3: Display available rates to customer
<div className="space-y-2">
  <h3 className="font-medium">Select Shipping Method</h3>
  {rates.map((rate) => (
    <label key={rate.id} className="flex items-center gap-3 p-3 border rounded cursor-pointer">
      <input
        type="radio"
        name="shipping"
        value={rate.id}
        checked={selectedRateId === rate.id}
        onChange={() => setSelectedRateId(rate.id)}
      />
      <div className="flex-1">
        <span className="font-medium">{rate.name}</span>
        {rate.description && <p className="text-sm text-gray-500">{rate.description}</p>}
        {rate.estimatedDays && (
          <p className="text-sm text-gray-500">Estimated delivery: {rate.estimatedDays} business days</p>
        )}
      </div>
      <span className="font-medium">${parseFloat(rate.price).toFixed(2)}</span>
    </label>
  ))}
</div>;

// Step 4: Select the shipping method
await client.selectShippingMethod(checkoutId, selectedRateId);

// Option 1: Show helpful message
if (rates.length === 0) {
  return <NoShippingAvailable address={shippingAddress} />;
}

// Option 2: Allow customer to contact store
if (rates.length === 0) {
  return (
    <div>
      <p>Shipping not available to your location.</p>
      <a href="/contact">Request a shipping quote</a>
    </div>
  );
}

// Option 3: Validate before proceeding
function canProceedToPayment(checkout: Checkout, rates: ShippingRate[]): boolean {
  if (rates.length === 0) return false;
  if (!checkout.shippingRateId) return false;
  if (!checkout.email) return false;
  return true;
}

// For GUEST users (session cart):
const result = await client.startGuestCheckout();
const checkoutId = result.checkoutId;

// For LOGGED-IN users (server cart):
const cart = await client.smartGetCart();
const checkout = await client.createCheckout({ cartId: cart.id });
const checkoutId = checkout.id;

// Then continue with shipping and payment...

const { hasPayments, providers, defaultProvider } = await client.getPaymentProviders();

// Returns:
// {
//   hasPayments: true,
//   providers: [
//     {
//       id: 'provider_xxx',
//       provider: 'stripe',
//       name: 'Stripe',
//       publicKey: 'pk_live_xxx...',
//       supportedMethods: ['card', 'ideal'],
//       testMode: false,
//       isDefault: true
//     },
//     {
//       id: 'provider_yyy',
//       provider: 'paypal',
//       name: 'PayPal',
//       publicKey: 'client_id_xxx...',
//       supportedMethods: ['paypal'],
//       testMode: false,
//       isDefault: false
//     }
//   ],
//   defaultProvider: { ... }  // The default provider (first one)
// }

// Build dynamic UI based on available providers
if (!hasPayments) {
  return <div>Payment not configured for this store</div>;
}

const stripeProvider = providers.find(p => p.provider === 'stripe');
const paypalProvider = providers.find(p => p.provider === 'paypal');

// Show Stripe payment form if available
if (stripeProvider) {
  const stripe = await loadStripe(stripeProvider.publicKey);
  // ... show Stripe Elements
}

// Show PayPal buttons if available
if (paypalProvider) {
  // ... show PayPal buttons with paypalProvider.publicKey as client-id
}

const config = await client.getPaymentConfig();

// Returns:
// {
//   provider: 'stripe' | 'paypal',
//   publicKey: 'pk_live_xxx...',  // Stripe publishable key or PayPal client ID
//   supportedMethods: ['card', 'ideal', 'bancontact'],
//   testMode: false
// }

const intent = await client.createPaymentIntent(checkout.id);

// Returns:
// {
//   id: 'pi_xxx...',
//   clientSecret: 'pi_xxx_secret_xxx',  // Used by Stripe.js/PayPal SDK
//   amount: 9999,  // In cents
//   currency: 'USD',
//   status: 'requires_payment_method'
// }

// Initialize Stripe.js with the public key from getPaymentConfig()
const stripe = await loadStripe(config.publicKey);

// Create Elements and Payment Element
const elements = stripe.elements({ clientSecret: intent.clientSecret });
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

// When customer submits payment
const { error } = await stripe.confirmPayment({
  elements,
  confirmParams: {
    return_url: `${window.location.origin}/checkout/success?checkout_id=${checkout.id}`,
  },
});

if (error) {
  console.error('Payment failed:', error.message);
}

// In your payment form, after stripe.confirmPayment() succeeds:
const { error } = await stripe.confirmPayment({
  elements,
  confirmParams: {
    return_url: `${window.location.origin}/checkout/success?checkout_id=${checkout.id}`,
  },
});

// On /checkout/success page - show confirmation IMMEDIATELY:
export default function CheckoutSuccessPage() {
  const checkoutId = new URLSearchParams(window.location.search).get('checkout_id');

  return (
    <div className="text-center py-12">
      <h1 className="text-2xl font-bold text-green-600">Payment Received!</h1>
      <p className="mt-4">Your order is being processed.</p>
      <p className="mt-2 text-gray-600">
        Confirmation #{checkoutId?.slice(-8).toUpperCase()}
      </p>
      <p className="mt-4">A confirmation email will be sent shortly.</p>
      <a href="/orders" className="mt-6 inline-block text-blue-600">
        View Your Orders →
      </a>
    </div>
  );
}

// After payment succeeds, wait for order creation (max 30 seconds)
const result = await client.waitForOrder(checkout.id, {
  maxWaitMs: 30000, // 30 seconds max
  onPollAttempt: (attempt, status) => {
    console.log(`Checking order status... (attempt ${attempt})`);
  },
  onOrderReady: (status) => {
    // Called immediately when order is created
    console.log('Order ready:', status.orderNumber);
  },
});

if (result.success) {
  // Order was created within timeout
  window.location.href = `/orders/${result.status.orderId}`;
} else {
  // Order not created yet - show optimistic success anyway
  // The email will be sent when order is ready
  showSuccessMessage('Payment received! Order confirmation coming soon.');
}

const status = await client.getPaymentStatus(checkout.id);

// Returns:
// {
//   checkoutId: 'checkout_xxx',
//   status: 'succeeded' | 'pending' | 'failed' | 'canceled',
//   orderId: 'order_xxx',      // Only if order was created
//   orderNumber: 'ORD-123',    // Only if order was created
//   error: 'Payment declined'  // Only if payment failed
// }

if (status.status === 'succeeded' && status.orderId) {
  window.location.href = `/order-confirmation/${status.orderId}`;
} else if (status.status === 'succeeded') {
  // Payment succeeded but order not created yet
  showMessage('Payment received, processing your order...');
} else if (status.status === 'failed') {
  showError(status.error || 'Payment failed');
}

// For GUEST users (session cart):
const result = await client.startGuestCheckout();
const checkoutId = result.checkoutId; // Use this!

// For LOGGED-IN users (server cart):
const cart = await client.smartGetCart();
const checkout = await client.createCheckout({ cartId: cart.id });
const checkoutId = checkout.id; // Use this!

'use client';
import { useState, useEffect } from 'react';
import { loadStripe, Stripe, StripeElements } from '@stripe/stripe-js';
import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
import { client } from '@/lib/brainerce';
import type { Checkout, PaymentConfig, PaymentIntent } from 'brainerce';

export default function CheckoutPaymentPage() {
  const [checkout, setCheckout] = useState<Checkout | null>(null);
  const [paymentConfig, setPaymentConfig] = useState<PaymentConfig | null>(null);
  const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);
  const [stripePromise, setStripePromise] = useState<Promise<Stripe | null> | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    async function initPayment() {
      try {
        // Get checkout_id from URL (set by previous step)
        const checkoutId = new URLSearchParams(window.location.search).get('checkout_id');
        if (!checkoutId) throw new Error('No checkout ID');

        // Get payment configuration
        const config = await client.getPaymentConfig();
        setPaymentConfig(config);

        // Initialize Stripe
        if (config.provider === 'stripe') {
          setStripePromise(loadStripe(config.publicKey));
        }

        // Create payment intent
        const intent = await client.createPaymentIntent(checkoutId);
        setPaymentIntent(intent);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to initialize payment');
      } finally {
        setLoading(false);
      }
    }
    initPayment();
  }, []);

  if (loading) return <div>Loading payment...</div>;
  if (error) return <div className="text-red-600">{error}</div>;
  if (!paymentConfig || !paymentIntent || !stripePromise) return null;

  return (
    <div className="max-w-lg mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">Payment</h1>

      <Elements stripe={stripePromise} options={{ clientSecret: paymentIntent.clientSecret }}>
        <PaymentForm checkoutId={paymentIntent.id} />
      </Elements>
    </div>
  );
}

function PaymentForm({ checkoutId }: { checkoutId: string }) {
  const stripe = useStripe();
  const elements = useElements();
  const [processing, setProcessing] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!stripe || !elements) return;

    setProcessing(true);
    setError('');

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${window.location.origin}/checkout/success?checkout_id=${checkoutId}`,
      },
    });

    if (error) {
      setError(error.message || 'Payment failed');
      setProcessing(false);
    }
    // If successful, Stripe redirects to return_url
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />

      {error && <div className="text-red-600 mt-4">{error}</div>}

      <button
        type="submit"
        disabled={!stripe || processing}
        className="w-full mt-6 bg-green-600 text-white py-3 rounded disabled:opacity-50"
      >
        {processing ? 'Processing...' : 'Pay Now'}
      </button>
    </form>
  );
}

// On your /checkout/success page:
export default function CheckoutSuccessPage() {
  const checkoutId = new URLSearchParams(window.location.search).get('checkout_id');

  useEffect(() => {
    if (checkoutId) {
      // IMPORTANT: This sends the order to the server AND clears the cart
      // completeGuestCheckout() returns GuestOrderResponse (has .orderNumber directly)
      // This is different from waitForOrder() which returns WaitForOrderResult
      // (access orderNumber via .status.orderNumber instead)
      client.completeGuestCheckout(checkoutId).then(result => {
        console.log('Order created:', result.orderNumber);
      }).catch(() => {
        // Order may already exist (e.g., page refresh) - safe to ignore
      });
    }
  }, []);

  return (
    <div className="text-center py-12">
      <h1 className="text-2xl font-bold text-green-600">Payment Received!</h1>
      {/* ... rest of success page */}
    </div>
  );
}

const auth = await client.registerCustomer({
  email: 'customer@example.com',
  password: 'securepassword123',
  firstName: 'John',
  lastName: 'Doe',
});

// Check if email verification is required
if (auth.requiresVerification) {
  localStorage.setItem('verificationToken', auth.token);
  window.location.href = '/verify-email';
} else {
  setCustomerToken(auth.token);
  // Redirect back to store, not /account
  window.location.href = '/';
}

const auth = await client.loginCustomer('customer@example.com', 'password123');
setCustomerToken(auth.token);

// Best practice: redirect back to previous page or home
const returnUrl = localStorage.getItem('returnUrl') || '/';
localStorage.removeItem('returnUrl');
window.location.href = returnUrl;

setCustomerToken(null);
window.location.href = '/'; // Return to store home

restoreCustomerToken(); // Restore from localStorage
const profile = await client.getMyProfile();

console.log(profile.firstName);
console.log(profile.email);
console.log(profile.addresses);

const { data: orders, meta } = await client.getMyOrders({
  page: 1,
  limit: 10,
});

interface CustomerAuthResponse {
  customer: {
    id: string;
    email: string;
    firstName?: string;
    lastName?: string;
    emailVerified: boolean;
  };
  token: string;
  expiresAt: string;
  requiresVerification?: boolean; // true if email verification is required
}

const auth = await client.registerCustomer({
  email: 'customer@example.com',
  password: 'securepassword123',
  firstName: 'John',
});

if (auth.requiresVerification) {
  // Save token for verification step
  localStorage.setItem('verificationToken', auth.token);
  // Redirect to verification page
  window.location.href = '/verify-email';
} else {
  // No verification needed - redirect back to store
  setCustomerToken(auth.token);
  window.location.href = '/';
}

// Get the token saved from registration
const token = localStorage.getItem('verificationToken');

// Verify email - pass the token directly (no need to call setCustomerToken first!)
const result = await client.verifyEmail(code, token);

if (result.verified) {
  // Email verified! Now set the token for normal use
  setCustomerToken(token);
  localStorage.removeItem('verificationToken');
  // Redirect back to store (or returnUrl if saved)
  const returnUrl = localStorage.getItem('returnUrl') || '/';
  localStorage.removeItem('returnUrl');
  window.location.href = returnUrl;
}

const token = localStorage.getItem('verificationToken');
await client.resendVerificationEmail(token);
// Show success message - new code sent

'use client';
import { useState } from 'react';
import { client, setCustomerToken } from '@/lib/brainerce';
import { toast } from 'sonner';

export default function VerifyEmailPage() {
  const [code, setCode] = useState('');
  const [loading, setLoading] = useState(false);

  const handleVerify = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const token = localStorage.getItem('verificationToken');
      if (!token) {
        toast.error('No verification token found. Please register again.');
        return;
      }

      const result = await client.verifyEmail(code, token);

      if (result.verified) {
        toast.success('Email verified!');
        setCustomerToken(token);
        localStorage.removeItem('verificationToken');
        // Redirect back to store
        const returnUrl = localStorage.getItem('returnUrl') || '/';
        localStorage.removeItem('returnUrl');
        window.location.href = returnUrl;
      }
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Verification failed');
    } finally {
      setLoading(false);
    }
  };

  const handleResend = async () => {
    try {
      const token = localStorage.getItem('verificationToken');
      if (!token) {
        toast.error('No verification token found');
        return;
      }
      await client.resendVerificationEmail(token);
      toast.success('Verification code sent!');
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Failed to resend');
    }
  };

  return (
    <div className="max-w-md mx-auto mt-12">
      <h1 className="text-2xl font-bold mb-4">Verify Your Email</h1>
      <p className="text-gray-600 mb-6">
        We sent a 6-digit code to your email. Enter it below to verify your account.
      </p>

      <form onSubmit={handleVerify} className="space-y-4">
        <input
          type="text"
          placeholder="Enter 6-digit code"
          value={code}
          onChange={(e) => setCode(e.target.value)}
          maxLength={6}
          className="w-full border p-3 rounded text-center text-2xl tracking-widest"
          required
        />
        <button
          type="submit"
          disabled={loading || code.length !== 6}
          className="w-full bg-black text-white py-3 rounded disabled:opacity-50"
        >
          {loading ? 'Verifying...' : 'Verify Email'}
        </button>
      </form>

      <button onClick={handleResend} className="mt-4 text-blue-600 text-sm">
        Didn't receive the code? Resend
      </button>
    </div>
  );
}

// Returns only the providers the store owner has enabled
const { providers } = await client.getAvailableOAuthProviders();
// providers = ['GOOGLE', 'FACEBOOK'] - varies by store configuration

// Get authorization URL
const { authorizationUrl } = await client.getOAuthAuthorizeUrl('GOOGLE', {
  redirectUrl: window.location.origin + '/auth/callback', // Where to redirect after OAuth
});

// Redirect to Google
window.location.href = authorizationUrl;

// app/auth/callback/page.tsx
'use client';
import { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { setCustomerToken } from '@/lib/brainerce';

export default function AuthCallback() {
  const searchParams = useSearchParams();
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const oauthSuccess = searchParams.get('oauth_success');
    const token = searchParams.get('token');
    const oauthError = searchParams.get('oauth_error');

    // Check for OAuth errors (user cancelled, provider error, etc.)
    if (oauthError) {
      setError(oauthError);
      return;
    }

    if (oauthSuccess === 'true' && token) {
      // Save the customer token
      setCustomerToken(token);

      // Also available in URL params: customer_id, customer_email, is_new

      // Redirect to return URL or home
      const returnUrl = localStorage.getItem('returnUrl') || '/';
      localStorage.removeItem('returnUrl');
      window.location.href = returnUrl;
    } else {
      setError('Missing authentication parameters');
    }
  }, [searchParams]);

  if (error) {
    return (
      <div className="max-w-md mx-auto mt-12 text-center">
        <h1 className="text-xl font-bold text-red-600">Login Failed</h1>
        <p className="mt-2 text-gray-600">{error}</p>
        <a href="/login" className="mt-4 inline-block text-blue-600">
          Try again
        </a>
      </div>
    );
  }

  return (
    <div className="max-w-md mx-auto mt-12 text-center">
      <div className="animate-spin h-8 w-8 border-4 border-blue-600 border-t-transparent rounded-full mx-auto"></div>
      <p className="mt-4 text-gray-600">Completing login...</p>
    </div>
  );
}

'use client';
import { useState, useEffect } from 'react';
import { client, setCustomerToken } from '@/lib/brainerce';

export default function LoginPage() {
  const [providers, setProviders] = useState<string[]>([]);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  // Load available OAuth providers
  useEffect(() => {
    client.getAvailableOAuthProviders()
      .then(({ providers }) => setProviders(providers))
      .catch(() => {}); // OAuth not configured - that's ok
  }, []);

  // Social login handler
  const handleSocialLogin = async (provider: string) => {
    try {
      // Session cart is preserved automatically via localStorage session token
      const { authorizationUrl, state } = await client.getOAuthAuthorizeUrl(
        provider as 'GOOGLE' | 'FACEBOOK' | 'GITHUB',
        { redirectUrl: window.location.origin + '/auth/callback' }
      );

      sessionStorage.setItem('oauthState', state);
      window.location.href = authorizationUrl;
    } catch (err) {
      setError('Failed to start login');
    }
  };

  // Regular email/password login
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      const auth = await client.loginCustomer(email, password);
      setCustomerToken(auth.token);
      const returnUrl = localStorage.getItem('returnUrl') || '/';
      localStorage.removeItem('returnUrl');
      window.location.href = returnUrl;
    } catch (err) {
      setError('Invalid email or password');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-md mx-auto mt-12">
      <h1 className="text-2xl font-bold mb-6">Login</h1>

      {/* Social Login Buttons */}
      {providers.length > 0 && (
        <div className="space-y-3 mb-6">
          {providers.includes('GOOGLE') && (
            <button
              onClick={() => handleSocialLogin('GOOGLE')}
              className="w-full flex items-center justify-center gap-2 border py-3 rounded hover:bg-gray-50"
            >
              <GoogleIcon />
              Continue with Google
            </button>
          )}
          {providers.includes('FACEBOOK') && (
            <button
              onClick={() => handleSocialLogin('FACEBOOK')}
              className="w-full flex items-center justify-center gap-2 bg-[#1877F2] text-white py-3 rounded"
            >
              <FacebookIcon />
              Continue with Facebook
            </button>
          )}
          {providers.includes('GITHUB') && (
            <button
              onClick={() => handleSocialLogin('GITHUB')}
              className="w-full flex items-center justify-center gap-2 bg-[#24292F] text-white py-3 rounded"
            >
              <GithubIcon />
              Continue with GitHub
            </button>
          )}
          <div className="relative my-4">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t" />
            </div>
            <div className="relative flex justify-center text-sm">
              <span className="px-2 bg-white text-gray-500">or</span>
            </div>
          </div>
        </div>
      )}

      {/* Email/Password Form */}
      {error && <div className="bg-red-100 text-red-600 p-3 rounded mb-4">{error}</div>}
      <form onSubmit={handleSubmit} className="space-y-4">
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          className="w-full border p-2 rounded"
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
          className="w-full border p-2 rounded"
        />
        <button
          type="submit"
          disabled={loading}
          className="w-full bg-black text-white py-3 rounded"
        >
          {loading ? 'Logging in...' : 'Login'}
        </button>
      </form>

      <p className="mt-4 text-center">
        Don't have an account? <a href="/register" className="text-blue-600">Register</a>
      </p>
    </div>
  );
}

// Simple SVG icons (or use lucide-react)
const GoogleIcon = () => (
  <svg className="w-5 h-5" viewBox="0 0 24 24">
    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
    <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
  </svg>
);

const FacebookIcon = () => (
  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
  </svg>
);

const GithubIcon = () => (
  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
  </svg>
);