<?php
// Estimates and pricing page
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spells &amp; Pricing - Fraxle.net</title>
    <meta name="description" content="Transparent pricing for web design, web apps, graphics, video, 3D, audio, tech support and ongoing maintenance from Fraxle.net - friendly digital services 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">
    <link rel="stylesheet" href="css/estimates.css">
</head>
<body>

<!-- ===================== NAV ===================== -->
<header class="site-header" id="site-header">
    <nav class="nav-container">
        <a href="index.php" 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="index.php#services">Services</a></li>
            <li><a href="index.php#about">About</a></li>
            <li><a href="index.php#projects">Projects</a></li>
            <li><a href="estimates.php" class="nav-active">Estimates</a></li>
            <li><a href="index.php#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 class="pricing-hero">
    <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="pricing-hero-content">
        <p class="hero-eyebrow">✦ Transparent Pricing ✦</p>
        <h1 class="pricing-hero-title">Spells &amp; <span>Pricing</span></h1>
        <p class="pricing-hero-lead">Clear, honest estimates for websites, tech support and ongoing care. No hidden fees - just magic at a fair price.</p>
    </div>
    <div class="pricing-hero-wave">
        <svg viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0,40 C300,80 900,0 1440,50 L1440,80 L0,80 Z" fill="#251D70"/>
        </svg>
    </div>
</section>

<!-- ===================== WEBSITE PACKAGES ===================== -->
<section class="section-pad section-bg-deep">
    <div class="container">
        <div class="section-header">
            <p class="section-eyebrow">Website Design</p>
            <h2 class="section-title">Choose Your Spell</h2>
            <p class="section-lead">From a simple first presence to a full ecommerce empire - there is a package for every ambition.</p>
        </div>

        <div class="pricing-grid">
            <!-- The First Spark -->
            <div class="pricing-card reveal">
                <div class="pricing-emoji">🌱</div>
                <div class="pricing-name">The First Spark</div>
                <div class="pricing-price">From £250</div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Includes</p>
                <ul class="pricing-includes">
                    <li>Up to 5 pages</li>
                    <li>Mobile-friendly design</li>
                    <li>Contact form</li>
                    <li>Basic SEO setup</li>
                    <li>WordPress or Squarespace</li>
                </ul>
                <p class="pricing-tagline">Perfect for businesses taking their first steps into the digital realm.</p>
                <a href="index.php?package=first-spark#contact" class="btn btn-accent pricing-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>

            <!-- The Enchanted Workshop -->
            <div class="pricing-card reveal">
                <div class="pricing-emoji">✨</div>
                <div class="pricing-name">The Enchanted Workshop</div>
                <div class="pricing-price">£750 <span>- £1,500</span></div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Includes</p>
                <ul class="pricing-includes">
                    <li>Custom design</li>
                    <li>Blog or news section</li>
                    <li>Photo galleries</li>
                    <li>Social media integration</li>
                    <li>Analytics setup</li>
                    <li>Search engine optimisation</li>
                </ul>
                <p class="pricing-tagline">For businesses ready to spread their wings and get properly noticed online.</p>
                <a href="index.php?package=enchanted-workshop#contact" class="btn btn-accent pricing-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>

            <!-- The Arcane Forge - Most Popular -->
            <div class="pricing-card pricing-card--popular reveal">
                <div class="pricing-emoji">🔮</div>
                <div class="pricing-name">The Arcane Forge</div>
                <div class="pricing-price">£1,500 <span>- £3,000</span></div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Includes</p>
                <ul class="pricing-includes">
                    <li>Advanced page layouts</li>
                    <li>Custom functionality</li>
                    <li>Enhanced forms</li>
                    <li>Third-party integrations</li>
                    <li>Performance optimisation</li>
                    <li>Training and support</li>
                </ul>
                <p class="pricing-tagline">When a standard website simply won't contain your ambitions.</p>
                <a href="index.php?package=arcane-forge#contact" class="btn btn-accent pricing-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>
        </div>

        <div class="pricing-grid pricing-grid--2col">
            <!-- The Merchant's Portal -->
            <div class="pricing-card reveal">
                <div class="pricing-emoji">🛒</div>
                <div class="pricing-name">The Merchant's Portal</div>
                <div class="pricing-price">£3,000 <span>- £5,000</span></div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Includes</p>
                <ul class="pricing-includes">
                    <li>Shopify or WooCommerce</li>
                    <li>Product catalogue setup</li>
                    <li>Payment gateways</li>
                    <li>Shipping configuration</li>
                    <li>Customer account features</li>
                    <li>Store management training</li>
                </ul>
                <p class="pricing-tagline">Everything you need to throw open the doors of your digital marketplace.</p>
                <a href="index.php?package=merchants-portal#contact" class="btn btn-accent pricing-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>

            <!-- The Grand Emporium -->
            <div class="pricing-card reveal">
                <div class="pricing-emoji">⚡</div>
                <div class="pricing-name">The Grand Emporium</div>
                <div class="pricing-price">£5,000 <span>- £7,500+</span></div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Includes</p>
                <ul class="pricing-includes">
                    <li>Multi-category stores</li>
                    <li>Subscription products</li>
                    <li>Advanced customer accounts</li>
                    <li>Automation and workflows</li>
                    <li>Marketing integrations</li>
                    <li>Bespoke functionality</li>
                    <li>Launch support</li>
                </ul>
                <p class="pricing-tagline">For businesses seeking a digital flagship rather than a simple online shop.</p>
                <a href="index.php?package=grand-emporium#contact" class="btn btn-accent pricing-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>
        </div>
    </div>
</section>

<!-- ===================== BESPOKE WEB APPS ===================== -->
<section class="section-pad section-bg-mid">
    <div class="container">
        <div class="section-header">
            <p class="section-eyebrow">Custom Builds</p>
            <h2 class="section-title">The Spellforge</h2>
            <p class="section-lead">When a website alone won't cut it - bespoke web apps and tools, conjured to fit exactly how you work.</p>
        </div>
        <div class="pricing-grid pricing-grid--2col">
            <div class="pricing-card reveal">
                <div class="pricing-emoji">⚙️</div>
                <div class="pricing-name">The Cantrip</div>
                <div class="pricing-price">£750 <span>- £2,000</span></div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Includes</p>
                <ul class="pricing-includes">
                    <li>Single-purpose tool or mini-app</li>
                    <li>Forms and data capture</li>
                    <li>Database-backed</li>
                    <li>Simple admin view</li>
                    <li>Hosting and setup</li>
                </ul>
                <p class="pricing-tagline">A small but mighty tool, built to fit your workflow.</p>
                <a href="index.php?package=the-cantrip#contact" class="btn btn-accent pricing-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>
            <div class="pricing-card reveal">
                <div class="pricing-emoji">🏗️</div>
                <div class="pricing-name">The Grand Working</div>
                <div class="pricing-price">£3,000 <span>- £10,000+</span></div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Includes</p>
                <ul class="pricing-includes">
                    <li>Bespoke functionality</li>
                    <li>User accounts and roles</li>
                    <li>Custom database design</li>
                    <li>Integrations and APIs</li>
                    <li>Testing and launch</li>
                    <li>Ongoing support</li>
                </ul>
                <p class="pricing-tagline">When off-the-shelf simply won't do - a system built around you.</p>
                <a href="index.php?package=grand-working#contact" class="btn btn-accent pricing-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>
        </div>
    </div>
</section>

<!-- ===================== MYSTIC DIGITAL ARTS ===================== -->
<section class="section-pad section-bg-deep">
    <div class="container">
        <div class="section-header">
            <p class="section-eyebrow">Creative Services</p>
            <h2 class="section-title">The Mystic Digital Arts</h2>
            <p class="section-lead">Beyond the web - graphics, video, 3D and audio, crafted to make your brand unforgettable.</p>
        </div>
        <div class="pricing-grid pricing-grid--2col">
            <div class="pricing-card reveal">
                <div class="pricing-emoji">🎨</div>
                <div class="pricing-name">The Sigil Workshop</div>
                <div class="pricing-price">From £150</div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Includes</p>
                <ul class="pricing-includes">
                    <li>Logo design</li>
                    <li>Brand colour and font palette</li>
                    <li>Social media templates</li>
                    <li>Print-ready business cards</li>
                    <li>Source and web-ready files</li>
                </ul>
                <p class="pricing-tagline">A brand identity that turns heads and casts a lasting impression.</p>
                <a href="index.php?package=sigil-workshop#contact" class="btn btn-accent pricing-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>
            <div class="pricing-card reveal">
                <div class="pricing-emoji">🎬</div>
                <div class="pricing-name">The Moving Picture</div>
                <div class="pricing-price">From £350</div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Includes</p>
                <ul class="pricing-includes">
                    <li>On-location filming</li>
                    <li>Editing and colour grading</li>
                    <li>Titles and captions</li>
                    <li>Licensed music and sound</li>
                    <li>Social media cut-downs</li>
                </ul>
                <p class="pricing-tagline">Bring your story to life - lights, camera, enchantment.</p>
                <a href="index.php?package=moving-picture#contact" class="btn btn-accent pricing-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>
            <div class="pricing-card reveal">
                <div class="pricing-emoji">🧊</div>
                <div class="pricing-name">The Third Dimension</div>
                <div class="pricing-price">From £300</div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Includes</p>
                <ul class="pricing-includes">
                    <li>3D modelling</li>
                    <li>Product visualisation</li>
                    <li>Logo and title animation</li>
                    <li>Render-ready assets</li>
                    <li>Short animated clips</li>
                </ul>
                <p class="pricing-tagline">Objects and ideas, conjured into three dimensions.</p>
                <a href="index.php?package=third-dimension#contact" class="btn btn-accent pricing-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>
            <div class="pricing-card reveal">
                <div class="pricing-emoji">🎙️</div>
                <div class="pricing-name">Sonic Alchemy</div>
                <div class="pricing-price">From £200</div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Includes</p>
                <ul class="pricing-includes">
                    <li>Audio editing and cleanup</li>
                    <li>Podcast production</li>
                    <li>Voiceover mixing</li>
                    <li>Music and jingles</li>
                    <li>Mastering for release</li>
                </ul>
                <p class="pricing-tagline">Sound that casts a spell on the ear.</p>
                <a href="index.php?package=sonic-alchemy#contact" class="btn btn-accent pricing-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>
        </div>
    </div>
</section>

<!-- ===================== WIZARD'S BENCH ===================== -->
<section class="section-pad section-bg-mid">
    <div class="container">
        <div class="section-header">
            <p class="section-eyebrow">Ad-hoc Support</p>
            <h2 class="section-title">The Wizard's Bench</h2>
            <p class="section-lead">For those unexpected gremlins that find their way into websites, email systems and office technology.</p>
        </div>
        <div class="bench-card reveal">
            <div class="bench-left">
                <div class="bench-emoji">🛠️</div>
                <div class="bench-name">The Wizard's Bench</div>
                <div class="bench-rate">£40 <span>/ hour</span></div>
                <p class="bench-desc">Technical support billed by the hour. Minimum one hour applies. Remote support available - no call-out charge for remote sessions.</p>
                <a href="index.php?package=wizards-bench#contact" class="btn btn-accent bench-enquire">
                    <i class="fas fa-envelope"></i> Book some support
                </a>
            </div>
            <div class="bench-right">
                <p class="pricing-includes-label">Services include</p>
                <ul class="pricing-includes">
                    <li>WordPress troubleshooting</li>
                    <li>Shopify assistance</li>
                    <li>Email issues</li>
                    <li>Domain and DNS management</li>
                    <li>Website repairs</li>
                    <li>General digital support</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- ===================== PROTECTION CHARMS ===================== -->
<section class="section-pad section-bg-deep">
    <div class="container">
        <div class="section-header">
            <p class="section-eyebrow">Ongoing Care</p>
            <h2 class="section-title">Protection Charms</h2>
            <p class="section-lead">Monthly plans to keep your website healthy, secure and performing at its best.</p>
        </div>
        <div class="ward-grid">
            <!-- Minor Ward -->
            <div class="ward-card reveal">
                <p class="ward-tier">Tier 1</p>
                <p class="ward-name">Minor Ward</p>
                <div class="ward-price">£10 <span>/ month</span></div>
                <hr class="pricing-divider">
                <ul class="pricing-includes">
                    <li>WordPress updates</li>
                    <li>Security monitoring</li>
                    <li>Monthly backups</li>
                </ul>
                <a href="index.php?package=minor-ward#contact" class="btn btn-accent ward-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>

            <!-- Greater Ward -->
            <div class="ward-card ward-card--mid reveal">
                <p class="ward-tier">Tier 2</p>
                <p class="ward-name">Greater Ward</p>
                <div class="ward-price">£25 <span>/ month</span></div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Everything in Minor Ward, plus</p>
                <ul class="pricing-includes">
                    <li>Monthly health checks</li>
                    <li>Priority email support</li>
                    <li>Performance monitoring</li>
                </ul>
                <a href="index.php?package=greater-ward#contact" class="btn btn-accent ward-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>

            <!-- Merchant's Ward -->
            <div class="ward-card ward-card--top reveal">
                <p class="ward-tier">Tier 3</p>
                <p class="ward-name">Merchant's Ward</p>
                <div class="ward-price">£50 <span>/ month</span></div>
                <hr class="pricing-divider">
                <p class="pricing-includes-label">Everything in Greater Ward, plus</p>
                <ul class="pricing-includes">
                    <li>Ecommerce monitoring</li>
                    <li>Store maintenance</li>
                    <li>Priority response times</li>
                    <li>Monthly support allowance</li>
                </ul>
                <a href="index.php?package=merchants-ward#contact" class="btn btn-accent ward-enquire">
                    <i class="fas fa-envelope"></i> Enquire about this
                </a>
            </div>
        </div>
    </div>
</section>

<!-- ===================== CTA ===================== -->
<section class="pricing-cta">
    <div class="pricing-cta-inner">
        <p class="section-eyebrow">Ready to Begin?</p>
        <h2 class="section-title">Not sure which spell you need?</h2>
        <p class="section-lead">Drop me a message and we can figure out the right package together - no pressure, no jargon.</p>
        <a href="index.php#contact" class="btn btn-accent">
            <i class="fas fa-envelope"></i> Get in Touch
        </a>
    </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>
<script src="js/estimates.js"></script>
</body>
</html>