<?php
// Handle newsletter submission only (contact form now uses API)
$newsletter_sent = false;

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['newsletter_submit'])) {
    $newsletter_email = htmlspecialchars($_POST['newsletter_email'] ?? '');
    if ($newsletter_email && filter_var($newsletter_email, FILTER_VALIDATE_EMAIL)) {
        // In production, save to database or email service
        $newsletter_sent = true;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Sue Kambua | Artist & Art Educator</title>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<!-- Floating Contact Button -->
<div class="floating-contact">
    <a href="#contact" class="float-btn" aria-label="Contact">🖂︎</a>
</div>

<!-- Back to Top Button -->
<button id="backToTop" class="back-to-top" aria-label="Back to top">↑</button>

<div class="container">
    
    <!-- Header -->
    <header class="site-header fade-in">
        <div class="logo"><a href="/">Sue Kambua</a></div>
        <div class="tagline">ARTIST · EDUCATOR · MENTOR</div>
    </header>

    <!-- HERO SECTION - INTRODUCTION -->
    <section class="hero fade-in">
        <div class="hero-content">
            <div class="hero-eyebrow">VISUAL ARTIST · EDUCATOR · MENTOR</div>
            <h1 class="hero-title">Sue Kambua</h1>
            <div class="hero-line"></div>
            <p class="hero-subtitle">Creating space for curiosity, color, and creative courage — in the studio and the classroom.</p>
            <div class="hero-buttons">
                <a href="#classes" class="btn-primary">Explore Classes →</a>
                <a href="#contact" class="btn-secondary">Get in Touch</a>
            </div>
        </div>
    </section>

    <!-- MANTRA / QUOTE SECTION -->
    <div class="mantra-section animate">
        <span class="quote-mark">"</span>
        <p>Mistakes become directions.<br>Every mark has purpose.</p>
        <span class="quote-mark-right">"</span>
        <div class="mantra-signature">— Sue Kambua</div>
    </div>

    <!-- BIO SECTION with Photo -->
    <div class="bio-showcase">
        <div class="bio-left">
            <div class="bio-card-dark animate">
                <span class="bio-label">THE ARTIST</span>
                <h3>Artist Bio</h3>
                <p>Sue Kambua is a visual artist whose work explores texture, memory, and the quiet moments between words. Working primarily with mixed media and painting, her pieces are held in private collections across Kenya and abroad.</p>
                <p>Her artistic practice is intuitive — layering color, erasing lines, and allowing each piece to find its own voice. She believes art should not just be seen, but felt.</p>
            </div>
            
            <div class="bio-card-dark animate">
                <span class="bio-label">THE EDUCATOR</span>
                <h3>Teaching Bio</h3>
                <p>Beyond her own studio practice, Sue is an experienced art educator. She has spent years guiding both young learners and adults through the process of discovering their own creative language.</p>
                <p>Her teaching philosophy is simple: technique matters, but curiosity matters more. Whether working with beginners or advanced students, she creates a space where mistakes become directions and every mark has purpose.</p>
            </div>
        </div>
        
        <div class="bio-photo animate">
            <div class="photo-frame">
                <div class="photo-placeholder">
                    <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="50" cy="35" r="20" stroke="#795663" stroke-width="2" fill="none"/>
                        <path d="M20 80 Q50 55 80 80" stroke="#795663" stroke-width="2" fill="none"/>
                        <rect x="30" y="60" width="40" height="25" rx="5" stroke="#8A9F88" stroke-width="2" fill="none"/>
                        <path d="M45 68 L55 68" stroke="#D7BCAF" stroke-width="2"/>
                        <path d="M48 72 L52 72" stroke="#D7BCAF" stroke-width="2"/>
                    </svg>
                    <p>Photo of Sue Kambua</p>
                    <p style="font-size: 0.7rem; margin-top: 8px;">(Replace with actual image)</p>
                </div>
                <!-- REPLACE WITH ACTUAL IMAGE:
                <img src="path/to/sue-photo.jpg" alt="Sue Kambua">
                -->
            </div>
            <div class="photo-caption">Sue Kambua in her studio, Nairobi</div>
        </div>
    </div>

    <div class="divider"></div>

    <!-- SCHOOLS SECTION -->
    <div class="schools-section">
        <h2>Schools & Institutions</h2>
        <p style="color: #8A9F88; margin-bottom: 16px;">Working with leading institutions across Kenya</p>
        <div class="schools-grid">
            <span class="school-tag">Braeburn Schools</span>
            <span class="school-tag">Brookhouse Schools</span>
            <span class="school-tag">The Redhill School</span>
            <span class="school-tag">Kenton College Preparatory</span>
            <span class="school-tag">Nairobi Academy</span>
            <span class="school-tag">Community Art Programs</span>
            <span class="school-tag">Private Workshops</span>
        </div>
    </div>

    <div class="divider"></div>

    <!-- CLASSES SECTION -->
    <div class="classes-section" id="classes">
        <h2>Classes Offered</h2>
        <div class="classes-grid">
            <div class="class-card">
                <div class="class-icon">🌸</div>
                <h3>Foundations of Drawing & Painting</h3>
                <p>Ages 12–adult. Build core skills in sketching, shading, color theory, and composition.</p>
            </div>
            <div class="class-card">
                <div class="class-icon">🌸</div>
                <h3>Creative Expression for Young Artists</h3>
                <p>Ages 7–11. Playful, exploratory sessions that nurture confidence and creativity.</p>
            </div>
            <div class="class-card">
                <div class="class-icon">🌸</div>
                <h3>Portfolio Building & Advanced Techniques</h3>
                <p>For students applying to art programs. Intensive, project-based mentorship.</p>
            </div>
            <div class="class-card">
                <div class="class-icon">🌸</div>
                <h3>Private 1:1 Mentorship</h3>
                <p>Tailored to your goals. Flexible scheduling, in-person or virtual.</p>
            </div>
            <div class="class-card">
                <div class="class-icon">🌸</div>
                <h3>Seasonal Workshops</h3>
                <p>Watercolor, mixed media, still life, and more — announced throughout the year.</p>
            </div>
        </div>
        <p style="margin-top: 28px; font-style: italic; color: #795663; text-align: center;">Small group classes · Virtual sessions available worldwide </p>
    </div>

    <div class="divider"></div>

    <!-- PORTFOLIO CTA -->
    <div class="portfolio-cta animate">
        <div class="portfolio-cta-content">
            <h3>See her work in motion</h3>
            <p>Videos, process reels, and finished pieces — explore the full portfolio</p>
            <a href="/portfolio" class="btn-outline-light">Visit Portfolio →</a>
        </div>
    </div>

    <!-- TESTIMONIALS SECTION - Near the end -->
    <div class="testimonials-section">
        <h2>What People Say</h2>
        <div class="testimonial-strip">
            <div class="testimonial-item">
                <span>🗫</span>
                <p>"Sue completely transformed how my daughter sees her own creativity."</p>
                <small>— Parent, Brookhouse School</small>
            </div>
            <div class="testimonial-item">
                <span>🗫</span>
                <p>"Her workshops are the highlight of our art department's calendar."</p>
                <small>— Art Teacher, Braeburn Schools</small>
            </div>
            <div class="testimonial-item">
              <span>🗫</span>
                <p>"Patient, inspiring, and deeply knowledgeable. A rare gift."</p>
                <small>— Private Student, 3 years</small>
            </div>
        </div>
    </div>

    <!-- NEWSLETTER SECTION -->
    <div class="newsletter">
        <p><strong>Join the studio notes</strong> — occasional updates on classes, new work, and workshops.</p>
        <?php if ($newsletter_sent): ?>
            <div class="alert alert-success">✓ Thanks for subscribing!</div>
        <?php endif; ?>
        <form method="POST" action="" class="newsletter-form">
            <input type="email" name="newsletter_email" placeholder="Your email address" required>
            <button type="submit" name="newsletter_submit">Subscribe</button>
        </form>
    </div>

    <div class="divider"></div>

    <!-- CONTACT SECTION - Last section before footer - NOW WITH API INTEGRATION -->
    <div class="contact-section" id="contact">
        <h2>Contact</h2>
        <div class="contact-wrapper">
            <div class="contact-info">
                <p style="font-size: 1.1rem;">Interested in classes, commissions, or collaborations?</p>
                <p style="color: #8A9F88;">Sue responds within 2–3 days.</p>
                
                <div class="contact-detail">
                    <strong>Email</strong> info@suekambua.co.ke
                </div>
                <div class="contact-detail">
                    <strong>Phone / WhatsApp</strong> +254 792713282
                </div>
                <div class="contact-detail">
                    <strong>Instagram</strong> @kambuasue
                </div>
                <p style="margin-top: 28px; font-size: 0.9rem;">
                     Nairobi, Kenya<br>
                     Virtual sessions available worldwide
                </p>
            </div>
            
            <div>
                <div id="contactAlert" style="display: none;" class="alert"></div>
                
                <form id="contactForm">
                    <div class="form-group">
                        <label for="name">Name *</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email *</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message *</label>
                        <textarea id="message" name="message" rows="4" required></textarea>
                    </div>
                    <button type="submit" id="submitBtn">Send Message</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="site-footer">
        <p>© <?php echo date("Y"); ?> Sue Kambua — Artist & Art Educator</p>
        <div class="color-dots">
            <span class="dot dot-1"></span>
            <span class="dot dot-2"></span>
            <span class="dot dot-3"></span>
            <span class="dot dot-4"></span>
            <span class="dot dot-5"></span>
        </div>
    </footer>
</div>

<script>
    // Back to Top Button Logic
    const backToTopButton = document.getElementById('backToTop');
    
    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            backToTopButton.classList.add('show');
        } else {
            backToTopButton.classList.remove('show');
        }
    });
    
    backToTopButton.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
    
    // Scroll Animation - elements fade in when they come into view
    const animateElements = document.querySelectorAll('.animate');
    
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    // Set initial styles for animation
    animateElements.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });
    
    // Also animate testimonials and class cards on scroll
    const cardsToAnimate = document.querySelectorAll('.testimonial-item, .class-card, .school-tag');
    cardsToAnimate.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        observer.observe(el);
    });
    
    // ============================================
    // CONTACT FORM API INTEGRATION
    // ============================================
    const contactForm = document.getElementById('contactForm');
    const submitBtn = document.getElementById('submitBtn');
    const contactAlert = document.getElementById('contactAlert');
    
    async function submitToAPI(formData) {
        const response = await fetch('admin/api/messages.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        
        return await response.json();
    }
    
    function showAlert(message, type) {
        contactAlert.textContent = message;
        contactAlert.className = `alert alert-${type}`;
        contactAlert.style.display = 'block';
        
        // Auto-hide after 5 seconds
        setTimeout(() => {
            contactAlert.style.display = 'none';
        }, 5000);
    }
    
    contactForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        // Get form values
        const name = document.getElementById('name').value.trim();
        const email = document.getElementById('email').value.trim();
        const message = document.getElementById('message').value.trim();
        
        // Validation
        if (!name || !email || !message) {
            showAlert('Please fill in all fields', 'error');
            return;
        }
        
        if (!/^\S+@\S+\.\S+$/.test(email)) {
            showAlert('Please enter a valid email address', 'error');
            return;
        }
        
        // Disable button and show loading state
        const originalButtonText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<span class="loading-spinner"></span> Sending...';
        submitBtn.disabled = true;
        
        try {
            const result = await submitToAPI({ name, email, message });
            
            if (result.success) {
                showAlert('✓ Thank you! Your message has been sent. Sue will get back to you soon.', 'success');
                contactForm.reset();
            } else {
                showAlert(result.error || '⚠ Sorry, there was an error. Please try again.', 'error');
            }
        } catch (error) {
            console.error('API Error:', error);
            showAlert('⚠ Connection error. Please try again or email directly: hello@suekambua.co.ke', 'error');
        } finally {
            // Re-enable button
            submitBtn.innerHTML = originalButtonText;
            submitBtn.disabled = false;
        }
    });
</script>

</body>
</html>