# CONFIGURATION TEMPLATE
# Update this file and follow instructions below

## 1. PAYSTACK CONFIGURATION
# File: js/payment.js (Line 3)
# Find this line:
CONFIG.paystackPublicKey = 'pk_test_YOUR_PAYSTACK_PUBLIC_KEY';

# Replace with your actual public key from:
# https://dashboard.paystack.com/#/settings/developer
# Example:
# CONFIG.paystackPublicKey = 'pk_live_1234567890abcdef';


## 2. WHATSAPP BUSINESS NUMBER
# File: js/products.js (Line 13)
# Find this line:
CONFIG.whatsappNumber = '+254712345678';

# Replace with your WhatsApp business number
# Format: +countrycode + phonenumber
# Examples:
# +254712345678 (Kenya)
# +233123456789 (Ghana)
# +256701234567 (Uganda)


## 3. BUSINESS INFORMATION
# File: js/products.js (Lines 9-11)
CONFIG.businessName = 'Guarulhos Liquor Store';
CONFIG.storeName = 'Guarulhos';

# Update these with your business details


## 4. CONTACT INFORMATION
# Update in ALL HTML files (look at footer section):

# Phone: +254 712 345 678
# Email: info@guarulhos.ke  
# Address: Nairobi, Kenya
# Hours: 24 Hours, 7 Days a Week

# Files to update:
# - index.html (line ~300)
# - about.html (line ~200)
# - contact.html (line ~50, ~150)
# - faq.html (line ~300)


## 5. PRODUCT CATALOG
# File: js/products.js (Line 31 onwards)

# Add products like this:
{
  id: 25,
  name: 'Product Name',
  category: CATEGORIES.BEERS,  // Options: BEERS, VODKA, RUM, WHISKY, GIN, WINE, TRENDING
  price: 2500,  // Price in KES
  image: 'https://image-url.jpg',  // Product image URL
  description: 'Product description'
}

# Available categories:
# - CATEGORIES.TRENDING
# - CATEGORIES.BEERS
# - CATEGORIES.VODKA
# - CATEGORIES.RUM
# - CATEGORIES.WHISKY
# - CATEGORIES.GIN
# - CATEGORIES.WINE


## 6. CUSTOMIZE COLORS
# File: css/style.css (Lines 7-19)

:root {
  /* Colors */
  --primary-dark: #0f0f0f;      /* Main background (black) */
  --secondary-dark: #1a1a1a;    /* Secondary background */
  --accent-gold: #d4af37;       /* Primary accent (gold) */
  --accent-amber: #ffa500;      /* Secondary accent (orange) */
  --text-light: #f0f0f0;        /* Text color (light gray) */
  --text-muted: #b0b0b0;        /* Muted text (medium gray) */
  --border-color: #333;         /* Border color (dark gray) */
  --hover-bg: #2a2a2a;          /* Hover background */
}

# Popular color combinations:
# Premium Black & Gold (current)
# Dark Purple & Silver: #1a0033, #c0c0c0
# Dark Blue & Cyan: #001a4d, #00d4ff
# Dark Green & Gold: #1a3a1a, #daa520


## 7. CAROUSEL SETTINGS
# File: js/carousel.js (Line 62)

new Carousel('hero-carousel', {
  autoSlide: true,      // true = auto-slide, false = manual only
  slideInterval: 5000,  // Milliseconds between slides (5000ms = 5 seconds)
  transitionSpeed: 800, // Animation speed in milliseconds
});


## 8. GOOGLE MAPS
# File: All HTML files (in footer section)

# Current embed is for Nairobi center
# To change location:
# 1. Go to: https://www.google.com/maps
# 2. Find your location
# 3. Click "Share" → "Embed a map"
# 4. Copy the iframe code
# 5. Replace the iframe in footer


## 9. FORMS & EMAIL
# File: contact.html (line ~100)

# Contact form submissions are logged to console
# To send emails, you'll need:
# 1. A backend service (PHP, Node.js, etc.)
# 2. Or use services like:
#    - Formspree (https://formspree.io)
#    - Basin (https://usebasin.com)
#    - Getform (https://getform.io)


## 10. IMAGES SETUP
# Folder: images/products/

# Option 1: Use placeholder service (no uploads needed)
# https://via.placeholder.com/250x300?text=Product+Name

# Option 2: Upload your images
# 1. Create: images/products/ folder (already done)
# 2. Upload product images
# 3. Update image paths in js/products.js:
#    image: 'images/products/my-image.jpg'

# Option 3: Use external URLs
# image: 'https://example.com/product.jpg'


## DEPLOYMENT CHECKLIST

Before going LIVE:

☐ 1. Update Paystack PUBLIC KEY (not secret key!)
☐ 2. Update WhatsApp business number
☐ 3. Update phone/email in footer (all pages)
☐ 4. Add your actual products to products.js
☐ 5. Update business name and address
☐ 6. Test payment flow on actual device
☐ 7. Test WhatsApp message sending
☐ 8. Test on mobile browsers
☐ 9. Check all images load
☐ 10. Enable HTTPS on hosting
☐ 11. Test contact form
☐ 12. Set Google Maps to correct location
☐ 13. Update social media links
☐ 14. Test search functionality
☐ 15. Verify all links work


## PAYSTACK SETUP GUIDE

1. Go to: https://dashboard.paystack.com
2. Click "Sign Up"
3. Create free business account
4. Verify your email
5. Complete business info
6. Go to: Settings → Developer
7. Copy Public Key (starts with pk_)
8. Paste into js/payment.js
9. Keep Secret Key safe (never share)


## WHATSAPP SETUP GUIDE

1. Get WhatsApp business number (personal account works too)
2. Verify it's accessible via https://wa.me/your-number
3. Update CONFIG.whatsappNumber in js/products.js
4. Format: +countrycode + phonenumber
5. Test by clicking any "Inquire" button
6. Message should open WhatsApp with pre-filled text


## TEST PAYSTACK PAYMENT

Use these test cards (in test mode):

Card Number: 4111 1111 1111 1111
Expiry: Any future date
CVV: 123
OTP: 123456

Only works with TEST Paystack key (pk_test_...)
Switch to LIVE key (pk_live_...) for real payments


## SUPPORT & RESOURCES

Paystack Documentation:
https://paystack.com/docs/api/

WhatsApp Business API:
https://www.whatsapp.com/business/api/

Responsive Design Testing:
https://responsivedesignchecker.com/

Browser Compatibility:
https://caniuse.com/

---

Questions? See README.md for detailed documentation.
