/* ABOUT — centered card, multi-style pull-up headline, scroll-linked letter reveal.
   Card tilts subtly toward the cursor on hover (pointer devices only). */

function About() {
  const cardRef = React.useRef(null);
  useTilt(cardRef);

  return (
    <section className="bg-black py-24 md:py-32 px-4 md:px-6" style={{ perspective: "1400px" }}>
      <div
        ref={cardRef}
        className="bg-[#101010] rounded-2xl md:rounded-[2rem] max-w-6xl mx-auto px-6 sm:px-10 md:px-16 py-20 md:py-28 text-center"
        style={{ transformStyle: "flat" }}
      >
        <div className="text-primary text-[10px] sm:text-xs tracking-[0.2em] uppercase mb-8 md:mb-12">
          Total Visibility Specialists
        </div>

        <WordsPullUpMultiStyle
          className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl max-w-3xl mx-auto leading-[1.05] sm:leading-[1] text-primary"
          segments={[
            { text: "We are DATA DOGS,", className: "font-normal" },
            { text: "a total-visibility studio.", className: "font-serif-italic" },
            { text: "We engineer SEO, GEO, and automation as one compounding system.", className: "font-normal" },
          ]}
          stagger={0.08}
        />

        <div className="mt-10 md:mt-14 max-w-2xl mx-auto">
          <ScrollRevealText
            text="Most agencies sell traffic. We build the infrastructure that makes every search engine — Google, ChatGPT, Gemini, Perplexity — recognise, trust, and recommend your business. One discipline, two surfaces, compounding results."
            className="text-xs sm:text-sm md:text-base"
            style={{ color: "#DEDBC8", lineHeight: 1.6 }}
          />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About });