<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Punjab Govt Portal - Landing Page</title>
    <link rel="stylesheet" href="/styles2.css" />
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="container">
            <h1>Surveyor Registration Portal</h1>
            <nav>
                <a href="#">Home</a>
                <a href="#workflow">Workflow</a>
                <a href="#documents">Documents</a>
                <a href="registration.html">Register Now</a>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-overlay">
            <h2>Surveyor/Surveying Firm</h2>
            <h2>Registration Portal </h2>
            <a href="registration.html" class="cta-button mt-4">Start Your Registration</a>
        </div>
    </section>


    <!-- Workflow Section -->
    <!-- Workflow Section -->
    <section id="workflow" class="section">
        <h2>Registration Workflow</h2>
        <svg id="workflowGraph" width="100%" height="400"></svg>
    </section>


    <!-- Document Feed -->
    <section id="documents" class="section">
        <h2>Qualification Criteria</h2>
        <ul class="feed-list">
            <li>
                <a href="/docs/tor_individual_surveyors.docx" target="_blank">📄 TOR for Registration of Individual Surveyors</a>
            </li>
            <li>
                <a href="/docs/tor_survey_firms.docx" target="_blank">📄 TOR for Registration of Survey Firms</a>
            </li>
        </ul>
    </section>


    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 Government of Punjab, Pakistan</p>
        </div>
    </footer>


    <!-- D3 Workflow Graph -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>

    <svg id="workflowGraph" width="1400" height="400"></svg>

    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script>
        const svg = d3.select("#workflowGraph")
            .attr("viewBox", "0 0 1400 400")
            .style("background", "#fff");

        const steps = [
            {
                id: "signup",
                label: "Signup",
                icon: "📝",
                step: "STEP 01",
                color: "#00bcd4",
                title: "Sign Up",
                desc1: "Register with your verified",
                desc2: "email and mobile number"
            },
            {
                id: "preReg",
                label: "Pre‑Registration",
                icon: "📋",
                step: "STEP 02",
                color: "#03a9f4",
                title: "Pre Registration",
                desc1: "Enter personal details",
                desc2: "and contact number"
            },
            {
                id: "validation",
                label: "Validation",
                icon: "📄",
                step: "STEP 03",
                color: "#2196f3",
                title: "Document Check",
                desc1: "Upload CNIC and photo",
                desc2: "for verification"
            },
            {
                id: "challan",
                label: "Challan",
                icon: "💰",
                step: "STEP 04",
                color: "#3f51b5",
                title: "Fee Payment",
                desc1: "Generate challan form",
                desc2: "and submit payment"
            },
            {
                id: "approval",
                label: "Approval",
                icon: "💡",
                step: "STEP 05",
                color: "#673ab7",
                title: "Admin Review",
                desc1: "Admin verifies your data",
                desc2: "and uploaded docs"
            },
            {
                id: "complete",
                label: "Complete",
                icon: "✅",
                step: "STEP 06",
                color: "#9c27b0",
                title: "Registration Done",
                desc1: "Receive confirmation",
                desc2: "and welcome message"
            }
        ];

        const cardWidth = 170;
        const cardHeight = 200;
        const spacingX = 220;
        const startX = 80;
        const startY = 80;

        steps.forEach((step, i) => {
            const x = startX + i * spacingX;
            const y = startY;

            const group = svg.append("g")
                .attr("transform", `translate(${x}, ${y})`);

            // Card background
            group.append("rect")
                .attr("width", cardWidth)
                .attr("height", cardHeight)
                .attr("rx", 12)
                .attr("ry", 12)
                .attr("fill", "white")
                .attr("stroke", step.color)
                .attr("stroke-width", 2)
                .attr("filter", "url(#shadow)");

            // Icon
            group.append("text")
                .attr("x", cardWidth / 2)
                .attr("y", 40)
                .attr("text-anchor", "middle")
                .attr("font-size", "32px")
                .text(step.icon);

            // Title
            group.append("text")
                .attr("x", cardWidth / 2)
                .attr("y", 80)
                .attr("text-anchor", "middle")
                .attr("font-size", "14px")
                .attr("fill", "#333")
                .attr("font-weight", "bold")
                .text(step.title);

            // Description 1
            group.append("text")
                .attr("x", cardWidth / 2)
                .attr("y", 110)
                .attr("text-anchor", "middle")
                .attr("font-size", "12px")
                .attr("fill", "#666")
                .text(step.desc1);

            // Description 2
            group.append("text")
                .attr("x", cardWidth / 2)
                .attr("y", 125)
                .attr("text-anchor", "middle")
                .attr("font-size", "12px")
                .attr("fill", "#666")
                .text(step.desc2);

            // Bottom arrow label
            group.append("rect")
                .attr("x", (cardWidth - 90) / 2)
                .attr("y", cardHeight - 30)
                .attr("width", 90)
                .attr("height", 28)
                .attr("fill", step.color)
                .attr("rx", 6);

            group.append("text")
                .attr("x", cardWidth / 2)
                .attr("y", cardHeight - 12)
                .attr("text-anchor", "middle")
                .attr("font-size", "12px")
                .attr("fill", "white")
                .attr("font-weight", "bold")
                .text(step.step);

            // Arrow line to next step
            if (i < steps.length - 1) {
                svg.append("line")
                    .attr("x1", x + cardWidth)
                    .attr("y1", y + cardHeight / 2)
                    .attr("x2", x + spacingX)
                    .attr("y2", y + cardHeight / 2)
                    .attr("stroke", "#999")
                    .attr("stroke-width", 2)
                    .attr("marker-end", "url(#arrow)");
            }
        });

        // Arrowhead marker
        svg.append("defs").append("marker")
            .attr("id", "arrow")
            .attr("viewBox", "0 0 10 10")
            .attr("refX", 10)
            .attr("refY", 5)
            .attr("markerWidth", 6)
            .attr("markerHeight", 6)
            .attr("orient", "auto-start-reverse")
            .append("path")
            .attr("d", "M 0 0 L 10 5 L 0 10 z")
            .attr("fill", "#999");

        // Shadow effect
        svg.append("defs").append("filter")
            .attr("id", "shadow")
            .append("feDropShadow")
            .attr("dx", 0)
            .attr("dy", 2)
            .attr("stdDeviation", 2)
            .attr("flood-color", "#ccc");
    </script>


</body>
</html>
