@{
    ViewData["Title"] = "Home Page";
}

<nav class="fixed w-full z-50 bg-white/95 backdrop-blur-md border-b border-slate-100 transition-all duration-300" id="navbar">
    <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
        <a href="/Home" class="text-2xl font-bold text-slate-900 tracking-tight hover:opacity-80 transition">CLIVE <span class="text-blue-600">LANCASTER</span></a>

        <div class="hidden md:flex space-x-8 items-center">
            <a href="/Home#about" class="text-slate-600 hover:text-blue-600 font-medium transition">About</a>
            <a href="/Home#services" class="text-slate-600 hover:text-blue-600 font-medium transition">Services</a>
            <a href="/Home#experience" class="text-slate-600 hover:text-blue-600 font-medium transition">Experience</a>
            <a href="https://blog.clivelancaster.com" class="text-slate-600 hover:text-blue-600 font-medium transition">Blog</a>
            <a href="/Contact" class="px-5 py-2.5 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition shadow-lg shadow-blue-600/20">Get Started</a>
        </div>

        <button id="mobile-menu-btn" class="md:hidden text-slate-600 text-2xl focus:outline-none p-2" aria-label="Toggle Menu">
            <i class="fas fa-bars"></i>
        </button>
    </div>

    <div id="mobile-menu" class="hidden md:hidden absolute top-20 left-0 w-full bg-white border-b border-slate-100 shadow-xl">
        <div class="flex flex-col px-6 py-4 space-y-4">
            <a href="/Home#about" class="mobile-link text-slate-600 hover:text-blue-600 font-medium text-lg block py-2 border-b border-slate-50">About</a>
            <a href="/Home#services" class="mobile-link text-slate-600 hover:text-blue-600 font-medium text-lg block py-2 border-b border-slate-50">Services</a>
            <a href="/Home#experience" class="mobile-link text-slate-600 hover:text-blue-600 font-medium text-lg block py-2 border-b border-slate-50">Experience</a>
            <a href="https://blog.clivelancaster.com" class="mobile-link text-slate-600 hover:text-blue-600 font-medium text-lg block py-2 border-b border-slate-50">Blog</a>
            <a href="/Contact" class="mobile-link block w-full text-center px-5 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition">Get Started</a>
        </div>
    </div>
</nav>

<header class="hero-bg pt-32 pb-20 lg:pt-48 lg:pb-32" id="home">
    <div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
        <div class="order-2 lg:order-1">
            <div class="inline-block px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-semibold mb-6">
                Digital Product Management & Ownership
            </div>
            <h1 class="text-5xl lg:text-6xl font-bold text-slate-900 leading-tight mb-6">
                Reduce Risk. <br>
                <span class="gradient-text">Increase Value.</span>
            </h1>
            <p class="text-lg lg:text-xl text-slate-600 mb-8 leading-relaxed max-w-lg">
                Bridging customer expectations, commercial objectives and technology capabilities to shape products that solve meaningful problems, create measurable value and deliver sustainable competitive advantage.
            </p>
            <div class="flex flex-col sm:flex-row gap-4">
                <a href="#contact" class="px-8 py-4 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition text-center shadow-xl">
                    Schedule a Consultation
                </a>
                <a href="#experience" class="px-8 py-4 bg-white text-slate-700 border border-slate-200 font-semibold rounded-lg hover:bg-slate-50 transition text-center">
                    View Portfolio
                </a>
            </div>
        </div>

        <div class="relative order-1 lg:order-2">
            <div class="bg-white p-8 rounded-2xl shadow-2xl border border-slate-100 relative z-10">
                <div class="flex items-center justify-between mb-8">
                    <div>
                        <h3 class="font-bold text-slate-900 text-lg">Product Success Metrics</h3>
                        <p class="text-sm text-slate-500">Quarterly Performance</p>
                    </div>
                    <div class="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                        <i class="fas fa-arrow-up"></i>
                    </div>
                </div>
                <div class="flex items-end space-x-4 h-48">
                    <div class="w-1/4 bg-blue-100 rounded-t-lg h-3/5 relative group">
                        <div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition">Idea</div>
                    </div>
                    <div class="w-1/4 bg-blue-200 rounded-t-lg h-4/5 relative group">
                        <div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition">Validate</div>
                    </div>
                    <div class="w-1/4 bg-blue-400 rounded-t-lg h-2/3 relative group">
                        <div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition">Build</div>
                    </div>
                    <div class="w-1/4 bg-blue-600 rounded-t-lg h-full relative group">
                        <div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition">Scale</div>
                    </div>
                </div>
                <div class="mt-6 border-t border-slate-100 pt-4 flex justify-between text-sm">
                    <span class="font-semibold text-slate-700">ROI Calculation</span>
                    <span class="text-green-600 font-bold">+125%</span>
                </div>
            </div>
            <div class="absolute -top-6 -right-6 w-24 h-24 bg-blue-400 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-pulse"></div>
            <div class="absolute -bottom-8 -left-8 w-32 h-32 bg-purple-400 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-pulse"></div>
        </div>
    </div>
</header>

<section class="bg-slate-900 py-12 text-white">
    <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-8 text-center divide-y md:divide-y-0 md:divide-x divide-slate-700">
        <div class="px-4 py-2">
            <p class="text-4xl font-bold text-blue-400 mb-1">12+</p>
            <p class="text-slate-400 text-sm uppercase tracking-wide font-medium">Years of Excellence</p>
            <p class="text-xs text-slate-500 mt-1">Digital Product Management</p>
        </div>
        <div class="px-4 py-2">
            <p class="text-4xl font-bold text-blue-400 mb-1">Global</p>
            <p class="text-slate-400 text-sm uppercase tracking-wide font-medium">International Reach</p>
            <p class="text-xs text-slate-500 mt-1">Europe & Asia Pacific</p>
        </div>
        <div class="px-4 py-2">
            <p class="text-4xl font-bold text-blue-400 mb-1">Diverse</p>
            <p class="text-slate-400 text-sm uppercase tracking-wide font-medium">Industry Expertise</p>
            <p class="text-xs text-slate-500 mt-1">Medical, Retail, Real Estate, HR</p>
        </div>
    </div>
</section>

<section id="about" class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-6">
        <div class="flex flex-col lg:flex-row gap-16 items-center">
            <div class="lg:w-1/2">
                <div class="relative">
                    <img src="~/img/meeting-01.jpg?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Product Planning" class="rounded-2xl shadow-xl relative z-10">
                    <div class="absolute -bottom-6 -right-6 w-full h-full border-2 border-blue-100 rounded-2xl z-0"></div>
                </div>
            </div>
            <div class="lg:w-1/2">
                <h2 class="text-sm font-bold text-blue-600 uppercase tracking-widest mb-2">About Clive</h2>
                <h3 class="text-3xl font-bold text-slate-900 mb-6">Connecting Customer, Business & Engineering</h3>
                <p class="text-slate-600 mb-8 leading-relaxed">
                    Accomplished and results-driven Digital Product Manager with a diverse background spanning health-tech, prop-tech, HR and e-commerce. Combining experience across <strong>Product Management, Product Ownership, Business Analysis and full-stack software development</strong> to translate customer needs and business objectives into valuable, technology-enabled products.
                </p>
                <p class="text-slate-600 mb-8 leading-relaxed">
                    Known for an analytical, customer-centric approach and the ability to balance <strong>strategic business priorities, customer experience and technical feasibility</strong>. Experienced in shaping product strategy, defining roadmaps, validating opportunities, prioritising investment and leading cross-functional delivery to achieve measurable outcomes.
                </p>
                <p class="text-slate-600 mb-8 leading-relaxed">
                    From delivering <strong>interoperable and compliant clinical decision support solutions</strong> to improving <strong>workflow automation and digital experiences</strong>, the focus remains on solving the right problems, reducing product risk and creating sustainable customer and commercial value.
                </p>

                <div class="grid grid-cols-2 gap-4">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span class="text-slate-700 font-medium">Product Strategy & Vision</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span class="text-slate-700 font-medium">Customer Discovery & User-Centric Design</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span class="text-slate-700 font-medium">Roadmapping & Prioritisation</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span class="text-slate-700 font-medium">Stakeholder & Cross-Functional Leadership</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span class="text-slate-700 font-medium">Data-Driven Decision Making</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span class="text-slate-700 font-medium">AI Product Management</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="services" class="py-24 bg-slate-50">
    <div class="max-w-7xl mx-auto px-6">
        <div class="text-center mb-16">
            <h2 class="text-3xl font-bold text-slate-900 mb-4">Core Competencies</h2>
            <p class="text-slate-600 max-w-2xl mx-auto">Comprehensive product management services designed to take your concept from ideation to sustainable market success.</p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div class="service-card bg-white p-8 rounded-xl shadow-sm border border-slate-100">
                <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600 text-xl mb-6">
                    <i class="fas fa-rocket"></i>
                </div>
                <h3 class="font-bold text-slate-900 text-lg mb-3">Unlock Growth</h3>
                <p class="text-slate-600 text-sm leading-relaxed">Align product strategies with overarching goals. Create a clear product vision that resonates in the marketplace.</p>
            </div>

            <div class="service-card bg-white p-8 rounded-xl shadow-sm border border-slate-100">
                <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600 text-xl mb-6">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3 class="font-bold text-slate-900 text-lg mb-3">Reduce Risk</h3>
                <p class="text-slate-600 text-sm leading-relaxed">Validate ideas before heavy investment. Use structured ideation to focus resources on high-potential initiatives.</p>
            </div>

            <div class="service-card bg-white p-8 rounded-xl shadow-sm border border-slate-100">
                <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600 text-xl mb-6">
                    <i class="fas fa-cogs"></i>
                </div>
                <h3 class="font-bold text-slate-900 text-lg mb-3">Streamline Lifecycle</h3>
                <p class="text-slate-600 text-sm leading-relaxed">Take control of the journey from inception to launch. Prioritize features that matter most to customers.</p>
            </div>

            <div class="service-card bg-white p-8 rounded-xl shadow-sm border border-slate-100">
                <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600 text-xl mb-6">
                    <i class="fas fa-chart-pie"></i>
                </div>
                <h3 class="font-bold text-slate-900 text-lg mb-3">Sustainable Success</h3>
                <p class="text-slate-600 text-sm leading-relaxed">Lay the groundwork for long-term growth and adaptability in a constantly evolving market.</p>
            </div>
        </div>
    </div>
</section>

<section id="experience" class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-6">
        <div class="mb-16">
            <h2 class="text-3xl font-bold text-slate-900 mb-4">Track Record of Success</h2>
            <div class="h-1 w-20 bg-blue-600"></div>
        </div>

        <div class="space-y-12">
            <div class="flex flex-col md:flex-row gap-8 items-start border-b border-slate-100 pb-12">
                <div class="md:w-1/3">
                    <span class="text-sm font-bold text-blue-600 uppercase">Healthcare / API</span>
                    <h3 class="text-2xl font-bold text-slate-900 mt-2">Telstra Health & MedicalDirector</h3>
                </div>
                <div class="md:w-2/3">
                    <p class="text-slate-600 mb-4">
                        <strong>Vision:</strong> Establish Telstra Health & MedicalDirector as a trusted, interoperable digital health platform by connecting clinicians, healthcare organisations and government services through secure, standards-based APIs and digital workflows.
                    </p>
                    <p class="text-slate-600">
                        <strong>Key Result:</strong> Expanded Telstra Health & MedicalDirector's market position and created a new API-based revenue opportunity by taking the Medicines DaaS platform from <strong>concept through to commercial contract execution.</strong>
                    </p>
                </div>
            </div>

            <div class="flex flex-col md:flex-row gap-8 items-start border-b border-slate-100 pb-12">
                <div class="md:w-1/3">
                    <span class="text-sm font-bold text-blue-600 uppercase">SaaS / Enterprise</span>
                    <h3 class="text-2xl font-bold text-slate-900 mt-2">Cotality & XCM</h3>
                </div>
                <div class="md:w-2/3">
                    <p class="text-slate-600 mb-4">
                        <strong>Vision:</strong> Transform complex property, customer and marketing data into actionable intelligence that enables organisations to make informed decisions, identify opportunities and create measurable customer and commercial value.
                    </p>
                    <p class="text-slate-600">
                        <strong>Key Result:</strong> Bridged business, customer and technology needs to shape data-driven products and analytics solutions that convert complex datasets into <strong>clear, actionable insights and measurable business value.</strong>
                    </p>
                </div>
            </div>

            <div class="flex flex-col md:flex-row gap-8 items-start">
                <div class="md:w-1/3">
                    <span class="text-sm font-bold text-blue-600 uppercase">E-Commerce / Retail</span>
                    <h3 class="text-2xl font-bold text-slate-900 mt-2">Best Western</h3>
                </div>
                <div class="md:w-2/3">
                    <p class="text-slate-600 mb-4">
                        <strong>Vision:</strong> Create data-driven digital marketing experiences that improve customer engagement, strengthen brand value and deliver measurable commercial growth.
                    </p>
                    <p class="text-slate-600">
                        <strong>Key Result:</strong> Supported revenue growth and enhanced brand recognition for over <strong>290+ privately owned Best Western hotels.</strong>
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="py-24 bg-blue-600 relative overflow-hidden">
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
    <div class="max-w-4xl mx-auto px-6 text-center relative z-10">
        <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to harness the full potential of your product?</h2>
        <p class="text-blue-100 text-lg mb-10">Partner with me to drive your business towards sustained success and digital transformation.</p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
            <a href="/Contact" class="px-8 py-4 bg-white text-blue-600 font-bold rounded-lg hover:bg-slate-100 transition shadow-lg flex items-center justify-center">
                <i class="fas fa-envelope mr-2"></i> Contact Me
            </a>
            <a href="https://www.linkedin.com/in/clivelancaster/" target="_blank" class="px-8 py-4 bg-transparent border-2 border-white text-white font-bold rounded-lg hover:bg-white/10 transition flex items-center justify-center">
                <i class="fab fa-linkedin mr-2"></i> LinkedIn
            </a>
        </div>
    </div>
</section>