import React from 'react';
import { ContentTemplate } from '@/components/templates';
import { SectionHead, Card } from '@/components/atoms';
import { DataTable, CardGrid, Flow } from '@/components/molecules';
import { Reveal } from '@/components/organisms';
import { COMPARISON, TIER_STRUCTURES, ONLINE_FLOW } from '@/data/structures';

export default function Structures() {
  return (
    <ContentTemplate
      active="pine/structures"
      kicker="Structures"
      title="课程结构"
      desc="公益课是免费入口（每期独立主题、内容不深入）；线上、线下是两个独立付费产品。付费服务统一内核为「诊断 + 陪跑 + OPC 体系设计」三件套。"
    >
      <Reveal as="section" className="section">
        <SectionHead no="01" title="产品对照" en="Comparison" />
        <DataTable head={COMPARISON.head} rows={COMPARISON.rows} />
      </Reveal>

      <Reveal as="section" className="section">
        <SectionHead no="02" title="线上标准服务 · 结构" en="2 Weeks" />
        <Flow items={ONLINE_FLOW} />
      </Reveal>

      {TIER_STRUCTURES.map((ts) => (
        <Reveal key={ts.no} as="section" className="section">
          <SectionHead no={ts.no} title={ts.name} en={ts.en} />
          <CardGrid cols={ts.cards.length >= 3 ? 3 : 2}>
            {ts.cards.map((c, i) => (
              <Card key={i} title={c.t}>
                <p>{c.p}</p>
              </Card>
            ))}
          </CardGrid>
        </Reveal>
      ))}
    </ContentTemplate>
  );
}