import type { Metadata } from "next"
import Link from "next/link"
import { CAREERS } from "@/lib/careers-data"

export const metadata: Metadata = {
  title: "Careers",
  description: "Join our team and help shape the future of AI. Explore open positions at DalCode.",
  openGraph: {
    title: "Careers at DalCode",
    description: "Join our team and help shape the future of AI.",
  },
}

export default function CareersPage() {
  return (
    <main>
      <section className="section-small top overflow-hidden">
        <div className="w-layout-blockcontainer container-default w-container">
          <div className="inner-container _650px center">
            <div className="text-center">
              <div className="subtitle">Careers</div>
              <div className="mg-top-4x-extra-small">
                <h1>Join our team</h1>
              </div>
              <div className="mg-top-4x-extra-small">
                <p>We&apos;re looking for talented people to help us build the future of AI-powered development tools.</p>
              </div>
            </div>
          </div>
          <div className="mg-top-regular">
            <div className="corner-gradient-container">
              <div className="border-wrapper">
                <div className="positions-list-wrapper">
                  {CAREERS.map((career) => (
                    <Link key={career.slug} href={`/careers/${career.slug}`} className="position-item w-inline-block">
                      <div className="position-item-content">
                        <div className="position-info">
                          <h3 className="display-4">{career.title}</h3>
                          <div className="position-details">
                            <div className="item-details">{career.department}</div>
                            <div className="item-details-divider">&middot;</div>
                            <div className="item-details">{career.location}</div>
                            <div className="item-details-divider">&middot;</div>
                            <div className="item-details">{career.type}</div>
                          </div>
                        </div>
                        <div className="button-icon-wrapper primary">
                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
                            <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
                          </svg>
                          <div className="button-icon-bg" />
                          <div className="button-icon-bg-inside" />
                        </div>
                      </div>
                    </Link>
                  ))}
                </div>
              </div>
              <div className="corner-gradient-wrapper">
                <div className="corner-gradient-horizontal top-left" />
                <div className="corner-gradient-horizontal bottom-left" />
                <div className="corner-gradient-horizontal top-right" />
                <div className="corner-gradient-horizontal bottom-right" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}