<?php
session_start();
$a = rand(2, 12);
$b = rand(2, 12);
$_SESSION['captcha_answer'] = $a + $b;
$captcha_q = "$a + $b";
$form_sent  = isset($_GET['sent'])  && $_GET['sent']  === '1';
$form_error = isset($_GET['error']) && $_GET['error'] === '1';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fraxle.net - Web & Tech for Small Businesses</title>
    <meta name="description" content="Friendly website design, online apps, tech and network support, plus graphics, video, 3D and audio for small businesses in Oxfordshire and beyond.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <noscript><link rel="stylesheet" href="css/noscript.css"></noscript>
</head>
<body>

<!-- ===================== NAV ===================== -->
<header class="site-header" id="site-header">
    <nav class="nav-container">
        <a href="#hero" class="nav-logo">
            <span class="logo-icon">🧙</span>
            <span class="logo-text">Fraxle<span class="logo-dot">.net</span></span>
        </a>
        <ul class="nav-links" id="nav-links">
            <li><a href="#services">Services</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="estimates.php">Estimates</a></li>
            <li><a href="#contact" class="btn nav-cta">Get in Touch</a></li>
        </ul>
        <button class="nav-hamburger" id="nav-hamburger" aria-label="Toggle menu" aria-expanded="false">
            <span></span><span></span><span></span>
        </button>
    </nav>
</header>

<!-- ===================== HERO ===================== -->
<section id="hero" class="hero">
    <div class="hero-stars" id="hero-stars"></div>
    <div class="hero-orbs">
        <div class="orb orb-1"></div>
        <div class="orb orb-2"></div>
        <div class="orb orb-3"></div>
    </div>
    <div class="hero-content">
        <div class="hero-text">
            <p class="hero-eyebrow">✦ Magical Digital Services ✦</p>
            <h1 class="hero-title">
                Web &amp; Tech<br>
                <span class="hero-title-accent">for Small Business</span>
            </h1>
            <div class="hero-mascots-mobile">
                <img src="img/wizcat4.webp" alt="Danny the tech-wizard and Astro the cosmic cat" class="mascot-img mascot-teleport">
                <p class="hero-caption">Danny the tech-wizard &amp; Astro the cosmic cat</p>
            </div>
            <p class="hero-subtitle">Friendly website design, online apps, tech support and creative wizardry - with a touch of enchantment. Based in Oxfordshire.</p>
            <div class="hero-actions">
                <a href="mailto:wizard@fraxle.net" class="btn btn-primary">
                    <i class="fas fa-envelope"></i> wizard@fraxle.net
                </a>
                <a href="#services" class="btn btn-ghost">
                    Explore the magic <i class="fas fa-arrow-down"></i>
                </a>
            </div>
        </div>
        <div class="hero-mascots">
            <div class="mascot-ring">
                <img src="img/wizcat4.webp" alt="Danny the tech-wizard and Astro the cosmic cat" class="mascot-img mascot-teleport">
            </div>
            <p class="hero-caption">Danny the tech-wizard &amp; Astro the cosmic cat</p>
        </div>
    </div>
    <div class="hero-wave">
        <svg viewBox="0 0 1440 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0,50 C300,100 900,0 1440,60 L1440,100 L0,100 Z" fill="#251D70"/>
        </svg>
    </div>
</section>

<!-- ===================== SERVICES ===================== -->
<section id="services" class="services section-pad">
    <div class="container">
        <div class="section-header">
            <p class="section-eyebrow">What I do</p>
            <h2 class="section-title">Spells I Cast</h2>
            <p class="section-lead">From conjuring websites to taming rogue gadgets - here's how I can help your business.</p>
        </div>
        <div class="services-grid">
            <div class="service-card reveal">
                <div class="service-icon service-icon--orange">
                    <i class="fas fa-wand-magic-sparkles"></i>
                </div>
                <h3>Web Design with a Touch of Alchemy</h3>
                <p>I conjure websites that don't just look pretty - they load fast, climb the search rankings and turn curious visitors into customers. From a simple landing page to a full online store - WordPress, Shopify or Squarespace - every site is built to be quick, secure and unmistakably yours. Need something truly bespoke? I build custom online apps too.</p>
            </div>
            <div class="service-card reveal">
                <div class="service-icon service-icon--purple">
                    <i class="fas fa-mobile-screen-button"></i>
                </div>
                <h3>Tech Support &amp; Digital Sorcery</h3>
                <p>Gadgets gone rogue? Whether it's setting up a new smartphone, syncing a stubborn tablet, sorting out office computers and networks, connecting smart-home gadgets or reviving a misbehaving laptop, I'll get your tech behaving - and show you how to keep it that way.</p>
            </div>
            <div class="service-card reveal">
                <div class="service-icon service-icon--gold">
                    <i class="fas fa-palette"></i>
                </div>
                <h3>Master of the Mystic Digital Arts</h3>
                <p>Beyond the web, I craft the creative magic too - logos and graphics, video filming and editing, 3D modelling and animation, and audio production. Whatever your project conjures up, I can help bring it to life.</p>
            </div>
        </div>
        <div class="service-wide reveal">
            <div class="service-wide-icon">
                <i class="fas fa-seedling"></i>
            </div>
            <div class="service-wide-text">
                <h3>Magic for Ethical, Independent Business</h3>
                <p>I work especially with small businesses, not-for-profits, charities and farmers who want to grow sustainably in the digital age. Affordable, human-centred and as easy to use as a well-cast spell.</p>
            </div>
            <div class="service-wide-plants" aria-hidden="true">
                <i class="fas fa-seedling"></i>
                <i class="fas fa-leaf"></i>
                <i class="fas fa-seedling"></i>
                <i class="fas fa-spa"></i>
                <i class="fas fa-seedling"></i>
                <i class="fas fa-leaf"></i>
                <i class="fas fa-seedling"></i>
                <i class="fas fa-spa"></i>
                <i class="fas fa-seedling"></i>
                <i class="fas fa-leaf"></i>
            </div>
        </div>
    </div>
</section>

<!-- ===================== ABOUT ===================== -->
<section id="about" class="about section-pad">
    <div class="container">
        <div class="about-grid">
            <div class="about-image reveal">
                <div class="about-img-placeholder">
					<img src="img/wizfixer.webp" alt="Danny the tech-wizard" class="mascot-img">
                    <!-- <i class="fas fa-hat-wizard"></i> -->
                </div>
                <div class="about-badge">
                    <i class="fas fa-location-dot"></i> Oxfordshire, UK
                </div>
            </div>
            <div class="about-text reveal">
                <p class="section-eyebrow">About Fraxle.net</p>
                <h2 class="section-title">Conjuring Digital Magic for Small Businesses</h2>
                <p>Welcome to the realm where technology meets wizardry! Whether you're planting the seeds of a new venture or looking to level up your digital presence, I blend design, functionality, and futuristic tools to help your business flourish.</p>
                <p>Based primarily in <strong>Oxfordshire</strong>, I can bring these skills directly to your local organisation - and work remotely with anyone, anywhere.</p>
                <div class="about-bullets">
                    <div class="about-bullet">
                        <i class="fas fa-check-circle"></i>
                        <span>Friendly, jargon-free support</span>
                    </div>
                    <div class="about-bullet">
                        <i class="fas fa-check-circle"></i>
                        <span>Affordable packages for small budgets</span>
                    </div>
                    <div class="about-bullet">
                        <i class="fas fa-check-circle"></i>
                        <span>Ethical, independent &amp; community-focused</span>
                    </div>
                </div>
                <a href="#contact" class="btn btn-primary">Start a Conversation</a>
            </div>
        </div>
    </div>
</section>

<!-- ===================== PROJECTS ===================== -->
<section id="projects" class="projects section-pad">
    <div class="container">
        <div class="section-header">
            <p class="section-eyebrow">Portfolio</p>
            <h2 class="section-title">Recent Enchantments</h2>
            <p class="section-lead">A few recent projects from the spell book.</p>
        </div>
        <div class="projects-list">
            <!-- No link — James Norman has no website -->
            <article class="project-row project-row--no-link reveal">
                <div class="project-row-img">
                    <img src="img/james.jpg" alt="James Norman" loading="lazy">
                </div>
                <div class="project-row-info">
                    <div class="project-row-meta">
                        <span class="project-number">01</span>
                        <span class="project-type">Organic Farmer</span>
                    </div>
                    <h3>James Norman</h3>
                    <p class="project-work"><i class="fas fa-network-wired"></i> Office Network Update</p>
                </div>
            </article>
            <a href="https://organicgrowersgathering.org/" target="_blank" rel="noopener" class="project-row reveal">
                <div class="project-row-img">
                    <img src="img/ogg.jpg" alt="The Organic Growers Gathering" loading="lazy">
                </div>
                <div class="project-row-info">
                    <div class="project-row-meta">
                        <span class="project-number">02</span>
                        <span class="project-type">Organic Farming Event</span>
                    </div>
                    <h3>The Organic Growers Gathering</h3>
                    <p class="project-work"><i class="fas fa-video"></i> Video Recording &amp; Editing</p>
                </div>
                <div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
            </a>
            <a href="https://sunscope.net" target="_blank" rel="noopener" class="project-row reveal">
                <div class="project-row-img">
                    <img src="img/sunscope.jpg" alt="Sunscope.net" loading="lazy">
                </div>
                <div class="project-row-info">
                    <div class="project-row-meta">
                        <span class="project-number">03</span>
                        <span class="project-type">Weather Application</span>
                    </div>
                    <h3>Sunscope.net</h3>
                    <p class="project-work"><i class="fas fa-cloud-sun"></i> Advanced Weather App</p>
                </div>
                <div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
            </a>
            <a href="https://camplight.co.uk/" target="_blank" rel="noopener" class="project-row reveal">
                <div class="project-row-img">
                    <img src="img/camplight.jpg" alt="Camplight" loading="lazy">
                </div>
                <div class="project-row-info">
                    <div class="project-row-meta">
                        <span class="project-number">04</span>
                        <span class="project-type">Camping &amp; Outdoors</span>
                    </div>
                    <h3>Camplight</h3>
                    <p class="project-work"><i class="fas fa-globe"></i> Website Design &amp; Build</p>
                </div>
                <div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
            </a>
            <a href="https://www.hempen.co.uk/" target="_blank" rel="noopener" class="project-row reveal">
                <div class="project-row-img">
                    <img src="img/hempen.jpg" alt="Hempen Organic" loading="lazy">
                </div>
                <div class="project-row-info">
                    <div class="project-row-meta">
                        <span class="project-number">05</span>
                        <span class="project-type">Hemp &amp; CBD Products</span>
                    </div>
                    <h3>Hempen Organic</h3>
                    <p class="project-work"><i class="fas fa-cart-shopping"></i> eCommerce Website</p>
                </div>
                <div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
            </a>
        </div>
    </div>
</section>

<!-- ===================== PRICING TEASER ===================== -->
<section id="pricing-teaser" class="pricing-teaser section-pad">
    <div class="container">
        <div class="pricing-teaser-inner reveal">
            <div class="pricing-teaser-copy">
                <p class="section-eyebrow">Transparent Pricing</p>
                <h2 class="section-title">Spells &amp; Pricing</h2>
                <p class="section-lead">From a simple first website to a full ecommerce empire - plus ongoing care plans and ad-hoc tech support. See clear, honest estimates with no hidden fees, and enquire about any package in a click.</p>
                <a href="estimates.php" class="btn btn-primary pricing-teaser-btn">
                    <i class="fas fa-scroll"></i> View Estimates &amp; Packages
                </a>
            </div>
            <div class="pricing-teaser-astro" aria-hidden="true">
                <img src="img/astrofly2.webp" alt="">
            </div>
        </div>
    </div>
</section>

<!-- ===================== CONTACT ===================== -->
<section id="contact" class="contact section-pad">
    <div class="container">
        <div class="contact-wrapper">
            <div class="contact-intro reveal">
                <p class="section-eyebrow section-eyebrow--light">Say Hello</p>
                <h2 class="section-title section-title--light">Get in Touch</h2>
                <p>Have a project in mind? Need some tech support? Drop me a message and I'll get back to you - usually within one working day, as soon as the stars align.</p>
                <ul class="contact-details">
                    <li>
                        <i class="fas fa-envelope"></i>
                        <a href="mailto:wizard@fraxle.net">wizard@fraxle.net</a>
                    </li>
                    <li>
                        <i class="fas fa-location-dot"></i>
                        Oxfordshire, UK
                    </li>
                </ul>
            </div>
            <div class="contact-form-wrap reveal">
                <?php if ($form_sent): ?>
                <div class="form-success">
                    <div class="form-success-icon"><i class="fas fa-check"></i></div>
                    <h3>Incantation sent!</h3>
                    <p>Thanks for getting in touch. I'll reply as soon as I can.</p>
                </div>
                <?php else: ?>
                    <?php if ($form_error): ?>
                    <div class="form-error-msg">
                        <i class="fas fa-triangle-exclamation"></i>
                        <p>Something went wrong - please check your details (including the maths answer) and try again.</p>
                    </div>
                    <?php endif; ?>
                    <form class="contact-form" action="send.php" method="POST" novalidate>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="name">Your Name</label>
                                <input type="text" id="name" name="name" placeholder="e.g. Merlin" required autocomplete="name">
                            </div>
                            <div class="form-group">
                                <label for="email">Email Address</label>
                                <input type="email" id="email" name="email" placeholder="you@example.com" required autocomplete="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="message">Your Message</label>
                            <textarea id="message" name="message" rows="5" placeholder="Tell me about your project or what you need help with..." required></textarea>
                        </div>
                        <div class="form-captcha">
                            <label for="captcha">
                                Quick check — what is <strong><?= htmlspecialchars($captcha_q) ?></strong>?
                            </label>
                            <input type="number" id="captcha" name="captcha" placeholder="Answer" required min="1">
                        </div>
                        <button type="submit" class="btn btn-accent">
                            <i class="fas fa-paper-plane"></i> Send Incantation
                        </button>
                    </form>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<!-- ===================== FOOTER ===================== -->
<footer class="site-footer">
    <div class="container">
        <p class="footer-logo">Fraxle<span>.net</span></p>
        <p class="footer-tagline">Friendly web &amp; tech for small businesses</p>
        <p class="footer-links"><a href="terms.php">Terms &amp; Conditions</a></p>
        <p class="footer-copy">&copy; <?= date('Y') ?> Fraxle.net All rights reserved.</p>
    </div>
</footer>

<script src="js/main.js"></script>
</body>
</html>
