/* === COMPANY — /company  (About us page; team intentionally NOT included) === */

const { useState: cmState } = React;

function CompanyPage() {
  const titleRef = window.useReveal("reveal");
  const c = window.SITE_DATA.company;
  const brand = window.SITE_DATA.brand;

  return (
    <>
      {/* HERO */}
      <section style={{
        padding: "120px 32px 90px",
        background: "#f8f7f4",
        position: "relative",
        overflow: "hidden",
      }}>
        <window.AnimatedBlob size={620} gradient="linear-gradient(135deg, #0a6ef5, #05b89c)" style={{ top: "-15%", right: "-10%" }} opacity={0.14} />
        <window.AnimatedBlob size={420} gradient="linear-gradient(135deg, #e85d00, #f5a623)" style={{ bottom: "-25%", left: "-5%" }} opacity={0.08} />
        <window.FloatingShape kind="diamond" size={90} color="#0a6ef5" style={{ top: "20%", right: "10%", opacity: 0.15 }} speed={20} />
        <window.FloatingShape kind="ring" size={120} color="#05b89c" style={{ bottom: "20%", left: "10%", opacity: 0.18 }} 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>О компании</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: 1320,
          }}>
            {c.headline1}<br />
            <span className="text-gradient-blue">{c.headline2}</span>
          </h1>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: "clamp(16px, 1.25vw, 19px)",
            lineHeight: 1.7,
            color: "#3a3a3a",
            maxWidth: 760,
          }}>
            {c.lead}
          </p>
        </div>
      </section>

      {/* NUMBERS — modest stat tiles */}
      <section style={{ padding: "20px 32px 100px", background: "#f8f7f4" }}>
        <div style={{ maxWidth: 1680, margin: "0 auto" }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
            gap: 16,
          }}>
            {c.numbers.map((n, i) => <CompanyStatTile key={i} n={n} index={i} />)}
          </div>
        </div>
      </section>

      {/* STORY / TIMELINE */}
      <section style={{ padding: "80px 32px", background: "#f0ede8", position: "relative", overflow: "hidden" }}>
        <window.Orb size={600} color="rgba(10,110,245,0.04)" style={{ top: "20%", left: "50%", transform: "translate(-50%, -50%)" }} drift />
        <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative" }}>
          <div style={{ marginBottom: 56 }}>
            <window.SectionTag tone="teal">История</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 />
              <span className="text-gradient-blue">до сегодняшнего дня</span>
            </h2>
          </div>

          <div style={{
            background: "#ffffff",
            borderRadius: 28,
            padding: 52,
            border: "1px solid rgba(0,0,0,0.06)",
            position: "relative",
          }}>
            <div style={{
              position: "absolute",
              left: 80, top: 80, bottom: 80,
              width: 1,
              background: "linear-gradient(to bottom, #0a6ef5, #05b89c, transparent)",
              opacity: 0.25,
            }} />
            {c.milestones.map((m, i) => <MilestoneRow key={i} m={m} index={i} />)}
          </div>
        </div>
      </section>

      {/* VALUES */}
      <section style={{ padding: "80px 32px", background: "#f8f7f4", position: "relative" }}>
        <window.FloatingShape kind="triangle" size={50} color="#0a6ef5" style={{ top: 80, right: "8%", opacity: 0.12 }} speed={22} />
        <div style={{ maxWidth: 1680, margin: "0 auto" }}>
          <div style={{ marginBottom: 56 }}>
            <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 />
              <span className="text-gradient-blue">меряем каждое решение</span>
            </h2>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 20,
          }}>
            {c.values.map((v, i) => <ValueCard key={i} v={v} index={i} />)}
          </div>
        </div>
      </section>

      {/* LOCATIONS */}
      <section style={{ padding: "80px 32px", background: "#f0ede8" }}>
        <div style={{ maxWidth: 1680, margin: "0 auto" }}>
          <div style={{ marginBottom: 56 }}>
            <window.SectionTag tone="warm">Где мы есть</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 />
              <span className="text-gradient-warm">по всему миру</span>
            </h2>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 20,
          }}>
            {c.locations.map((loc, i) => <LocationCard key={i} loc={loc} index={i} />)}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "100px 32px 140px", background: "#f8f7f4" }}>
        <div style={{
          maxWidth: 1320, margin: "0 auto",
          padding: "60px 52px",
          borderRadius: 32,
          background: "linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%)",
          color: "#fff",
          position: "relative",
          overflow: "hidden",
          textAlign: "center",
        }}>
          <window.AnimatedBlob size={500} gradient="linear-gradient(135deg, #0a6ef5, #05b89c)" style={{ top: "-30%", left: "10%" }} opacity={0.35} />
          <window.AnimatedBlob size={400} gradient="linear-gradient(135deg, #e85d00, #f5a623)" style={{ bottom: "-30%", right: "5%" }} opacity={0.25} />
          <div style={{ position: "relative" }}>
            <window.SectionTag>
              <span style={{ color: "#7daefb" }}>Хотите работать с нами?</span>
            </window.SectionTag>
            <h3 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(28px, 4vw, 56px)",
              fontWeight: 800,
              letterSpacing: "-0.03em",
              lineHeight: 1.05,
              marginTop: 24,
              marginBottom: 24,
              maxWidth: 700,
              marginLeft: "auto", marginRight: "auto",
            }}>
              Откройте проект с нами
            </h3>
            <p style={{
              fontSize: 16, lineHeight: 1.7,
              color: "rgba(255,255,255,0.7)",
              maxWidth: 540, margin: "0 auto 36px",
            }}>
              Расскажите про задачу — в течение 24 часов мы вернёмся с
              архитектурным мнением и оценкой сроков.
            </p>
            <window.GradientBtn to="/contact" size="lg">Связаться</window.GradientBtn>
          </div>
        </div>
      </section>
    </>
  );
}

function CompanyStatTile({ n, index }) {
  const ref = window.useReveal("reveal", 80 * index);
  const colors = ["#0d0d0d", "#0a6ef5", "#05b89c", "#e85d00"];
  const color = colors[index % colors.length];
  return (
    <div ref={ref}>
      <window.Tilt max={3} scale={1.01}>
        <div style={{
          padding: "24px 26px",
          background: "#ffffff",
          borderRadius: 18,
          border: "1px solid rgba(0,0,0,0.06)",
          boxShadow: "0 4px 20px rgba(0,0,0,0.03)",
          position: "relative",
          overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", top: 0, left: 0, right: 0,
            height: 3,
            background: `linear-gradient(90deg, ${color}, ${color}40)`,
          }} />
          <div style={{
            fontFamily: "Syne, sans-serif",
            fontSize: 36, fontWeight: 800,
            color, letterSpacing: "-0.025em", lineHeight: 1,
            marginTop: 6,
          }}>
            <window.AnimatedNum value={n.v} />
          </div>
          <div style={{ fontSize: 12, color: "#7a7a7a", marginTop: 10, fontWeight: 500 }}>{n.l}</div>
        </div>
      </window.Tilt>
    </div>
  );
}

function MilestoneRow({ m, index }) {
  const ref = window.useReveal("reveal-left", 70 * index);
  return (
    <div ref={ref} style={{
      display: "grid",
      gridTemplateColumns: "100px 30px 1fr",
      gap: 24, alignItems: "flex-start",
      marginBottom: 28,
    }}>
      <div style={{
        fontFamily: "Syne, sans-serif",
        fontSize: 15, fontWeight: 700,
        color: "#0a6ef5",
        letterSpacing: "0.04em",
        textAlign: "right",
        paddingTop: 4,
      }}>{m.year}</div>
      <div style={{ paddingTop: 8 }}>
        <div style={{
          width: 12, height: 12, borderRadius: "50%",
          background: "#0a6ef5",
          boxShadow: "0 0 0 4px rgba(10,110,245,0.15)",
        }} />
      </div>
      <div style={{
        fontFamily: "Inter, sans-serif",
        fontSize: 15, lineHeight: 1.65,
        color: "#3a3a3a",
        paddingTop: 2,
      }}>
        {m.event}
      </div>
    </div>
  );
}

function ValueCard({ v, index }) {
  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: 200,
          position: "relative",
        }}>
          <div style={{
            position: "absolute", top: 20, right: 24,
            fontFamily: "Syne, sans-serif",
            fontSize: 14, fontWeight: 700,
            color: "rgba(10,110,245,0.25)",
            letterSpacing: "0.04em",
          }}>{String(index + 1).padStart(2, "0")}</div>
          <h4 style={{
            fontFamily: "Syne, sans-serif",
            fontSize: 19, fontWeight: 700,
            color: "#0d0d0d",
            letterSpacing: "-0.02em",
            marginBottom: 14, paddingRight: 36,
            lineHeight: 1.2,
          }}><span className="title-anim">{v.title}</span></h4>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 13, lineHeight: 1.7, color: "#5a5a5a",
          }}>{v.desc}</p>
        </div>
      </window.Tilt>
    </div>
  );
}

function LocationCard({ loc, index }) {
  const ref = window.useReveal("reveal", 80 * index);
  const accents = ["#0a6ef5", "#05b89c", "#e85d00"];
  const accent = accents[index % accents.length];
  return (
    <div ref={ref}>
      <window.Tilt max={5} scale={1.015}>
        <div className="card-hover" style={{
          padding: 32,
          background: "#ffffff",
          borderRadius: 24,
          border: "1px solid rgba(0,0,0,0.06)",
          position: "relative",
          overflow: "hidden",
          minHeight: 200,
          display: "flex",
          flexDirection: "column",
          gap: 12,
        }}>
          <div style={{
            position: "absolute",
            top: -50, right: -50,
            width: 200, height: 200, borderRadius: "50%",
            background: `radial-gradient(circle, ${accent}15, transparent 70%)`,
          }} />
          <div style={{
            width: 48, height: 48, borderRadius: 12,
            background: `${accent}10`,
            border: `1px solid ${accent}30`,
            display: "flex", alignItems: "center", justifyContent: "center",
            marginBottom: 8,
            position: "relative",
          }}>
            <window.I.MapPin size={18} color={accent} />
          </div>
          <div style={{
            fontSize: 11, fontWeight: 700,
            letterSpacing: "0.12em", textTransform: "uppercase",
            color: accent,
          }}>{loc.role}</div>
          <div style={{
            fontFamily: "Syne, sans-serif",
            fontSize: 22, fontWeight: 700, color: "#0d0d0d",
            letterSpacing: "-0.02em",
          }}><span className="title-anim">{loc.city}</span></div>
          <div style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 13, color: "#5a5a5a",
          }}>{loc.country}</div>
        </div>
      </window.Tilt>
    </div>
  );
}

window.CompanyPage = CompanyPage;