"use client";

import { AppShell } from "@/components/app-shell";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { GoldenRatiosPanel } from "@/components/methodology/golden-ratios-panel";
import { DiscussionRulesPanel } from "@/components/methodology/discussion-rules-panel";
import { ContentChecklistsPanel } from "@/components/methodology/content-checklists-panel";

export default function MethodologyPage() {
  return (
    <AppShell>
      <section className="space-y-6">
        <div>
          <h1 className="text-xl font-bold text-navy">מתודולוגיה</h1>
          <p className="text-sm text-ink-muted mt-1">
            הגדרות ניסוח — יחסי אורך, כללי דיון, וצ׳קליסטים לפי סוג ערר
          </p>
        </div>

        <Card className="bg-surface border-rule shadow-sm">
          <CardContent className="px-6 py-5">
            <Tabs defaultValue="ratios" dir="rtl">
              <TabsList className="bg-rule-soft/60">
                <TabsTrigger value="ratios">יחסי זהב</TabsTrigger>
                <TabsTrigger value="rules">כללי דיון</TabsTrigger>
                <TabsTrigger value="checklists">צ׳קליסטים</TabsTrigger>
              </TabsList>

              <TabsContent value="ratios" className="mt-5">
                <GoldenRatiosPanel />
              </TabsContent>

              <TabsContent value="rules" className="mt-5">
                <DiscussionRulesPanel />
              </TabsContent>

              <TabsContent value="checklists" className="mt-5">
                <ContentChecklistsPanel />
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>
      </section>
    </AppShell>
  );
}
