import React, { useState, useEffect } from 'react';

import {

Droplets,

Settings,

ClipboardCheck,

Wrench,

ShieldCheck,

Mail,

Phone,

MapPin,

Menu,

X,

ChevronRight,

CheckCircle2,

Waves

} from 'lucide-react';

const App = () => {

const [isMenuOpen, setIsMenuOpen] = useState(false);

const [scrolled, setScrolled] = useState(false);

const [activeTab, setActiveTab] = useState('all');

// Handle scroll effect for navbar

useEffect(() => {

const handleScroll = () => {

setScrolled(window.scrollY > 50);

};

window.addEventListener('scroll', handleScroll);

return () => window.removeEventListener('scroll', handleScroll);

}, []);

const services = [

{

id: 'consultancy',

title: 'Expert Consultancy',

icon: <ClipboardCheck className="w-8 h-8" />,

description: 'Professional guidance for new pool construction projects. We ensure your design is efficient, compliant, and built to last.',

category: 'consultancy',

features: ['Feasibility Studies', 'Design Review', 'Material Sourcing', 'Safety Compliance']

},

{

id: 'maintenance',

title: 'Routine Maintenance',

icon: <Droplets className="w-8 h-8" />,

description: 'Comprehensive cleaning and chemical balancing to keep your water crystal clear and your equipment running smoothly.',

category: 'maintenance',

features: ['Chemical Balancing', 'Filter Cleaning', 'Vacuuming', 'Equipment Inspection']

},

{

id: 'repair',

title: 'Professional Repairs',

icon: <Wrench className="w-8 h-8" />,

description: 'From leak detection to pump replacements, we fix structural and mechanical issues quickly and effectively.',

category: 'repair',

features: ['Leak Detection', 'Tile Repair', 'Pump Replacement', 'Pipe Fixes']

}

];

const stats = [

{ label: 'Years Experience', value: '15+' },

{ label: 'Pools Maintained', value: '500+' },

{ label: 'Consultancy Projects', value: '120+' },

{ label: 'Client Satisfaction', value: '99%' },

];

const scrollToSection = (id) => {

const element = document.getElementById(id);

if (element) {

element.scrollIntoView({ behavior: 'smooth' });

setIsMenuOpen(false);

}

};

return (

<div className="min-h-screen bg-slate-50 font-sans text-slate-900">

{/* Navigation */}

<nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white shadow-md py-3' : 'bg-transparent py-5'}`}>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div className="flex justify-between items-center">

<div className="flex items-center space-x-2 cursor-pointer" onClick={() => scrollToSection('home')}>

<div className="bg-blue-600 p-2 rounded-lg">

<Waves className="text-white w-6 h-6" />

</div>

<span className={`text-2xl font-bold tracking-tight ${scrolled ? 'text-blue-900' : 'text-blue-900 md:text-white'}`}>

HALSA P <span className="font-light text-blue-500">CONSULTANCY</span>

</span>

</div>

{/* Desktop Menu */}

<div className="hidden md:flex items-center space-x-8">

{['Services', 'About', 'Why Us', 'Contact'].map((item) => (

<button

key={item}

onClick={() => scrollToSection(item.toLowerCase().replace(' ', '-'))}

className={`font-medium transition-colors hover:text-blue-500 ${scrolled ? 'text-slate-600' : 'text-white'}`}

>

{item}

</button>

))}

<button

onClick={() => scrollToSection('contact')}

className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-semibold transition-all transform hover:scale-105"

>

Get a Quote

</button>

</div>

{/* Mobile Toggle */}

<div className="md:hidden">

<button onClick={() => setIsMenuOpen(!isMenuOpen)} className={scrolled ? 'text-slate-900' : 'text-blue-900'}>

{isMenuOpen ? <X size={28} /> : <Menu size={28} />}

</button>

</div>

</div>

</div>

{/* Mobile Menu */}

{isMenuOpen && (

<div className="md:hidden bg-white border-t border-slate-100 absolute w-full shadow-xl">

<div className="px-4 py-6 space-y-4">

{['Services', 'About', 'Why Us', 'Contact'].map((item) => (

<button

key={item}

onClick={() => scrollToSection(item.toLowerCase().replace(' ', '-'))}

className="block w-full text-left text-lg font-medium text-slate-700 hover:text-blue-600"

>

{item}

</button>

))}

<button

onClick={() => scrollToSection('contact')}

className="w-full bg-blue-600 text-white py-3 rounded-xl font-bold"

>

Get a Quote

</button>

</div>

</div>

)}

</nav>

{/* Hero Section */}

<section id="home" className="relative h-screen flex items-center overflow-hidden">

{/* Abstract Background Elements */}

<div className="absolute inset-0 z-0">

<div className="absolute inset-0 bg-gradient-to-r from-blue-900/90 to-blue-800/40 z-10" />

<img

src="https://images.unsplash.com/photo-1576013551627-0cc20b96c2a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"

className="w-full h-full object-cover"

alt="Luxury Swimming Pool"

/>

</div>

<div className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20">

<div className="max-w-3xl">

<div className="inline-flex items-center space-x-2 bg-blue-500/20 backdrop-blur-md border border-blue-400/30 px-4 py-2 rounded-full mb-6">

<ShieldCheck className="text-blue-300 w-5 h-5" />

<span className="text-blue-100 font-medium text-sm tracking-wide uppercase">Certified Pool Experts</span>

</div>

<h1 className="text-5xl md:text-7xl font-extrabold text-white mb-6 leading-tight">

Pristine Water. <br />

<span className="text-blue-400 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-teal-300">

Perfect Construction.

</span>

</h1>

<p className="text-xl text-blue-100 mb-10 max-w-2xl leading-relaxed">

Specialized consultancy and maintenance services for residential and commercial swimming pools. We bring clarity to your construction projects and longevity to your aquatic investments.

</p>

<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">

<button

onClick={() => scrollToSection('services')}

className="bg-white text-blue-900 px-8 py-4 rounded-xl font-bold text-lg hover:bg-blue-50 transition-all flex items-center justify-center shadow-lg"

>

Our Services <ChevronRight className="ml-2 w-5 h-5" />

</button>

<button

onClick={() => scrollToSection('contact')}

className="bg-blue-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-blue-700 border border-blue-500 transition-all flex items-center justify-center shadow-lg"

>

Schedule Consultation

</button>

</div>

</div>

</div>

</section>

{/* Stats Section */}

<div className="relative z-30 -mt-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 grid grid-cols-2 lg:grid-cols-4 gap-8">

{stats.map((stat, idx) => (

<div key={idx} className="text-center border-r last:border-0 border-slate-100">

<div className="text-3xl md:text-4xl font-black text-blue-600 mb-1">{stat.value}</div>

<div className="text-slate-500 font-medium uppercase text-xs tracking-wider">{stat.label}</div>

</div>

))}

</div>

</div>

{/* Services Section */}

<section id="services" className="py-24 bg-slate-50">

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div className="text-center mb-16">

<h2 className="text-blue-600 font-bold tracking-widest uppercase text-sm mb-3">Our Expertise</h2>

<h3 className="text-4xl md:text-5xl font-extrabold text-slate-900 mb-6">Comprehensive Pool Solutions</h3>

<p className="text-slate-600 max-w-2xl mx-auto text-lg">

From the first blueprint to the weekly cleaning, Halsa P Consultancy provides professional oversight and care.

</p>

</div>

<div className="grid md:grid-cols-3 gap-8">

{services.map((service) => (

<div

key={service.id}

className="bg-white rounded-3xl p-8 shadow-xl border border-slate-100 hover:shadow-2xl transition-all group hover:-translate-y-2"

>

<div className="bg-blue-50 text-blue-600 p-4 rounded-2xl w-fit mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">

{service.icon}

</div>

<h4 className="text-2xl font-bold text-slate-900 mb-4">{service.title}</h4>

<p className="text-slate-600 mb-6 leading-relaxed">

{service.description}

</p>

<ul className="space-y-3">

{service.features.map((feature, idx) => (

<li key={idx} className="flex items-center text-slate-700 font-medium">

<CheckCircle2 className="text-teal-500 w-5 h-5 mr-3 flex-shrink-0" />

{feature}

</li>

))}

</ul>

</div>

))}

</div>

</div>

</section>

{/* About Section */}

<section id="about" className="py-24 bg-white overflow-hidden">

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div className="flex flex-col lg:flex-row items-center gap-16">

<div className="lg:w-1/2 relative">

<div className="relative z-10 rounded-3xl overflow-hidden shadow-2xl">

<img

src="https://images.unsplash.com/photo-1560015534-cee980ba7e13?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"

alt="Pool Construction Inspection"

className="w-full h-full object-cover aspect-video lg:aspect-square"

/>

</div>

<div className="absolute -bottom-8 -right-8 w-48 h-48 bg-blue-600 rounded-3xl -z-0 hidden md:block" />

<div className="absolute -top-8 -left-8 w-48 h-48 border-4 border-teal-400 rounded-3xl -z-0 hidden md:block" />

</div>

<div className="lg:w-1/2">

<h2 className="text-blue-600 font-bold tracking-widest uppercase text-sm mb-3">About Us</h2>

<h3 className="text-4xl font-extrabold text-slate-900 mb-6">Expertise That Keeps You Afloat</h3>

<p className="text-slate-600 text-lg mb-6 leading-relaxed">

Halsa P Consultancy was founded on the principle that a swimming pool is more than just a luxury—it's a precision-engineered aquatic environment.

</p>

<p className="text-slate-600 text-lg mb-8 leading-relaxed">

Unlike general contractors, we specialize exclusively in the technical aspects of pool construction and long-term care. We don't just build; we consult to ensure your builder meets the highest standards, and we maintain to ensure your pool lasts a lifetime.

</p>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

<div className="flex items-start space-x-3 p-4 bg-slate-50 rounded-2xl">

<Settings className="text-blue-600 w-6 h-6 mt-1" />

<div>

<h5 className="font-bold text-slate-900">Technical Audits</h5>

<p className="text-sm text-slate-500">Full system diagnostics.</p>

</div>

</div>

<div className="flex items-start space-x-3 p-4 bg-slate-50 rounded-2xl">

<ShieldCheck className="text-blue-600 w-6 h-6 mt-1" />

<div>

<h5 className="font-bold text-slate-900">Safety First</h5>

<p className="text-sm text-slate-500">International safety standards.</p>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

{/* Why Choose Us */}

<section id="why-us" className="py-24 bg-blue-900 text-white">

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">

<h3 className="text-4xl font-extrabold mb-16">The Halsa P Standard</h3>

<div className="grid md:grid-cols-4 gap-8">

{[

{ title: 'Reliability', desc: 'On-time scheduled maintenance visits.' },

{ title: 'Quality', desc: 'Premium chemicals and materials used.' },

{ title: 'Transparency', desc: 'Detailed reporting after every visit.' },

{ title: 'Efficiency', desc: 'Optimized systems for lower bills.' }

].map((item, idx) => (

<div key={idx} className="p-6 rounded-2xl bg-white/5 border border-white/10">

<div className="text-blue-400 font-bold text-5xl mb-4">0{idx + 1}</div>

<h5 className="text-xl font-bold mb-3">{item.title}</h5>

<p className="text-blue-100/70">{item.desc}</p>

</div>

))}

</div>

</div>

</section>

{/* Contact Section */}

<section id="contact" className="py-24 bg-slate-50">

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div className="bg-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col lg:flex-row">

{/* Info Side */}

<div className="lg:w-1/3 bg-blue-600 p-12 text-white flex flex-col justify-between">

<div>

<h3 className="text-3xl font-bold mb-6">Contact Information</h3>

<p className="text-blue-100 mb-10">Have a pool project or need regular maintenance? Get in touch today.</p>

<div className="space-y-6">

<div className="flex items-center space-x-4">

<div className="bg-blue-500/50 p-3 rounded-full">

<Phone className="w-5 h-5" />

</div>

<span> 99013 68110</span>

</div>

<div className="flex items-center space-x-4">

<div className="bg-blue-500/50 p-3 rounded-full">

<Mail className="w-5 h-5" />

</div>

<span>hello@halsap.com</span>

</div>

<div className="flex items-center space-x-4">

<div className="bg-blue-500/50 p-3 rounded-full">

<MapPin className="w-5 h-5" />

</div>

<span>#43, mudalapalya circle, Bangalore-560072</span>

</div>

</div>

</div>

<div className="mt-12">

<div className="flex space-x-4">

<div className="w-10 h-10 rounded-full bg-blue-500/50 flex items-center justify-center cursor-pointer hover:bg-white hover:text-blue-600 transition-colors">f</div>

<div className="w-10 h-10 rounded-full bg-blue-500/50 flex items-center justify-center cursor-pointer hover:bg-white hover:text-blue-600 transition-colors">in</div>

<div className="w-10 h-10 rounded-full bg-blue-500/50 flex items-center justify-center cursor-pointer hover:bg-white hover:text-blue-600 transition-colors">ig</div>

</div>

</div>

</div>

{/* Form Side */}

<div className="lg:w-2/3 p-12">

<form className="space-y-6" onSubmit={(e) => e.preventDefault()}>

<div className="grid md:grid-cols-2 gap-6">

<div>

<label className="block text-sm font-semibold text-slate-700 mb-2">First Name</label>

<input type="text" className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all" placeholder="Ajay" />

</div>

<div>

<label className="block text-sm font-semibold text-slate-700 mb-2">Last Name</label>

<input type="text" className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all" placeholder="" />

</div>

</div>

<div>

<label className="block text-sm font-semibold text-slate-700 mb-2">Email Address</label>

<input type="email" className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all" placeholder="ajay@hamsa.com" />

</div>

<div>

<label className="block text-sm font-semibold text-slate-700 mb-2">Service Needed</label>

<select className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all">

<option>New Pool Consultancy</option>

<option>Regular Maintenance</option>

<option>Urgent Repair Service</option>

<option>Equipment Upgrade</option>

</select>

</div>

<div>

<label className="block text-sm font-semibold text-slate-700 mb-2">Message</label>

<textarea rows="4" className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all" placeholder="Tell us about your pool..."></textarea>

</div>

<button className="w-full bg-blue-600 text-white py-4 rounded-xl font-bold text-lg hover:bg-blue-700 transition-all shadow-lg hover:shadow-blue-200">

Send Inquiry

</button>

</form>

</div>

</div>

</div>

</section>

{/* Footer */}

<footer className="bg-slate-900 text-white py-16">

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div className="grid md:grid-cols-4 gap-12 mb-12 border-b border-slate-800 pb-12">

<div className="col-span-1 md:col-span-2">

<div className="flex items-center space-x-2 mb-6">

<div className="bg-blue-600 p-2 rounded-lg">

<Waves className="text-white w-6 h-6" />

</div>

<span className="text-2xl font-bold tracking-tight">

HALSA P <span className="font-light text-blue-500">CONSULTANCY</span>

</span>

</div>

<p className="text-slate-400 max-w-sm mb-6">

Redefining the standard of swimming pool construction and care. We ensure your aquatic vision becomes a durable, crystal-clear reality.

</p>

</div>

<div>

<h6 className="font-bold mb-6 text-white uppercase text-sm tracking-widest">Links</h6>

<ul className="space-y-4 text-slate-400">

<li><button onClick={() => scrollToSection('home')} className="hover:text-blue-400">Home</button></li>

<li><button onClick={() => scrollToSection('services')} className="hover:text-blue-400">Services</button></li>

<li><button onClick={() => scrollToSection('about')} className="hover:text-blue-400">About</button></li>

<li><button onClick={() => scrollToSection('contact')} className="hover:text-blue-400">Contact</button></li>

</ul>

</div>

<div>

<h6 className="font-bold mb-6 text-white uppercase text-sm tracking-widest">Legal</h6>

<ul className="space-y-4 text-slate-400">

<li className="hover:text-blue-400 cursor-pointer">Privacy Policy</li>

<li className="hover:text-blue-400 cursor-pointer">Terms of Service</li>

<li className="hover:text-blue-400 cursor-pointer">Cookie Settings</li>

</ul>

</div>

</div>

<div className="flex flex-col md:flex-row justify-between items-center text-slate-500 text-sm">

<p>© {new Date().getFullYear()} Halsa P Consultancy. All rights reserved.</p>

<p className="mt-4 md:mt-0">Built with precision for the aquatic industry.</p>

</div>

</div>

</footer>

</div>

);

};

export default App;