X1_Site/site/components/SolutionDetailSection.tsx

import React from "react";

interface SolutionDetailSectionProps {
  content: string;
  title?: string;
  locale?: string;
}

export function SolutionDetailSection({
  content,
  title,
  locale = "zh-CN",
}: SolutionDetailSectionProps) {
  if (!content) {
    return null;
  }

  // 将markdown内容按行分割并处理
  const lines = content.split(/\r?\n/).filter(line => line.trim());
  
  // 解析markdown内容，提取标题和段落
  const sections: Array<{ type: 'title' | 'paragraph'; content: string }> = [];
  
  for (let i = 0; i < lines.length; i++) {
    const line = lines[i].trim();
    if (!line) continue;
    
    // 检测标题（以数字开头，如"一、方案背景"）
    if (/^[一二三四五六七八九十]+[、.]/.test(line) || /^\d+[、.]/.test(line)) {
      sections.push({ type: 'title', content: line });
    } else {
      // 段落内容
      sections.push({ type: 'paragraph', content: line });
    }
  }

  return (
    <section className="relative overflow-hidden bg-[#f3f6fc] py-16 text-[#0f1f39] md:py-20">
      <div className="absolute inset-0 pointer-events-none">
        <div className="h-full w-full bg-[radial-gradient(circle_at_top_left,_rgba(88,133,255,0.08),_transparent_55%)]" />
      </div>

      <div className="relative mx-auto w-full max-w-5xl px-4 md:px-6">
        {title && (
          <div className="mb-8">
            <p className="text-xs font-semibold uppercase tracking-[0.46em] text-[#118af4] mb-3">
              Solution Detail
            </p>
            <h1 className="text-3xl font-semibold leading-tight md:text-[38px] text-[#0f1f39]">
              {title}
            </h1>
          </div>
        )}

        <div className="space-y-8">
          {sections.map((section, index) => {
            if (section.type === 'title') {
              return (
                <h2
                  key={index}
                  className="text-2xl font-semibold text-[#0f1f39] mt-8 mb-4 pb-2 border-b border-[rgba(17,138,244,0.12)]"
                >
                  {section.content}
                </h2>
              );
            } else {
              return (
                <p
                  key={index}
                  className="text-base leading-relaxed text-[#4b5565] md:text-lg md:leading-loose"
                >
                  {section.content}
                </p>
              );
            }
          })}
        </div>
      </div>
    </section>
  );
}