reverting to old layout with imrpoved caution contrast

app/buying-guide/finder/page.tsx

@@ -1,480 +1,536 @@
-"use client";
+'use client';
 
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from 'react';
 
-/**
- * Buying Guide → Laser Finder
- * Path: /buying-guide/finder
- *
- * - Lightweight scoring based on answers
- * - Nice, readable "Cautions" chips
- * - Clear callouts and reset / refine controls
- * - Pure Tailwind, no external deps
- */
+/* -----------------------------------------------------------
+ *   Data: laser types (copy tweaks welcome)
+ * ----------------------------------------------------------- */
+type LaserKey = 'co2_gantry' | 'co2_galvo' | 'fiber' | 'uv';
 
-type LaserKind = "fiber" | "co2-galvo" | "co2-gantry" | "uv";
-
-type Answers = {
-    material?: "metal" | "organic" | "mixed";
-    task?: "mark" | "engrave" | "cut";
-    detail?: "fine" | "medium" | "coarse";
-    size?: "small" | "medium" | "large";
-    colorChangeOk?: boolean; // okay with color/anneal vs. deep mark
-    budget?: "tight" | "moderate" | "flexible";
-};
-
-type Profile = {
-    id: LaserKind;
+const LASER_TYPES: Record<LaserKey, {
     title: string;
-    wavelength: string;
-    bestFor: string[];
+    blurb: string;
     cautions: string[];
-    notes?: string;
-    learnLink?: string; // internal doc/page if you add one later
-};
-
-const PROFILES: Record<LaserKind, Profile> = {
+    strengths: string[];
+    typical: string[];
+}> = {
+    co2_gantry: {
+        title: 'CO₂ Gantry',
+        blurb:
+        'Large work areas, great for cutting/engraving organics (wood, leather, paper) and many plastics. Best for sheet work and signage.',
+        cautions: [
+            'Requires robust ventilation & fire safety for cutting organics.',
+            'Not suitable for bare metals without coatings/pastes.',
+        ],
+        strengths: [
+            'Big beds (e.g. 600×400mm+)',
+            'Cuts thicker organics cleanly',
+            'Lower cost per watt than galvos',
+        ],
+        typical: ['signs', 'boxes', 'inlays', 'production sheet work'],
+    },
+    co2_galvo: {
+        title: 'CO₂ Galvo',
+        blurb:
+        'High-speed galvo for organics/plastics in smaller fields (e.g. 110×110mm). Excellent for rapid engraving and serialization.',
+        cautions: [
+            'Smaller field; “stitching” required for large designs.',
+            'Requires smoke extraction for organics/plastics.',
+        ],
+        strengths: [
+            'Very fast engraving',
+            'Sharp detail in small fields',
+            'Great for coated/anodized items',
+        ],
+        typical: ['batch marking', 'brand marks', 'rapid engraving'],
+    },
     fiber: {
-        id: "fiber",
-        title: "Fiber (1064 nm • Galvo)",
-        wavelength: "1064 nm",
-        bestFor: [
-            "Marking/engraving bare metals",
-            "High-detail logos & serials",
-            "Fast batch work on small parts",
-        ],
+        title: 'Fiber (1064nm)',
+        blurb:
+        'The go-to for metals. Deep engraving, anneal/black marking, and serial/UID marking. Small F-theta fields; superb precision.',
         cautions: [
-            "Small scan field vs gantry machines",
-            "Not for cutting non-metals",
-            "Ventilation needed for some plastics",
+            'Not suited for clear/white acrylic; limited plastics.',
+            'Eye safety is critical; use certified eyewear/enclosure.',
         ],
-        notes:
-        "Ideal for stainless, aluminum, tool steels. Deep marks possible with multiple passes.",
-    },
-    "co2-galvo": {
-        id: "co2-galvo",
-        title: "CO₂ Galvo (10.6 µm)",
-        wavelength: "10.6 µm",
-        bestFor: [
-            "Rapid engraving on wood, leather, glass, acrylic",
-            "Small items in trays/fixtures",
-            "Branding & raster graphics",
+        strengths: [
+            'Marks/engraves steel, aluminum, brass, Ti, etc.',
+            'High precision in small fields',
+            'Supports color marking on some alloys (with tuning)',
         ],
-        cautions: [
-            "Poor on bare metals (needs marking spray)",
-            "Smaller working area than gantry CO₂",
-            "Not ideal for thick cutting",
-        ],
-        notes:
-        "When you need speed on organic materials at smaller sizes, CO₂ galvo is excellent.",
-    },
-    "co2-gantry": {
-        id: "co2-gantry",
-        title: "CO₂ Gantry (10.6 µm)",
-        wavelength: "10.6 µm",
-        bestFor: [
-            "Cutting acrylic & organics",
-            "Larger panels/signage",
-            "Prototyping jigs and fixtures",
-        ],
-        cautions: [
-            "Not for bare metals without compound",
-            "Finer micro-detail is slower than galvos",
-        ],
-        notes:
-        "Your general-purpose cutter/engraver for wood, acrylic, cardboard, leather, and more.",
+        typical: ['metal tags', 'tools', 'knives', 'jewelry', 'UIDs'],
     },
     uv: {
-        id: "uv",
-        title: "UV (355 nm • Galvo)",
-        wavelength: "355 nm",
-        bestFor: [
-            "Heat-sensitive plastics & films",
-            "Glass, ceramics, and clear/translucent parts",
-            "High-contrast codes on consumer packaging",
-        ],
+        title: 'UV (355nm)',
+        blurb:
+        'Best for fine marking of plastics, PCBs, some glass/ceramics with minimal heat. Micro features and delicate substrates.',
         cautions: [
-            "Higher cost per watt than fiber/CO₂",
-            "Slower for deep material removal",
-            "Keep optics clean; sensitive to contamination",
+            'Generally slower and pricier per watt.',
+            'UV eye/skin safety needs strict controls.',
         ],
-        notes:
-        "When you need crisp marks with minimal heat on delicate or clear materials, UV is the tool.",
+        strengths: [
+            'Minimal heat-affected zone',
+            'Excellent for delicate plastics & micro text',
+            'Can mark glass/ceramics with good contrast',
+        ],
+        typical: ['medical devices', 'plastics, PCB legends', 'micro text'],
     },
 };
 
-/** ────────────────────────────────────────────────────────────
- * Scoring rules
- *  - Very simple heuristic = good enough for a first pass.
- *  - Feel free to tweak weights as you gather user feedback.
- * ──────────────────────────────────────────────────────────── */
-function scoreProfiles(a: Answers): Array<{ id: LaserKind; score: number; why: string[] }> {
-    const why: Record<LaserKind, string[]> = {
-        fiber: [],
-        "co2-galvo": [],
-        "co2-gantry": [],
-        uv: [],
-    };
-    const s: Record<LaserKind, number> = { fiber: 0, "co2-galvo": 0, "co2-gantry": 0, uv: 0 };
+/* -----------------------------------------------------------
+ *   Styling-only Cautions component (contrast fix)
+ * ----------------------------------------------------------- */
+function CautionBox({ items }: { items?: string[] }) {
+    if (!items || items.length === 0) return null;
 
-    // Material
-    if (a.material === "metal") {
-        s.fiber += 6; why.fiber.push("Best for bare metals");
-        s.uv += 1;   why.uv.push("Can mark some coated metals");
-    }
-    if (a.material === "organic") {
-        s["co2-gantry"] += 4; why["co2-gantry"].push("Great on wood & acrylic");
-        s["co2-galvo"]  += 4; why["co2-galvo"].push("Super fast on organics");
-    }
-    if (a.material === "mixed") {
-        s.fiber += 2; why.fiber.push("Covers metals");
-        s["co2-gantry"] += 2; why["co2-gantry"].push("Cuts & engraves organics");
-        s["co2-galvo"]  += 2; why["co2-galvo"].push("Fast organic engraving");
-        s.uv += 1; why.uv.push("Excellent for delicate/clear materials");
-    }
-
-    // Task
-    if (a.task === "mark" || a.task === "engrave") {
-        s.fiber += 3; why.fiber.push("High-contrast metal marking");
-        s["co2-galvo"] += 2; why["co2-galvo"].push("Fast raster engraving");
-        s.uv += 2; why.uv.push("Clean marks on delicate substrates");
-    }
-    if (a.task === "cut") {
-        if (a.material !== "metal") {
-            s["co2-gantry"] += 6; why["co2-gantry"].push("Best for cutting non-metals");
-        }
-    }
-
-    // Detail
-    if (a.detail === "fine") {
-        s.fiber += 2; why.fiber.push("Very fine vector detail");
-        s.uv += 2;    why.uv.push("Minimal heat, crisp small features");
-        s["co2-galvo"] += 1; why["co2-galvo"].push("Fast raster detail (smaller fields)");
-    }
-    if (a.detail === "coarse") {
-        s["co2-gantry"] += 1; why["co2-gantry"].push("Large letters & cuts ok");
-    }
-
-    // Part size
-    if (a.size === "large") {
-        s["co2-gantry"] += 3; why["co2-gantry"].push("Large work area");
-    }
-    if (a.size === "small") {
-        s.fiber += 1; why.fiber.push("Small parts throughput");
-        s["co2-galvo"] += 1; why["co2-galvo"].push("Tray/fixture friendly");
-    }
-
-    // Color change acceptable?
-    if (a.colorChangeOk === true) {
-        s.fiber += 1; why.fiber.push("Black/anneal OK");
-        s.uv += 1;    why.uv.push("High contrast on plastics/glass");
-    }
-
-    // Budget (soft nudge)
-    if (a.budget === "tight") {
-        s["co2-gantry"] += 1; why["co2-gantry"].push("Often best $/area for organics");
-    }
-    if (a.budget === "flexible") {
-        s.uv += 1; why.uv.push("Premium for delicate materials");
-    }
-
-    return (Object.keys(s) as LaserKind[])
-    .map((id) => ({ id, score: s[id], why: why[id] }))
-    .sort((a, b) => b.score - a.score);
-}
-
-/** ────────────────────────────────────────────────────────────
- * UI Bits
- * ──────────────────────────────────────────────────────────── */
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
     return (
-        <section className="rounded-2xl border border-border/60 bg-card p-4 md:p-6">
-        <h2 className="mb-3 text-lg font-semibold">{title}</h2>
-        {children}
-        </section>
-    );
-}
+        <div
+        role="alert"
+        className="
+        mt-4 rounded-xl border border-amber-500/50
+        bg-amber-50 text-amber-950
+        ring-1 ring-amber-500/20 shadow-sm
 
-function Seg({
-    value,
-    onChange,
-    items,
-}: {
-    value?: string;
-    onChange: (v: string) => void;
-    items: { value: string; label: string }[];
-}) {
-    return (
-        <div className="flex flex-wrap gap-2">
-        {items.map((it) => {
-            const active = value === it.value;
-            return (
-                <button
-                key={it.value}
-                type="button"
-                onClick={() => onChange(it.value)}
-                className={
-                    "rounded-full px-3 py-1.5 text-sm transition " +
-                    (active
-                    ? "bg-primary text-primary-foreground shadow-sm"
-                    : "bg-muted/60 hover:bg-muted text-foreground")
-                }
-                >
-                {it.label}
-                </button>
-            );
-        })}
+        dark:bg-amber-950/40 dark:text-amber-100
+        dark:border-amber-400/40 dark:ring-amber-400/20
+        "
+        >
+        <div className="flex items-start gap-3 p-3">
+        <span
+        aria-hidden
+        className="
+        inline-flex h-6 w-6 shrink-0 items-center justify-center
+        rounded-full bg-amber-500 text-white text-sm font-bold
+        "
+        >
+        !
+        </span>
+
+        <div className="min-w-0">
+        <div
+        className="
+        text-xs font-semibold uppercase tracking-wide
+        text-amber-800 dark:text-amber-200
+        "
+        >
+        Cautions
         </div>
-    );
-}
 
-function YesNo({ value, onChange }: { value?: boolean; onChange: (v: boolean) => void }) {
-    return (
-        <Seg
-        value={value === undefined ? undefined : value ? "yes" : "no"}
-        onChange={(v) => onChange(v === "yes")}
-        items={[
-            { value: "yes", label: "Yes" },
-            { value: "no", label: "No" },
-        ]}
-        />
-    );
-}
-
-function Pill({ children }: { children: React.ReactNode }) {
-    return (
-        <li className="rounded-full border border-foreground/10 bg-foreground/5 px-3 py-1 text-sm leading-6">
-        {children}
-        </li>
-    );
-}
-
-/** High-contrast, accessible caution chips */
-function Cautions({ items }: { items: string[] }) {
-    return (
-        <div className="rounded-xl border border-amber-500/40 bg-amber-50/70 p-4 dark:border-amber-400/30 dark:bg-amber-900/25">
-        <div className="mb-2 flex items-center gap-2">
-        <span aria-hidden>⚠️</span>
-        <h4 className="font-semibold text-amber-900 dark:text-amber-200">Cautions</h4>
-        </div>
-        <ul className="flex flex-wrap gap-2">
-        {items.map((c, i) => (
-            <li
-            key={i}
-            className="rounded-full border border-amber-700/20 bg-amber-100 px-3 py-1 text-sm text-amber-900 shadow-sm dark:border-amber-300/20 dark:bg-amber-800/60 dark:text-amber-50"
-            >
-            {c}
+        <ul className="mt-1 list-disc pl-5 space-y-1 marker:text-amber-700 dark:marker:text-amber-300">
+        {items.map((it, i) => (
+            <li key={i} className="leading-snug">
+            {it}
             </li>
         ))}
         </ul>
         </div>
+        </div>
+        </div>
     );
 }
 
-function ResultCard({
-    pick,
-    why,
-    rank,
+/* -----------------------------------------------------------
+ *   Questionnaire model
+ *   (Focused on use-cases; no product ids)
+ * ----------------------------------------------------------- */
+type Answers = {
+    materials: 'organics' | 'metals' | 'both' | 'plastics_glass';
+    workSize: 'small' | 'medium' | 'large' | 'micro';
+    detail: 'low' | 'medium' | 'high' | 'micro';
+    throughput: 'normal' | 'high';
+    colorOnMetal: 'needed' | 'nice' | 'no';
+    budget: 'low' | 'mid' | 'high';
+    reflectivity: 'low' | 'mixed' | 'high';
+    enclosure: 'enclosed' | 'open_ok';
+};
+
+const DEFAULT_ANSWERS: Answers = {
+    materials: 'both',
+    workSize: 'medium',
+    detail: 'medium',
+    throughput: 'normal',
+    colorOnMetal: 'no',
+    budget: 'mid',
+    reflectivity: 'mixed',
+    enclosure: 'enclosed',
+};
+
+/* -----------------------------------------------------------
+ *   Scoring rules (easy to tweak)
+ * ----------------------------------------------------------- */
+type ScoreMap = Record<LaserKey, number>;
+
+const BASE_WEIGHTS: ScoreMap = {
+    co2_gantry: 0,
+    co2_galvo: 0,
+    fiber: 0,
+    uv: 0,
+};
+
+function score(answers: Answers): ScoreMap {
+    const s: ScoreMap = { ...BASE_WEIGHTS };
+
+    // Materials
+    if (answers.materials === 'organics') {
+        s.co2_gantry += 4;
+        s.co2_galvo += 3;
+    } else if (answers.materials === 'metals') {
+        s.fiber += 5;
+    } else if (answers.materials === 'plastics_glass') {
+        s.uv += 5;
+        s.co2_galvo += 2;
+    } else if (answers.materials === 'both') {
+        s.co2_gantry += 2;
+        s.co2_galvo += 2;
+        s.fiber += 2;
+    }
+
+    // Work size
+    if (answers.workSize === 'large') s.co2_gantry += 5;
+    if (answers.workSize === 'medium') s.co2_gantry += 2;
+    if (answers.workSize === 'small') s.co2_galvo += 2;
+    if (answers.workSize === 'micro') {
+        s.fiber += 3;
+        s.uv += 3;
+    }
+
+    // Detail
+    if (answers.detail === 'low') s.co2_gantry += 1;
+    if (answers.detail === 'medium') {
+        s.co2_gantry += 1;
+        s.co2_galvo += 1;
+    }
+    if (answers.detail === 'high') {
+        s.co2_galvo += 2;
+        s.fiber += 2;
+    }
+    if (answers.detail === 'micro') {
+        s.fiber += 4;
+        s.uv += 4;
+    }
+
+    // Throughput
+    if (answers.throughput === 'high') {
+        s.co2_galvo += 3;
+        s.fiber += 3;
+    }
+
+    // Color on metal
+    if (answers.colorOnMetal === 'needed') s.fiber += 3;
+    if (answers.colorOnMetal === 'nice') s.fiber += 1;
+
+    // Budget
+    if (answers.budget === 'low') s.co2_gantry += 2;
+    if (answers.budget === 'mid') {
+        s.co2_gantry += 1;
+        s.co2_galvo += 1;
+        s.fiber += 1;
+    }
+    if (answers.budget === 'high') {
+        s.fiber += 1;
+        s.uv += 1;
+        s.co2_galvo += 1;
+    }
+
+    // Reflectivity exposure
+    if (answers.reflectivity === 'high') s.fiber += 1; // designed for metals
+    if (answers.reflectivity === 'low') s.co2_gantry += 1;
+
+    // Enclosure requirement
+    if (answers.enclosure === 'enclosed') {
+        s.co2_gantry += 1; // many enclosed units exist
+        s.fiber += 1; // many enclosed stations exist
+        s.uv += 1; // usually enclosed
+    } else {
+        s.co2_galvo += 1; // many open-table galvos
+    }
+
+    return s;
+}
+
+/* -----------------------------------------------------------
+ *   Small UI helpers
+ * ----------------------------------------------------------- */
+function Card({
+    children,
+    className = '',
 }: {
-    pick: Profile;
-    why: string[];
-    rank: number;
+    children: React.ReactNode;
+    className?: string;
 }) {
     return (
         <div
-        className={
-            "rounded-2xl border p-5 transition " +
-            (rank === 0
-            ? "border-primary/50 bg-primary/5 ring-1 ring-primary/20"
-            : "border-border bg-card")
-        }
+        className={`rounded-2xl border p-4 shadow-sm bg-white/80 dark:bg-zinc-900/60 ${className}`}
         >
-        <div className="mb-2 flex items-center justify-between">
-        <h3 className="text-base font-semibold">
-        {rank === 0 ? "Recommended" : "Alternative"} · {pick.title}
-        </h3>
-        <span className="text-xs text-muted-foreground">{pick.wavelength}</span>
-        </div>
-
-        {pick.notes && <p className="mb-3 text-sm text-muted-foreground">{pick.notes}</p>}
-
-        <div className="mb-3">
-        <h4 className="mb-1 text-sm font-medium">Best For</h4>
-        <ul className="flex flex-wrap gap-2">
-        {pick.bestFor.map((b, i) => (
-            <Pill key={i}>{b}</Pill>
-        ))}
-        </ul>
-        </div>
-
-        <Cautions items={pick.cautions} />
-
-        {why.length > 0 && (
-            <div className="mt-3 text-xs text-muted-foreground">
-            <span className="font-medium">Why you’re seeing this:</span>{" "}
-            {why.join(" · ")}
-            </div>
-        )}
+        {children}
         </div>
     );
 }
 
-/** ────────────────────────────────────────────────────────────
- * Page
- * ──────────────────────────────────────────────────────────── */
+function SectionTitle({ children }: { children: React.ReactNode }) {
+    return (
+        <h2 className="text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
+        {children}
+        </h2>
+    );
+}
+
+/* -----------------------------------------------------------
+ *   The Page
+ * ----------------------------------------------------------- */
 export default function FinderPage() {
-    const [a, setA] = useState<Answers>({});
+    const [answers, setAnswers] = useState<Answers>({ ...DEFAULT_ANSWERS });
+    const [showResults, setShowResults] = useState(false);
 
-    const results = useMemo(() => scoreProfiles(a), [a]);
+    const results = useMemo(() => {
+        const scores = score(answers);
+        return (Object.keys(scores) as LaserKey[])
+        .map((k) => ({ key: k, score: scores[k] }))
+        .sort((a, b) => b.score - a.score);
+    }, [answers]);
 
-    const complete =
-    a.material && a.task && a.detail && a.size && a.colorChangeOk !== undefined;
-
-    const top = results[0];
-    const alt = results.slice(1, 3);
-
-    function reset() {
-        setA({});
-        window.scrollTo({ top: 0, behavior: "smooth" });
-    }
+    const top = results.slice(0, 2); // show top 1–2
 
     return (
-        <div className="mx-auto max-w-5xl px-4 py-8 md:py-10">
-        <header className="mb-6">
-        <h1 className="text-2xl font-bold">Laser Finder</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-        Answer a few quick questions and we’ll suggest the laser family that
-        fits your work best.
+        <div className="mx-auto max-w-5xl px-4 py-6 md:py-10">
+        <div className="mb-6">
+        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
+        Laser Type Finder
+        </h1>
+        <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+        Answer a few questions about your work. We’ll suggest the laser{' '}
+        <em>type</em> (CO₂ gantry, CO₂ galvo, Fiber, UV) that fits best. No
+        product ads—just use-case guidance.
         </p>
-        </header>
+        </div>
 
         <div className="grid gap-4 md:grid-cols-2">
-        <Section title="Material">
-        <Seg
-        value={a.material}
-        onChange={(v) => setA((p) => ({ ...p, material: v as Answers["material"] }))}
-        items={[
-            { value: "metal", label: "Metals" },
-            { value: "organic", label: "Organics / Acrylic" },
-            { value: "mixed", label: "Mixed" },
-        ]}
-        />
-        </Section>
+        <Card>
+        <SectionTitle>What are you working with?</SectionTitle>
+        <div className="mt-3 grid gap-3">
+        <label className="grid gap-1">
+        <span className="text-sm">Primary materials</span>
+        <select
+        className="rounded-md border px-2 py-1 bg-background"
+        value={answers.materials}
+        onChange={(e) =>
+            setAnswers((a) => ({
+                ...a,
+                materials: e.target.value as Answers['materials'],
+            }))
+        }
+        >
+        <option value="organics">Organics (wood, leather, paper, acrylic)</option>
+        <option value="metals">Metals (steel, aluminum, brass, Ti…)</option>
+        <option value="plastics_glass">Plastics/Glass/Ceramics/PCB</option>
+        <option value="both">A mix of the above</option>
+        </select>
+        </label>
 
-        <Section title="Primary Task">
-        <Seg
-        value={a.task}
-        onChange={(v) => setA((p) => ({ ...p, task: v as Answers["task"] }))}
-        items={[
-            { value: "mark", label: "Mark" },
-            { value: "engrave", label: "Engrave" },
-            { value: "cut", label: "Cut" },
-        ]}
-        />
-        </Section>
+        <label className="grid gap-1">
+        <span className="text-sm">Typical work size</span>
+        <select
+        className="rounded-md border px-2 py-1 bg-background"
+        value={answers.workSize}
+        onChange={(e) =>
+            setAnswers((a) => ({
+                ...a,
+                workSize: e.target.value as Answers['workSize'],
+            }))
+        }
+        >
+        <option value="small">Small parts (≤ 200×200mm)</option>
+        <option value="medium">Bench-top size (≈ 300×500mm)</option>
+        <option value="large">Large sheets/panels (≥ 600mm width)</option>
+        <option value="micro">Micro/very fine work</option>
+        </select>
+        </label>
 
-        <Section title="Detail Level">
-        <Seg
-        value={a.detail}
-        onChange={(v) => setA((p) => ({ ...p, detail: v as Answers["detail"] }))}
-        items={[
-            { value: "fine", label: "Fine" },
-            { value: "medium", label: "Medium" },
-            { value: "coarse", label: "Coarse" },
-        ]}
-        />
-        </Section>
+        <label className="grid gap-1">
+        <span className="text-sm">Detail priority</span>
+        <select
+        className="rounded-md border px-2 py-1 bg-background"
+        value={answers.detail}
+        onChange={(e) =>
+            setAnswers((a) => ({
+                ...a,
+                detail: e.target.value as Answers['detail'],
+            }))
+        }
+        >
+        <option value="low">Low</option>
+        <option value="medium">Medium</option>
+        <option value="high">High</option>
+        <option value="micro">Micro text/very fine detail</option>
+        </select>
+        </label>
 
-        <Section title="Part Size">
-        <Seg
-        value={a.size}
-        onChange={(v) => setA((p) => ({ ...p, size: v as Answers["size"] }))}
-        items={[
-            { value: "small", label: "Small" },
-            { value: "medium", label: "Medium" },
-            { value: "large", label: "Large" },
-        ]}
-        />
-        </Section>
+        <label className="grid gap-1">
+        <span className="text-sm">Throughput requirement</span>
+        <select
+        className="rounded-md border px-2 py-1 bg-background"
+        value={answers.throughput}
+        onChange={(e) =>
+            setAnswers((a) => ({
+                ...a,
+                throughput: e.target.value as Answers['throughput'],
+            }))
+        }
+        >
+        <option value="normal">Normal</option>
+        <option value="high">High speed / batch marking</option>
+        </select>
+        </label>
+        </div>
+        </Card>
 
-        <Section title="Is color/anneal OK (vs deep removal)?">
-        <YesNo
-        value={a.colorChangeOk}
-        onChange={(v) => setA((p) => ({ ...p, colorChangeOk: v }))}
-        />
-        </Section>
+        <Card>
+        <SectionTitle>Constraints & preferences</SectionTitle>
+        <div className="mt-3 grid gap-3">
+        <label className="grid gap-1">
+        <span className="text-sm">Color marking on metals</span>
+        <select
+        className="rounded-md border px-2 py-1 bg-background"
+        value={answers.colorOnMetal}
+        onChange={(e) =>
+            setAnswers((a) => ({
+                ...a,
+                colorOnMetal: e.target.value as Answers['colorOnMetal'],
+            }))
+        }
+        >
+        <option value="no">Not needed</option>
+        <option value="nice">Nice to have</option>
+        <option value="needed">Required</option>
+        </select>
+        </label>
 
-        <Section title="Budget (optional)">
-        <Seg
-        value={a.budget}
-        onChange={(v) => setA((p) => ({ ...p, budget: v as Answers["budget"] }))}
-        items={[
-            { value: "tight", label: "Tight" },
-            { value: "moderate", label: "Moderate" },
-            { value: "flexible", label: "Flexible" },
-        ]}
-        />
-        </Section>
+        <label className="grid gap-1">
+        <span className="text-sm">Budget</span>
+        <select
+        className="rounded-md border px-2 py-1 bg-background"
+        value={answers.budget}
+        onChange={(e) =>
+            setAnswers((a) => ({
+                ...a,
+                budget: e.target.value as Answers['budget'],
+            }))
+        }
+        >
+        <option value="low">Entry / lower budget</option>
+        <option value="mid">Mid</option>
+        <option value="high">High / industrial</option>
+        </select>
+        </label>
+
+        <label className="grid gap-1">
+        <span className="text-sm">High-reflectivity metals common?</span>
+        <select
+        className="rounded-md border px-2 py-1 bg-background"
+        value={answers.reflectivity}
+        onChange={(e) =>
+            setAnswers((a) => ({
+                ...a,
+                reflectivity: e.target.value as Answers['reflectivity'],
+            }))
+        }
+        >
+        <option value="low">Mostly non-metals</option>
+        <option value="mixed">Mixed</option>
+        <option value="high">Often very reflective metals</option>
+        </select>
+        </label>
+
+        <label className="grid gap-1">
+        <span className="text-sm">Enclosure requirement</span>
+        <select
+        className="rounded-md border px-2 py-1 bg-background"
+        value={answers.enclosure}
+        onChange={(e) =>
+            setAnswers((a) => ({
+                ...a,
+                enclosure: e.target.value as Answers['enclosure'],
+            }))
+        }
+        >
+        <option value="enclosed">Must be enclosed</option>
+        <option value="open_ok">Open table is acceptable</option>
+        </select>
+        </label>
+        </div>
+        </Card>
         </div>
 
-        {/* Results */}
-        <div className="mt-8 space-y-4">
-        {!complete ? (
-            <div className="rounded-xl border border-dashed p-6 text-sm text-muted-foreground">
-            Fill out the questions above to see recommendations.
-            </div>
-        ) : (
-            <>
-            {top && (
-                <ResultCard
-                pick={PROFILES[top.id]}
-                why={top.why}
-                rank={0}
-                />
-            )}
-            {alt.map((r, i) => (
-                <ResultCard key={r.id} pick={PROFILES[r.id]} why={r.why} rank={i + 1} />
-            ))}
-            </>
-        )}
-        </div>
-
-        {/* Actions */}
-        <div className="mt-8 flex flex-wrap gap-3">
+        <div className="mt-4 flex gap-2">
         <button
-        type="button"
-        onClick={reset}
-        className="rounded-lg border bg-background px-3 py-2 text-sm shadow-sm hover:bg-muted"
+        className="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:opacity-90"
+        onClick={() => setShowResults(true)}
         >
-        Start Over
+        See Recommendation
         </button>
-
-        {/* Quick links back into your existing app sections */}
-        <a
-        href="/fiber-settings"
-        className="rounded-lg bg-primary px-3 py-2 text-sm text-primary-foreground shadow-sm hover:opacity-90"
+        <button
+        className="rounded-md border px-4 py-2 hover:bg-accent"
+        onClick={() => {
+            setAnswers({ ...DEFAULT_ANSWERS });
+            setShowResults(false);
+        }}
         >
-        See Fiber Examples
-        </a>
-        <a
-        href="/co2-gantry-settings"
-        className="rounded-lg bg-primary/90 px-3 py-2 text-sm text-primary-foreground shadow-sm hover:opacity-90"
-        >
-        See CO₂ Gantry
-        </a>
-        <a
-        href="/co2-galvo-settings"
-        className="rounded-lg bg-primary/90 px-3 py-2 text-sm text-primary-foreground shadow-sm hover:opacity-90"
-        >
-        See CO₂ Galvo
-        </a>
-        <a
-        href="/uv-settings"
-        className="rounded-lg bg-primary/90 px-3 py-2 text-sm text-primary-foreground shadow-sm hover:opacity-90"
-        >
-        See UV
-        </a>
+        Reset
+        </button>
         </div>
+
+        {showResults && (
+            <div className="mt-6 grid gap-4 md:grid-cols-2">
+            {top.map(({ key, score }) => {
+                const t = LASER_TYPES[key];
+                return (
+                    <Card key={key}>
+                    <div className="flex items-start justify-between gap-3">
+                    <div>
+                    <h3 className="text-lg font-semibold">{t.title}</h3>
+                    <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
+                    {t.blurb}
+                    </p>
+                    </div>
+                    <span className="rounded-md bg-zinc-100 px-2 py-1 text-xs font-medium dark:bg-zinc-800">
+                    Score {score}
+                    </span>
+                    </div>
+
+                    <div className="mt-3 grid gap-3">
+                    <div>
+                    <div className="text-xs font-semibold uppercase tracking-wide">
+                    Strengths
+                    </div>
+                    <ul className="mt-1 list-disc pl-5 space-y-1">
+                    {t.strengths.map((s, i) => (
+                        <li key={i} className="text-sm">
+                        {s}
+                        </li>
+                    ))}
+                    </ul>
+                    </div>
+
+                    <div>
+                    <div className="text-xs font-semibold uppercase tracking-wide">
+                    Typical jobs
+                    </div>
+                    <ul className="mt-1 list-disc pl-5 space-y-1">
+                    {t.typical.map((s, i) => (
+                        <li key={i} className="text-sm">
+                        {s}
+                        </li>
+                    ))}
+                    </ul>
+                    </div>
+                    </div>
+
+                    {/* High-contrast cautions */}
+                    <CautionBox items={t.cautions} />
+                    </Card>
+                );
+            })}
+            </div>
+        )}
         </div>
     );
 }