simplificando app

components/MovieInsightPanel.tsx

@@ -1,35 +1,17 @@
 "use client";
 
 import { useState } from "react";
-import {
-  CARD_META,
-  CARD_TYPES,
-  shouldShowHistoricalAccuracy,
-  type CardType,
-} from "@/lib/cards";
+import { CARD_META, CARD_TYPES, type CardType } from "@/lib/cards";
 import { CardContent } from "./cards/CardContent";
 import { InfoCard } from "./InfoCard";
 
-export function MovieInsightPanel({
-  movieId,
-  genres,
-}: {
-  movieId: number;
-  genres: string[];
-}) {
-  const visibleCards = CARD_TYPES.filter((type) => {
-    if (type === "historical_accuracy") {
-      return shouldShowHistoricalAccuracy(genres);
-    }
-    return true;
-  });
-
-  const [selected, setSelected] = useState<CardType>(visibleCards[0]);
+export function MovieInsightPanel({ movieId }: { movieId: number }) {
+  const [selected, setSelected] = useState<CardType>(CARD_TYPES[0]);
 
   return (
     <div className="space-y-6">
-      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
-        {visibleCards.map((type) => (
+      <div className="grid gap-4 sm:grid-cols-2">
+        {CARD_TYPES.map((type) => (
           <InfoCard
             key={type}
             meta={CARD_META[type]}
@@ -46,4 +28,4 @@ export function MovieInsightPanel({
       />
     </div>
   );
-}
+}

components/cards/CardContent.tsx

@@ -2,12 +2,8 @@
 
 import { useEffect, useState } from "react";
 import type { CardType } from "@/lib/cards";
-import { HistoricalAccuracyView } from "./HistoricalAccuracy";
 import { InternationalRatingsView } from "./InternationalRatings";
-import { ProductionFactsView } from "./ProductionFacts";
 import { RatingExplainedView } from "./RatingExplained";
-import { SensitivityGuideView } from "./SensitivityGuide";
-import { SkipGuideView } from "./SkipGuide";
 
 interface CardContentProps {
   movieId: number;
@@ -99,17 +95,9 @@ export function CardContent({ movieId, cardType }: CardContentProps) {
   switch (cardType) {
     case "rating_explained":
       return <RatingExplainedView data={data} />;
-    case "skip_guide":
-      return <SkipGuideView data={data} />;
-    case "sensitivity_guide":
-      return <SensitivityGuideView data={data} />;
     case "international_ratings":
       return <InternationalRatingsView data={data} />;
-    case "production_facts":
-      return <ProductionFactsView data={data} />;
-    case "historical_accuracy":
-      return <HistoricalAccuracyView data={data} />;
     default:
       return null;
   }
-}
+}

components/cards/HistoricalAccuracy.tsx

@@ -1,76 +0,0 @@
-import {
-  historicalAccuracySchema,
-  type HistoricalAccuracy,
-} from "@/lib/schemas";
-
-export function HistoricalAccuracyView({ data }: { data: unknown }) {
-  const result = historicalAccuracySchema.safeParse(data);
-  if (!result.success) {
-    return (
-      <div className="rounded-2xl border border-stone-200 bg-white p-6 text-sm text-stone-700">
-        Could not display this insight (data format issue). Try another card or refresh later.
-      </div>
-    );
-  }
-  const parsed = result.data as HistoricalAccuracy;
-
-  return (
-    <div className="space-y-5 rounded-2xl border border-stone-200 bg-white p-6">
-      <div className="flex items-end gap-4">
-        <div>
-          <p className="text-xs uppercase tracking-wide text-stone-500">
-            Accuracy score
-          </p>
-          <p className="text-4xl font-semibold text-amber-700">
-            {parsed.accuracyScore}
-            <span className="text-lg text-stone-500">/100</span>
-          </p>
-        </div>
-        <p className="pb-1 text-sm capitalize text-stone-600">
-          Confidence: {parsed.confidence}
-        </p>
-      </div>
-
-      <p className="text-stone-700">{parsed.summary}</p>
-
-      {parsed.accurateElements.length > 0 && (
-        <div>
-          <p className="mb-2 text-sm font-medium text-stone-950">What holds up</p>
-          <ul className="space-y-2">
-            {parsed.accurateElements.map((item) => (
-              <li
-                key={item}
-                className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-stone-700"
-              >
-                {item}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {parsed.inventions.length > 0 && (
-        <div>
-          <p className="mb-2 text-sm font-medium text-stone-950">
-            Dramatizations & inventions
-          </p>
-          <div className="space-y-3">
-            {parsed.inventions.map((item, index) => (
-              <div
-                key={`${item.claim}-${index}`}
-                className="rounded-xl border border-stone-200 bg-stone-100 p-4"
-              >
-                <p className="text-sm text-stone-700">
-                  <span className="text-stone-500">Film claim:</span> {item.claim}
-                </p>
-                <p className="mt-2 text-sm text-stone-700">
-                  <span className="text-stone-500">Reality:</span> {item.reality}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

components/cards/ProductionFacts.tsx

@@ -1,70 +0,0 @@
-import {
-  productionFactsSchema,
-  type ProductionFacts,
-} from "@/lib/schemas";
-
-export function ProductionFactsView({ data }: { data: unknown }) {
-  const result = productionFactsSchema.safeParse(data);
-  if (!result.success) {
-    return (
-      <div className="rounded-2xl border border-stone-200 bg-white p-6 text-sm text-stone-700">
-        Could not display this insight (data format issue). Try another card or refresh later.
-      </div>
-    );
-  }
-  const parsed = result.data as ProductionFacts;
-
-  return (
-    <div className="space-y-5 rounded-2xl border border-stone-200 bg-white p-6">
-      {(parsed.budget || parsed.boxOffice) && (
-        <div className="grid gap-3 sm:grid-cols-2">
-          {parsed.budget ? <Stat label="Budget" value={parsed.budget} /> : null}
-          {parsed.boxOffice ? (
-            <Stat label="Box office" value={parsed.boxOffice} />
-          ) : null}
-        </div>
-      )}
-
-      {parsed.filmingLocations?.length ? (
-        <div>
-          <p className="mb-2 text-sm text-stone-600">Filming locations</p>
-          <div className="flex flex-wrap gap-2">
-            {parsed.filmingLocations.map((location) => (
-              <span
-                key={location}
-                className="rounded-full border border-stone-200 bg-stone-100 px-3 py-1 text-sm text-stone-700"
-              >
-                {location}
-              </span>
-            ))}
-          </div>
-        </div>
-      ) : null}
-
-      <div className="space-y-3">
-        {parsed.facts.map((item, index) => (
-          <div
-            key={`${item.category}-${index}`}
-            className="rounded-xl border border-stone-200 bg-stone-100 p-4"
-          >
-            <p className="text-xs uppercase tracking-wide text-amber-700">
-              {item.category}
-            </p>
-            <p className="mt-2 text-sm leading-relaxed text-stone-700">
-              {item.fact}
-            </p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function Stat({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="rounded-xl border border-stone-200 bg-stone-100 p-4">
-      <p className="text-xs uppercase tracking-wide text-stone-500">{label}</p>
-      <p className="mt-1 text-lg font-medium text-stone-950">{value}</p>
-    </div>
-  );
-}

components/cards/SensitivityGuide.tsx

@@ -1,56 +0,0 @@
-import {
-  sensitivityGuideSchema,
-  type SensitivityGuide,
-} from "@/lib/schemas";
-import { cn } from "@/lib/utils";
-
-const severityColors = {
-  mild: "border-emerald-400/20 bg-emerald-400/5",
-  moderate: "border-amber-400/20 bg-amber-400/5",
-  strong: "border-red-400/20 bg-red-400/5",
-};
-
-export function SensitivityGuideView({ data }: { data: unknown }) {
-  const result = sensitivityGuideSchema.safeParse(data);
-  if (!result.success) {
-    return (
-      <div className="rounded-2xl border border-stone-200 bg-white p-6 text-sm text-stone-700">
-        Could not display this insight (data format issue). Try another card or refresh later.
-      </div>
-    );
-  }
-  const parsed = result.data as SensitivityGuide;
-
-  return (
-    <div className="space-y-5 rounded-2xl border border-stone-200 bg-white p-6">
-      <p className="text-stone-700">{parsed.summary}</p>
-
-      <div className="space-y-3">
-        {parsed.themes.map((theme, index) => (
-          <div
-            key={`${theme.theme}-${index}`}
-            className={cn(
-              "rounded-xl border p-4",
-              severityColors[theme.severity],
-            )}
-          >
-            <div className="mb-2 flex flex-wrap items-center gap-2">
-              <h4 className="font-medium text-stone-950">{theme.theme}</h4>
-              <span className="text-xs capitalize text-stone-600">
-                {theme.severity}
-              </span>
-              {theme.approximateTiming ? (
-                <span className="text-xs text-stone-500">
-                  ~{theme.approximateTiming}
-                </span>
-              ) : null}
-            </div>
-            <p className="text-sm leading-relaxed text-stone-700">
-              {theme.description}
-            </p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

components/cards/SkipGuide.tsx

@@ -1,124 +0,0 @@
-import { skipGuideSchema, type SkipGuide } from "@/lib/schemas";
-import { cn } from "@/lib/utils";
-
-const recommendationStyles = {
-  recommended: "bg-red-100 text-red-700 border-red-200",
-  optional: "bg-amber-100 text-amber-700 border-amber-200",
-  do_not_skip: "bg-stone-200 text-stone-700 border-stone-300",
-};
-
-const recommendationLabels = {
-  recommended: "Recommended skip",
-  optional: "Optional skip",
-  do_not_skip: "Do not skip",
-};
-
-function parseTimestamp(value: string): number {
-  const hours = value.match(/(\d+)\s*h/i);
-  const minutes = value.match(/(\d+)\s*m/i);
-  return (hours ? Number(hours[1]) * 60 : 0) + (minutes ? Number(minutes[1]) : 0);
-}
-
-export function SkipGuideView({ data }: { data: unknown }) {
-  const result = skipGuideSchema.safeParse(data);
-  if (!result.success) {
-    return (
-      <div className="rounded-2xl border border-stone-200 bg-white p-6 text-sm text-stone-700">
-        Could not display this insight (data format issue). Try another card or refresh later.
-      </div>
-    );
-  }
-  const parsed = result.data as SkipGuide;
-  const maxMinutes = Math.max(
-    ...parsed.segments.map((segment) => parseTimestamp(segment.end)),
-    120,
-  );
-
-  return (
-    <div className="space-y-5 rounded-2xl border border-stone-200 bg-white p-6">
-      <div className="grid gap-4 sm:grid-cols-3">
-        <Stat label="Original rating" value={parsed.originalRating} />
-        <Stat
-          label="Suggested age after skips"
-          value={`${parsed.suggestedAudienceAge}+`}
-        />
-        <Stat
-          label="Skippable runtime"
-          value={`${parsed.totalSkippedMinutes} min`}
-        />
-      </div>
-
-      <div>
-        <p className="mb-2 text-sm text-stone-600">Content timeline</p>
-        <div className="relative h-4 overflow-hidden rounded-full bg-emerald-400/20">
-          {parsed.segments.map((segment, index) => {
-            const start = parseTimestamp(segment.start);
-            const end = parseTimestamp(segment.end);
-            const left = (start / maxMinutes) * 100;
-            const width = Math.max(((end - start) / maxMinutes) * 100, 1.5);
-
-            return (
-              <div
-                key={`${segment.start}-${index}`}
-                className={cn(
-                  "absolute top-0 h-full rounded-full",
-                  segment.skipRecommendation === "do_not_skip"
-                    ? "bg-stone-300"
-                    : "bg-red-500/80",
-                )}
-                style={{ left: `${left}%`, width: `${width}%` }}
-                title={`${segment.start} – ${segment.end}`}
-              />
-            );
-          })}
-        </div>
-        <div className="mt-2 flex justify-between text-xs text-stone-500">
-          <span>0:00</span>
-          <span>{Math.floor(maxMinutes / 60)}h {maxMinutes % 60}m</span>
-        </div>
-      </div>
-
-      <div className="space-y-3">
-        {parsed.segments.map((segment, index) => (
-          <div
-            key={`${segment.start}-${segment.end}-${index}`}
-            className="rounded-xl border border-stone-200 bg-stone-100 p-4"
-          >
-            <div className="mb-2 flex flex-wrap items-center gap-2">
-              <span className="font-medium text-stone-950">
-                {segment.start} – {segment.end}
-              </span>
-              <span
-                className={cn(
-                  "rounded-full border px-2 py-0.5 text-xs",
-                  recommendationStyles[segment.skipRecommendation],
-                )}
-              >
-                {recommendationLabels[segment.skipRecommendation]}
-              </span>
-              <span className="text-xs capitalize text-stone-500">
-                Plot impact: {segment.plotImpact.replace("_", " ")}
-              </span>
-            </div>
-            <p className="text-sm text-stone-700">{segment.reason}</p>
-            <p className="mt-2 text-sm text-stone-600">
-              <span className="text-stone-500">Resume hint:</span>{" "}
-              {segment.resumeHint}
-            </p>
-          </div>
-        ))}
-      </div>
-
-      <p className="text-xs text-stone-500">{parsed.disclaimer}</p>
-    </div>
-  );
-}
-
-function Stat({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="rounded-xl border border-stone-200 bg-stone-100 p-4">
-      <p className="text-xs uppercase tracking-wide text-stone-500">{label}</p>
-      <p className="mt-1 text-lg font-medium text-stone-950">{value}</p>
-    </div>
-  );
-}