import React, { useEffect, useRef, useState } from "react";

// Tailwind-only, self-contained demo of a chicer section with refined typography
// Fixes: multiline className now uses template literals; CSS variable object uses
// quoted keys compatible with React inline styles. Added lightweight runtime tests
// via console.assert so we have at least some test coverage in this demo file.

export default function ChicSectionRedesign() {
  const [scheme, setScheme] = useState<"classic" | "deep">("deep");
  const rootRef = useRef<HTMLDivElement>(null);

  // Base class tokens; switch palette tokens by scheme
  const base = "min-h-screen w-full antialiased selection:bg-emerald-200/40";
  const wrapperClass = `${base}${
    scheme === "deep"
      ? " bg-[--bg] text-[--ink]"
      : " bg-[--bg-classic] text-[--ink-classic]"
  }`;

  // CSS custom properties for both palettes (quoted keys are important)
  const cssVars = {
    // Deep palette (elegant emerald & muted gold)
    "--bg": "#0e1a18",
    "--panel": "#0f2422",
    "--panel-2": "#0c1e1c",
    "--line": "#20443f",
    "--ink": "#e9efe9",
    "--muted": "#a8b6b0",
    "--accent": "#c9a86a",
    "--accent-2": "#b69158",
    "--glow": "#1d4f47",
    // Classic (lighter two-tone)
    "--bg-classic": "#f7f6f3",
    "--panel-classic": "#ffffff",
    "--line-classic": "#e6e2d9",
    "--ink-classic": "#1d2321",
    "--muted-classic": "#66736f",
    "--accent-classic": "#c2a36b",
  } as React.CSSProperties;

  // --- Lightweight Runtime Tests (console.assert) ---
  // These give us sanity checks in lieu of a formal test runner here.
  useEffect(() => {
    const el = rootRef.current;
    if (!el) return;

    const cs = getComputedStyle(el);
    // Test 1: required CSS variables exist
    console.assert(cs.getPropertyValue("--bg").trim().length > 0, "Test fail: --bg not set");
    console.assert(cs.getPropertyValue("--ink").trim().length > 0, "Test fail: --ink not set");

    // Test 2: class token switches by scheme
    const hasDeep = el.className.includes("bg-[--bg]");
    const hasClassic = el.className.includes("bg-[--bg-classic]");
    console.assert(
      (scheme === "deep" && hasDeep && !hasClassic) ||
        (scheme === "classic" && hasClassic && !hasDeep),
      "Test fail: scheme class tokens not applied correctly"
    );

    // Test 3: accent swatch renders a gradient chip later via inline style (smoke test)
    // Not strict, but ensures the component mounted and has palette entries
    console.assert(document.querySelectorAll("[data-swatch]").length >= 6, "Test fail: swatches missing");
  }, [scheme]);

  return (
    <div ref={rootRef} className={wrapperClass} style={cssVars}>
      {/* Top bar with scheme toggle */}
      <div className="sticky top-0 z-10 backdrop-blur supports-[backdrop-filter]:bg-transparent bg-gradient-to-b from-black/20 to-transparent">
        <div className="mx-auto max-w-6xl px-6 py-4 flex items-center justify-between">
          <span className="tracking-[0.18em] uppercase text-xs text-[--muted]">Preview</span>
          <div className="flex items-center gap-2">
            <button
              onClick={() => setScheme("classic")}
              className={`px-3 py-1.5 text-xs tracking-wide rounded-full border transition-all duration-300 ${
                scheme === "classic"
                  ? "border-[--accent-classic] text-[--ink-classic] bg-[--panel-classic]"
                  : "border-[--line-classic] text-[--muted-classic] hover:text-[--ink-classic] hover:border-[--accent-classic]"
              }`}
            >
              Classic
            </button>
            <button
              onClick={() => setScheme("deep")}
              className={`px-3 py-1.5 text-xs tracking-wide rounded-full border transition-all duration-300 ${
                scheme === "deep"
                  ? "border-[--accent] text-[--ink] bg-[--panel]"
                  : "border-[--line] text-[--muted] hover:text-[--ink] hover:border-[--accent]"
              }`}
            >
              Deep
            </button>
          </div>
        </div>
      </div>

      {/* Section wrapper */}
      <section className="relative overflow-hidden">
        {/* Soft gradient wash for depth */}
        <div className="pointer-events-none absolute inset-0 opacity-60" aria-hidden="true">
          <div
            className="absolute -top-32 -right-20 w-[42rem] h-[42rem] rounded-full blur-3xl"
            style={{ background: "radial-gradient(closest-side, var(--glow), transparent 70%)" }}
          />
        </div>

        {/* Content */}
        <div className="mx-auto max-w-6xl px-6 pt-20 pb-12">
          {/* Eyebrow */}
          <div className="mb-3 text-[--muted] tracking-[0.22em] uppercase text-[12px]">New Collection</div>

          {/* Heading */}
          <h1 className="text-4xl md:text-5xl leading-tight font-light tracking-tight">
            Quiet Luxury
            <span className="ml-3 inline-block align-baseline text-[clamp(0.85rem,2vw,1rem)] tracking-[0.25em] uppercase text-[--accent] translate-y-1">
              Edition
            </span>
          </h1>

          {/* Subhead */}
          <p className="mt-4 max-w-2xl text-base md:text-lg text-[--muted] leading-relaxed">
            Understated forms, better spacing, softer contrast. Slim lines and delicate letterspacing for a calmer tone.
          </p>

          {/* Divider hairline */}
          <div className="mt-8 h-px w-full bg-gradient-to-r from-transparent via-[--line] to-transparent" />

          {/* Feature grid */}
          <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
            {[
              {
                title: "Refined Headings",
                body:
                  "Use a light weight for H1/H2 (300–400), increased letterspacing on small-caps eyebrows, and a generous line-height.",
              },
              {
                title: "Two‑Tone Depth",
                body:
                  "Deep emerald base with restrained gold accents. Borders stay whisper‑thin; interactive states lift subtly.",
              },
              {
                title: "Crisp Rhythm",
                body:
                  "Consistent 8px baseline grid, larger top padding than bottom, and breathable card gutters.",
              },
            ].map((item, i) => (
              <article key={i} className="group relative overflow-hidden rounded-2xl border bg-[--panel] border-[--line]">
                <div className="p-6">
                  <h3 className="text-xl font-normal tracking-tight">{item.title}</h3>
                  <p className="mt-2 text-sm text-[--muted] leading-relaxed">{item.body}</p>
                </div>
                <div className="h-10 w-full bg-gradient-to-r from-transparent via-[--line] to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
              </article>
            ))}
          </div>

          {/* Panel row: image placeholder + copy */}
          <div className="mt-12 grid grid-cols-1 md:grid-cols-5 gap-6">
            <div className="md:col-span-3 rounded-2xl border border-[--line] bg-[--panel] aspect-[16/9] grid place-items-center text-[--muted]">
              <span className="text-xs tracking-[0.25em] uppercase">Image / Video</span>
            </div>
            <div className="md:col-span-2 rounded-2xl border border-[--line] bg-[--panel] p-6">
              <h4 className="text-lg font-normal tracking-tight">Copy Block</h4>
              <p className="mt-2 text-sm text-[--muted] leading-relaxed">
                Swap in your content here. Keep paragraphs short; avoid bold everywhere. Use accent sparingly for links or key labels.
              </p>
              <div className="mt-4 flex items-center gap-3">
                <a
                  href="#"
                  className="inline-flex items-center gap-2 rounded-full border border-[--accent] px-4 py-2 text-sm tracking-wide hover:shadow-[0_0_0_2px_var(--accent)] transition-shadow"
                  style={{ color: "var(--ink)", background: "linear-gradient(180deg, transparent, rgba(0,0,0,.04))" }}
                >
                  Primary Action
                </a>
                <a href="#" className="text-sm text-[--muted] underline-offset-4 hover:underline">
                  Secondary
                </a>
              </div>
            </div>
          </div>

          {/* Swatches */}
          <div className="mt-14">
            <div className="mb-3 text-[--muted] tracking-[0.22em] uppercase text-[12px]">Palette</div>
            <div className="grid grid-cols-2 md:grid-cols-6 gap-4">
              {(
                scheme === "deep"
                  ? [
                      { name: "BG", v: "var(--bg)" },
                      { name: "Panel", v: "var(--panel)" },
                      { name: "Panel 2", v: "var(--panel-2)" },
                      { name: "Line", v: "var(--line)" },
                      { name: "Gold", v: "var(--accent)" },
                      { name: "Ink", v: "var(--ink)" },
                    ]
                  : [
                      { name: "BG", v: "var(--bg-classic)" },
                      { name: "Panel", v: "var(--panel-classic)" },
                      { name: "Line", v: "var(--line-classic)" },
                      { name: "Gold", v: "var(--accent-classic)" },
                      { name: "Ink", v: "var(--ink-classic)" },
                      { name: "Muted", v: "var(--muted-classic)" },
                    ]
              ).map((s, i) => (
                <div key={i} className="rounded-2xl border border-[--line] overflow-hidden" data-swatch>
                  <div className="h-20" style={{ background: s.v }} />
                  <div className="px-3 py-2 text-xs flex items-center justify-between">
                    <span className="tracking-wide">{s.name}</span>
                    <code className="text-[10px] text-[--muted]">{s.v}</code>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Footer note */}
          <div className="mt-16 mb-24 text-xs text-[--muted]">
            Typography tips: Prefer font-weight 300–400 for display, 400–500 for body. Increase letterspacing slightly on all-caps labels. Keep line-height at ~1.3–1.45 for headings, 1.6 for body.
          </div>
        </div>
      </section>
    </div>
  );
}