import type { CSSProperties } from "react";

export type ResonanceSignalKey = "hearts" | "stars" | "moons" | "hourglasses" | "balloons";
export type WarmthLevel = "blazing" | "hot" | "warm" | "cool" | "cold";

export interface ResonanceSignal {
  key: ResonanceSignalKey;
  score: number;
  note: string;
}

export interface ResonanceIndicatorsProps {
  title?: string;
  subtitle?: string;
  score?: number;
  recentHours?: number;
  signals?: ResonanceSignal[];
  ringDistance?: 1 | 2 | 3 | 4 | 5 | 6;
  compact?: boolean;
}

const SIGNAL_META: Record<ResonanceSignalKey, { label: string; emoji: string; color: string; detail: string; earned: string; spent: string }> = {
  hearts: {
    label: "Hearts",
    emoji: "❤",
    color: "#ff6b8a",
    detail: "Direct overlap: the same item, the same place, the same exact thing.",
    earned: "When your exact cart item appears in another user's cart.",
    spent: "Send care packages and feature shared items.",
  },
  stars: {
    label: "Stars",
    emoji: "⭐",
    color: "#ffd66b",
    detail: "Category congruence: the same orientation, even when the item differs.",
    earned: "When your cart category matches another user's category type.",
    spent: "Boost item visibility and reveal resonance types.",
  },
  moons: {
    label: "Moons",
    emoji: "☾",
    color: "#a8d4ff",
    detail: "Complementary rhythm: your gap and their gap fit together.",
    earned: "When your cart fills someone else's gap, and theirs fills yours.",
    spent: "Unlock complementary filters and intro requests.",
  },
  hourglasses: {
    label: "Hourglasses",
    emoji: "⏳",
    color: "#c9a8d4",
    detail: "Values alignment: the same worldview, repeated over time.",
    earned: "When your cart patterns pass the values-alignment quiz.",
    spent: "Reveal deeper resonance and worldview profiles.",
  },
  balloons: {
    label: "Balloons",
    emoji: "🎈",
    color: "#ff9f43",
    detail: "Presence and growth: the signal stays alive without being forced.",
    earned: "When you keep showing up with consistent cart activity.",
    spent: "Float to higher visibility tiers and trust levels.",
  },
};

const RING_META = [
  { ring: "R1", label: "Inner Circle", tempo: "Yearly", reach: "Full cart resonance" },
  { ring: "R2", label: "Archetypes", tempo: "Quarterly", reach: "Category resonance" },
  { ring: "R3", label: "The Longing", tempo: "Monthly", reach: "Longing patterns" },
  { ring: "R4", label: "The Echo", tempo: "Weekly", reach: "Cart + creative output" },
  { ring: "R5", label: "The Wave", tempo: "Daily", reach: "Sustained complementarity" },
  { ring: "R6", label: "The Current", tempo: "Hourly", reach: "Ambient warmth" },
] as const;

const DEFAULT_SIGNALS: ResonanceSignal[] = [
  {
    key: "hearts",
    score: 84,
    note: "A few exact matches make the field feel immediately familiar.",
  },
  {
    key: "stars",
    score: 72,
    note: "Your categories point in the same direction.",
  },
  {
    key: "moons",
    score: 55,
    note: "Your missing pieces complement each other cleanly.",
  },
  {
    key: "hourglasses",
    score: 67,
    note: "The pattern has repeated long enough to look like worldview.",
  },
  {
    key: "balloons",
    score: 90,
    note: "Recent presence is steady enough to keep the current alive.",
  },
];

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

function warmthFromScore(score: number): WarmthLevel {
  if (score >= 80) return "blazing";
  if (score >= 61) return "hot";
  if (score >= 41) return "warm";
  if (score >= 21) return "cool";
  return "cold";
}

function warmthMeta(level: WarmthLevel) {
  switch (level) {
    case "blazing":
      return { label: "Blazing", emoji: "🔥", color: "#ff5d73", description: "Rare alignment across the field." };
    case "hot":
      return { label: "Hot", emoji: "🔥", color: "#f97316", description: "Strong resonance across several patterns." };
    case "warm":
      return { label: "Warm", emoji: "🌡️", color: "#f59e0b", description: "Multiple signals are active at once." };
    case "cool":
      return { label: "Cool", emoji: "🌿", color: "#94a3b8", description: "A softer field with some visible overlap." };
    case "cold":
      return { label: "Cold", emoji: "❄️", color: "#7dd3fc", description: "The field is quiet for now." };
  }
}

function ringStrengthForDistance(distance: number) {
  return clamp(100 - (distance - 1) * 16, 16, 100);
}

function scoreLabel(score: number) {
  if (score >= 81) return "Resonant";
  if (score >= 61) return "Blazing";
  if (score >= 41) return "Hot";
  if (score >= 21) return "Warm";
  return "Cool";
}

function scoreBand(score: number) {
  if (score >= 81) return "Rare alignment across all five patterns.";
  if (score >= 61) return "Deep resonance, sustained over time.";
  if (score >= 41) return "Strong resonance across 3+ patterns.";
  if (score >= 21) return "Some category overlap and a little warmth.";
  return "The field is quiet, but still readable.";
}

function compositionWeight(key: ResonanceSignalKey) {
  switch (key) {
    case "hearts":
      return 1.5;
    case "stars":
      return 1;
    case "moons":
      return 1.2;
    case "hourglasses":
      return 1.5;
    case "balloons":
      return 0.8;
  }
}

function normalizeScore(signals: ResonanceSignal[]) {
  const totalWeighted = signals.reduce((sum, signal) => sum + clamp(signal.score, 0, 100) * compositionWeight(signal.key), 0);
  const maxWeighted = 100 * (1.5 + 1 + 1.2 + 1.5 + 0.8);
  return Math.round((totalWeighted / maxWeighted) * 100);
}

type AmbientSlot = {
  index: number;
  score: number;
  warmth: WarmthLevel;
  signal: ResonanceSignal;
};

function buildAmbientField(signals: ResonanceSignal[], recentHours: number, ringDistance: number, fieldScore: number) {
  const source = signals.length > 0 ? signals : DEFAULT_SIGNALS;
  const attenuation = clamp(ringDistance / 6, 0.2, 1);
  const hourLift = clamp(recentHours / 6, 2, 12);

  return Array.from({ length: 36 }, (_, index) => {
    const signal = source[index % source.length];
    const row = Math.floor(index / 6);
    const column = index % 6;
    const shimmer = column % 2 === 0 ? 5 : 0;
    const decay = row * (7 - ringDistance) * 1.7;
    const score = clamp(signal.score * attenuation * 0.56 + fieldScore * 0.34 + hourLift + shimmer - decay, 0, 100);

    return {
      index,
      score,
      warmth: warmthFromScore(score),
      signal,
    } satisfies AmbientSlot;
  });
}

export default function ResonanceIndicators({
  title = "Resonance Indicators",
  subtitle = "A passive field readout for the last 24 hours of signal.",
  score = 68,
  recentHours = 24,
  signals = DEFAULT_SIGNALS,
  ringDistance = 6,
  compact = false,
}: ResonanceIndicatorsProps) {
  const warmth = warmthMeta(warmthFromScore(score));
  const summaryLabel = scoreLabel(score);
  const ringReadout = RING_META.map((ring, index) => ({
    ...ring,
    distance: index + 1,
    strength: ringStrengthForDistance(index + 1),
    active: index + 1 <= ringDistance,
  }));
  const compositionScore = normalizeScore(signals);
  const ambientSlots = buildAmbientField(signals, recentHours, ringDistance, score);
  const ambientCounts = ambientSlots.reduce(
    (acc, slot) => {
      acc.total += 1;
      if (slot.warmth !== "cold") acc.lit += 1;
      acc[slot.warmth] += 1;
      return acc;
    },
    { total: 0, lit: 0, blazing: 0, hot: 0, warm: 0, cool: 0, cold: 0 },
  );

  const rootStyle: CSSProperties = {
    background: "radial-gradient(circle at top, rgba(255,255,255,0.06), rgba(8, 9, 12, 0.98) 68%)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: compact ? 18 : 26,
    boxShadow: "0 24px 60px rgba(0,0,0,0.35)",
    color: "#f6ede1",
    padding: compact ? 18 : 24,
  };

  const chipStyle: CSSProperties = {
    borderRadius: 999,
    border: "1px solid rgba(255,255,255,0.12)",
    background: "rgba(255,255,255,0.05)",
    padding: "7px 12px",
    fontSize: 12,
    color: "#f7efe2",
  };

  const gridColumns = compact ? "1fr" : "minmax(0, 1.2fr) minmax(300px, 0.8fr)";

  return (
    <section style={rootStyle}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: 16, alignItems: "flex-start", flexWrap: "wrap" }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginBottom: 8 }}>
            <h2 style={{ fontSize: compact ? 18 : 22, fontWeight: 700, letterSpacing: 0.2, margin: 0 }}>{title}</h2>
            <span style={chipStyle}>{recentHours}h window</span>
            <span style={{ ...chipStyle, borderColor: `${warmth.color}55`, color: warmth.color }}>
              {warmth.emoji} {warmth.label}
            </span>
          </div>
          <p style={{ margin: 0, color: "rgba(247,239,226,0.72)", fontSize: compact ? 13 : 14, lineHeight: 1.55 }}>
            {subtitle}
          </p>
        </div>

        <div style={{ minWidth: 154, textAlign: "right" }}>
          <div style={{ fontSize: 30, fontWeight: 800, lineHeight: 1, color: warmth.color }}>{score}</div>
          <div style={{ marginTop: 4, fontSize: 12, letterSpacing: 1.1, textTransform: "uppercase", color: "rgba(247,239,226,0.56)" }}>
            {summaryLabel}
          </div>
          <div style={{ marginTop: 8, fontSize: 12, color: "rgba(247,239,226,0.72)", maxWidth: 220 }}>
            {warmth.description}
          </div>
        </div>
      </div>

      <section
        style={{
          marginTop: compact ? 16 : 20,
          borderRadius: 20,
          border: "1px solid rgba(255,255,255,0.08)",
          background: "rgba(255,255,255,0.03)",
          padding: compact ? 16 : 18,
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
          <div>
            <div style={{ fontSize: 12, letterSpacing: 1.1, textTransform: "uppercase", color: "rgba(247,239,226,0.56)" }}>The Current</div>
            <div style={{ marginTop: 4, fontSize: compact ? 16 : 18, fontWeight: 700 }}>36 ambient hexes, updated by the last 24 hours</div>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            <span style={chipStyle}>{ambientCounts.lit}/36 lit</span>
            <span style={chipStyle}>{ambientCounts.hot} hot</span>
            <span style={chipStyle}>{ambientCounts.warm} warm</span>
            <span style={chipStyle}>{ambientCounts.cool} cool</span>
          </div>
        </div>

        <div
          style={{
            marginTop: 14,
            display: "grid",
            gridTemplateColumns: "repeat(6, minmax(0, 1fr))",
            gap: 8,
          }}
        >
          {ambientSlots.map((slot) => {
            const signal = SIGNAL_META[slot.signal.key];
            const tone = warmthMeta(slot.warmth);
            const lit = slot.warmth !== "cold";
            return (
              <div
                key={slot.index}
                title={`Hex ${slot.index + 1} · ${signal.label} · ${tone.label} · ${slot.score}`}
                style={{
                  aspectRatio: "1 / 0.92",
                  clipPath: "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)",
                  border: `1px solid ${tone.color}66`,
                  background:
                    slot.warmth === "blazing"
                      ? "linear-gradient(180deg, rgba(255,93,115,0.38), rgba(255,93,115,0.12))"
                      : slot.warmth === "hot"
                        ? "linear-gradient(180deg, rgba(249,115,22,0.30), rgba(249,115,22,0.10))"
                        : slot.warmth === "warm"
                          ? "linear-gradient(180deg, rgba(245,158,11,0.24), rgba(245,158,11,0.08))"
                          : slot.warmth === "cool"
                            ? "linear-gradient(180deg, rgba(148,163,184,0.22), rgba(148,163,184,0.08))"
                            : "rgba(255,255,255,0.03)",
                  boxShadow: lit ? `0 0 16px ${tone.color}22` : "none",
                  opacity: lit ? 1 : 0.5,
                }}
              >
                <div
                  style={{
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: 3,
                    textAlign: "center",
                    padding: 8,
                  }}
                >
                  <div style={{ fontSize: compact ? 14 : 15, lineHeight: 1 }}>{signal.emoji}</div>
                  <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.6 }}>{slot.index + 1}</div>
                  <div style={{ fontSize: 9, textTransform: "uppercase", letterSpacing: 0.8, color: "rgba(247,239,226,0.72)" }}>{tone.label}</div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 12, display: "flex", flexWrap: "wrap", gap: 8, color: "rgba(247,239,226,0.7)", fontSize: 12, lineHeight: 1.5 }}>
          <span style={chipStyle}>Passive</span>
          <span style={chipStyle}>Discovered</span>
          <span style={chipStyle}>{ringDistance === 6 ? "R6 ambient only" : `Attenuated to R${ringDistance}`}</span>
          <span style={chipStyle}>{scoreBand(score)}</span>
        </div>
      </section>

      <div
        style={{
          marginTop: compact ? 16 : 20,
          display: "grid",
          gridTemplateColumns: gridColumns,
          gap: 16,
        }}
      >
        <div style={{ display: "grid", gap: 12 }}>
          {signals.map((signal) => {
            const meta = SIGNAL_META[signal.key];
            const fill = clamp(signal.score, 0, 100);
            return (
              <article
                key={signal.key}
                style={{
                  borderRadius: 18,
                  border: "1px solid rgba(255,255,255,0.08)",
                  background: "rgba(255,255,255,0.035)",
                  padding: 14,
                }}
              >
                <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
                    <span style={{ fontSize: 18, color: meta.color }}>{meta.emoji}</span>
                    <div>
                      <div style={{ fontWeight: 700, fontSize: 14 }}>{meta.label}</div>
                      <div style={{ fontSize: 12, color: "rgba(247,239,226,0.65)", lineHeight: 1.4 }}>{meta.detail}</div>
                    </div>
                  </div>
                  <div style={{ textAlign: "right", flexShrink: 0 }}>
                    <div style={{ fontSize: 15, fontWeight: 800, color: meta.color }}>{fill}</div>
                    <div style={{ fontSize: 11, letterSpacing: 1, textTransform: "uppercase", color: "rgba(247,239,226,0.55)" }}>
                      {signal.note}
                    </div>
                  </div>
                </div>

                <div style={{ marginTop: 10, 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, ${meta.color}, rgba(255,255,255,0.88))`,
                      boxShadow: `0 0 18px ${meta.color}55`,
                    }}
                  />
                </div>

                {!compact && (
                  <div style={{ marginTop: 12, display: "grid", gap: 8 }}>
                    <MetaLine label="Earned when" value={meta.earned} />
                    <MetaLine label="Spent on" value={meta.spent} />
                  </div>
                )}
              </article>
            );
          })}

          <section
            style={{
              borderRadius: 18,
              border: "1px solid rgba(255,255,255,0.08)",
              background: "rgba(255,255,255,0.03)",
              padding: 16,
            }}
          >
            <div style={{ display: "flex", justifyContent: "space-between", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
              <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>Score composition</h3>
              <span style={chipStyle}>Normalized from the five resonance patterns</span>
            </div>
            <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
              <EquationRow label="Hearts × 1.5" value="Direct overlap" tone={SIGNAL_META.hearts.color} />
              <EquationRow label="Stars × 1.0" value="Category congruence" tone={SIGNAL_META.stars.color} />
              <EquationRow label="Moons × 1.2" value="Complementary rhythm" tone={SIGNAL_META.moons.color} />
              <EquationRow label="Hourglasses × 1.5" value="Values alignment" tone={SIGNAL_META.hourglasses.color} />
              <EquationRow label="Balloons × 0.8" value="Presence and growth" tone={SIGNAL_META.balloons.color} />
            </div>
            <div style={{ marginTop: 12, display: "grid", gap: 8 }}>
              <div style={{ fontSize: 12, color: "rgba(247,239,226,0.66)", lineHeight: 1.55 }}>
                Scores are recent-signal summaries, not a promise of connection.
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                <span style={chipStyle}>Passive</span>
                <span style={chipStyle}>Discovered</span>
                <span style={chipStyle}>Asymmetric by ring distance</span>
              </div>
            </div>
          </section>
        </div>

        <aside style={{ display: "grid", gap: 16 }}>
          <section
            style={{
              borderRadius: 18,
              border: "1px solid rgba(255,255,255,0.08)",
              background: "rgba(255,255,255,0.03)",
              padding: 16,
            }}
          >
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginBottom: 12 }}>
              <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>Ring attenuation</h3>
              <span style={chipStyle}>R1 → R6</span>
            </div>
            <div style={{ display: "grid", gap: 10 }}>
              {ringReadout.map((ring) => (
                <div
                  key={ring.ring}
                  style={{
                    display: "grid",
                    gridTemplateColumns: "auto 1fr auto",
                    gap: 10,
                    alignItems: "center",
                    opacity: ring.active ? 1 : 0.48,
                  }}
                >
                  <div style={{ minWidth: 42, fontWeight: 800, color: ring.active ? "#f7efe2" : "rgba(247,239,226,0.65)" }}>{ring.ring}</div>
                  <div>
                    <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "baseline" }}>
                      <div style={{ fontSize: 13, fontWeight: 650 }}>{ring.label}</div>
                      <div style={{ fontSize: 11, color: "rgba(247,239,226,0.58)" }}>{ring.tempo}</div>
                    </div>
                    <div style={{ marginTop: 6, height: 6, borderRadius: 999, overflow: "hidden", background: "rgba(255,255,255,0.06)" }}>
                      <div
                        style={{
                          width: `${ring.strength}%`,
                          height: "100%",
                          borderRadius: 999,
                          background: ring.active ? "linear-gradient(90deg, rgba(212,165,116,0.96), rgba(255,255,255,0.82))" : "rgba(255,255,255,0.16)",
                        }}
                      />
                    </div>
                  </div>
                  <div style={{ fontSize: 11, color: "rgba(247,239,226,0.65)", textAlign: "right", maxWidth: 120 }}>
                    {ring.reach}
                  </div>
                </div>
              ))}
            </div>
          </section>

          <section
            style={{
              borderRadius: 18,
              border: "1px solid rgba(255,255,255,0.08)",
              background: "rgba(255,255,255,0.03)",
              padding: 16,
            }}
          >
            <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center" }}>
              <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>Discovery flow</h3>
              <span style={chipStyle}>Tap → investigate → reveal</span>
            </div>
            <div style={{ display: "grid", gap: 10, marginTop: 12 }}>
              <FlowCard
                title="Tap 1 — Quick view"
                text="See the hex's name, float level, warmth, and featured items."
              />
              <FlowCard
                title="Tap 2 — Resonance breakdown"
                text="Open the active patterns: Hearts, Stars, Moons, Hourglasses, and Balloons."
              />
              <FlowCard
                title="Tap 3 — Full profile"
                text="Reveal the cart categories and the rest of their resonance texture."
              />
            </div>
          </section>

          <section
            style={{
              borderRadius: 18,
              border: "1px solid rgba(255,255,255,0.08)",
              background: "rgba(255,255,255,0.03)",
              padding: 16,
            }}
          >
            <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center" }}>
              <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>What scores don't mean</h3>
              <span style={chipStyle}>anti-gaming</span>
            </div>
            <div style={{ display: "grid", gap: 10, marginTop: 12 }}>
              <Bullet text="A high score does not mean romantic compatibility." />
              <Bullet text="A high score does not mean they want to connect with you." />
              <Bullet text="A high score does not guarantee interaction." />
              <Bullet text="There is no paid boost, and resonance cannot be forced." />
            </div>
          </section>

          {!compact && (
            <section
              style={{
                borderRadius: 18,
                border: "1px solid rgba(255,255,255,0.08)",
                background: "rgba(255,255,255,0.03)",
                padding: 16,
              }}
            >
              <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center" }}>
                <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>How the field feels</h3>
                <span style={chipStyle}>{summaryLabel} · {compositionScore}/100 blend</span>
              </div>
              <div style={{ marginTop: 10, color: "rgba(247,239,226,0.74)", fontSize: 13, lineHeight: 1.6 }}>
                Resonance is passive and discovered. You tend your cart, the field broadcasts, and the lattice reveals what persists.
              </div>
            </section>
          )}
        </aside>
      </div>
    </section>
  );
}

function MetaLine({ label, value }: { label: string; value: string }) {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "auto 1fr",
        gap: 10,
        alignItems: "baseline",
      }}
    >
      <div style={{ fontSize: 11, letterSpacing: 1, textTransform: "uppercase", color: "rgba(247,239,226,0.56)" }}>{label}</div>
      <div style={{ fontSize: 12, color: "rgba(247,239,226,0.8)", lineHeight: 1.45 }}>{value}</div>
    </div>
  );
}

function EquationRow({ label, value, tone }: { label: string; value: string; tone: string }) {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "auto 1fr",
        gap: 10,
        alignItems: "center",
        padding: "10px 12px",
        borderRadius: 14,
        background: "rgba(255,255,255,0.03)",
        border: "1px solid rgba(255,255,255,0.08)",
      }}
    >
      <div style={{ fontWeight: 700, color: tone }}>{label}</div>
      <div style={{ color: "rgba(247,239,226,0.72)", fontSize: 12, lineHeight: 1.45 }}>{value}</div>
    </div>
  );
}

function FlowCard({ 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>
  );
}

function Bullet({ text }: { text: string }) {
  return (
    <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
      <div style={{ width: 8, height: 8, borderRadius: 999, background: "#f5c16c", marginTop: 7, flexShrink: 0 }} />
      <div style={{ color: "#d8d0c2", fontSize: 14, lineHeight: 1.55 }}>{text}</div>
    </div>
  );
}