import type { Metadata } from "next";
import type { CSSProperties } from "react";
import Link from "next/link";
import { ArrowRight, Check, ChevronRight } from "lucide-react";
import { SiteFrame } from "@/app/components/SiteFrame/SiteFrame";
import { ProductVisual } from "@/app/components/ProductVisual/ProductVisual";
import { JsonLd } from "@/app/lib/structured-data";
import { AnimatedDiv, AnimatedSection } from "@/app/components/Motion/AnimatedSection";
import styles from "../product-page.module.css";

export const metadata: Metadata = {
  title: "Craft Wave",
  description:
    "AI-powered resume screening and candidate ranking to help hiring teams shortlist faster and reduce bias.",
  alternates: { canonical: "/products/craftwave" },
  openGraph: {
    title: "Craft Wave - AI Hiring Intelligence",
    description: "AI-powered resume screening and candidate ranking to help hiring teams shortlist faster and reduce bias.",
    url: "/products/craftwave",
  },
};

const metrics = [
  {
    label: "Screening speed",
    value: "80% faster",
    detail: "Cut first-pass review time dramatically without sacrificing quality.",
  },
  {
    label: "Shortlist quality",
    value: "+35%",
    detail: "Role-fit scoring improves candidate-to-interview relevance.",
  },
  {
    label: "Bias control",
    value: "Structured",
    detail: "Consistent rubric-based scoring reduces inconsistent manual decisions.",
  },
];

const capabilities = [
  {
    title: "Role-fit scoring",
    detail: "Match candidate profiles to job requirements with weighted evaluation logic.",
  },
  {
    title: "Skill and gap detection",
    detail: "Highlight strengths, missing competencies, and transferable experience.",
  },
  {
    title: "Batch candidate ranking",
    detail: "Review ranked pools instantly instead of reading resumes one by one.",
  },
  {
    title: "Recruiter decision support",
    detail: "Provide transparent scoring reasons and interview focus recommendations.",
  },
];

const workflow = [
  "Ingest job descriptions and define weighted hiring criteria.",
  "Import candidate resumes from ATS exports or intake forms.",
  "Generate ranked shortlists with explainable scoring signals.",
  "Hand off qualified candidates to recruiters and hiring managers.",
];

const useCases = [
  "Internal talent acquisition teams",
  "Recruitment agencies handling high candidate volume",
  "Startups hiring quickly across multiple roles",
  "HR teams building fair and repeatable screening pipelines",
];

const themedStyle: CSSProperties = {
  ["--accent-start" as string]: "#ef4660",
  ["--accent-end" as string]: "#ff8f72",
  ["--accent-glow" as string]: "rgba(239, 70, 96, 0.35)",
};

export default function CraftWaveProductPage() {
  return (
    <SiteFrame>
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          itemListElement: [
            { "@type": "ListItem", position: 1, name: "Home", item: "https://meliorate.pro" },
            { "@type": "ListItem", position: 2, name: "Products", item: "https://meliorate.pro/#services" },
            { "@type": "ListItem", position: 3, name: "Craft Wave", item: "https://meliorate.pro/products/craftwave" },
          ],
        }}
      />
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "SoftwareApplication",
          name: "Craft Wave",
          applicationCategory: "BusinessApplication",
          operatingSystem: "Web",
          url: "https://craftwave.ai",
          description: "AI-powered resume screening and candidate ranking to help hiring teams shortlist faster and reduce bias.",
          provider: { "@type": "Organization", name: "Meliorate", url: "https://meliorate.pro" },
        }}
      />
      <section className={styles.pageSection} style={themedStyle}>
        <div className={styles.container}>
          <AnimatedDiv className={styles.heroGrid}>
            <div>
              <span className={styles.eyebrow}>AI Hiring Intelligence</span>
              <h1 className={styles.title}>Craft Wave</h1>
              <p className={styles.headline}>
                Screen faster, shortlist smarter, and reduce hiring bias with Craft Wave.
              </p>
              <p className={styles.description}>
                Craft Wave analyzes resumes and role requirements to identify top-fit candidates in
                seconds, helping recruiting teams focus interviews on qualified, high-potential talent.
              </p>

              <div className={styles.heroActions}>
                <Link href="/contact" className={styles.primaryButton}>
                  Start a Conversation <ArrowRight size={17} />
                </Link>
                <Link href="/#services" className={styles.secondaryButton}>
                  All Products <ChevronRight size={16} />
                </Link>
              </div>
            </div>

            <aside className={styles.heroPanel}>
              <ProductVisual variant="craftwave" />
              <p className={styles.panelTitle}>Built for hiring teams that need speed and consistency.</p>
              <p className={styles.panelText}>
                Bring structured decision support to candidate screening and focus recruiter time where
                it produces the highest hiring impact.
              </p>
            </aside>
          </AnimatedDiv>

          <AnimatedSection className={styles.metricsGrid}>
            {metrics.map((metric) => (
              <article key={metric.label} className={styles.metricCard}>
                <p className={styles.metricValue}>{metric.value}</p>
                <h2 className={styles.metricLabel}>{metric.label}</h2>
                <p className={styles.metricText}>{metric.detail}</p>
              </article>
            ))}
          </AnimatedSection>

          <AnimatedSection className={styles.contentGrid}>
            <article className={styles.block}>
              <h2>Core capabilities</h2>
              <div className={styles.capabilityList}>
                {capabilities.map((item) => (
                  <div key={item.title} className={styles.capabilityItem}>
                    <h3>{item.title}</h3>
                    <p>{item.detail}</p>
                  </div>
                ))}
              </div>
            </article>

            <article className={styles.block}>
              <h2>How implementation works</h2>
              <ol className={styles.workflowList}>
                {workflow.map((step) => (
                  <li key={step}>{step}</li>
                ))}
              </ol>
            </article>
          </AnimatedSection>

          <AnimatedSection className={styles.useCaseBlock}>
            <h2>Where teams use Craft Wave</h2>
            <div className={styles.useCaseGrid}>
              {useCases.map((useCase) => (
                <div key={useCase} className={styles.useCaseItem}>
                  <Check size={16} />
                  <span>{useCase}</span>
                </div>
              ))}
            </div>
          </AnimatedSection>

          <AnimatedSection className={styles.ctaBand}>
            <div>
              <p className={styles.ctaEyebrow}>Execution-focused partnership</p>
              <h2>Want Craft Wave adapted to your hiring process?</h2>
              <p>
                We can tailor scoring criteria, shortlisting logic, and recruiter workflows for your team.
              </p>
            </div>
            <Link href="/contact" className={styles.primaryButton}>
              Contact Meliorate <ArrowRight size={17} />
            </Link>
          </AnimatedSection>
        </div>
      </section>
    </SiteFrame>
  );
}