<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Worka - Find Trusted Tradesmen for Your Building Project</title>
    <link rel="icon" type="image/png" href="https://ik.imagekit.io/tadmfld9t/g36.png?updatedAt=1763255381885">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
            padding-bottom: 80px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        header {
            background: white;
            color: #1e293b;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo img {
            height: 50px;
            width: auto;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            color: white;
            padding: 100px 0 80px;
            text-align: center;
            margin-top: 70px;
        }

        .hero-logo {
            max-width: 300px;
            height: auto;
            margin: 0 auto 30px;
            display: block;
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .hero p {
            font-size: 1.25rem;
            margin-bottom: 40px;
            opacity: 0.95;
        }

        .project-form {
            background: white;
            border-radius: 15px;
            padding: 40px;
            max-width: 700px;
            margin: 0 auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            color: #1e293b;
        }

        .form-group {
            margin-bottom: 25px;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #334155;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #2563eb;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }

        .required {
            color: #f97316;
        }

        .btn-submit {
            background: #f97316;
            color: white;
            padding: 15px 40px;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
            width: 100%;
        }

        .btn-submit:hover {
            background: #ea580c;
        }

        .form-message {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            display: none;
        }

        .form-message.success {
            background: #d1fae5;
            color: #065f46;
            display: block;
        }

        /* Tradesmen Categories */
        .tradesmen-section {
            padding: 60px 0;
        }

        .section-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 15px;
            color: #1e293b;
        }

        .section-subtitle {
            text-align: center;
            color: #64748b;
            margin-bottom: 30px;
            font-size: 1.1rem;
        }

        .category-selector {
            max-width: 500px;
            margin: 0 auto 40px;
        }

        .category-selector select {
            width: 100%;
            padding: 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
            background: white;
            cursor: pointer;
        }

        .content-wrapper {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 30px;
            align-items: start;
        }

        .tradesmen-list {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }

        .advert-slot {
            position: sticky;
            top: 100px;
        }

        .advert-image {
            width: 100%;
            height: auto;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            margin-bottom: 20px;
        }

        .categories-grid {
            display: none;
        }

        .category-card {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }

        .category-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #2563eb;
            font-weight: 700;
            text-align: center;
        }

        .tradesman {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid #e2e8f0;
            gap: 15px;
        }

        .tradesman:last-child {
            border-bottom: none;
        }

        .tradesman-info {
            flex: 1;
        }

        .tradesman-name {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 8px;
        }

        .rating {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #f59e0b;
            font-size: 16px;
            margin-bottom: 8px;
        }

        .stars {
            display: flex;
            gap: 2px;
        }

        .star {
            font-size: 16px;
        }

        .rating-number {
            font-size: 14px;
            color: #64748b;
            margin-left: 5px;
        }

        .tradesman-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .whatsapp-btn, .portfolio-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s;
            text-decoration: none;
            font-size: 14px;
            white-space: nowrap;
        }

        .whatsapp-btn {
            background: #2563eb;
            color: white;
        }

        .whatsapp-btn:hover {
            background: #1e40af;
        }

        .portfolio-btn {
            background: #e11d48;
            color: white;
        }

        .portfolio-btn:hover {
            background: #be123c;
        }

        .whatsapp-btn:disabled, .portfolio-btn:disabled {
            background: #cbd5e1;
            cursor: not-allowed;
        }

        .btn-icon {
            width: 18px;
            height: 18px;
            object-fit: contain;
        }

        /* How It Works */
        .how-it-works {
            background: white;
            padding: 60px 0;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }

        .step {
            text-align: center;
        }

        .step-number {
            width: 60px;
            height: 60px;
            background: #2563eb;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            margin: 0 auto 20px;
        }

        .step-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .step-description {
            color: #64748b;
        }

        /* Footer */
        footer {
            background: #1e293b;
            color: white;
            padding: 40px 0 20px;
            margin-top: 60px;
            padding-bottom: 100px;
        }

        .fixed-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 999;
            text-align: center;
        }

        .pm-btn {
            background: #2563eb;
            color: white;
            padding: 15px 40px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .pm-btn:hover {
            background: #1e40af;
        }

        .pm-btn-icon {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-section h3 {
            margin-bottom: 15px;
            color: #f97316;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #334155;
            color: #94a3b8;
        }

        .disclaimer {
            background: #fef3c7;
            border-left: 4px solid #f59e0b;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
            color: #92400e;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 1.75rem;
            }

            .hero p {
                font-size: 1rem;
            }

            .project-form {
                padding: 25px;
            }

            .content-wrapper {
                grid-template-columns: 1fr;
            }

            .advert-slot {
                position: static;
                display: grid;
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .tradesman {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .tradesman-actions {
                width: 100%;
            }

            .whatsapp-btn, .portfolio-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <img src="https://ik.imagekit.io/tadmfld9t/g36.png?updatedAt=1763255381885" alt="Worka">
            </div>
        </div>
    </header>

    <section class="hero">
        <div class="container">
            <img src="https://ik.imagekit.io/tadmfld9t/text48.png?updatedAt=1763255382033" alt="Worka" class="hero-logo">
            <h1>Find Trusted Tradesmen for Your Building Project</h1>
            <p>Connect directly with rated professionals via WhatsApp</p>

            <div class="project-form">
                <form id="projectForm">
                    <div class="form-group">
                        <label>Project Type <span class="required">*</span></label>
                        <select id="projectType" required>
                            <option value="">Select project type...</option>
                            <option value="New Construction">New Construction</option>
                            <option value="Renovation">Renovation</option>
                            <option value="Repair">Repair</option>
                            <option value="Commercial">Commercial</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Project Location <span class="required">*</span></label>
                        <input type="text" id="projectLocation" placeholder="e.g., Uyo, Port Harcourt, Lagos..." required>
                    </div>

                    <div class="form-group">
                        <label>Project Timeline <span class="required">*</span></label>
                        <select id="projectTimeline" required>
                            <option value="">Select timeline...</option>
                            <option value="Immediately">Immediately</option>
                            <option value="Within 2 weeks">Within 2 weeks</option>
                            <option value="Within month">Within month</option>
                            <option value="Flexible">Flexible</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Brief Description</label>
                        <textarea id="projectDescription" placeholder="Describe your project briefly..."></textarea>
                    </div>

                    <button type="submit" class="btn-submit">Save Project Details</button>
                    
                    <div id="formMessage" class="form-message"></div>
                </form>
            </div>
        </div>
    </section>

    <section class="tradesmen-section">
        <div class="container">
            <h2 class="section-title">Browse Rated Tradesmen by Category</h2>
            <p class="section-subtitle">Choose from our network of verified professionals</p>

            <div class="category-selector">
                <select id="categoryDropdown">
                    <option value="">Select a trade category...</option>
                </select>
            </div>

            <div class="content-wrapper">
                <div id="tradesmenList" class="tradesmen-list" style="display: none;"></div>
                <div class="advert-slot">
                    <img src="https://mir-s3-cdn-cf.behance.net/projects/404/f617b6188030129.Y3JvcCwyMTI3LDE2NjQsMTA1LDU3.jpg" alt="Advertisement" class="advert-image" style="width: 250px; height: 250px; object-fit: cover;">
                    <img src="https://image.made-in-china.com/202f0j00DQUcTLnCRtoE/New-Brand-China-Toilet-Seats-High-Quality-S-Trap-Two-Piece-Sanitary-Ware-Commercial-American-Style-Toilet.webp" alt="Advertisement" class="advert-image" style="width: 250px; height: 250px; object-fit: cover;">
                    <img src="https://s3.eu-west-2.amazonaws.com/img.creativepool.com/files/candidate/portfolio/full/1072169.jpg" alt="Advertisement" class="advert-image" style="width: 250px; height: 250px; object-fit: cover;">
                </div>
            </div>
        </div>
    </section>

    <section class="how-it-works">
        <div class="container">
            <h2 class="section-title">How It Works</h2>
            <div class="steps-grid">
                <div class="step">
                    <div class="step-number">1</div>
                    <h3 class="step-title">Describe Your Project</h3>
                    <p class="step-description">Fill in basic details about your building needs</p>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <h3 class="step-title">Choose Tradesmen</h3>
                    <p class="step-description">Browse rated professionals in each category</p>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <h3 class="step-title">Connect via WhatsApp</h3>
                    <p class="step-description">Message directly with your project details pre-filled</p>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Worka</h3>
                    <p>Connecting you with trusted tradesmen across Nigeria</p>
                </div>
                <div class="footer-section">
                    <h3>Contact</h3>
                    <p>For support: support@worka.ng</p>
                </div>
            </div>
            
            <div class="disclaimer">
                <strong>Disclaimer:</strong> Worka connects users with tradesmen but doesn't guarantee work quality. Users should verify credentials.
            </div>

            <div class="footer-bottom">
                <p>&copy; 2024 Worka. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <div class="fixed-footer">
        <a href="#" id="pmButton" class="pm-btn">
            <img src="https://ik.imagekit.io/tadmfld9t/path75.png" alt="" class="pm-btn-icon">
            Hire a Professional Project Manager
        </a>
    </div>

    <script>
        const tradesmenData = [
            {
                trade: "Masons and Bricklayers",
                tradesmen: [
                    {name: "Augustine", rating: 4.7, phone: "2348037927982", instagram: "https://instagram.com/augustine_mason"},
                    {name: "Aniekan", rating: 4.5, phone: "2348065145789", instagram: "https://instagram.com/aniekan_builds"},
                    {name: "Idongesit", rating: 4.8, phone: "2348064087477", instagram: "https://instagram.com/idongesit_mason"},
                    {name: "Esther", rating: 4.6, phone: "2348139090529", instagram: "https://instagram.com/esther_bricklayer"}
                ]
            },
            {
                trade: "Carpenters",
                tradesmen: [
                    {name: "Ekong", rating: 4.4, phone: "2348037583558", instagram: "https://instagram.com/ekong_carpenter"},
                    {name: "Unwana", rating: 4.9, phone: "2348134109553", instagram: "https://instagram.com/unwana_woodworks"},
                    {name: "Patience", rating: 4.7, phone: "2348108178858", instagram: "https://instagram.com/patience_carpentry"},
                    {name: "Aniefiok", rating: 4.5, phone: "2349094954705", instagram: "https://instagram.com/aniefiok_wood"}
                ]
            },
            {
                trade: "Roofers",
                tradesmen: [
                    {name: "Ubong", rating: 4.6, phone: "2348166461208", instagram: "https://instagram.com/ubong_roofing"},
                    {name: "Anietie", rating: 4.8, phone: "2348166694494", instagram: "https://instagram.com/anietie_roofs"},
                    {name: "Imaobong", rating: 4.7, phone: "2348132872463", instagram: "https://instagram.com/imaobong_roofer"},
                    {name: "Fenet", rating: 4.5, phone: "2347037538695", instagram: "https://instagram.com/fenet_roofing"}
                ]
            },
            {
                trade: "Screeders",
                tradesmen: [
                    {name: "Arit", rating: 4.6, phone: "2348136781443", instagram: "https://instagram.com/arit_screeder"},
                    {name: "Mfonobong", rating: 4.4, phone: "2348027567257", instagram: "https://instagram.com/mfonobong_screeds"},
                    {name: "Idongesit", rating: 4.8, phone: "2347032493739", instagram: "https://instagram.com/idongesit_screeding"},
                    {name: "Eno-Obong", rating: 4.7, phone: "2348063094039", instagram: "https://instagram.com/enoobong_screeder"}
                ]
            },
            {
                trade: "POP Installers",
                tradesmen: [
                    {name: "Emem", rating: 4.5, phone: "2347035947085", instagram: "https://instagram.com/emem_pop"},
                    {name: "Nyakno", rating: 4.9, phone: "2347030946132", instagram: "https://instagram.com/nyakno_popinstaller"},
                    {name: "Esther", rating: 4.6, phone: "2348099749242", instagram: "https://instagram.com/esther_popwork"},
                    {name: "Inyene", rating: 4.7, phone: "2348078307808", instagram: "https://instagram.com/inyene_pop"}
                ]
            },
            {
                trade: "Tilers",
                tradesmen: [
                    {name: "Uwem", rating: 4.8, phone: "2348027282011", instagram: "https://instagram.com/uwem_tiler"},
                    {name: "Glory", rating: 4.5, phone: "2348104757624", instagram: "https://instagram.com/glory_tiles"},
                    {name: "Nsisong", rating: 4.7, phone: "2347061600491", instagram: "https://instagram.com/nsisong_tiling"},
                    {name: "Ema", rating: 4.6, phone: "2347088322563", instagram: "https://instagram.com/ema_tiler"}
                ]
            },
            {
                trade: "Plumbers",
                tradesmen: [
                    {name: "Utibe", rating: 4.7, phone: "2347035909606", instagram: "https://instagram.com/utibe_plumber"},
                    {name: "Daramfon", rating: 4.4, phone: "2348130798392", instagram: "https://instagram.com/daramfon_plumbing"},
                    {name: "Gabriel", rating: 4.8, phone: "2347080025117", instagram: "https://instagram.com/gabriel_plumber"},
                    {name: "Enenwan", rating: 4.6, phone: "2348134109562", instagram: "https://instagram.com/enenwan_plumbing"}
                ]
            },
            {
                trade: "Electricians",
                tradesmen: [
                    {name: "Idongesit", rating: 4.9, phone: "2348064864290", instagram: "https://instagram.com/idongesit_electrician"},
                    {name: "Ekpedeme", rating: 4.5, phone: "2348034634353", instagram: "https://instagram.com/ekpedeme_electric"},
                    {name: "Idorenyin", rating: 4.7, phone: "2348084030443", instagram: "https://instagram.com/idorenyin_electrician"},
                    {name: "Uyoatta", rating: 4.6, phone: "2348100601767", instagram: "https://instagram.com/uyoatta_electric"}
                ]
            },
            {
                trade: "Sitehands",
                tradesmen: [
                    {name: "Edidiong", rating: 4.4, phone: "2348023337078", instagram: "https://instagram.com/edidiong_sitehand"},
                    {name: "Udeme", rating: 4.7, phone: "2347038973330", instagram: "https://instagram.com/udeme_labour"},
                    {name: "Idongesit", rating: 4.8, phone: "2348179780902", instagram: "https://instagram.com/idongesit_sitehand"},
                    {name: "Jenat", rating: 4.5, phone: "2348082396180", instagram: "https://instagram.com/jenat_labour"}
                ]
            }
        ];

        function renderStars(rating) {
            const fullStars = Math.floor(rating);
            let starsHTML = '';
            
            for (let i = 0; i < fullStars; i++) {
                starsHTML += '<span class="star">*</span>';
            }
            
            return starsHTML;
        }

        function createWhatsAppLink(tradesman, trade) {
            const projectData = sessionStorage.getItem('workaProjectData');
            let message = `Hello ${tradesman.name}, I found you on Worka.`;
            
            if (projectData) {
                const data = JSON.parse(projectData);
                message = `Hello ${tradesman.name}, I found you on Worka. I have a ${data.projectType} project in ${data.projectLocation} needed ${data.projectTimeline}.`;
                
                if (data.projectDescription) {
                    message += ` Project details: ${data.projectDescription}.`;
                }
                
                message += ` Can you provide a quote?`;
            } else {
                message += ` I'm interested in your ${trade} services. Can you provide a quote?`;
            }
            
            return `https://wa.me/${tradesman.phone}?text=${encodeURIComponent(message)}`;
        }

        function createPMLink() {
            const projectData = sessionStorage.getItem('workaProjectData');
            let message = `Hello, I found you on Worka and I'm interested in hiring a professional project manager.`;
            
            if (projectData) {
                const data = JSON.parse(projectData);
                message = `Hello, I found you on Worka and I'm interested in hiring a professional project manager for my ${data.projectType} project in ${data.projectLocation} needed ${data.projectTimeline}.`;
                
                if (data.projectDescription) {
                    message += ` Project details: ${data.projectDescription}.`;
                }
                
                message += ` Can we discuss this further?`;
            }
            
            return `https://wa.me/2348088889373?text=${encodeURIComponent(message)}`;
        }

        function populateDropdown() {
            const dropdown = document.getElementById('categoryDropdown');
            tradesmenData.forEach((category, index) => {
                const option = document.createElement('option');
                option.value = index;
                option.textContent = category.trade;
                dropdown.appendChild(option);
            });
        }

        function renderTradesmen(categoryIndex) {
            const container = document.getElementById('tradesmenList');
            const category = tradesmenData[categoryIndex];
            
            if (!category) {
                container.style.display = 'none';
                return;
            }

            container.style.display = 'block';
            
            let tradesmenHTML = `<h3 class="category-title">${category.trade}</h3>`;
            
            category.tradesmen.forEach(tradesman => {
                const whatsappLink = createWhatsAppLink(tradesman, category.trade);
                tradesmenHTML += `
                    <div class="tradesman">
                        <div class="tradesman-info">
                            <div class="tradesman-name">${tradesman.name}</div>
                            <div class="rating">
                                <div class="stars">${renderStars(tradesman.rating)}</div>
                                <span class="rating-number">${tradesman.rating}</span>
                            </div>
                        </div>
                        <div class="tradesman-actions">
                            <a href="${whatsappLink}" class="whatsapp-btn" target="_blank">
                                <img src="https://ik.imagekit.io/tadmfld9t/path75.png" alt="" class="btn-icon">
                                <span>Request Quote</span>
                            </a>
                            <a href="${tradesman.instagram}" class="portfolio-btn" target="_blank">
                                <img src="https://ik.imagekit.io/tadmfld9t/path88.png" alt="" class="btn-icon">
                                <span>View Jobs</span>
                            </a>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = tradesmenHTML;
        }

        document.getElementById('categoryDropdown').addEventListener('change', function(e) {
            const selectedIndex = e.target.value;
            if (selectedIndex !== '') {
                renderTradesmen(parseInt(selectedIndex));
            } else {
                document.getElementById('tradesmenList').style.display = 'none';
            }
        });

        document.getElementById('projectForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const projectData = {
                projectType: document.getElementById('projectType').value,
                projectLocation: document.getElementById('projectLocation').value,
                projectTimeline: document.getElementById('projectTimeline').value,
                projectDescription: document.getElementById('projectDescription').value
            };
            
            sessionStorage.setItem('workaProjectData', JSON.stringify(projectData));
            
            const messageDiv = document.getElementById('formMessage');
            messageDiv.className = 'form-message success';
            messageDiv.textContent = '✓ Project details saved! Now browse tradesmen below and connect via WhatsApp.';
            
            document.getElementById('pmButton').href = createPMLink();
            
            setTimeout(() => {
                document.querySelector('.tradesmen-section').scrollIntoView({ behavior: 'smooth' });
            }, 500);
        });

        populateDropdown();
        
        document.getElementById('pmButton').href = createPMLink();
    </script>
</body>
</html>