import React from "react";

interface AboutMarkdownSectionProps {
  content: string;
  title?: string;
  ctaHref?: string;
  ctaLabel?: string;
}

export function AboutMarkdownSection({
  content,
  title = "关于衡感智能",
  ctaHref,
  ctaLabel,
}: AboutMarkdownSectionProps) {
  if (!content) {
    return null;
  }

  const rawParagraphs = content
    .split(/\r?\n+/)
    .map((paragraph) => paragraph.trim())
    .filter(Boolean);

  const paragraphs = rawParagraphs.filter(
    (paragraph, index) => rawParagraphs.indexOf(paragraph) === index,
  );

  if (paragraphs.length === 0) {
    return null;
  }

  const [headline, ...rest] = paragraphs;
  const coreIndex = rest.findIndex((item) => item.startsWith("核心定位"));
  const coreLine =
    coreIndex >= 0 ? rest.splice(coreIndex, 1).at(0) ?? undefined : undefined;

  return (
    <section className="relative overflow-hidden bg-[#0b1629] py-16 text-white md:py-20">
      <div className="absolute inset-0">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(17,138,244,0.3),transparent_65%)]" />
        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-[220px] bg-gradient-to-t from-[#0f1f39] via-transparent to-transparent opacity-60" />
      </div>

      <div className="relative mx-auto w-full max-w-5xl px-4 md:px-6">
        <div className="max-w-3xl">
          <p className="text-xs font-semibold uppercase tracking-[0.46em] text-[#7bc2ff]">
            {title}
          </p>
          <h2 className="mt-4 text-3xl font-semibold leading-tight md:text-[38px] text-white">
            {headline}
          </h2>
        </div>

        <div className="mt-8 grid gap-6 md:grid-cols-[1.1fr_0.9fr] md:items-start md:gap-10">
          <div className="space-y-5 text-sm leading-relaxed text-[#c6dcff] md:text-base md:leading-loose">
            {rest.map((paragraph, index) => (
              <p key={index}>{paragraph}</p>
            ))}
          </div>

          {coreLine && (
            <div className="rounded-3xl border border-[#163156] bg-[linear-gradient(135deg,rgba(17,138,244,0.22),rgba(8,18,32,0.65))] p-6 shadow-[0_24px_60px_rgba(12,30,58,0.35)]">
              <span className="inline-flex items-center rounded-full bg-[#114075]/60 px-3.5 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-[#7bc2ff]">
                Vision
              </span>
              <p className="mt-4 text-lg font-medium leading-relaxed text-white md:text-xl">
                {coreLine}
              </p>
              <p className="mt-3 text-sm text-[#aecbfd]">
                通过 AI 感知、智能硬件与数字孪生协同，让城市结构具备持续演化的自我防御能力，构建一体化的安全决策闭环。
              </p>
            </div>
          )}
        </div>

        {ctaHref && (
          <div className="mt-10 flex flex-wrap items-center gap-4">
            <a
              href={ctaHref}
              download
              className="inline-flex items-center gap-2 rounded-full border border-[#5aa9ff] bg-[#114075] px-6 py-2 text-sm font-medium tracking-[0.16em] text-white transition-colors hover:bg-[#0c3260] hover:text-white"
            >
              <span>{ctaLabel ?? "下载了解方案"}</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-4 w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth="1.5"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M12 4v12m0 0l-4-4m4 4 4-4M4 20h16"
                />
              </svg>
            </a>
            <span className="text-xs uppercase tracking-[0.28em] text-[#7bc2ff]/80">
              AI City Safety Initiative
            </span>
          </div>
        )}
      </div>
    </section>
  );
}