/* global React, THREADS */
const { useState: useStateQ } = React;

function QualitiesAccordion() {
  const [hover, setHover] = useStateQ(null);
  const keys = Object.keys(THREADS);

  return (
    <section style={{ padding: "32px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto", borderTop: "0.5px solid rgba(26,25,23,0.12)", borderBottom: "0.5px solid rgba(26,25,23,0.12)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, flexShrink: 0 }}>
          Our qualities
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 28, flexWrap: "wrap", flex: 1 }}>
          {keys.map((k) => {
            const t = THREADS[k];
            const isHover = hover === k;
            return (
              <div
                key={k}
                onMouseEnter={() => setHover(k)}
                onMouseLeave={() => setHover(null)}
                style={{ position: "relative", display: "inline-flex", alignItems: "center", gap: 10, cursor: "default" }}
              >
                <span style={{ width: 6, height: 6, background: t.hex, display: "inline-block", flexShrink: 0 }} />
                <span style={{ fontSize: 14, fontWeight: 500, letterSpacing: "-0.005em", color: "#1a1917" }}>
                  {t.name}
                </span>
                <span style={{ fontSize: 13, color: "#6c6862", fontWeight: 400 }}>
                  — {t.description}
                </span>
                {isHover && (
                  <div style={{
                    position: "absolute",
                    top: "calc(100% + 10px)",
                    left: 0,
                    background: "#1a1917",
                    color: "#f5f3ef",
                    fontSize: 12,
                    fontWeight: 400,
                    lineHeight: 1.5,
                    padding: "12px 16px",
                    width: 320,
                    zIndex: 10,
                    letterSpacing: 0,
                    pointerEvents: "none",
                  }}>
                    {t.long}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        <a style={{
          fontSize: 11,
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          color: "#1a1917",
          fontWeight: 500,
          borderBottom: "0.5px solid #1a1917",
          paddingBottom: 2,
          cursor: "pointer",
          flexShrink: 0,
        }}>
          Read the framework →
        </a>
      </div>
    </section>
  );
}