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: "Task Flow",
  description:
    "A high-performance task orchestration platform for modern teams with workflow automation and delivery visibility.",
  alternates: { canonical: "/products/taskflow" },
  openGraph: {
    title: "Task Flow - Workflow Execution Engine",
    description: "High-performance task orchestration platform for modern teams with workflow automation and delivery visibility.",
    url: "/products/taskflow",
  },
};

const metrics = [
  {
    label: "Delivery speed",
    value: "+42%",
    detail: "Automated workflows reduce drag and keep teams focused on priorities.",
  },
  {
    label: "Status accuracy",
    value: "Real-time",
    detail: "Task state changes are synchronized instantly across contributors.",
  },
  {
    label: "Manual overhead",
    value: "-50%",
    detail: "Rules and templates handle repetitive updates and reminders.",
  },
];

const capabilities = [
  {
    title: "Workflow templates",
    detail: "Standardize repeatable operations with reusable task blueprints.",
  },
  {
    title: "Automation rules",
    detail: "Trigger assignments, due dates, and escalations based on conditions.",
  },
  {
    title: "Team load balancing",
    detail: "Distribute work intelligently to prevent bottlenecks and burnout.",
  },
  {
    title: "Execution reporting",
    detail: "Track completion rate, cycle time, and blocker patterns by team.",
  },
];

const workflow = [
  "Define initiative goals and break work into operational streams.",
  "Apply templates and automation rules for each stream.",
  "Monitor execution with live task boards and dependency status.",
  "Review outcomes and refine workflows for the next sprint cycle.",
];

const useCases = [
  "Product and engineering sprint operations",
  "Marketing campaign execution",
  "Client delivery and service operations",
  "Internal process automation and governance",
];

const themedStyle: CSSProperties = {
  ["--accent-start" as string]: "#9f6bff",
  ["--accent-end" as string]: "#58d3f7",
  ["--accent-glow" as string]: "rgba(159, 107, 255, 0.35)",
};

export default function TaskFlowProductPage() {
  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: "Task Flow", item: "https://meliorate.pro/products/taskflow" },
          ],
        }}
      />
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "SoftwareApplication",
          name: "Task Flow",
          applicationCategory: "BusinessApplication",
          operatingSystem: "Web",
          url: "https://taskflow.meliorate.pro",
          description: "High-performance task orchestration platform for modern teams with workflow automation and delivery visibility.",
          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}>Workflow Execution Engine</span>
              <h1 className={styles.title}>Task Flow</h1>
              <p className={styles.headline}>
                High-performance task orchestration for modern teams.
              </p>
              <p className={styles.description}>
                Task Flow helps teams plan, assign, and automate recurring execution with clear ownership,
                fast status updates, and process-level visibility across projects.
              </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="taskflow" />
              <p className={styles.panelTitle}>Built for teams that need reliable execution every week.</p>
              <p className={styles.panelText}>
                Replace fragmented task tracking with one coordinated system for planning, automation,
                and delivery accountability.
              </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 Task Flow</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 Task Flow customized for your team structure?</h2>
              <p>
                We can tailor project templates, automation triggers, and reporting around your workflows.
              </p>
            </div>
            <Link href="/contact" className={styles.primaryButton}>
              Contact Meliorate <ArrowRight size={17} />
            </Link>
          </AnimatedSection>
        </div>
      </section>
    </SiteFrame>
  );
}