import React from "react";

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

export function AboutMarkdownSection({
  content,
  title,
  locale = "zh-CN",
  ctaHref,
  ctaLabel,
  fullHeight = false,
}: AboutMarkdownSectionProps) {
  if (!content) {
    return null;
  }

  const isEnglish = locale === "en";
  const defaultTitle = isEnglish ? "About Henggan" : "关于衡感智能";
  const defaultCtaLabel = isEnglish ? "Download Solution" : "下载了解方案";
  const coreKeyword = isEnglish ? "Core Positioning:" : "核心定位";

  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(coreKeyword));
  
  let coreLine: string | undefined;
  let coreDescription: string | undefined;
  
  if (coreIndex >= 0) {
    // 提取核心定位行
    coreLine = rest[coreIndex];
    
    // 提取核心定位后面的描述文本（如果有的话）
    if (coreIndex + 1 < rest.length) {
      const nextParagraph = rest[coreIndex + 1];
      if (nextParagraph && !nextParagraph.startsWith(coreKeyword)) {
        coreDescription = nextParagraph;
        // 移除核心定位行和描述文本
        rest.splice(coreIndex, 2);
      } else {
        // 只移除核心定位行
        rest.splice(coreIndex, 1);
      }
    } else {
      // 只移除核心定位行
      rest.splice(coreIndex, 1);
    }
  }
  
  // 如果没有找到描述文本，使用默认的
  if (!coreDescription) {
    coreDescription = isEnglish
      ? "Through the synergy of AI perception, intelligent hardware, and digital twins, urban structures can have continuously evolving self-defense capabilities, building an integrated safety decision-making closed loop."
      : "通过 AI 感知、智能硬件与数字孪生协同，让城市结构具备持续演化的自我防御能力，构建一体化的安全决策闭环。";
  }

  const heightClass = fullHeight 
    ? "min-h-[calc(100vh-4rem)] md:min-h-[calc(100vh-6rem)]"
    : "";

  return (
    <section className={`relative overflow-hidden bg-[#f5f7fb] py-16 text-[#0f1f39] md:py-20 ${heightClass}`}>
      <div className="absolute inset-0">
        <div className="pointer-events-none absolute inset-x-0 top-0 h-[320px] bg-gradient-to-b from-white via-[#f5f7fb] to-transparent opacity-60" />
        <div className="pointer-events-none absolute left-[-120px] top-[-140px] h-[360px] w-[360px] rounded-full bg-[radial-gradient(circle,rgba(17,138,244,0.14)_0%,rgba(17,138,244,0)_70%)] blur-3xl opacity-70" />
      </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-[#118af4]">
            {title ?? defaultTitle}
          </p>
          <h2 className="mt-4 text-3xl font-semibold leading-tight md:text-[38px] text-[#0f1f39]">
            {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-[#4b5565] md:text-base md:leading-loose">
            {rest.map((paragraph, index) => (
              <p key={index}>{paragraph}</p>
            ))}
          </div>

          {coreLine && (
            <div className="rounded-3xl border border-[rgba(17,138,244,0.12)] bg-white/95 p-6 shadow-[0_18px_42px_rgba(17,138,244,0.08)]">
              <span className="inline-flex items-center rounded-full bg-[#118af4]/10 px-3.5 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-[#118af4]">
                Vision
              </span>
              <p className="mt-4 text-lg font-medium leading-relaxed text-[#0f1f39] md:text-xl">
                {coreLine}
              </p>
              {coreDescription && (
                <p className="mt-3 text-sm text-[#4b5565]">
                  {coreDescription}
                </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-[#118af4] bg-[#118af4] px-6 py-2 text-sm font-medium tracking-[0.16em] text-white transition-colors hover:bg-[#0d6efd] hover:border-[#0d6efd]"
            >
              <span>{ctaLabel ?? defaultCtaLabel}</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-[#118af4]/70">
              AI City Safety Initiative
            </span>
          </div>
        )}
      </div>
    </section>
  );
}