import { useMemo, useState, type CSSProperties } from "react";
import { Check, Clock3, Heart, Sparkles, Star, Users } from "lucide-react";
import HexLattice, { type HexNode } from "./HexLattice";

type RingIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;

type RingMeta = {
  ring: RingIndex;
  name: string;
  size: number;
  tempo: string;
  assignment: string;
  root: string;
  nature: string;
  sees: string;
  permanence: string;
  color: string;
  summary: string;
};

export interface HexLatticeStudioProps {
  title?: string;
  subtitle?: string;
  occupancy?: Partial<Record<RingIndex, number>>;
  initialRing?: RingIndex;
  onRingChange?: (ring: RingMeta) => void;
}

const RINGS: RingMeta[] = [
  {
    ring: 0,
    name: "YOU",
    size: 1,
    tempo: "Fixed",
    assignment: "Identity anchor",
    root: "—",
    nature: "The center hex. Your identity, your cart, and your full resonance profile.",
    sees: "Yourself.",
    permanence: "Immutable",
    color: "#d4a574",
    summary: "The fixed center hex. It cannot be moved or taken.",
  },
  {
    ring: 1,
    name: "Inner Circle",
    size: 6,
    tempo: "Yearly",
    assignment: "Manual claim · bidirectional",
    root: "6",
    nature: "The six people who anchor your world. Nearly permanent.",
    sees: "Full cart resonance.",
    permanence: "Near-permanent",
    color: "#e8c4a0",
    summary: "Claim once. The bond holds until both parties release.",
  },
  {
    ring: 2,
    name: "Archetypes",
    size: 12,
    tempo: "Quarterly",
    assignment: "Manual curation",
    root: "3",
    nature: "Roles, not people. One person can fill multiple slots.",
    sees: "Category-level resonance.",
    permanence: "Seasonal",
    color: "#a8d4a8",
    summary: "Seasonal review. The roles you want present in your life.",
  },
  {
    ring: 3,
    name: "The Longing",
    size: 18,
    tempo: "Monthly",
    assignment: "Auto-fill from circulation",
    root: "9",
    nature: "What you are reaching for in this chapter.",
    sees: "Monthly longing patterns.",
    permanence: "Living",
    color: "#7eb8c9",
    summary: "A living list of what your season is asking for.",
  },
  {
    ring: 4,
    name: "The Echo",
    size: 24,
    tempo: "Weekly",
    assignment: "Auto from creative output",
    root: "6",
    nature: "People who reflect your creative output back at you.",
    sees: "Cart + weekly creative output.",
    permanence: "Weekly",
    color: "#c9a8d4",
    summary: "The first ring where what you make is part of the signal.",
  },
  {
    ring: 5,
    name: "The Wave",
    size: 30,
    tempo: "Daily",
    assignment: "Auto from Echo convergence",
    root: "3",
    nature: "People moving in your direction, daily and sustained.",
    sees: "Sustained cart complementarity.",
    permanence: "Daily",
    color: "#d4a8b4",
    summary: "A pulse of daily confirmation. Momentum becomes visible.",
  },
  {
    ring: 6,
    name: "The Current",
    size: 36,
    tempo: "Hourly",
    assignment: "Auto from Wave alignment",
    root: "9",
    nature: "Ambient social atmosphere. Discovery in real time.",
    sees: "Ambient warmth only.",
    permanence: "Hourly",
    color: "#8a9ba8",
    summary: "The living surface of Cascade. New people enter hourly.",
  },
];

const DEFAULT_OCCUPANCY: Record<RingIndex, number> = {
  0: 1,
  1: 4,
  2: 5,
  3: 7,
  4: 9,
  5: 12,
  6: 16,
};

const SIGNAL_COPY: Record<RingIndex, { badge: string; detail: string }> = {
  0: { badge: "Center profile", detail: "Your cart, your ring, and your full resonance profile live at the center." },
  1: { badge: "Full cart", detail: "Inner Circle sees every item, every category, and the full resonance field." },
  2: { badge: "Category", detail: "Archetypes read the type of thing you carry, not just the exact item." },
  3: { badge: "Longing", detail: "The Longing reads seasonal and monthly patterns that keep returning." },
  4: { badge: "Double signal", detail: "The Echo sees both your cart and the creative output it reflects." },
  5: { badge: "Pulse", detail: "The Wave sees sustained daily complementarity and consistent motion." },
  6: { badge: "Ambient warmth", detail: "The Current sees only hot, warm, or cool atmosphere at a glance." },
};

const GRAVITY_STEPS = [
  { ring: "R6", label: "Current", cue: "Hourly warmth, new entry, ambient discovery" },
  { ring: "R5", label: "Wave", cue: "Daily sustained motion, direction confirmed" },
  { ring: "R4", label: "Echo", cue: "Weekly creative resonance, cart + output" },
  { ring: "R3", label: "Longing", cue: "Monthly pattern, seasonally held" },
  { ring: "R2", label: "Archetype", cue: "Quarterly role, manually curated" },
  { ring: "R1", label: "Inner Circle", cue: "Yearly claim, mutual and nearly permanent" },
] as const;

function clamp(value: number, min: number, max: number) {
  return Math.max(min, Math.min(max, value));
}

function ringFill(selected: number, total: number) {
  return Math.round(clamp((selected / total) * 100, 0, 100));
}

function buildNodes(ring: RingIndex, occupied: number): HexNode[] {
  const nodes: HexNode[] = [
    {
      id: "ring-center",
      ring: 0,
      position: 0,
      label: "YOU",
      type: "you",
    },
  ];

  for (let selectedRing = 1; selectedRing <= ring; selectedRing += 1) {
    const meta = RINGS[selectedRing];
    const count = clamp(occupiedForRing(selectedRing, occupied), 0, meta.size);

    for (let position = 0; position < meta.size; position += 1) {
      const occupiedSlot = position < count;
      const isCurrentRing = selectedRing === ring;

      nodes.push({
        id: `ring-${selectedRing}-${position}`,
        ring: selectedRing,
        position,
        type: occupiedSlot
          ? selectedRing === 6
            ? position % 3 === 0
              ? "resonance-hot"
              : position % 3 === 1
                ? "resonance-warm"
                : "resonance-cool"
            : "person"
          : selectedRing === 1 && isCurrentRing
            ? "dim"
            : "empty",
        label: occupiedSlot ? (selectedRing === 6 ? undefined : `${selectedRing}.${position + 1}`) : selectedRing === 1 && isCurrentRing ? `Dim ${position + 1}` : undefined,
        resonanceSignal: occupiedSlot && selectedRing === 6 ? (position % 3 === 0 ? "hearts" : position % 3 === 1 ? "stars" : "moons") : undefined,
      });
    }
  }

  return nodes;
}

function occupiedForRing(ring: RingIndex, selectedCount: number) {
  if (ring === 0) return 1;
  if (ring === 1) return Math.max(0, Math.min(6, selectedCount - 1));
  if (ring === 2) return Math.max(0, Math.min(12, selectedCount - 2));
  if (ring === 3) return Math.max(0, Math.min(18, selectedCount - 3));
  if (ring === 4) return Math.max(0, Math.min(24, selectedCount - 4));
  if (ring === 5) return Math.max(0, Math.min(30, selectedCount - 5));
  return Math.max(0, Math.min(36, selectedCount - 6));
}

function ringDistanceLabel(ring: RingIndex) {
  if (ring === 0) return "Fixed center";
  if (ring === 1) return "Adjacent claim";
  if (ring === 2) return "Quarterly curation";
  if (ring === 3) return "Monthly longing";
  if (ring === 4) return "Weekly echo";
  if (ring === 5) return "Daily wave";
  return "Hourly current";
}

function statTone(ring: RingIndex) {
  return RINGS[ring].color;
}

function timeLabel(ring: RingIndex) {
  return ring === 1 ? "Manual claim" : ring === 2 ? "Manual curation" : ring === 3 ? "Circulation" : ring === 4 ? "Creative output" : ring === 5 ? "Daily pulse" : ring === 6 ? "Hourly atmosphere" : "Identity";
}

export default function HexLatticeStudio({
  title = "Hex Lattice Studio",
  subtitle = "A hex-by-hex readout of Cascade — fixed center, mutual claims, and hourly atmosphere.",
  occupancy,
  initialRing = 6,
  onRingChange,
}: HexLatticeStudioProps) {
  const [selectedRing, setSelectedRing] = useState<RingIndex>(initialRing);

  const counts = useMemo(() => ({ ...DEFAULT_OCCUPANCY, ...occupancy }), [occupancy]);
  const selected = RINGS[selectedRing];
  const selectedCount = counts[selectedRing] ?? DEFAULT_OCCUPANCY[selectedRing];
  const selectedFill = ringFill(selectedCount, selected.size);
  const selectedSignal = SIGNAL_COPY[selectedRing];
  const previewNodes = useMemo(() => buildNodes(selectedRing, selectedCount), [selectedCount, selectedRing]);

  const totalCapacity = 126;
  const filledCapacity = RINGS.reduce((sum, ring) => sum + (counts[ring.ring] ?? DEFAULT_OCCUPANCY[ring.ring]), 0) - 1;
  const activeTempo = selected.ring === 6 ? "Fresh every hour" : selected.ring === 1 ? "Set once, held long" : `${selected.tempo} cadence`;
  const dimmedSlots = Math.max(selected.size - occupiedForRing(selectedRing, selectedCount), 0);

  const handleSelect = (ring: RingIndex) => {
    setSelectedRing(ring);
    onRingChange?.(RINGS[ring]);
  };

  const rootStyle: CSSProperties = {
    minHeight: "100%",
    padding: 24,
    background:
      "radial-gradient(circle at top, rgba(212,165,116,0.12), transparent 36%), radial-gradient(circle at 80% 20%, rgba(126,184,201,0.10), transparent 30%), linear-gradient(180deg, #09090d 0%, #111117 100%)",
    color: "#efe7db",
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
  };

  const cardStyle: CSSProperties = {
    background: "rgba(21, 22, 28, 0.9)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 22,
    boxShadow: "0 20px 50px rgba(0,0,0,0.24)",
  };

  return (
    <section style={rootStyle}>
      <div style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gap: 18 }}>
        <section style={{ ...cardStyle, padding: 22 }}>
          <div style={{ display: "flex", justifyContent: "space-between", gap: 18, flexWrap: "wrap", alignItems: "flex-start" }}>
            <div style={{ flex: 1, minWidth: 280 }}>
              <div style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "#9ca3af" }}>Cascade / Ring System</div>
              <h1 style={{ margin: "8px 0 8px", fontSize: 34, lineHeight: 1.05, color: "#f6d9b3" }}>{title}</h1>
              <p style={{ margin: 0, color: "#ada8b6", maxWidth: 860, fontSize: 15, lineHeight: 1.55 }}>{subtitle}</p>
            </div>

            <div style={{ minWidth: 300, maxWidth: 390, flex: 1, padding: 16, borderRadius: 18, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline" }}>
                <div>
                  <div style={{ fontSize: 12, color: "#9ca3af", letterSpacing: "0.12em", textTransform: "uppercase" }}>Capacity</div>
                  <div style={{ fontSize: 22, fontWeight: 700 }}>{filledCapacity}/{totalCapacity} outer nodes</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ fontSize: 12, color: "#9ca3af", letterSpacing: "0.12em", textTransform: "uppercase" }}>Selected ring</div>
                  <div style={{ fontSize: 22, fontWeight: 700, color: selected.color }}>{selected.name}</div>
                </div>
              </div>
              <div style={{ marginTop: 12, height: 10, borderRadius: 999, background: "rgba(255,255,255,0.08)", overflow: "hidden" }}>
                <div
                  style={{
                    width: `${clamp((filledCapacity / totalCapacity) * 100, 0, 100)}%`,
                    height: "100%",
                    borderRadius: 999,
                    background: "linear-gradient(90deg, #d4a574 0%, #7eb8c9 50%, #d4a8b4 100%)",
                    transition: "width 220ms ease",
                  }}
                />
              </div>
              <div style={{ marginTop: 10, color: "#c2b7a8", fontSize: 13, lineHeight: 1.5 }}>
                Room for 126. Grown from 6. Every ring turns on its own tempo.
              </div>
            </div>
          </div>
        </section>

        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.18fr) minmax(340px, 0.82fr)", gap: 18, alignItems: "start" }}>
          <div style={{ display: "grid", gap: 18 }}>
            <section style={{ ...cardStyle, padding: 18 }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap", alignItems: "center", marginBottom: 14 }}>
                <div>
                  <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>Select a ring</div>
                  <h2 style={{ margin: "6px 0 0", fontSize: 22 }}>{selected.name}</h2>
                </div>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {RINGS.map((ring) => {
                    const active = ring.ring === selectedRing;
                    return (
                      <button
                        key={ring.ring}
                        type="button"
                        onClick={() => handleSelect(ring.ring)}
                        style={{
                          borderRadius: 999,
                          border: active ? `1px solid ${ring.color}66` : "1px solid rgba(255,255,255,0.12)",
                          background: active ? `${ring.color}22` : "rgba(255,255,255,0.04)",
                          color: active ? ring.color : "#efe7db",
                          padding: "8px 12px",
                          fontSize: 12,
                          cursor: "pointer",
                          fontWeight: active ? 700 : 500,
                        }}
                      >
                        R{ring.ring}
                      </button>
                    );
                  })}
                </div>
              </div>

              <div style={{ borderRadius: 18, overflow: "hidden", border: "1px solid rgba(255,255,255,0.08)", background: "rgba(10, 10, 14, 0.72)" }}>
                <HexLattice
                  nodes={previewNodes}
                  showLabels={false}
                  size="full"
                  centerLabel="YOU"
                  activeNodeId={`ring-${selectedRing}-0`}
                  focusRing={selectedRing}
                  onNodeClick={(node) => {
                    if (node.ring >= 0 && node.ring <= 6) {
                      handleSelect(node.ring as RingIndex);
                    }
                  }}
                />
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 10, marginTop: 14 }}>
                <StatTile label="Size" value={`${selected.size}`} detail={`${selected.root} root · ${selected.tempo} tempo`} tone={selected.color} />
                <StatTile label="Filled" value={`${selectedCount}`} detail={`${selectedFill}% of this ring`} tone={selected.color} />
                <StatTile label="Dim slots" value={`${dimmedSlots}`} detail={selected.ring === 1 ? "Dormant claims are visible but not refilled." : "Empty slots wait as part of the lattice."} tone={selected.color} />
                <StatTile label="Assignment" value={selected.assignment} detail={activeTempo} tone={selected.color} />
                <StatTile label="Sees" value={selected.sees} detail={selected.summary} tone={selected.color} />
                <StatTile label="Signal" value={selectedSignal.badge} detail={selectedSignal.detail} tone={selected.color} />
              </div>
            </section>

            <section style={{ ...cardStyle, padding: 18 }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap", alignItems: "center", marginBottom: 12 }}>
                <div>
                  <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>Ring ladder</div>
                  <h3 style={{ margin: "6px 0 0", fontSize: 22 }}>How the lattice slows down toward the center</h3>
                </div>
                <div style={{ color: "#c2b7a8", fontSize: 13 }}>R6 is hourly. R1 is nearly permanent.</div>
              </div>

              <div style={{ display: "grid", gap: 10 }}>
                {RINGS.slice(1).map((ring) => {
                  const occupied = counts[ring.ring] ?? DEFAULT_OCCUPANCY[ring.ring];
                  const fill = ringFill(occupied, ring.size);
                  const active = ring.ring === selectedRing;

                  return (
                    <button
                      key={ring.ring}
                      type="button"
                      onClick={() => handleSelect(ring.ring)}
                      style={{
                        borderRadius: 18,
                        border: active ? `1px solid ${ring.color}66` : "1px solid rgba(255,255,255,0.08)",
                        background: active ? `${ring.color}14` : "rgba(255,255,255,0.03)",
                        padding: 14,
                        display: "grid",
                        gap: 10,
                        cursor: "pointer",
                        textAlign: "left",
                      }}
                    >
                      <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "flex-start" }}>
                        <div>
                          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
                            <div style={{ width: 14, height: 14, borderRadius: 999, background: ring.color, boxShadow: `0 0 12px ${ring.color}88` }} />
                            <div style={{ fontWeight: 700, fontSize: 15 }}>{ring.name}</div>
                          </div>
                          <div style={{ color: "#a9a3b8", fontSize: 13, lineHeight: 1.45 }}>{ring.summary}</div>
                        </div>
                        <div style={{ textAlign: "right" }}>
                          <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>R{ring.ring}</div>
                          <div style={{ fontSize: 18, fontWeight: 800, color: ring.color }}>{fill}%</div>
                        </div>
                      </div>

                      <div style={{ height: 8, borderRadius: 999, overflow: "hidden", background: "rgba(255,255,255,0.06)" }}>
                        <div
                          style={{
                            width: `${fill}%`,
                            height: "100%",
                            borderRadius: 999,
                            background: `linear-gradient(90deg, ${ring.color}, rgba(255,255,255,0.82))`,
                            boxShadow: `0 0 18px ${ring.color}55`,
                          }}
                        />
                      </div>
                    </button>
                  );
                })}
              </div>
            </section>

            <section style={{ ...cardStyle, padding: 18 }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap", alignItems: "center", marginBottom: 12 }}>
                <div>
                  <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>Gravity path</div>
                  <h3 style={{ margin: "6px 0 0", fontSize: 22 }}>How signal rises</h3>
                </div>
                <div style={{ color: "#c2b7a8", fontSize: 13 }}>No forcing. Only sustained resonance.</div>
              </div>

              <div style={{ display: "grid", gap: 10 }}>
                {GRAVITY_STEPS.map((step, index) => {
                  const active = 6 - index >= selectedRing;
                  return (
                    <div
                      key={step.ring}
                      style={{
                        borderRadius: 16,
                        padding: 12,
                        background: active ? `${selected.color}14` : "rgba(255,255,255,0.03)",
                        border: active ? `1px solid ${selected.color}44` : "1px solid rgba(255,255,255,0.08)",
                        display: "grid",
                        gap: 6,
                      }}
                    >
                      <div style={{ display: "flex", justifyContent: "space-between", gap: 10, alignItems: "center" }}>
                        <div style={{ fontWeight: 700 }}>{step.label}</div>
                        <div style={{ fontSize: 12, color: active ? selected.color : "#9ca3af" }}>{step.ring}</div>
                      </div>
                      <div style={{ color: "#b6ac9d", fontSize: 13, lineHeight: 1.5 }}>{step.cue}</div>
                    </div>
                  );
                })}
              </div>
            </section>
          </div>

          <aside style={{ display: "grid", gap: 18 }}>
            <section style={{ ...cardStyle, padding: 18 }}>
              <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>Selected ring</div>
              <div style={{ marginTop: 12, display: "flex", gap: 14, alignItems: "center" }}>
                <div style={{ width: 60, height: 60, borderRadius: 18, display: "grid", placeItems: "center", background: `${selected.color}22`, border: `1px solid ${selected.color}55`, color: selected.color, fontSize: 20, fontWeight: 800 }}>
                  {selected.ring === 0 ? <Sparkles className="h-5 w-5" /> : selected.ring === 1 ? <Heart className="h-5 w-5" /> : selected.ring === 2 ? <Users className="h-5 w-5" /> : selected.ring === 3 ? <Clock3 className="h-5 w-5" /> : selected.ring === 4 ? <Star className="h-5 w-5" /> : selected.ring === 5 ? <Check className="h-5 w-5" /> : <Sparkles className="h-5 w-5" />}
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 24, fontWeight: 800, lineHeight: 1.05 }}>{selected.name}</div>
                  <div style={{ color: "#a6a0b1", fontSize: 13, marginTop: 4 }}>{ringDistanceLabel(selected.ring)} · {selected.permanence}</div>
                </div>
              </div>

              <div style={{ display: "grid", gap: 10, marginTop: 16 }}>
                <InfoRow label="Tempo" value={selected.tempo} tone={selected.color} />
                <InfoRow label="Assignment" value={selected.assignment} tone="#f5d79b" />
                <InfoRow label="Root" value={selected.root} tone="#d4a574" />
                <InfoRow label="Sees" value={selected.sees} tone="#9ac18a" />
                <InfoRow label="Permanence" value={selected.permanence} tone="#f59e0b" />
                <InfoRow label="What it reads" value={selected.nature} tone={selected.color} compact />
              </div>
            </section>

            <section style={{ ...cardStyle, padding: 18 }}>
              <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>Signal matrix</div>
              <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
                {RINGS.map((ring) => {
                  const occupied = counts[ring.ring] ?? DEFAULT_OCCUPANCY[ring.ring];
                  const fill = ringFill(occupied, ring.size);
                  const active = ring.ring === selectedRing;

                  return (
                    <button
                      key={ring.ring}
                      type="button"
                      onClick={() => handleSelect(ring.ring)}
                      style={{
                        width: "100%",
                        borderRadius: 16,
                        border: active ? `1px solid ${ring.color}66` : "1px solid rgba(255,255,255,0.08)",
                        background: active ? `${ring.color}14` : "rgba(255,255,255,0.03)",
                        padding: 12,
                        display: "grid",
                        gap: 8,
                        cursor: "pointer",
                        textAlign: "left",
                      }}
                    >
                      <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline" }}>
                        <div>
                          <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>R{ring.ring}</div>
                          <div style={{ marginTop: 2, fontWeight: 700, color: ring.color }}>{ring.name}</div>
                        </div>
                        <div style={{ color: "#f5d79b", fontWeight: 800 }}>{fill}%</div>
                      </div>
                      <div style={{ height: 6, borderRadius: 999, overflow: "hidden", background: "rgba(255,255,255,0.06)" }}>
                        <div style={{ width: `${fill}%`, height: "100%", borderRadius: 999, background: `linear-gradient(90deg, ${ring.color}, rgba(255,255,255,0.88))` }} />
                      </div>
                    </button>
                  );
                })}
              </div>
            </section>

            <section style={{ ...cardStyle, padding: 18 }}>
              <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>At a glance</div>
              <div style={{ display: "grid", gap: 10, marginTop: 12 }}>
                <DetailCard title="Who enters" text="R5 drop-downs, circulation entries, and new users whose carts resonate right now." />
                <DetailCard title="Who leaves" text="People whose resonance fades below threshold, or who rotate out after 6+ hours without interaction." />
                <DetailCard title="What you see" text="Ambient warmth first. Tap deeper only when the signal justifies it." />
              </div>
            </section>
          </aside>
        </div>
      </div>
    </section>
  );
}

function StatTile({ label, value, detail, tone }: { label: string; value: string; detail: string; tone: string }) {
  return (
    <div style={{ borderRadius: 16, padding: 14, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)" }}>
      <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>{label}</div>
      <div style={{ marginTop: 6, fontSize: 22, fontWeight: 800, color: tone }}>{value}</div>
      <div style={{ marginTop: 6, color: "#b6ac9d", fontSize: 13, lineHeight: 1.45 }}>{detail}</div>
    </div>
  );
}

function InfoRow({ label, value, tone, compact = false }: { label: string; value: string; tone: string; compact?: boolean }) {
  return (
    <div style={{ borderRadius: 16, padding: 12, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)", display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center" }}>
      <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>{label}</div>
      <div style={{ fontWeight: 700, color: tone, textAlign: compact ? "left" : "right", maxWidth: compact ? 240 : 190, lineHeight: 1.45 }}>{value}</div>
    </div>
  );
}

function DetailCard({ title, text }: { title: string; text: string }) {
  return (
    <div style={{ borderRadius: 16, padding: 12, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)" }}>
      <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>{title}</div>
      <div style={{ marginTop: 6, color: "#d8d0c2", fontSize: 14, lineHeight: 1.55 }}>{text}</div>
    </div>
  );
}