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: "Meliorate CRM",
  description:
    "Automated CRM for lead capture, outreach, and pipeline orchestration to accelerate revenue operations.",
  alternates: { canonical: "/products/crm" },
  openGraph: {
    title: "Meliorate CRM - Revenue Automation Platform",
    description: "Automated CRM for lead capture, outreach, and pipeline orchestration to accelerate revenue operations.",
    url: "/products/crm",
  },
};

const metrics = [
  {
    label: "Outreach scale",
    value: "10x",
    detail: "Run personalized campaigns across email and follow-up sequences with minimal manual work.",
  },
  {
    label: "Lead response",
    value: "<5 min",
    detail: "Automated triggers route and respond to inbound leads while intent is highest.",
  },
  {
    label: "Pipeline visibility",
    value: "100%",
    detail: "Every stage, owner handoff, and next step is visible in real time.",
  },
];

const capabilities = [
  {
    title: "AI lead scoring",
    detail: "Prioritize accounts by intent signals, engagement, and fit profile.",
  },
  {
    title: "Email + sequence automation",
    detail: "Launch targeted campaigns with dynamic copy and intelligent send windows.",
  },
  {
    title: "Deal workflow orchestration",
    detail: "Auto-create tasks, reminders, and playbooks at each pipeline stage.",
  },
  {
    title: "Revenue analytics",
    detail: "Track conversion rates, velocity, and channel performance from one dashboard.",
  },
];

const workflow = [
  "Capture and enrich every lead from forms, campaigns, and partner channels.",
  "Score and segment automatically based on behavior and account quality.",
  "Execute outreach and move opportunities through configurable stages.",
  "Review performance and optimize weekly with conversion diagnostics.",
];

const useCases = [
  "B2B sales teams scaling outbound prospecting",
  "Founders needing a lean, automated GTM engine",
  "Agencies managing multiple client pipelines",
  "RevOps teams standardizing lifecycle reporting",
];

const themedStyle: CSSProperties = {
  ["--accent-start" as string]: "#ff9600",
  ["--accent-end" as string]: "#f2573f",
  ["--accent-glow" as string]: "rgba(242, 87, 63, 0.35)",
};

export default function CrmProductPage() {
  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: "Meliorate CRM", item: "https://meliorate.pro/products/crm" },
          ],
        }}
      />
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "SoftwareApplication",
          name: "Meliorate CRM",
          applicationCategory: "BusinessApplication",
          operatingSystem: "Web",
          url: "https://crm.meliorate.pro",
          description: "Automated CRM for lead capture, outreach, and pipeline orchestration to accelerate revenue operations.",
          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}>Revenue Automation</span>
              <h1 className={styles.title}>Meliorate CRM</h1>
              <p className={styles.headline}>
                Automated CRM designed to move leads from first touch to signed deal.
              </p>
              <p className={styles.description}>
                Meliorate CRM combines lead capture, multichannel outreach, and pipeline intelligence
                in one high-speed system so sales teams spend less time in admin and more time closing.
              </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="crm" />
              <p className={styles.panelTitle}>Built for teams that scale revenue without adding admin overhead.</p>
              <p className={styles.panelText}>
                Combine marketing capture, qualification logic, and pipeline execution in one coordinated
                growth system.
              </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 Meliorate CRM</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 Meliorate CRM adapted to your sales workflow?</h2>
              <p>
                We can tailor architecture, onboarding, and automation logic for your exact operating model.
              </p>
            </div>
            <Link href="/contact" className={styles.primaryButton}>
              Contact Meliorate <ArrowRight size={17} />
            </Link>
          </AnimatedSection>
        </div>
      </section>
    </SiteFrame>
  );
}