"use client"

import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  ExternalLink,
  Users,
  Ruler,
  Calculator,
  Truck,
  Hammer,
  BookOpen,
  Briefcase,
  ChevronRight,
  CheckCircle2,
  ArrowRight,
} from "lucide-react"
import { useState, useEffect } from "react"
import { cn } from "@/lib/utils"

export default function ResourcesPage() {
  const [activeSection, setActiveSection] = useState("organizations")

  const sections = [
    {
      id: "organizations",
      title: "Organizations",
      icon: Users,
      description: "Industry organizations and community resources for ICF construction.",
      type: "links",
      items: [
        {
          name: "Concrete Network",
          url: "https://www.concretenetwork.com/concrete-homes/advantages.html",
          description: "Information about concrete homes and their advantages",
        },
        {
          name: "ICF Builder Group",
          url: "http://icfbuildergroup.com",
          description: "Resources and community for ICF builders",
        },
      ],
    },
    {
      id: "design",
      title: "Design & Engineering",
      icon: Ruler,
      description: "Technical resources, CAD details, and engineering consultation.",
      type: "links",
      items: [
        {
          name: "CAD Details",
          url: "http://autocaddetails.net/cad_directory/Residential/ICF%20System/ICF_Systems.htm",
          description: "AutoCAD details for ICF systems",
        },
        {
          name: "Innovative Engineering Solutions, LLC",
          contact: "Larry Matejcek",
          email: "matco11749@msn.com",
          description: "Engineering consultation services",
        },
        {
          name: "Fox Block CAD Details",
          url: "http://www.foxblocks.com/resource-center/autocad-2d-details/",
          description: "Fox Block AutoCAD 2D details",
        },
      ],
    },
    {
      id: "estimating",
      title: "Estimating Tools",
      icon: Calculator,
      description: "Tools and calculators for project estimation.",
      type: "links",
      items: [
        {
          name: "Fox Block Project Estimator",
          url: "http://www.foxblocks.com/project-estimator/",
          description: "Tool for estimating Fox Block projects",
        },
      ],
    },
    {
      id: "suppliers",
      title: "Suppliers",
      icon: Truck,
      description: "Trusted suppliers for ICF materials and equipment.",
      type: "links",
      items: [
        {
          name: "Nu-Tech Systems",
          url: "http://nutechcolorado.com",
          description: "ICF supplies and bracing rental",
        },
      ],
    },
    {
      id: "builders",
      title: "Builders",
      icon: Hammer,
      description: "Experienced ICF custom builders and contractors.",
      type: "links",
      items: [
        {
          name: "Open Range Construction, Ltd.",
          url: "http://openrangeconstruction.com",
          description: "ICF custom builder",
        },
      ],
    },
    {
      id: "publications",
      title: "Publications",
      icon: BookOpen,
      description: "Industry magazines and reading materials.",
      type: "links",
      items: [
        {
          name: "ICF Builder Magazine",
          url: "https://www.icfmag.com/",
          description: "Industry magazine for ICF builders",
        },
      ],
    },
    {
      id: "employment",
      title: "Employment",
      icon: Briefcase,
      description: "Join our growing team of high performance building professionals.",
      type: "custom",
      content: {
        intro:
          "High Performance Structures is a Foundation Subcontractor specializing in installing Insulating Concrete Forms (ICFs) with over 10 years experience. The ICFs industry is growing and so are we! We are looking to hire 4 installers to accommodate the increase in ICF foundation jobs.",
        role: "ICF Installers",
        requirements: [
          "At least 18 years old",
          "Reliable personal transportation (4-Wheel drive helpful)",
          "Willingness to work at multiple job sites throughout the Front Range",
          "Comfortable working at heights from ladders and scaffolding",
          "Flexibility with changing construction schedules",
        ],
        skills: [
          "Basic knowledge of general construction and repair methods",
          "Ability to interpret sketches and blueprints",
          "Ability to communicate effectively in English",
          "Manual work requiring heavy lifting, reaching, and bending",
          "Ability to operate hand/power tools",
          "Ability to quickly pick up on new skills",
        ],
        tasks: [
          "Installing ICF forms",
          "Placing reinforcement/rebar",
          "Installing scaffolding and bracing",
          "Aligning, leveling and plumbing ICF walls",
          "Placing concrete and forms",
          "Installing temporary beams and structural posts",
        ],
        applyUrl: "https://goo.gl/forms/VuoaPSst4SR4Hzos1",
      },
    },
  ]

  useEffect(() => {
    const handleScroll = () => {
      const sectionElements = sections.map((s) => document.getElementById(s.id))
      const scrollPosition = window.scrollY + 200

      for (const section of sectionElements) {
        if (
          section &&
          section.offsetTop <= scrollPosition &&
          section.offsetTop + section.offsetHeight > scrollPosition
        ) {
          setActiveSection(section.id)
        }
      }
    }

    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id)
    if (element) {
      const offset = 120
      const bodyRect = document.body.getBoundingClientRect().top
      const elementRect = element.getBoundingClientRect().top
      const elementPosition = elementRect - bodyRect
      const offsetPosition = elementPosition - offset

      window.scrollTo({
        top: offsetPosition,
        behavior: "smooth",
      })
    }
  }

  return (
    <div className="min-h-screen flex flex-col bg-white">
      <SiteHeader />

      <main className="flex-1">
        {/* Hero Section */}
        <section className="relative h-[50vh] min-h-[300px] flex items-center justify-center overflow-hidden bg-deep-navy">
          <div className="absolute inset-0 z-0">
            <div className="absolute inset-0 bg-deep-navy/90" />
            <div className="absolute inset-0 bg-[url('/grid-pattern.svg')] opacity-10" />
          </div>

          <div className="relative z-10 container mx-auto px-4 text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 tracking-tight animate-in fade-in slide-in-from-bottom-4 duration-1000">
              Resources & <span className="text-accent">Careers</span>
            </h1>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto font-light animate-in fade-in slide-in-from-bottom-6 duration-1000 delay-200">
              Industry tools, partnerships, and opportunities to join our team.
            </p>
          </div>
        </section>

        <div className="container mx-auto px-4 py-16">
          <div className="flex flex-col lg:flex-row gap-12">
            {/* Sticky Sidebar Navigation */}
            <aside className="hidden lg:block w-1/4 relative">
              <div className="sticky top-32 space-y-2">
                <h3 className="text-lg font-bold text-deep-navy mb-4 px-4">Quick Navigation</h3>
                <nav className="space-y-1">
                  {sections.map((section) => (
                    <button
                      key={section.id}
                      onClick={() => scrollToSection(section.id)}
                      className={cn(
                        "w-full text-left px-4 py-3 rounded-lg text-sm font-medium transition-all duration-200 flex items-center justify-between group",
                        activeSection === section.id
                          ? "bg-deep-navy text-white shadow-md"
                          : "text-gray-600 hover:bg-gray-100 hover:text-deep-navy",
                      )}
                    >
                      <span className="flex items-center gap-2">
                        <section.icon
                          className={cn("h-4 w-4", activeSection === section.id ? "text-accent" : "text-gray-400")}
                        />
                        {section.title}
                      </span>
                      {activeSection === section.id && <ChevronRight className="h-4 w-4 text-accent" />}
                    </button>
                  ))}
                </nav>
              </div>
            </aside>

            {/* Main Content */}
            <div className="lg:w-3/4 space-y-20">
              {sections.map((section, index) => (
                <section key={section.id} id={section.id} className="scroll-mt-32">
                  <div className="flex items-center gap-4 mb-8">
                    <div className="p-3 bg-accent/10 rounded-xl">
                      <section.icon className="h-8 w-8 text-deep-navy" />
                    </div>
                    <div>
                      <h2 className="text-3xl font-bold text-deep-navy">{section.title}</h2>
                      <p className="text-gray-600 mt-1">{section.description}</p>
                    </div>
                  </div>

                  {section.type === "links" && (
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      {section.items?.map((item, i) => (
                        <Card
                          key={i}
                          className="border-gray-200 hover:border-accent/50 transition-colors duration-300 hover:shadow-md group"
                        >
                          <CardHeader className="pb-3">
                            <CardTitle className="text-base font-bold text-deep-navy flex items-start justify-between gap-2">
                              {item.name}
                              {item.url && (
                                <ExternalLink className="h-4 w-4 text-gray-400 group-hover:text-accent transition-colors" />
                              )}
                            </CardTitle>
                          </CardHeader>
                          <CardContent>
                            <p className="text-sm text-gray-600 mb-4">{item.description}</p>
                            {/* @ts-ignore */}
                            {item.contact && (
                              <p className="text-sm text-gray-800 mb-2">
                                <span className="font-bold">Contact:</span> {item.contact}
                              </p>
                            )}
                            {/* @ts-ignore */}
                            {item.email && (
                              <a
                                href={`mailto:${item.email}`}
                                className="text-sm text-accent hover:text-deep-navy font-medium block mb-2 transition-colors"
                              >
                                {item.email}
                              </a>
                            )}
                            {item.url && (
                              <a
                                href={item.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-sm text-accent hover:text-deep-navy font-medium break-all transition-colors flex items-center gap-1"
                              >
                                Visit Website <ArrowRight className="h-3 w-3" />
                              </a>
                            )}
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  )}

                  {section.type === "custom" && section.content && (
                    <div className="bg-gray-50 rounded-2xl p-8 border border-gray-200">
                      <div className="prose max-w-none text-gray-600">
                        <p className="text-lg leading-relaxed mb-8">{section.content.intro}</p>

                        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 mb-8">
                          <h3 className="text-xl font-bold text-deep-navy mb-4 flex items-center gap-2">
                            <Briefcase className="h-5 w-5 text-accent" />
                            {section.content.role}
                          </h3>

                          <div className="grid md:grid-cols-2 gap-8">
                            <div>
                              <h4 className="font-bold text-gray-900 mb-3">Basic Requirements</h4>
                              <ul className="space-y-2">
                                {section.content.requirements.map((req, i) => (
                                  <li key={i} className="flex items-start gap-2 text-sm">
                                    <CheckCircle2 className="h-4 w-4 text-accent mt-0.5 flex-shrink-0" />
                                    <span>{req}</span>
                                  </li>
                                ))}
                              </ul>
                            </div>
                            <div>
                              <h4 className="font-bold text-gray-900 mb-3">Job Tasks</h4>
                              <ul className="space-y-2">
                                {section.content.tasks.map((task, i) => (
                                  <li key={i} className="flex items-start gap-2 text-sm">
                                    <CheckCircle2 className="h-4 w-4 text-accent mt-0.5 flex-shrink-0" />
                                    <span>{task}</span>
                                  </li>
                                ))}
                              </ul>
                            </div>
                          </div>

                          <div className="mt-6 pt-6 border-t border-gray-100">
                            <h4 className="font-bold text-gray-900 mb-3">Knowledge, Skills & Abilities</h4>
                            <div className="grid md:grid-cols-2 gap-2">
                              {section.content.skills.map((skill, i) => (
                                <div key={i} className="flex items-start gap-2 text-sm">
                                  <div className="h-1.5 w-1.5 rounded-full bg-gray-300 mt-2 flex-shrink-0" />
                                  <span>{skill}</span>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>

                        <div className="flex flex-col items-center justify-center text-center bg-deep-navy rounded-xl p-8 text-white">
                          <h3 className="text-2xl font-bold mb-4">Ready to Join the Team?</h3>
                          <p className="text-gray-300 mb-6 max-w-xl">
                            If you are willing to work outdoors during any season, have a desire to grow into leadership
                            roles, and are willing to listen and learn our processes, we want to hear from you!
                          </p>
                          <Button
                            size="lg"
                            className="bg-accent hover:bg-accent/90 text-deep-navy font-bold h-12 px-8"
                            asChild
                          >
                            <a href={section.content.applyUrl} target="_blank" rel="noopener noreferrer">
                              Apply Now <ExternalLink className="ml-2 h-4 w-4" />
                            </a>
                          </Button>
                        </div>
                      </div>
                    </div>
                  )}

                  {index !== sections.length - 1 && <div className="h-px bg-gray-200 mt-20" />}
                </section>
              ))}
            </div>
          </div>
        </div>
      </main>

      <SiteFooter />
    </div>
  )
}