const CONCERNS = [
  {
    id: "anti-aging",
    number: "01",
    title: "Anti-Aging",
    kicker: "Falten · Elastizität · Erneuerung",
    copy: "Falten, Elastizität, Hauterneuerung. Wirksam und schonend.",
    method: "Microneedling · Skinbooster · Peel",
  },
  {
    id: "roetungen",
    number: "02",
    title: "Rötungen & Couperose",
    kicker: "Beruhigung & Stärkung",
    copy: "Beruhigung, Stärkung der Hautbarriere, sichtbare Verbesserung.",
    method: "Gefäßschonendes IPL · Barriere",
  },
  {
    id: "ipl",
    number: "03",
    title: "IPL",
    kicker: "Präzise · Hautschonend",
    copy: "Dauerhafte Haarentfernung und Pigmentbehandlung. Präzise, hautschonend.",
    method: "Haarentfernung · Pigmente · Couperose",
  },
  {
    id: "waxing",
    number: "04",
    title: "Waxing",
    kicker: "Sauber · Gründlich · Diskret",
    copy: "Sauber, gründlich, diskret. Gesicht und Körper.",
    method: "Gesicht · Beine · Intim · Rücken",
  },
  {
    id: "lashes",
    number: "05",
    title: "Lashes",
    kicker: "Natürlich oder dramatisch",
    copy: "Extensions, Lifting, Volumen. Natürlich oder dramatisch — du entscheidest.",
    method: "Lift · Classic · Volume · Refills",
  },
  {
    id: "augenbrauen",
    number: "06",
    title: "Augenbrauen",
    kicker: "Form · Färbung · Lamination",
    copy: "Form, Färbung, Lamination. Passend zu deinem Gesicht.",
    method: "Lifting · Lamination · Färbung",
  },
];

function Concerns({ style, onOpen }) {
  return (
    <section id="hautthemen" style={{ paddingTop: 56, paddingBottom: 64 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 20px" }}>
        <h2 className="serif" style={{
          fontSize: "clamp(34px, 9vw, 58px)",
          lineHeight: 1, fontWeight: 300, letterSpacing: "-.01em",
          textWrap: "balance", maxWidth: 740,
          paddingBottom: ".08em",
        }}>
          <span className="italic" style={{ color: "var(--rose-deep)" }}>Behandlungen</span>
        </h2>
        <p style={{ marginTop: 18, maxWidth: 480, color: "var(--ink-2)", fontSize: 14.5, lineHeight: 1.6 }}>
          Wähle ein Thema — jede Kachel führt in einen eigenen Behandlungsraum mit
          Details, Ablauf und Preisen.
        </p>

        <div className="concerns-grid" style={{
          marginTop: 32,
          display: "grid",
          gridTemplateColumns: "1fr",
          gap: 1,
          background: "var(--hair)",
          border: "1px solid var(--hair)",
        }}>
          {CONCERNS.map((c, i) => (
            <ConcernTile key={c.id} concern={c} index={i} style={style} onOpen={onOpen} />
          ))}
        </div>
      </div>

      <style>{`
        @media (min-width: 640px) {
          .concerns-grid { grid-template-columns: 1fr 1fr !important; gap: 2px !important; }
        }
        @media (min-width: 980px) {
          .concerns-grid { grid-template-columns: 1fr 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function ConcernTile({ concern, index, style, onOpen }) {
  const [hover, setHover] = React.useState(false);
  const imageBehind = style === "imageBehind";

  return (
    <button
      onClick={() => { window.location.href = "Anti-Aging.html"; }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        background: "var(--cream)",
        textAlign: "left",
        padding: 0,
        minHeight: 300,
        overflow: "hidden",
        cursor: "pointer",
      }}
    >
      {imageBehind && (
        <div style={{
          position: "absolute", inset: 0,
          opacity: hover ? .7 : .35,
          transition: "opacity .5s ease",
          mixBlendMode: "multiply",
        }}>
          <Placeholder label={`imagery · ${concern.title.toLowerCase()}`} ratio="auto" tone="warm" style={{ height: "100%", aspectRatio: "auto" }} />
        </div>
      )}

      <div style={{
        position: "absolute", inset: 0,
        background: imageBehind
          ? `linear-gradient(180deg, rgba(244,234,220,.5) 0%, rgba(244,234,220,.92) 75%, rgba(244,234,220,.98) 100%)`
          : "none",
        transition: "opacity .5s",
        opacity: hover ? .85 : 1,
      }} />

      <div style={{
        position: "relative", height: "100%",
        display: "flex", flexDirection: "column", justifyContent: "space-between",
        padding: "22px 20px 22px",
        minHeight: 300,
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 10 }}>
          <div style={{
            fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 400,
            fontSize: 20, color: "var(--rose-deep)", lineHeight: 1,
            whiteSpace: "nowrap",
          }}>N° {concern.number}</div>
          <span style={{
            width: 28, height: 28, borderRadius: 999,
            border: "1px solid var(--hair)",
            display: "grid", placeItems: "center",
            transition: "all .3s", flexShrink: 0,
            background: hover ? "var(--ink)" : "transparent",
            color: hover ? "var(--cream)" : "var(--ink-2)",
          }}>
            <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
              <path d="M1 10L10 1M10 1H3M10 1V8" stroke="currentColor" strokeWidth="1" strokeLinecap="square" />
            </svg>
          </span>
        </div>

        <div>
          <div style={{ fontSize: 10.5, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 10 }}>
            {concern.kicker}
          </div>
          <h3 className="serif" style={{
            fontSize: 34,
            lineHeight: 1.02,
            fontWeight: 300,
            letterSpacing: "-.01em",
            color: "var(--ink)",
            marginBottom: 14,
          }}>
            {concern.title}
          </h3>
          <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 320 }}>
            {concern.copy}
          </p>

          <div style={{ marginTop: 16, borderTop: "1px solid var(--hair-soft)", paddingTop: 10,
            fontSize: 10.5, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--ink-3)" }}>
            {concern.method}
          </div>
        </div>
      </div>
    </button>
  );
}

window.Concerns = Concerns;
window.CONCERNS = CONCERNS;