/* === INDUSTRIES — index (/industries) + detail (/industries/:slug) === */

const { useState: inState } = React;

/* ----------------- INDEX ----------------- */
function IndustriesIndex() {
  const titleRef = window.useReveal("reveal");
  const inds = window.SITE_DATA.industries;

  return (
    <>
      <section style={{
        padding: "120px 32px 80px",
        background: "#f8f7f4",
        position: "relative",
        overflow: "hidden",
      }}>
        <window.AnimatedBlob size={580} gradient="linear-gradient(135deg, #05b89c, #0a6ef5)" style={{ top: "-15%", right: "-8%" }} opacity={0.12} />
        <window.FloatingShape kind="ring" size={140} color="#05b89c" style={{ top: "30%", left: "8%", opacity: 0.16 }} speed={26} />
        <div className="grid-bg" style={{ position: "absolute", inset: 0, opacity: 0.4, pointerEvents: "none" }} />

        <div ref={titleRef} style={{ maxWidth: 1680, margin: "0 auto", position: "relative" }}>
          <window.Breadcrumb items={[{ to: "/", label: "Главная" }, { label: "Индустрии" }]} />
          <window.SectionTag tone="teal">Индустрии</window.SectionTag>
          <h1 style={{
            fontFamily: "Syne, sans-serif",
            fontSize: "clamp(44px, 5.6vw, 100px)",
            fontWeight: 800,
            color: "#0d0d0d",
            letterSpacing: "-0.035em",
            lineHeight: 0.98,
            marginTop: 24,
            marginBottom: 28,
            maxWidth: 1000,
          }}>
            Глубокая экспертиза<br />
            <span className="text-gradient-blue">в регулируемых сегментах</span>
          </h1>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: "clamp(16px, 1.25vw, 19px)",
            lineHeight: 1.7, color: "#3a3a3a", maxWidth: 720,
          }}>
            Каждая вертикаль — со своим compliance-стеком, своими референс-кейсами
            и собственной командой, которая работает только в этой индустрии.
          </p>
        </div>
      </section>

      <section style={{ padding: "40px 32px 80px", background: "#f8f7f4" }}>
        <div style={{ maxWidth: 1680, margin: "0 auto", display: "flex", flexDirection: "column", gap: 56 }}>
          {inds.map((ind, i) => <IndustryRow key={ind.slug} ind={ind} index={i} />)}
        </div>
      </section>
    </>
  );
}

function IndustryRow({ ind, index }) {
  const ref = window.useReveal(index % 2 === 0 ? "reveal-left" : "reveal-right");
  const Ic = window.I[ind.icon];
  const reversed = index % 2 !== 0;
  const [h, setH] = inState(false);
  return (
    <div ref={ref}>
      <window.Link to={`/industries/${ind.slug}`}>
        <window.Tilt max={3} scale={1.005}>
          <div
            onMouseEnter={() => setH(true)}
            onMouseLeave={() => setH(false)}
            style={{
              borderRadius: 28,
              overflow: "hidden",
              background: "#ffffff",
              border: "1px solid rgba(0,0,0,0.06)",
              display: "grid",
              gridTemplateColumns: reversed ? "1fr 1.2fr" : "1.2fr 1fr",
              cursor: "pointer",
              transition: "box-shadow 0.5s ease",
              boxShadow: h ? `0 30px 80px ${ind.accent}20` : "0 4px 20px rgba(0,0,0,0.03)",
            }}
            className="industry-row"
          >
            <div style={{
              padding: "48px 52px",
              order: reversed ? 2 : 1,
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
            }}>
              <div style={{
                width: 56, height: 56, borderRadius: 14,
                background: `${ind.accent}10`,
                border: `1px solid ${ind.accent}30`,
                display: "flex", alignItems: "center", justifyContent: "center",
                marginBottom: 24,
              }}>
                {Ic && <Ic size={24} color={ind.accent} />}
              </div>
              <div style={{
                fontSize: 11, fontWeight: 700,
                letterSpacing: "0.12em", textTransform: "uppercase",
                color: ind.accent, marginBottom: 14,
              }}>
                {window.tx(ind.kicker)}
              </div>
              <h3 style={{
                fontFamily: "Syne, sans-serif",
                fontSize: "clamp(28px, 3.4vw, 44px)",
                fontWeight: 800,
                color: "#0d0d0d",
                letterSpacing: "-0.025em",
                lineHeight: 1.05,
                marginBottom: 20,
              }}>
                <span className="title-anim">{window.tx(ind.title)}</span>
              </h3>
              <p style={{
                fontFamily: "Inter, sans-serif",
                fontSize: 15, lineHeight: 1.7, color: "#3a3a3a",
                marginBottom: 22, maxWidth: 540,
              }}>
                {window.tx(ind.shortDesc)}
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 24 }}>
                {ind.offers.map((o) => <window.Tag key={o} accent={ind.accent}>{o}</window.Tag>)}
              </div>
              <span className="link-anim" style={{
                fontSize: 14, fontWeight: 600, color: ind.accent,
                fontFamily: "Inter, sans-serif",
                display: "inline-flex", alignItems: "center", gap: 8,
              }}>
                Открыть вертикаль <window.I.ArrowRight size={14} color={ind.accent} />
              </span>
            </div>

            <div style={{
              order: reversed ? 1 : 2,
              minHeight: 380,
              position: "relative",
              overflow: "hidden",
            }}>
              <img src={ind.image} alt={window.tx(ind.title)} style={{
                width: "100%", height: "100%", objectFit: "cover",
                transform: h ? "scale(1.05)" : "scale(1)",
                transition: "transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)",
              }} />
              <div style={{
                position: "absolute", inset: 0,
                background: `linear-gradient(135deg, ${ind.accent}30 0%, ${ind.accent}90 100%)`,
                mixBlendMode: "multiply",
              }} />
            </div>
          </div>
        </window.Tilt>
      </window.Link>
      <style>{`
        @media (max-width: 900px){
          .industry-row{ grid-template-columns: 1fr !important; }
          .industry-row > div:first-child{ order: 1 !important; }
          .industry-row > div:last-child{ order: 2 !important; min-height: 240px !important; }
        }
      `}</style>
    </div>
  );
}

/* ----------------- DETAIL ----------------- */
function IndustryDetail({ slug }) {
  const ind = window.SITE_DATA.industries.find((s) => s.slug === slug);
  if (!ind) return <window.NotFoundPage label="Индустрия не найдена" backTo="/industries" backLabel="Все индустрии" />;

  const titleRef = window.useReveal("reveal");
  const Ic = window.I[ind.icon];
  const refCase = window.SITE_DATA.work.find((c) => c.slug === ind.referenceCase);

  return (
    <>
      {/* HERO */}
      <section style={{
        padding: "120px 32px 80px",
        background: "linear-gradient(180deg, #f8f7f4 0%, #f0ede8 100%)",
        position: "relative",
        overflow: "hidden",
      }}>
        <window.AnimatedBlob size={620} gradient={`linear-gradient(135deg, ${ind.accent}, ${ind.accent}aa)`} style={{ top: "-20%", right: "-10%" }} opacity={0.15} />
        <window.FloatingShape kind="diamond" size={80} color={ind.accent} style={{ top: "20%", left: "8%", opacity: 0.2 }} speed={22} />
        <window.FloatingShape kind="ring" size={120} color={ind.accent} style={{ bottom: "20%", right: "12%", opacity: 0.18 }} speed={28} />
        <div className="grid-bg" style={{ position: "absolute", inset: 0, opacity: 0.35, pointerEvents: "none" }} />

        <div ref={titleRef} style={{ maxWidth: 1680, margin: "0 auto", position: "relative" }}>
          <window.Breadcrumb items={[
            { to: "/", label: "Главная" },
            { to: "/industries", label: "Индустрии" },
            { label: ind.title },
          ]} />
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr",
            gap: 60, alignItems: "center",
          }} className="ind-hero">
            <div>
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 10,
                padding: "6px 14px",
                background: `${ind.accent}12`,
                border: `1px solid ${ind.accent}30`,
                borderRadius: 100,
                marginBottom: 28,
                fontSize: 11, fontWeight: 700,
                letterSpacing: "0.12em", textTransform: "uppercase",
                color: ind.accent,
              }}>
                {Ic && <Ic size={11} color={ind.accent} />} {window.tx(ind.kicker)}
              </div>
              <h1 style={{
                fontFamily: "Syne, sans-serif",
                fontSize: "clamp(48px, 6.4vw, 92px)",
                fontWeight: 800,
                color: "#0d0d0d",
                letterSpacing: "-0.035em",
                lineHeight: 0.98,
                marginBottom: 28,
              }}>
                {window.tx(ind.headlinePart1)}<br />
                <span className="text-gradient-blue">{window.tx(ind.headlinePart2)}</span>
              </h1>
              <p style={{
                fontFamily: "Inter, sans-serif",
                fontSize: "clamp(16px, 1.25vw, 19px)",
                lineHeight: 1.65,
                color: "#3a3a3a",
                maxWidth: 620, marginBottom: 36,
              }}>
                {window.tx(ind.lead)}
              </p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <window.GradientBtn to="/contact" size="lg" tone={ind.accent === "#e85d00" ? "warm" : ind.accent === "#05b89c" ? "teal" : "blue"}>
                  Обсудить проект
                </window.GradientBtn>
                {refCase && (
                  <window.OutlineBtn to={`/work/${refCase.slug}`} size="lg">
                    Кейс {window.tx(refCase.title)} →
                  </window.OutlineBtn>
                )}
              </div>
            </div>

            {/* Big imagery */}
            <window.Tilt max={5} scale={1.01}>
              <div style={{
                borderRadius: 28,
                overflow: "hidden",
                position: "relative",
                boxShadow: `0 32px 80px ${ind.accent}40`,
                border: "1px solid rgba(255,255,255,0.4)",
              }}>
                <img src={ind.image} alt={window.tx(ind.title)} style={{
                  width: "100%", height: 420, objectFit: "cover", display: "block",
                }} />
                <div style={{
                  position: "absolute", inset: 0,
                  background: `linear-gradient(135deg, ${ind.accent}40 0%, ${ind.accent}70 100%)`,
                  mixBlendMode: "multiply",
                }} />
                <div style={{
                  position: "absolute", inset: 24,
                  border: "1px solid rgba(255,255,255,0.3)",
                  borderRadius: 16,
                  pointerEvents: "none",
                }} />
              </div>
            </window.Tilt>
          </div>
          <style>{`@media (max-width: 980px){ .ind-hero{ grid-template-columns: 1fr !important; }}`}</style>
        </div>
      </section>

      {/* PAINS */}
      <section style={{ padding: "80px 32px", background: "#f0ede8", position: "relative" }}>
        <window.FloatingShape kind="triangle" size={50} color={ind.accent} style={{ top: 80, left: "5%", opacity: 0.12 }} speed={22} />
        <div style={{ maxWidth: 1680, margin: "0 auto" }}>
          <div style={{ marginBottom: 56 }}>
            <window.SectionTag tone={ind.accent === "#e85d00" ? "warm" : ind.accent === "#05b89c" ? "teal" : "blue"}>Где мы помогаем</window.SectionTag>
            <h2 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(32px, 4vw, 56px)",
              fontWeight: 800,
              color: "#0d0d0d",
              letterSpacing: "-0.03em",
              lineHeight: 1.05,
              marginTop: 24,
              maxWidth: 800,
            }}>
              Болевые точки,<br />
              <span className="text-gradient-blue">с которыми работаем еженедельно</span>
            </h2>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 20,
          }}>
            {ind.pains.map((p, i) => <PainCard key={i} p={p} index={i} accent={ind.accent} />)}
          </div>
        </div>
      </section>

      {/* OFFERS */}
      <section style={{ padding: "80px 32px", background: "#f8f7f4" }}>
        <div style={{ maxWidth: 1680, margin: "0 auto" }}>
          <div style={{ marginBottom: 48 }}>
            <window.SectionTag>Наши решения</window.SectionTag>
            <h2 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(32px, 4vw, 56px)",
              fontWeight: 800,
              color: "#0d0d0d",
              letterSpacing: "-0.03em",
              lineHeight: 1.05,
              marginTop: 24,
              maxWidth: 700,
            }}>
              Прод-готовые предложения<br />
              для индустрии
            </h2>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
            gap: 20,
          }}>
            {ind.offers.map((o, i) => <OfferCard key={i} offer={o} index={i} accent={ind.accent} />)}
          </div>
        </div>
      </section>

      {/* REFERENCE CASE BLOCK */}
      {refCase && (
        <section style={{ padding: "80px 32px", background: "#f0ede8" }}>
          <div style={{ maxWidth: 1680, margin: "0 auto" }}>
            <div style={{ marginBottom: 36 }}>
              <window.SectionTag tone="warm">Reference case</window.SectionTag>
              <h2 style={{
                fontFamily: "Syne, sans-serif",
                fontSize: "clamp(28px, 3.4vw, 44px)",
                fontWeight: 800,
                color: "#0d0d0d",
                letterSpacing: "-0.025em",
                lineHeight: 1.05,
                marginTop: 24,
                maxWidth: 700,
              }}>
                Главный кейс в этой индустрии
              </h2>
            </div>
            <window.Tilt max={4} scale={1.005}>
              <window.Link to={`/work/${refCase.slug}`}>
                <div className="card-hover" style={{
                  background: "#fff",
                  borderRadius: 28,
                  overflow: "hidden",
                  border: "1px solid rgba(0,0,0,0.06)",
                  display: "grid",
                  gridTemplateColumns: "1fr 1.2fr",
                  cursor: "pointer",
                }} className="ref-case-row">
                  <div style={{ minHeight: 360, position: "relative", overflow: "hidden" }}>
                    <img src={refCase.image} alt={window.tx(refCase.title)} style={{
                      width: "100%", height: "100%", objectFit: "cover",
                    }} />
                    <div style={{
                      position: "absolute", inset: 0,
                      background: `linear-gradient(135deg, ${refCase.accent}40, ${refCase.accent}90)`,
                      mixBlendMode: "multiply",
                    }} />
                  </div>
                  <div style={{ padding: "44px 48px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
                    <div style={{
                      fontSize: 11, fontWeight: 700,
                      letterSpacing: "0.12em", textTransform: "uppercase",
                      color: refCase.accent, marginBottom: 14,
                    }}>
                      {window.tx(refCase.category)} · {refCase.year}
                    </div>
                    <h3 style={{
                      fontFamily: "Syne, sans-serif",
                      fontSize: 38, fontWeight: 800,
                      color: "#0d0d0d", letterSpacing: "-0.025em",
                      lineHeight: 1.05, marginBottom: 12,
                    }}>
                      {window.tx(refCase.title)}
                    </h3>
                    <div style={{ fontSize: 14, color: refCase.accent, fontWeight: 600, marginBottom: 20 }}>
                      {window.tx(refCase.subtitle)}
                    </div>
                    <p style={{
                      fontFamily: "Inter, sans-serif",
                      fontSize: 15, lineHeight: 1.7, color: "#3a3a3a",
                      marginBottom: 24,
                    }}>
                      {window.tx(refCase.shortDesc)}
                    </p>
                    <div style={{
                      display: "grid",
                      gridTemplateColumns: "repeat(2, 1fr)",
                      gap: 12,
                      marginBottom: 24,
                    }}>
                      {refCase.metrics.slice(0, 4).map((m, i) => (
                        <div key={i} style={{
                          padding: "12px 14px",
                          background: `${refCase.accent}08`,
                          borderRadius: 10,
                          borderLeft: `3px solid ${refCase.accent}`,
                        }}>
                          <div style={{
                            fontFamily: "Inter, sans-serif",
                            fontSize: 18, fontWeight: 700,
                            color: refCase.accent,
                            letterSpacing: "-0.015em",
                            fontVariantNumeric: "tabular-nums",
                          }}>{m.v}</div>
                          <div style={{ fontSize: 11, color: "#7a7a7a", marginTop: 3 }}>{m.l}</div>
                        </div>
                      ))}
                    </div>
                    <span className="link-anim" style={{
                      fontSize: 14, fontWeight: 600, color: refCase.accent,
                    }}>
                      Открыть полный кейс <window.I.ArrowUpRight size={14} color={refCase.accent} />
                    </span>
                  </div>
                </div>
              </window.Link>
            </window.Tilt>
            <style>{`@media (max-width: 880px){ .ref-case-row{ grid-template-columns: 1fr !important; }}`}</style>
          </div>
        </section>
      )}

      {/* CTA */}
      <section style={{ padding: "80px 32px 140px", background: "#f8f7f4" }}>
        <div style={{
          maxWidth: 1320, margin: "0 auto",
          padding: "56px 52px",
          borderRadius: 32,
          background: `linear-gradient(135deg, ${ind.accent} 0%, ${ind.accent}cc 100%)`,
          color: "#fff",
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "space-between",
          alignItems: "center",
          gap: 32,
          position: "relative",
          overflow: "hidden",
        }}>
          <window.AnimatedBlob size={400} gradient={`linear-gradient(135deg, #ffffff, ${ind.accent})`} style={{ top: "-30%", right: "-10%" }} opacity={0.3} />
          <div style={{ position: "relative", maxWidth: 580 }}>
            <h3 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(28px, 3.4vw, 42px)",
              fontWeight: 800,
              letterSpacing: "-0.025em",
              lineHeight: 1.1,
              marginBottom: 14,
            }}>
              Запросите 30-минут с инженером по индустрии {window.tx(ind.title)}
            </h3>
            <p style={{ fontSize: 15, color: "rgba(255,255,255,0.85)", lineHeight: 1.65, maxWidth: 480 }}>
              Без sales-менеджеров. Сразу с инженером, который работал
              в этой индустрии.
            </p>
          </div>
          <window.GradientBtn to="/contact" size="lg" style={{ background: "#fff", color: ind.accent, boxShadow: "0 12px 36px rgba(0,0,0,0.2)" }}>
            <span style={{ color: ind.accent, fontWeight: 600 }}>Запросить звонок</span>
          </window.GradientBtn>
        </div>
      </section>
    </>
  );
}

function PainCard({ p, index, accent }) {
  const ref = window.useReveal("reveal", 80 * index);
  return (
    <div ref={ref}>
      <window.Tilt max={4} scale={1.01}>
        <div className="card-hover" style={{
          padding: 28,
          background: "#ffffff",
          borderRadius: 20,
          border: "1px solid rgba(0,0,0,0.06)",
          minHeight: 240,
          display: "flex", flexDirection: "column", gap: 16,
        }}>
          <h4 style={{
            fontFamily: "Syne, sans-serif",
            fontSize: 18, fontWeight: 700, color: "#0d0d0d",
            letterSpacing: "-0.02em", marginBottom: 4,
          }}><span className="title-anim">{p.title}</span></h4>
          <p style={{
            fontSize: 13, lineHeight: 1.7, color: "#5a5a5a",
            flex: 1,
          }}>{p.desc}</p>
          <div style={{
            padding: "12px 14px",
            background: `${accent}08`,
            borderRadius: 10,
            borderLeft: `3px solid ${accent}`,
          }}>
            <div style={{
              fontFamily: "Inter, sans-serif",
              fontSize: 18, fontWeight: 700, color: accent,
              letterSpacing: "-0.015em",
              fontVariantNumeric: "tabular-nums",
              lineHeight: 1,
            }}>{p.metric}</div>
            <div style={{ fontSize: 11, color: "#5a5a5a", marginTop: 4, fontWeight: 500 }}>{p.metricLabel}</div>
          </div>
        </div>
      </window.Tilt>
    </div>
  );
}

function OfferCard({ offer, index, accent }) {
  const ref = window.useReveal("reveal", 80 * index);
  return (
    <div ref={ref}>
      <window.Tilt max={5} scale={1.02}>
        <div className="card-hover" style={{
          padding: 28,
          background: "#ffffff",
          borderRadius: 20,
          border: "1px solid rgba(0,0,0,0.06)",
          position: "relative",
          overflow: "hidden",
          minHeight: 160,
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
        }}>
          <div style={{
            position: "absolute", top: 0, left: 0, right: 0,
            height: 3,
            background: `linear-gradient(90deg, ${accent}, ${accent}40)`,
          }} />
          <div>
            <div style={{
              fontFamily: "Inter, sans-serif",
              fontSize: 11, fontWeight: 700,
              letterSpacing: "0.1em", textTransform: "uppercase",
              color: accent, marginTop: 6, marginBottom: 14,
            }}>
              {String(index + 1).padStart(2, "0")}
            </div>
            <h4 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: 22, fontWeight: 700, color: "#0d0d0d",
              letterSpacing: "-0.02em", lineHeight: 1.2,
            }}><span className="title-anim">{offer}</span></h4>
          </div>
          <window.I.ArrowUpRight size={18} color={accent} />
        </div>
      </window.Tilt>
    </div>
  );
}

function IndustriesPage({ slug }) {
  if (slug) return <IndustryDetail slug={slug} />;
  return <IndustriesIndex />;
}
window.IndustriesPage = IndustriesPage;