completely refactored utilities for direct rendering, killed iframes

components/buying-guide/.bak/finder/page.tsx

@@ -0,0 +1,322 @@
+// app/buying-guide/finder/page.tsx
+"use client";
+
+import { useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import type { Answers, LaserType } from "@/lib/laser-finder";
+import { scoreAnswers, LASER_LABEL, TYPE_INFO } from "@/lib/laser-finder";
+import Link from "next/link";
+
+export default function LaserFinderPage() {
+    const [result, setResult] = useState<{
+        top: LaserType[];
+        score: Record<LaserType, number>;
+        why: Record<LaserType, string[]>;
+    } | null>(null);
+
+    const { register, handleSubmit, reset, watch } = useForm<Answers>({
+        defaultValues: {
+            materials: [],
+            operations: [],
+            part_size: "medium",
+            detail: "medium",
+            throughput: "medium",
+            budget: "mid",
+        },
+    });
+
+    const onSubmit = (vals: Answers) => {
+        const { ranked, score, why } = scoreAnswers(vals);
+        setResult({ top: ranked.slice(0, 2), score, why });
+        // (Optional) later: POST vals to Directus for analytics
+    };
+
+    const selectedMaterials = watch("materials");
+    const selectedOps = watch("operations");
+
+    return (
+        <div className="max-w-4xl mx-auto py-8 space-y-6">
+        <h1 className="text-2xl font-semibold">Laser Type Finder</h1>
+        <p className="text-sm text-muted-foreground">
+        Answer a few questions and we’ll suggest the best laser <em>types</em> for your work
+        with clear use-cases, materials, and cautions. No product pitches—just guidance.
+        </p>
+
+        {!result && (
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            {/* Materials */}
+            <fieldset className="border rounded p-4">
+            <legend className="font-medium">Materials (select all that apply)</legend>
+            <div className="grid sm:grid-cols-2 gap-2 mt-2">
+            {[
+                ["metals_bare", "Bare metals"],
+                ["metals_coated", "Coated/painted metals"],
+                ["plastics", "Plastics"],
+                ["wood_paper_leather", "Wood, paper, leather"],
+                ["glass_ceramic", "Glass / ceramic"],
+                ["stone", "Stone"],
+                ["textiles", "Textiles"],
+            ].map(([val, label]) => (
+                <label key={val} className="flex items-center gap-2 text-sm">
+                <input type="checkbox" value={val} {...register("materials")} /> {label}
+                </label>
+            ))}
+            </div>
+            {selectedMaterials?.length === 0 && (
+                <p className="text-xs text-amber-600 mt-2">Tip: choose at least one material for a better match.</p>
+            )}
+            </fieldset>
+
+            {/* Operations */}
+            <fieldset className="border rounded p-4">
+            <legend className="font-medium">Typical operations (select all that apply)</legend>
+            <div className="grid sm:grid-cols-2 gap-2 mt-2">
+            {[
+                ["deep_mark_metal", "Deep mark on metal"],
+                ["color_mark_stainless", "Color mark stainless"],
+                ["fine_engraving", "Fine engraving (small features)"],
+                     ["photo_engrave", "Photo engraving"],
+                     ["cut_nonmetals_thick", "Cut thick non-metals (e.g., 6+ mm acrylic/wood)"],
+                     ["cut_nonmetals_thin", "Cut thin non-metals"],
+                     ["mark_coated", "Mark coated items"],
+            ].map(([val, label]) => (
+                <label key={val} className="flex items-center gap-2 text-sm">
+                <input type="checkbox" value={val} {...register("operations")} /> {label}
+                </label>
+            ))}
+            </div>
+            {selectedOps?.length === 0 && (
+                <p className="text-xs text-amber-600 mt-2">Tip: pick one or more to sharpen the recommendation.</p>
+            )}
+            </fieldset>
+
+            {/* Size / Detail / Speed / Budget */}
+            <div className="grid sm:grid-cols-4 gap-4">
+            <div>
+            <label className="block text-sm mb-1">Part size</label>
+            <select className="w-full border rounded px-2 py-1" {...register("part_size")}>
+            <option value="small">Small (≤ 200 mm)</option>
+            <option value="medium">Medium (≤ 600 mm)</option>
+            <option value="large">Large (&gt; 600 mm)</option>
+            </select>
+            </div>
+            <div>
+            <label className="block text-sm mb-1">Detail</label>
+            <select className="w-full border rounded px-2 py-1" {...register("detail")}>
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high">High</option>
+            <option value="micro">Micro</option>
+            </select>
+            </div>
+            <div>
+            <label className="block text-sm mb-1">Throughput</label>
+            <select className="w-full border rounded px-2 py-1" {...register("throughput")}>
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high">High</option>
+            </select>
+            </div>
+            <div>
+            <label className="block text-sm mb-1">Budget</label>
+            <select className="w-full border rounded px-2 py-1" {...register("budget")}>
+            <option value="low">Lower</option>
+            <option value="mid">Mid</option>
+            <option value="high">Higher</option>
+            </select>
+            </div>
+            </div>
+
+            <div className="flex items-center gap-3">
+            <button className="px-3 py-2 border rounded bg-accent text-background hover:opacity-90" type="submit">
+            Get recommendations
+            </button>
+            <Link className="text-sm underline hover:no-underline" href="/buying-guide">
+            Back to Buying Guide
+            </Link>
+            </div>
+            </form>
+        )}
+
+        {!!result && (
+            <div className="space-y-6">
+            <ResultCard
+            title="Top recommendation"
+            type={result.top[0]}
+            why={result.why[result.top[0]]}
+            />
+
+            {result.top[1] && (
+                <ResultCard
+                title="Alternative to consider"
+                type={result.top[1]}
+                why={result.why[result.top[1]]}
+                secondary
+                />
+            )}
+
+            <CompareMatrix />
+
+            <div className="flex items-center gap-3">
+            <button className="px-3 py-2 border rounded hover:bg-muted" onClick={() => setResult(null)}>
+            Start over
+            </button>
+            <button
+            className="px-3 py-2 border rounded hover:bg-muted"
+            onClick={() => { reset(); setResult(null); }}
+            >
+            New answers
+            </button>
+            <Link className="text-sm underline hover:no-underline" href="/buying-guide">
+            Back to Buying Guide
+            </Link>
+            </div>
+            </div>
+        )}
+        </div>
+    );
+}
+
+function ResultCard({
+    title,
+    type,
+    why,
+    secondary,
+}: {
+    title: string;
+    type: LaserType;
+    why?: string[];
+    secondary?: boolean;
+}) {
+    const info = TYPE_INFO[type];
+
+    return (
+        <div className="rounded border p-4 space-y-3">
+        <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">{title}</h2>
+        {!secondary && <span className="text-xs rounded bg-muted px-2 py-0.5">Best match</span>}
+        </div>
+        <div className="text-base font-medium">{LASER_LABEL[type]}</div>
+        <p className="text-sm text-muted-foreground">{info.summary}</p>
+
+        {!!why?.length && (
+            <div>
+            <div className="text-sm font-medium mb-1">Why this fits</div>
+            <ul className="list-disc pl-5 text-sm space-y-1">
+            {why.slice(0, 5).map((w, i) => <li key={i}>{w}</li>)}
+            </ul>
+            </div>
+        )}
+
+        <div className="grid sm:grid-cols-3 gap-3 text-sm">
+        <TagList label="Best for" items={info.bestFor} />
+        <TagList label="Materials" items={info.materials} />
+        <TagList label="Cautions" items={info.cautions} tone="warn" />
+        </div>
+
+        <div className="flex items-center gap-3 pt-1">
+        <Link className="text-sm underline hover:no-underline" href={info.learnLink}>
+        See community settings
+        </Link>
+        <Link className="text-sm underline hover:no-underline" href="/submit/settings?target=settings_fiber">
+        Suggest new settings
+        </Link>
+        </div>
+        </div>
+    );
+}
+
+function TagList({
+    label,
+    items,
+    tone,
+}: {
+    label: string;
+    items: string[];
+    tone?: "warn";
+}) {
+    return (
+        <div>
+        <div className="text-sm font-medium mb-1">{label}</div>
+        <div className="flex flex-wrap gap-2">
+        {items.map((t, i) => (
+            <span
+            key={i}
+            className={`text-xs px-2 py-1 rounded border ${
+                tone === "warn" ? "bg-amber-50 border-amber-200" : "bg-muted"
+            }`}
+            >
+            {t}
+            </span>
+        ))}
+        </div>
+        </div>
+    );
+}
+
+function CompareMatrix() {
+    const rows: Array<{
+        k: LaserType;
+        label: string;
+        best: string[];
+        ok: string[];
+        avoid: string[];
+    }> = [
+        {
+            k: "fiber",
+            label: LASER_LABEL.fiber,
+            best: ["Bare metals", "Deep metal engrave", "Color marking stainless"],
+            ok: ["Some coated items", "Some plastics w/ additives"],
+            avoid: ["Thick organics cutting"],
+        },
+        {
+            k: "co2_gantry",
+            label: LASER_LABEL.co2_gantry,
+            best: ["Acrylic cutting", "Wood cutting/engraving", "Large panels"],
+            ok: ["Leathers, textiles, rubber"],
+            avoid: ["Bare metals (no coat)"],
+        },
+        {
+            k: "co2_galvo",
+            label: LASER_LABEL.co2_galvo,
+            best: ["Fast marking organics", "Photo engraving organics"],
+            ok: ["Coated metals/non-metals"],
+            avoid: ["Thick sheet cutting", "Large panels"],
+        },
+        {
+            k: "uv",
+            label: LASER_LABEL.uv,
+            best: ["Micro features", "Glass/ceramic/plastics marking"],
+            ok: ["Fine logos on coated metals"],
+            avoid: ["Thick cutting"],
+        },
+    ];
+
+    return (
+        <div className="rounded border p-4">
+        <div className="text-sm font-medium mb-2">Compare laser types</div>
+        <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+        <thead>
+        <tr className="text-left border-b">
+        <th className="py-2 pr-3">Type</th>
+        <th className="py-2 pr-3">Best for</th>
+        <th className="py-2 pr-3">Okay for</th>
+        <th className="py-2">Not ideal</th>
+        </tr>
+        </thead>
+        <tbody>
+        {rows.map((r) => (
+            <tr key={r.k} className="border-b last:border-0 align-top">
+            <td className="py-2 pr-3 font-medium">{r.label}</td>
+            <td className="py-2 pr-3">{r.best.join(", ")}</td>
+            <td className="py-2 pr-3">{r.ok.join(", ")}</td>
+            <td className="py-2">{r.avoid.join(", ")}</td>
+            </tr>
+        ))}
+        </tbody>
+        </table>
+        </div>
+        </div>
+    );
+}

components/buying-guide/.bak/layout.tsx

@@ -0,0 +1,4 @@
+import { Suspense } from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <Suspense fallback={null}>{children}</Suspense>;
+}

components/buying-guide/.bak/page.tsx

@@ -0,0 +1,342 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+interface Entry {
+  id: number;
+  product_make: string;
+  product_model: string;
+  product_price?: string;
+  review_overview_text?: string;
+  bg_entry_sub_cat?: number;
+  bg_entry_cat?: number;
+  index?: {
+    id: string;
+    filename_disk?: string;
+    type?: string;
+  };
+  header?: {
+    id: string;
+    filename_disk?: string;
+    type?: string;
+  };
+}
+
+interface SubCategory {
+  id: number;
+  name: string;
+  bg_entry_cat?: number;
+}
+
+interface Category {
+  id: number;
+  name: string;
+}
+
+export default function BuyingGuidePage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [subcategories, setSubcategories] = useState<SubCategory[]>([]);
+  const [selectedCat, setSelectedCat] = useState("");
+  const [selectedSubCat, setSelectedSubCat] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [entriesRes, catRes, subCatRes] = await Promise.all([
+          fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_entries?fields=id,index.id,index.filename_disk,index.type,header.id,header.filename_disk,product_make,product_model,product_price,review_overview_text,bg_entry_cat,bg_entry_sub_cat&limit=-1&sort[]=sort`),
+          fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_cat?fields=id,name&limit=-1`),
+          fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_sub_cat?fields=id,name,bg_entry_cat&limit=-1`),
+        ]);
+
+        const [entriesData, catData, subCatData] = await Promise.all([
+          entriesRes.json(),
+          catRes.json(),
+          subCatRes.json(),
+        ]);
+
+        setEntries(entriesData?.data || []);
+        setCategories(catData?.data || []);
+        setSubcategories(subCatData?.data || []);
+        setLoading(false);
+      } catch (err) {
+        console.error("Error fetching data:", err);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");
+
+  const filtered = useMemo(() => {
+    const q = normalize(debouncedQuery);
+    return entries.filter((entry) => {
+      const catMatch = selectedCat ? entry.bg_entry_cat === parseInt(selectedCat) : true;
+      const subCatMatch = selectedSubCat ? entry.bg_entry_sub_cat === parseInt(selectedSubCat) : true;
+      const searchMatch = q
+        ? [entry.product_make, entry.product_model, entry.review_overview_text].some((field) =>
+            normalize(field || "").includes(q)
+          )
+        : true;
+      return catMatch && subCatMatch && searchMatch;
+    });
+  }, [entries, debouncedQuery, selectedCat, selectedSubCat]);
+
+  const filteredSubcategories = useMemo(() => {
+    return selectedCat
+      ? subcategories.filter((sub) => sub.bg_entry_cat === parseInt(selectedCat))
+      : subcategories;
+  }, [subcategories, selectedCat]);
+
+  const featuredEntry = useMemo(() => {
+    if (!entries.length) return null;
+    const randomIndex = Math.floor(Math.random() * entries.length);
+    return entries[randomIndex];
+  }, [entries]);
+
+  const secondFeaturedEntry = useMemo(() => {
+    if (entries.length < 2) return null;
+    let secondIndex = Math.floor(Math.random() * entries.length);
+    while (entries[secondIndex].id === featuredEntry?.id) {
+      secondIndex = Math.floor(Math.random() * entries.length);
+    }
+    return entries[secondIndex];
+  }, [entries, featuredEntry]);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+        .card-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+          gap: 1rem;
+        }
+        .entry-card {
+          display: flex;
+          background-color: #242424;
+          color: var(--card-foreground);
+          border: 1px solid var(--border);
+          border-radius: 0.5rem;
+          overflow: hidden;
+          height: 150px;
+        }
+        .entry-image {
+          width: 150px;
+          height: 150px;
+          object-fit: cover;
+        }
+        .entry-content {
+          padding: 0.75rem;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+        .truncate-title {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      `}</style>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-2xl font-bold mb-2">Buying Guide</h1>
+          <select
+            className="w-full border rounded px-3 py-2 mb-2"
+            value={selectedCat}
+            onChange={(e) => {
+              setSelectedCat(e.target.value);
+              setSelectedSubCat("");
+            }}
+          >
+            <option value="">All Categories</option>
+            {categories.map((cat) => (
+              <option key={cat.id} value={cat.id.toString()}>
+                {cat.name}
+              </option>
+            ))}
+          </select>
+          <select
+            className="w-full border rounded px-3 py-2 mb-2"
+            value={selectedSubCat}
+            onChange={(e) => setSelectedSubCat(e.target.value)}
+          >
+            <option value="">All Subcategories</option>
+            {filteredSubcategories.map((sub) => (
+              <option key={sub.id} value={sub.id.toString()}>
+                {sub.name}
+              </option>
+            ))}
+          </select>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search products by make, model, etc..."
+            className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <p className="text-sm text-muted-foreground mb-2">
+            Discover reviewed laser products and accessories.
+          </p>
+          <a
+            href="/"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </a>
+        </div>
+
+        {[featuredEntry, secondFeaturedEntry].map((entry, idx) => (
+          entry && (
+            <div key={idx} className="card bg-card text-card-foreground p-4">
+              <h2 className="text-md font-semibold mb-2">Featured Product</h2>
+              {entry.header?.filename_disk ? (
+                <Image
+                  src={`https://forms.lasereverything.net/assets/${entry.header.filename_disk}`}
+                  alt="Header image"
+                  width={800}
+                  height={100}
+                  className="w-full h-[100px] object-cover mb-2 rounded-md"
+                  unoptimized
+                />
+              ) : (
+                <div className="w-full h-[100px] bg-zinc-800 flex items-center justify-center text-zinc-400 text-sm rounded-md mb-2">
+                  No Header
+                </div>
+              )}
+              <Link
+                href={`/buying-guide/product/${entry.id}`}
+                className="text-accent font-semibold text-lg hover:underline"
+              >
+                {entry.product_make} {entry.product_model}
+              </Link>
+              {entry.product_price && (
+                <p className="text-sm text-white">Starting at {entry.product_price}</p>
+              )}
+              <p className="text-sm text-muted-foreground mt-1">
+                {entry.review_overview_text?.slice(0, 140)}...
+              </p>
+            </div>
+          )
+        ))}
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">Popular Categories</h2>
+          <ul className="text-sm space-y-1">
+            {categories.slice(0, 5).map((cat) => (
+              <li key={cat.id}>
+                <button
+                  onClick={() => {
+                    setSelectedCat(cat.id.toString());
+                    setSelectedSubCat("");
+                  }}
+                  className="text-accent hover:underline"
+                >
+                  {cat.name}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">Recently Added</h2>
+          <ul className="text-sm space-y-1">
+            {entries.slice(0, 3).map((e) => (
+              <li key={e.id}>
+                <Link href={`/buying-guide/product/${e.id}`} className="text-accent hover:underline">
+                  {e.product_make} {e.product_model}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">What Is This?</h2>
+          <p className="text-sm text-muted-foreground">
+            This Buying Guide helps you compare laser-related gear with hands-on reviews, scores, and recommendations. Use the filters and search to find what you’re looking for!
+          </p>
+        </div>
+      </div>
+
+      <hr className="my-8 border-border" />
+
+      {loading ? (
+        <p className="text-muted">Loading entries...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No entries found.</p>
+      ) : (
+        <div className="card-grid">
+          {filtered.map((entry) => {
+            const filename = entry.index?.filename_disk;
+            return (
+              <div key={entry.id} className="entry-card">
+                {filename ? (
+                  <Image
+                    src={`https://forms.lasereverything.net/assets/${filename}`}
+                    alt={`${entry.product_make} ${entry.product_model}`}
+                    width={150}
+                    height={150}
+                    className="entry-image"
+                    unoptimized
+                  />
+                ) : (
+                  <div className="entry-image bg-zinc-800 flex items-center justify-center text-zinc-400">
+                    No Image
+                  </div>
+                )}
+                <div className="entry-content">
+                  <div>
+                    <p className="text-sm font-medium text-muted-foreground truncate-title">
+                      {entry.product_make}
+                    </p>
+                    <Link
+                      href={`/buying-guide/product/${entry.id}`}
+                      className="text-lg font-semibold text-accent underline truncate-title"
+                      title={entry.product_model}
+                    >
+                      {entry.product_model}
+                    </Link>
+                    {entry.product_price !== undefined && (
+                      <p className="text-sm text-foreground mt-1 font-medium">
+                        Starting at {entry.product_price}
+                      </p>
+                    )}
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {entry.review_overview_text?.slice(0, 120)}...
+                    </p>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+

components/buying-guide/.bak/product/[id]/page.tsx

@@ -0,0 +1,188 @@
+// app/buying-guide/product/[id]/page.tsx
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+
+const API_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
+const ASSET_URL = process.env.NEXT_PUBLIC_ASSET_URL;
+
+async function getEntry(id: string) {
+  const res = await fetch(
+    `${API_URL}/items/bg_entries/${id}?fields=*,links.id,links.text,links.url,links.target,scores.id,scores.cat,scores.value,scores.body,header.id,date_updated`,
+    {
+      cache: "no-store",
+    }
+  );
+
+  if (!res.ok) {
+    const error = await res.text();
+    console.error(`Failed to fetch entry: ${error}`);
+    throw new Error(`Error fetching entry ${id}`);
+  }
+
+  const { data } = await res.json();
+  return data;
+}
+
+export default async function ProductDetail({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const id = (await params).id;
+  const entry = await getEntry(id);
+
+  const avgScore =
+    entry?.scores?.length > 0
+      ? (
+          entry.scores.reduce((sum: number, s: any) => sum + Number(s.value), 0) /
+          entry.scores.length
+        ).toFixed(1)
+      : "N/A";
+
+  const headerUrl = entry.header?.id
+    ? `${ASSET_URL}/assets/${entry.header.id}?cache-buster=${entry.date_updated}&key=system-large-contain`
+    : null;
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8 space-y-6">
+      {/* Header Banner */}
+      {headerUrl && (
+        <div className="w-full h-64 relative overflow-hidden rounded-xl shadow">
+          <img
+            src={headerUrl}
+            alt="Header Image"
+            className="object-cover w-full h-full rounded-xl"
+          />
+        </div>
+      )}
+
+      {/* Title */}
+      <div className="flex justify-between items-start">
+        <div>
+          <h2 className="text-xl font-semibold text-white">{entry.product_make}</h2>
+          <h1 className="text-4xl font-bold text-yellow-500 mt-2">{entry.product_model}</h1>
+        </div>
+        <div className="text-right">
+          {entry.product_price && (
+            <p className="text-lg text-white font-medium mt-1">
+              {entry.product_price.startsWith("Starting at") ? entry.product_price : `Starting at ${entry.product_price}`}
+            </p>
+          )}
+          <Link
+            href="/buying-guide"
+            className="text-sm text-blue-500 underline mt-2 inline-block"
+          >
+            ← Back to Buying Guide
+          </Link>
+        </div>
+      </div>
+
+      {/* Links & Score Summary */}
+      {(Array.isArray(entry.links) || Array.isArray(entry.scores)) && (
+        <div className="flex flex-col md:flex-row gap-8">
+          {Array.isArray(entry.links) && entry.links.length > 0 && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Links</h3>
+              <ul className="list-disc ml-6 space-y-1">
+                {entry.links.map((link: any, idx: number) => (
+                  <li key={idx}>
+                    <a
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-700 underline"
+                    >
+                      {link.text || link.url}
+                    </a>
+                    {link.target && (
+                      <span className="text-sm text-gray-500"> ({link.target})</span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Score Summary</h3>
+              <ul className="space-y-1">
+                {entry.scores.map((s: any, idx: number) => (
+                  <li key={idx} className="flex justify-between">
+                    <span>{s.cat}</span>
+                    <span className="font-semibold">{s.value}/10</span>
+                  </li>
+                ))}
+              </ul>
+              <p className="mt-2 font-bold text-right">Total: {avgScore}</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Overview */}
+      {entry.review_overview_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Overview</h3>
+          <ReactMarkdown>{entry.review_overview_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Intro */}
+      {entry.review_intro_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">{`${entry.product_make}, ${entry.product_model} Review by ${entry.author}`}</h3>
+          <ReactMarkdown>{entry.review_intro_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Detailed Scores */}
+      {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+        <div className="space-y-4">
+          {entry.scores.map((s: any, idx: number) => (
+            <div key={idx} className="p-4 rounded border">
+              <p className="text-xl font-semibold">
+                {s.cat} – <span className="text-blue-600">{s.value}/10</span>
+              </p>
+              <div className="text-sm text-gray-400">
+                <ReactMarkdown>{s.body}</ReactMarkdown>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Recommendation */}
+      {entry.rec_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Recommendation</h3>
+          <ReactMarkdown>{entry.rec_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Updates */}
+      {entry.updates && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Updates</h3>
+          <ReactMarkdown>{entry.updates}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Video */}
+      {entry.video_review_url && (
+        <div>
+          <h3 className="text-xl font-semibold mb-2">Video Review</h3>
+          <div className="aspect-w-16 aspect-h-9">
+            <iframe
+              src={entry.video_review_url.replace("watch?v=", "embed/")}
+              className="w-full h-96 rounded"
+              frameBorder="0"
+              allowFullScreen
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

components/buying-guide/.bak/product/[id]/page.tsx.bak.1755462414

@@ -0,0 +1,188 @@
+// app/buying-guide/product/[id]/page.tsx
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+
+const API_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
+const ASSET_URL = process.env.NEXT_PUBLIC_ASSET_URL;
+
+async function getEntry(id: string) {
+  const res = await fetch(
+    `${API_URL}/items/bg_entries/${id}?fields=*,links.id,links.text,links.url,links.target,scores.id,scores.cat,scores.value,scores.body,header.id,date_updated`,
+    {
+      cache: "no-store",
+    }
+  );
+
+  if (!res.ok) {
+    const error = await res.text();
+    console.error(`Failed to fetch entry: ${error}`);
+    throw new Error(`Error fetching entry ${id}`);
+  }
+
+  const { data } = await res.json();
+  return data;
+}
+
+export default async function ProductDetail({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const id = params.id;
+  const entry = await getEntry(id);
+
+  const avgScore =
+    entry?.scores?.length > 0
+      ? (
+          entry.scores.reduce((sum: number, s: any) => sum + Number(s.value), 0) /
+          entry.scores.length
+        ).toFixed(1)
+      : "N/A";
+
+  const headerUrl = entry.header?.id
+    ? `${ASSET_URL}/assets/${entry.header.id}?cache-buster=${entry.date_updated}&key=system-large-contain`
+    : null;
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8 space-y-6">
+      {/* Header Banner */}
+      {headerUrl && (
+        <div className="w-full h-64 relative overflow-hidden rounded-xl shadow">
+          <img
+            src={headerUrl}
+            alt="Header Image"
+            className="object-cover w-full h-full rounded-xl"
+          />
+        </div>
+      )}
+
+      {/* Title */}
+      <div className="flex justify-between items-start">
+        <div>
+          <h2 className="text-xl font-semibold text-white">{entry.product_make}</h2>
+          <h1 className="text-4xl font-bold text-yellow-500 mt-2">{entry.product_model}</h1>
+        </div>
+        <div className="text-right">
+          {entry.product_price && (
+            <p className="text-lg text-white font-medium mt-1">
+              {entry.product_price.startsWith("Starting at") ? entry.product_price : `Starting at ${entry.product_price}`}
+            </p>
+          )}
+          <Link
+            href="/buying-guide"
+            className="text-sm text-blue-500 underline mt-2 inline-block"
+          >
+            ← Back to Buying Guide
+          </Link>
+        </div>
+      </div>
+
+      {/* Links & Score Summary */}
+      {(Array.isArray(entry.links) || Array.isArray(entry.scores)) && (
+        <div className="flex flex-col md:flex-row gap-8">
+          {Array.isArray(entry.links) && entry.links.length > 0 && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Links</h3>
+              <ul className="list-disc ml-6 space-y-1">
+                {entry.links.map((link: any, idx: number) => (
+                  <li key={idx}>
+                    <a
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-700 underline"
+                    >
+                      {link.text || link.url}
+                    </a>
+                    {link.target && (
+                      <span className="text-sm text-gray-500"> ({link.target})</span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Score Summary</h3>
+              <ul className="space-y-1">
+                {entry.scores.map((s: any, idx: number) => (
+                  <li key={idx} className="flex justify-between">
+                    <span>{s.cat}</span>
+                    <span className="font-semibold">{s.value}/10</span>
+                  </li>
+                ))}
+              </ul>
+              <p className="mt-2 font-bold text-right">Total: {avgScore}</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Overview */}
+      {entry.review_overview_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Overview</h3>
+          <ReactMarkdown>{entry.review_overview_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Intro */}
+      {entry.review_intro_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">{`${entry.product_make}, ${entry.product_model} Review by ${entry.author}`}</h3>
+          <ReactMarkdown>{entry.review_intro_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Detailed Scores */}
+      {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+        <div className="space-y-4">
+          {entry.scores.map((s: any, idx: number) => (
+            <div key={idx} className="p-4 rounded border">
+              <p className="text-xl font-semibold">
+                {s.cat} – <span className="text-blue-600">{s.value}/10</span>
+              </p>
+              <div className="text-sm text-gray-400">
+                <ReactMarkdown>{s.body}</ReactMarkdown>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Recommendation */}
+      {entry.rec_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Recommendation</h3>
+          <ReactMarkdown>{entry.rec_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Updates */}
+      {entry.updates && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Updates</h3>
+          <ReactMarkdown>{entry.updates}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Video */}
+      {entry.video_review_url && (
+        <div>
+          <h3 className="text-xl font-semibold mb-2">Video Review</h3>
+          <div className="aspect-w-16 aspect-h-9">
+            <iframe
+              src={entry.video_review_url.replace("watch?v=", "embed/")}
+              className="w-full h-96 rounded"
+              frameBorder="0"
+              allowFullScreen
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+