// React provided globally
const { useState, useEffect, useRef } = React;
/* ──────────────────────────────────────────────
   CENTURION MEDIA — Full Site with Page Navigation
   Homepage + Services Page · Light Theme
   ────────────────────────────────────────────── */

// ─── Animated Gradient Mesh Background ───
const MeshGradient = () => null;

// ─── Canvas Particle Background ───
const ParticleCanvas = () => null;

// ─── Hooks & Utilities ───
const useInView = (threshold = 0.05) => {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold, rootMargin: "50px" });
    obs.observe(el);
    return () => obs.disconnect();
  }, [threshold]);
  return [ref, visible];
};

const FadeIn = ({ children, delay = 0, direction = "up", className = "" }) => {
  const [ref, visible] = useInView(0.05);
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setMounted(true), 100 + delay * 1000);
    return () => clearTimeout(t);
  }, [delay]);
  const show = visible || mounted;
  const transforms = { up: "translateY(44px)", down: "translateY(-44px)", left: "translateX(44px)", right: "translateX(-44px)", none: "translateY(0)" };
  return (
    <div ref={ref} className={className} style={{
      opacity: show ? 1 : 0,
      transform: show ? "translate(0,0)" : transforms[direction],
      transition: `opacity 0.9s cubic-bezier(0.16,1,0.3,1) ${delay}s, transform 0.9s cubic-bezier(0.16,1,0.3,1) ${delay}s`,
      overflow: "visible",
    }}>{children}</div>
  );
};

// ─── Visual Separators ───
const GradientDivider = () => (
  <div className="max-w-7xl mx-auto px-6">
    <div className="h-px bg-[#16130D]/[0.08]" />
  </div>
);

// ─── Tinted Section Wrapper ───
const TintedSection = ({ children, className = "" }) => (
  <div className={`relative ${className}`}>{children}</div>
);

// ─── Gradient Feature Banner ───
const GradientBanner = ({ children }) => (
  <div className="relative rounded-3xl border border-[#16130D]/[0.08] bg-transparent p-10 md:p-14">
    {children}
  </div>
);

// ─── Glow Button ───
const GlowButton = ({ children, primary, href = "#", onClick }) => {
  const ease = "cubic-bezier(0.25, 1, 0.5, 1)";
  if (primary) {
    return (
      <a href={href} onClick={onClick}
        className="btn-primary-link group relative inline-flex items-center gap-3 py-2 text-sm font-medium tracking-[0.18em] uppercase cursor-pointer select-none text-[#16130D] hover:text-[#6B7A4E]"
        style={{ fontFamily: "'Inter', sans-serif", transition: `color 300ms ${ease}` }}>
        <span>{children}</span>
        <span className="inline-block text-base group-hover:translate-x-1" style={{ transition: `transform 300ms ${ease}` }}>&rarr;</span>
      </a>
    );
  }
  return (
    <a href={href} onClick={onClick}
      className="group inline-flex items-center gap-3 px-7 py-3.5 text-sm font-medium tracking-[0.18em] uppercase cursor-pointer select-none text-[#16130D]/70 hover:text-[#6B7A4E]"
      style={{
        fontFamily: "'Inter', sans-serif",
        borderRadius: 4,
        border: "1px solid rgba(22,19,13,0.18)",
        transition: `color 300ms ${ease}, border-color 300ms ${ease}, background-color 300ms ${ease}`,
      }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = "#6B7A4E"; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(22,19,13,0.18)"; }}>
      <span>{children}</span>
      <span className="inline-block text-base group-hover:translate-x-1" style={{ transition: `transform 300ms ${ease}` }}>&rarr;</span>
    </a>
  );
};

// ─── AG Monogram Logo ───
const AGLogo = ({ size = 36 }) => {
  const id = `ag-${Math.random().toString(36).slice(2, 6)}`;
  return (
    <svg width={size} height={size} viewBox="0 0 100 105" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id={`${id}-g1`} x1="5" y1="0" x2="95" y2="105" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#6B7A4E" />
          <stop offset="30%" stopColor="#6B7A4E" />
          <stop offset="55%" stopColor="#6B7A4E" />
          <stop offset="80%" stopColor="#4A5A32" />
          <stop offset="100%" stopColor="#4A5A32" />
        </linearGradient>
        <linearGradient id={`${id}-g2`} x1="15" y1="15" x2="85" y2="95" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#8B9A6E" />
          <stop offset="35%" stopColor="#6B7A4E" />
          <stop offset="65%" stopColor="#4A5A32" />
          <stop offset="100%" stopColor="#5A6940" />
        </linearGradient>
        <linearGradient id={`${id}-g3`} x1="25" y1="25" x2="75" y2="90" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#6B7A4E" />
          <stop offset="50%" stopColor="#6B7A4E" />
          <stop offset="100%" stopColor="#5A6940" />
        </linearGradient>
      </defs>
      {/* Outer A - large */}
      <path d="M48 4L6 92H18L28 72H68L78 92H90L48 4Z"
        stroke={`url(#${id}-g1)`} strokeWidth="4" strokeLinejoin="round" strokeLinecap="round" fill="none" />
      {/* Middle A - offset slightly */}
      <path d="M48 18L16 88H26L34 72H62L70 88H80L48 18Z"
        stroke={`url(#${id}-g2)`} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round" fill="none" />
      {/* G - overlapping bottom right */}
      <path d="M78 58C78 44 68 36 56 36C44 36 34 46 34 58C34 70 44 80 56 80C64 80 70 76 74 70H58V62H80C80 62 80 60 78 58Z"
        stroke={`url(#${id}-g3)`} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round" fill="none"
        transform="translate(6, 14) scale(0.55)" />
      {/* Inner A - smallest echo */}
      <path d="M48 32L28 82H36L40 72H56L60 82H68L48 32Z"
        stroke={`url(#${id}-g3)`} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" fill="none" opacity="0.6" />
      {/* A crossbar accents */}
      <line x1="32" y1="64" x2="64" y2="64" stroke={`url(#${id}-g2)`} strokeWidth="2.5" strokeLinecap="round" opacity="0.4" />
    </svg>
  );
};

const LogoFull = ({ size = 36, dark = false }) => (
  <div className="flex items-baseline gap-1.5">
    <span className="font-medium tracking-[0.15em]" style={{ 
      fontFamily: "'Cormorant Garamond', sans-serif", 
      fontSize: size * 0.42,
      color: dark ? "white" : "#16130D",
    }}>Centurion</span>
    <span className="font-medium tracking-[0.15em]" style={{ 
      fontFamily: "'Cormorant Garamond', sans-serif", 
      fontSize: size * 0.42,
      color: dark ? "white" : "#16130D",
    }}>Media</span>
  </div>
);
const FloatingIcon = ({ icon, x, y, delay, size = 44 }) => (
  <div
    className="absolute pointer-events-none select-none hidden lg:flex items-center justify-center rounded-2xl bg-transparent border border-white shadow-lg shadow-[#6B7A4E]/[0.08]"
    style={{ width: size, height: size, left: x, top: y, animation: `floatIcon 6s ease-in-out ${delay}s infinite` }}
  >
    <span className="text-lg">{icon}</span>
  </div>
);

// ─── Navbar ───
const Navbar = ({ page, onNavigate }) => {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const handleNav = (target, e) => {
    e.preventDefault();
    setMobileOpen(false);
    if (["catalytic", "services", "process", "contact", "terms", "mediakit"].includes(target)) {
      onNavigate(target);
    } else if (target === "home") {
      onNavigate("home");
    } else {
      if (page !== "home") {
        onNavigate("home");
        setTimeout(() => {
          document.getElementById(target)?.scrollIntoView({ behavior: "smooth" });
        }, 100);
      } else {
        document.getElementById(target)?.scrollIntoView({ behavior: "smooth" });
      }
    }
  };

  return (
    <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300`} style={{ background: "#F0EBD9", borderBottom: scrolled ? "1px solid rgba(22,19,13,0.08)" : "1px solid transparent" }}>
      <div className="max-w-7xl mx-auto flex items-center justify-between px-6 py-4 lg:py-5">
        <a href="#" onClick={(e) => handleNav("home", e)} className="flex items-center group">
          <LogoFull size={38} />
        </a>

        <div className="hidden md:flex items-center gap-7">
          {[
            { name: "Catalytic Marketing", id: "catalytic" },
            { name: "Services", id: "services" },
            { name: "Process", id: "process" },
            { name: "Contact", id: "contact" },
          ].map((link) => (
            <a key={link.id} href="#" onClick={(e) => handleNav(link.id, e)}
              className={`text-sm font-medium transition-colors duration-300 ${page === link.id ? "text-[#6B7A4E]" : "text-black/80 hover:text-[#6B7A4E]"}`}
              style={{ fontFamily: "'Inter', sans-serif" }}>{link.name}</a>
          ))}
        </div>

        <button className="md:hidden text-black/80 hover:text-[#6B7A4E] transition-colors" onClick={() => setMobileOpen(!mobileOpen)}>
          {mobileOpen
            ? <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" d="M6 18L18 6M6 6l12 12" /></svg>
            : <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" d="M4 6h16M4 12h16M4 18h16" /></svg>}
        </button>
      </div>

      {mobileOpen && (
        <div className="md:hidden border-t border-[#16130D]/[0.08] px-6 pb-6 pt-2" style={{ background: "#F0EBD9" }}>
          {[
            { name: "Catalytic Marketing", id: "catalytic" },
            { name: "Services", id: "services" },
            { name: "Process", id: "process" },
            { name: "Contact", id: "contact" },
          ].map((link) => (
            <a key={link.id} href="#" onClick={(e) => handleNav(link.id, e)}
              className="block py-3 text-black/85 hover:text-[#6B7A4E] text-base font-medium border-b border-[#16130D]/[0.06] transition-colors"
              style={{ fontFamily: "'Inter', sans-serif" }}>{link.name}</a>
          ))}
        </div>
      )}
    </nav>
  );
};

/* ══════════════════════════════════════════════
   HOMEPAGE COMPONENTS
   ══════════════════════════════════════════════ */

const Hero = ({ onNavigate }) => (
  <section className="relative min-h-screen flex items-center justify-center pt-20" id="hero">
    {/* Grid pattern */}
    

    {/* Decorative rings */}
    
    
    

    {/* Corner accents */}
    
    

    <div className="relative z-10 max-w-5xl mx-auto px-6 text-center">
      <FadeIn delay={0.2}>
        <div className="mb-8">
          <div className="text-5xl sm:text-6xl md:text-7xl lg:text-[5.5rem] font-bold text-[#16130D]" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, color: "#16130D", fontWeight: 400, letterSpacing: "-0.02em" }}>
            Influencer marketing
          </div>
        </div>
      </FadeIn>

      <FadeIn delay={0.4}>
        <p className="text-xl md:text-2xl text-black/75 max-w-2xl mx-auto mb-14 leading-relaxed tracking-wide" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: "0.02em" }}>
          Go viral in one click.
        </p>
      </FadeIn>

      <FadeIn delay={0.55}>
        <div className="flex flex-col sm:flex-row gap-5 justify-center">
          <GlowButton primary href="mailto:sales@centurionmedia.agency">Start a Campaign</GlowButton>
          <GlowButton href="#" onClick={(e) => { e.preventDefault(); onNavigate("services"); }}>Our Services</GlowButton>
        </div>
      </FadeIn>
    </div>
  </section>
);


const steps = [
  { num: "01", title: "Decode", desc: "We reverse-engineer your product's growth levers, study your best users, and map the creator landscape your competitors are ignoring.", color: "#6B7A4E" },
  { num: "02", title: "Match", desc: "Not follower counts — conversion history. We shortlist creators whose audiences have actually downloaded, subscribed, or paid for products like yours.", color: "#8B9A6E" },
  { num: "03", title: "Deploy", desc: "Coordinated content drops across platforms, timed for maximum momentum. Every post tracked from publish to payment.", color: "#4A5A32" },
  { num: "04", title: "Compound", desc: "We kill what doesn't work, double down on what does, and build a flywheel of creators who keep your product in the conversation.", color: "#6B7A4E" },
];

const Process = () => (
  <section className="relative py-32 md:py-40 overflow-visible" id="process">
    <div className="max-w-7xl mx-auto px-6">
      <FadeIn>
        <div className="text-center mb-20">
          <div className="inline-flex items-center gap-3 mb-5">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Our Process</span>
          </div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-normal text-[#16130D] pb-3" style={{ fontFamily: "'Cormorant Garamond', sans-serif", lineHeight: 1.4, overflow: "visible" }}>
            From cold start to compound growth.
          </h2>
        </div>
      </FadeIn>
      <div className="relative">
        <div className="hidden lg:block absolute top-7 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-[#16130D]/[0.08]" />
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-10 md:gap-8">
          {steps.map((s, i) => (
            <FadeIn key={i} delay={0.15 * i}>
              <div className="relative group cursor-default">
                <div className="relative z-10 w-14 h-14 rounded-full border-2 flex items-center justify-center mb-7 mx-auto lg:mx-0 transition-all duration-500 group-hover:scale-110 bg-transparent"
                  style={{ borderColor: `${s.color}25` }}
                  onMouseEnter={(e) => { e.currentTarget.style.boxShadow = `0 0 30px ${s.color}20`; e.currentTarget.style.borderColor = `${s.color}50`; }}
                  onMouseLeave={(e) => { e.currentTarget.style.boxShadow = `0 0 0 0 transparent`; e.currentTarget.style.borderColor = `${s.color}25`; }}>
                  <span className="text-sm font-bold" style={{ color: s.color, fontFamily: "'Inter', sans-serif" }}>{s.num}</span>
                </div>
                <div className="text-center lg:text-left">
                  <h3 className="text-lg font-[580] text-[#16130D] mb-2.5 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{s.title}</h3>
                  <p className="text-black/75 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>{s.desc}</p>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const HomeCTA = ({ onNavigate }) => (
  <>
    {/* Quick nav cards */}
    <section className="relative py-24 md:py-32">
      <div className="max-w-7xl mx-auto px-6">
        <FadeIn>
          <div className="text-center mb-14">
            <div className="inline-flex items-center gap-3 mb-5">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Explore</span>
          </div>
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-normal text-[#16130D] pb-3" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
              Dive deeper.
            </h2>
          </div>
        </FadeIn>
        <div className="grid md:grid-cols-3 gap-6">
          {[
            { title: "Our Process", desc: "See exactly how we take you from zero to viral — step by step.", page: "process", accent: "#6B7A4E" },
            { title: "Our Services", desc: "Creator campaigns, launch blitzes, and always-on growth.", page: "services", accent: "#4A5A32" },
            { title: "Contact Us", desc: "Book a 30-minute call. Custom strategy in 48 hours.", page: "contact", accent: "#8B9A6E" },
          ].map((card, i) => (
            <FadeIn key={i} delay={0.1 * i}>
              <div onClick={() => onNavigate(card.page)}
                className="group relative rounded-3xl bg-transparent border border-[#16130D]/[0.08] p-8 md:p-10 hover:bg-[#16130D]/[0.02] hover:border-[#6B7A4E]/15 transition-all duration-500 cursor-pointer h-full  hover:border-[#6B7A4E]/30 hover:-translate-y-1">
                <div className="w-2.5 h-2.5 rounded-full mb-5" style={{ background: card.accent }} />
                <h3 className="text-xl font-[580] text-[#16130D] mb-3 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{card.title}</h3>
                <p className="text-black/80 text-sm leading-relaxed mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>{card.desc}</p>
                <div className="flex items-center gap-2 text-sm font-medium opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all duration-500" style={{ color: card.accent, fontFamily: "'Inter', sans-serif" }}>
                  <span>Explore</span>
                  <span>&rarr;</span>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>

    {/* CTA */}
    <section className="relative py-24 md:py-32" id="contact">
      
      <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
        <FadeIn>
          <div className="mb-6">
            <div className="text-4xl md:text-5xl lg:text-7xl font-normal text-[#16130D]" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Your product is ready.</div>
            <div className="mt-2 md:mt-3">
              <span className="text-4xl md:text-5xl lg:text-7xl font-normal inline-block pb-3" style={{ fontFamily: "'Cormorant Garamond', sans-serif", lineHeight: 1.3, color: "#6B7A4E" }}>
                Your audience is waiting.
              </span>
            </div>
          </div>
        </FadeIn>
        <FadeIn delay={0.15}>
          <p className="text-black/75 text-lg md:text-xl max-w-xl mx-auto mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
            We'll send you a custom strategy with creator picks, estimated reach, and a timeline — within 48 hours.
          </p>
        </FadeIn>
        <FadeIn delay={0.3}>
          <GlowButton primary href="mailto:sales@centurionmedia.agency">Book a Strategy Call</GlowButton>
        </FadeIn>
      </div>
    </section>
  </>
);

// ─── Catalytic Marketing ───
const CatalyticMarketing = () => (
  <section className="relative py-32 md:py-40" id="catalytic">
    <div className="max-w-7xl mx-auto px-6">
      {/* Hero heading */}
      <FadeIn>
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-3 mb-8">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>
              Our Strategy
            </span>
          </div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-normal text-[#16130D] pb-3" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            Catalytic Marketing.
          </h2>
          <div className="mt-2">
            <span className="text-xl md:text-2xl font-medium inline-block pb-3" style={{ fontFamily: "'Inter', sans-serif", color: "#6B7A4E" }}>
              The strategy that skyrockets your margins.
            </span>
          </div>
        </div>
      </FadeIn>

      {/* Core explanation */}
      <div className="max-w-3xl mx-auto mb-20">
        <FadeIn delay={0.15}>
          <p className="text-black/85 text-lg leading-relaxed text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
            Instead of putting all your budget behind one creator on one channel, we distribute it across carefully selected influencers on multiple platforms — so your audience encounters your product from different voices, in different places, at the same time.
          </p>
        </FadeIn>
      </div>

      {/* Visual: the 3-platform concept */}
      <FadeIn delay={0.2}>
        <GradientBanner variant="purple">
          <div className="text-center mb-10">
            <h3 className="text-2xl md:text-3xl font-normal text-[#16130D] mb-2" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.005em" }}>How it works</h3>
            <p className="text-black/75 text-sm" style={{ fontFamily: "'Inter', sans-serif" }}>Same audience. Multiple touchpoints. Compounding trust.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              { platform: "Platform 1", example: "TikTok", desc: "A short-form video grabs attention. Your audience discovers your product through a creator they follow daily.", accent: "#6B7A4E", step: "Discovery" },
              { platform: "Platform 2", example: "YouTube", desc: "A deeper breakdown builds understanding. A different creator explains the product's value in detail.", accent: "#4A5A32", step: "Research" },
              { platform: "Platform 3", example: "Instagram", desc: "A third voice reinforces the message. By now, your audience has seen the product three times from three trusted sources.", accent: "#8B9A6E", step: "Conversion" },
            ].map((p, i) => (
              <div key={i} className="group rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-6 hover:bg-[#16130D]/[0.02] hover:border-[#6B7A4E]/30 hover:-translate-y-0.5 transition-all duration-500">
                <div className="flex items-center gap-2 mb-4">
                  <div className="w-2 h-2 rounded-full" style={{ background: p.accent }} />
                  <span className="text-xs font-bold tracking-widest uppercase" style={{ color: p.accent, fontFamily: "'Inter', sans-serif" }}>{p.step}</span>
                </div>
                <h4 className="text-base font-[580] text-[#16130D] mb-1" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{p.example}</h4>
                <p className="text-black/75 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>{p.desc}</p>
              </div>
            ))}
          </div>
          {/* Connecting narrative */}
          <div className="mt-8 text-center">
            <p className="text-[#6B7A4E] text-sm font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
              Each touchpoint reinforces the last &rarr; Trust compounds &rarr; Conversions multiply
            </p>
          </div>
        </GradientBanner>
      </FadeIn>

      {/* Why it works - 3 pillars */}
      <div className="mt-20">
        <FadeIn>
          <div className="text-center mb-14">
            <h3 className="text-3xl md:text-4xl font-normal text-[#16130D] pb-3" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
              Why this outperforms everything else.
            </h3>
          </div>
        </FadeIn>

        <div className="grid md:grid-cols-12 gap-6 md:gap-8 items-start">
          <FadeIn delay={0.1} className="md:col-span-5">
            <div className="group rounded-3xl bg-transparent border border-[#16130D]/[0.08] p-8 md:p-10 hover:bg-[#16130D]/[0.02] hover:border-[#6B7A4E]/30 transition-all duration-500 h-full hover:-translate-y-1">
              <div className="text-[10px] tracking-[0.32em] text-[#6B7A4E] mb-6 font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>01 &nbsp;/&nbsp; PILLAR</div>
              <h4 className="text-xl md:text-2xl font-[580] text-[#16130D] mb-4" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em", lineHeight: 1.2 }}>
                People don't buy in one place
              </h4>
              <p className="text-black/80 text-sm" style={{ fontFamily: "'Inter', sans-serif", lineHeight: 1.65 }}>
                They discover on one platform, research on another, and convert on a third. A single-channel campaign catches them at only one stage. Catalytic Marketing covers the full journey.
              </p>
            </div>
          </FadeIn>
          <FadeIn delay={0.2} className="md:col-span-7 md:mt-12">
            <div className="group rounded-3xl bg-transparent border border-[#16130D]/[0.08] p-8 md:p-10 hover:bg-[#16130D]/[0.02] hover:border-[#6B7A4E]/30 transition-all duration-500 h-full hover:-translate-y-1">
              <div className="text-[10px] tracking-[0.32em] text-[#6B7A4E] mb-6 font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>02 &nbsp;/&nbsp; PILLAR</div>
              <h4 className="text-xl md:text-2xl font-[580] text-[#16130D] mb-4" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em", lineHeight: 1.2 }}>
                Multiple waves beat a single spike
              </h4>
              <p className="text-black/80 text-sm" style={{ fontFamily: "'Inter', sans-serif", lineHeight: 1.65 }}>
                Traditional campaigns generate one burst that fades in days. Catalytic Marketing creates overlapping waves that sustain momentum. More of the right people see it, more of them see it more than once.
              </p>
            </div>
          </FadeIn>
          <FadeIn delay={0.3} className="md:col-span-12">
            <div className="group rounded-3xl bg-transparent border border-[#16130D]/[0.08] p-8 md:p-10 hover:bg-[#16130D]/[0.02] hover:border-[#6B7A4E]/30 transition-all duration-500 hover:-translate-y-1">
              <div className="grid md:grid-cols-12 gap-8 items-start">
                <div className="md:col-span-5">
                  <div className="text-[10px] tracking-[0.32em] text-[#6B7A4E] mb-6 font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>03 &nbsp;/&nbsp; PILLAR</div>
                  <h4 className="text-xl md:text-2xl font-[580] text-[#16130D]" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em", lineHeight: 1.2 }}>
                    Same budget, significantly more revenue
                  </h4>
                </div>
                <div className="md:col-span-7">
                  <p className="text-black/80 text-sm md:text-base" style={{ fontFamily: "'Inter', sans-serif", lineHeight: 1.65 }}>
                    The budget isn't spent harder — it's spent wider and smarter. Independent voices across platforms build trust that a single creator simply can't match. That turns the same investment into dramatically more conversions.
                  </p>
                </div>
              </div>
            </div>
          </FadeIn>
        </div>
      </div>

      {/* Bottom comparison */}
      <div className="mt-20">
        <FadeIn>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="rounded-3xl bg-[#16130D]/[0.03] border border-[#16130D]/[0.06] p-8 md:p-10">
              <span className="text-xs font-bold tracking-widest uppercase text-black/85 mb-4 block" style={{ fontFamily: "'Inter', sans-serif" }}>Traditional Campaign</span>
              <h4 className="text-lg font-bold text-black/85 mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>1 creator. 1 platform. 1 chance.</h4>
              <p className="text-black/85 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Single moment of impact. Audience sees the product once. Attention spikes and fades within days. Most potential customers fall out of the funnel.
              </p>
            </div>
            <div className="relative rounded-3xl overflow-hidden">
              
              <div className="relative bg-transparent border border-[#6B7A4E]/15 rounded-3xl p-8 md:p-10 h-full">
                <span className="text-xs font-bold tracking-widest uppercase text-[#6B7A4E] mb-4 block" style={{ fontFamily: "'Inter', sans-serif" }}>Catalytic Marketing</span>
                <h4 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>Multiple creators. Multiple platforms. Compounding trust.</h4>
                <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Overlapping waves of exposure from independent voices. The same audience encounters your product three times from three trusted sources. Dramatically more people move from awareness to purchase.
                </p>
              </div>
            </div>
          </div>
        </FadeIn>
      </div>
    </div>
  </section>
);

const HomePage = ({ onNavigate }) => (
  <>
    <Hero onNavigate={onNavigate} />
    <CatalyticMarketing />
    <HomeCTA onNavigate={onNavigate} />
  </>
);

/* ══════════════════════════════════════════════
   CATALYTIC MARKETING PAGE
   ══════════════════════════════════════════════ */

const CatalyticPage = () => (
  <>
    {/* Hero */}
    <section className="relative pt-40 pb-16 md:pt-48 md:pb-20">
      
      <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
        <FadeIn delay={0.1}>
          <div className="inline-flex items-center gap-3 mb-10">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Our Strategy</span>
          </div>
        </FadeIn>
        <FadeIn delay={0.2}>
          <div className="mb-6">
            <div className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal text-[#16130D]" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Catalytic Marketing.</div>
            <div className="mt-3 md:mt-4">
              <span className="text-2xl sm:text-3xl md:text-4xl font-normal inline-block pb-3" style={{ fontFamily: "'Cormorant Garamond', sans-serif", lineHeight: 1.3, color: "#6B7A4E" }}>
                The catalyst for your business.
              </span>
            </div>
          </div>
        </FadeIn>
        <FadeIn delay={0.4}>
          <p className="text-lg md:text-xl text-black/80 max-w-2xl mx-auto leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
            A proprietary multi-platform influencer strategy that turns the same budget into significantly more revenue — by mirroring how people actually discover, research, and buy.
          </p>
        </FadeIn>
      </div>
    </section>

    {/* Core concept */}
    <section className="relative py-20 md:py-28">
      <div className="max-w-3xl mx-auto px-6">
        <FadeIn>
          <h3 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            People don't live on one platform.
          </h3>
          <p className="text-black/80 text-base leading-relaxed mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
            A potential customer might spend their morning scrolling TikTok, check Instagram over lunch, and watch YouTube in the evening. A traditional influencer campaign picks one of those moments and hopes it's enough. Catalytic Marketing picks two or three of them.
          </p>
          <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
            By placing one to three influencers across multiple platforms simultaneously, your target audience encounters the product in different contexts throughout their day. It stops feeling like an ad they saw once and starts feeling like something that keeps coming up organically — a fundamentally different experience for the consumer.
          </p>
        </FadeIn>
      </div>
    </section>

    <GradientDivider variant={0} />

    {/* Strategic creator placement */}
    <TintedSection tint="purple">
      <section className="relative py-20 md:py-28">
        <div className="max-w-3xl mx-auto px-6">
          <FadeIn>
            <h3 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
              The right creator on the right platform.
            </h3>
            <p className="text-black/80 text-base leading-relaxed mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
              Rather than selecting creators based purely on follower count, Catalytic Marketing matches each influencer to the platform where their content style is strongest and where the ideal customer profile is most active.
            </p>
            <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
              A creator who excels at quick, attention-grabbing content gets placed on TikTok or Instagram Reels. A creator who is better at detailed explanations gets placed on YouTube. Every piece of content is optimised for the platform it lives on — rather than forcing one creator to repurpose the same material everywhere, which is why so much influencer content feels flat and repetitive.
            </p>
          </FadeIn>
        </div>
      </section>
    </TintedSection>

    {/* How it works visual */}
    <section className="relative py-20 md:py-28">
      <div className="max-w-5xl mx-auto px-6">
        <FadeIn>
          <div className="text-center mb-14">
            <h3 className="text-3xl md:text-4xl font-normal text-[#16130D] pb-3" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
              Three platforms. Three voices. One outcome.
            </h3>
          </div>
        </FadeIn>
        <FadeIn delay={0.15}>
          <GradientBanner variant="purple">
            <div className="grid md:grid-cols-3 gap-6">
              {[
                { step: "Discovery", platform: "TikTok", desc: "A short-form video grabs attention. Your audience discovers the product through a creator they follow daily. The seed is planted.", accent: "#6B7A4E" },
                { step: "Research", platform: "YouTube", desc: "A deeper breakdown builds understanding. A different creator explains the product's value, demonstrates features, and makes the case.", accent: "#4A5A32" },
                { step: "Conversion", platform: "Instagram", desc: "A third voice reinforces the message with a direct link. By now they've seen the product three times from three trusted sources.", accent: "#8B9A6E" },
              ].map((p, i) => (
                <div key={i} className="group rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-6 hover:bg-[#16130D]/[0.02] hover:border-[#6B7A4E]/30 hover:-translate-y-0.5 transition-all duration-500">
                  <div className="flex items-center gap-2 mb-4">
                    <div className="w-2 h-2 rounded-full" style={{ background: p.accent }} />
                    <span className="text-xs font-bold tracking-widest uppercase" style={{ color: p.accent, fontFamily: "'Inter', sans-serif" }}>{p.step}</span>
                  </div>
                  <h4 className="text-base font-[580] text-[#16130D] mb-2" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{p.platform}</h4>
                  <p className="text-black/75 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>{p.desc}</p>
                </div>
              ))}
            </div>
            <div className="mt-8 text-center">
              <p className="text-[#6B7A4E] text-sm font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                Each touchpoint reinforces the last &rarr; Trust compounds &rarr; Conversions multiply
              </p>
            </div>
          </GradientBanner>
        </FadeIn>
      </div>
    </section>

    <GradientDivider variant={1} />

    {/* Eliminating single point of failure */}
    <section className="relative py-20 md:py-28">
      <div className="max-w-3xl mx-auto px-6">
        <FadeIn>
          <h3 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            No more single point of failure.
          </h3>
          <p className="text-black/80 text-base leading-relaxed mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
            When a brand puts its entire budget behind one creator on one channel, everything depends on that one post performing well. If the algorithm buries it, if the creator has an off day, or if the audience simply isn't in a buying mood that afternoon, the campaign underperforms and there's no safety net.
          </p>
          <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
            Catalytic Marketing spreads the risk across multiple creators and multiple platforms, so no single piece of content has to carry the entire campaign. If one post underperforms, the others are still working, and the overall campaign remains effective.
          </p>
        </FadeIn>
      </div>
    </section>

    {/* Psychology of repeated exposure */}
    <TintedSection tint="violet">
      <section className="relative py-20 md:py-28">
        <div className="max-w-3xl mx-auto px-6">
          <FadeIn>
            <h3 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
              The psychology of repeated exposure.
            </h3>
            <p className="text-black/80 text-base leading-relaxed mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
              Marketing research consistently shows that consumers need multiple touchpoints with a product before they take action. A single influencer post might create a moment of interest, but interest without reinforcement fades quickly.
            </p>
            <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
              When someone sees a product mentioned by one creator on TikTok and then sees a different creator discussing it on YouTube a day later, the product moves from "something I noticed" to "something worth looking into." That shift from passive awareness to active consideration is where client acquisition actually happens — and Catalytic Marketing is built to trigger that shift reliably.
            </p>
          </FadeIn>
        </div>
      </section>
    </TintedSection>

    {/* Full buying journey */}
    <section className="relative py-20 md:py-28">
      <div className="max-w-3xl mx-auto px-6">
        <FadeIn>
          <h3 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            Covering the full buying journey.
          </h3>
          <p className="text-black/80 text-base leading-relaxed mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
            Not everyone is ready to purchase the moment they first hear about a product. Some people need to discover it first, then think about it, then see it again before they commit. A short TikTok video might be the discovery moment. A detailed YouTube review might be the research phase. An Instagram post with a direct link might be the final nudge toward conversion.
          </p>
          <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
            Regular campaigns only cover one of these stages and leave the rest to chance. Catalytic Marketing covers multiple stages intentionally, which means fewer potential customers fall out of the funnel between discovery and purchase.
          </p>
        </FadeIn>
      </div>
    </section>

    <GradientDivider variant={2} />

    {/* Compounding trust */}
    <TintedSection tint="blue">
      <section className="relative py-20 md:py-28">
        <div className="max-w-3xl mx-auto px-6">
          <FadeIn>
            <h3 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
              Trust that compounds.
            </h3>
            <p className="text-black/80 text-base leading-relaxed mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
              When a consumer sees a product endorsed by a single influencer, they process it as one person's opinion. When they see it endorsed by two or three different creators across different platforms, it stops feeling like a paid promotion and starts feeling like a genuine trend.
            </p>
            <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
              The product appears to have independent validation from multiple sources, which is far more persuasive than any single endorsement. This perceived consensus lowers the psychological barrier to purchase and makes people more willing to spend money — because they feel like they're joining something rather than being sold something.
            </p>
          </FadeIn>
        </div>
      </section>
    </TintedSection>

    {/* Budget efficiency */}
    <section className="relative py-20 md:py-28">
      <div className="max-w-3xl mx-auto px-6">
        <FadeIn>
          <h3 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            Same budget. Significantly more revenue.
          </h3>
          <p className="text-black/80 text-base leading-relaxed mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
            A traditional campaign concentrates the budget on one large placement that delivers a single spike of attention and then drops off. Catalytic Marketing distributes that budget across multiple smaller placements that create overlapping waves of visibility.
          </p>
          <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
            The result is sustained exposure over a longer period rather than one intense burst that fades within days. The campaign continues generating new clients well after the initial content goes live, because different pieces of content are reaching different segments of the audience at different times. The return on investment stretches further because the money is working across multiple channels simultaneously instead of being exhausted in a single moment.
          </p>
        </FadeIn>
      </div>
    </section>

    {/* Comparison */}
    <section className="relative py-16 md:py-24">
      <div className="max-w-5xl mx-auto px-6">
        <FadeIn>
          <div className="text-center mb-14">
            <h3 className="text-3xl md:text-4xl font-normal text-[#16130D] pb-3" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
              The difference at a glance.
            </h3>
          </div>
        </FadeIn>
        <FadeIn delay={0.15}>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="rounded-3xl bg-[#16130D]/[0.03] border border-[#16130D]/[0.06] p-8 md:p-10">
              <span className="text-xs font-bold tracking-widest uppercase text-black/85 mb-4 block" style={{ fontFamily: "'Inter', sans-serif" }}>Traditional Campaign</span>
              <h4 className="text-lg font-bold text-black/85 mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>1 creator. 1 platform. 1 chance.</h4>
              <p className="text-black/85 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Single moment of impact. The audience sees the product once. Attention spikes and fades within days. Most potential customers fall out of the funnel. The budget is exhausted in a single moment.
              </p>
            </div>
            <div className="relative rounded-3xl overflow-hidden">
              
              <div className="relative bg-transparent border border-[#6B7A4E]/15 rounded-3xl p-8 md:p-10 h-full">
                <span className="text-xs font-bold tracking-widest uppercase text-[#6B7A4E] mb-4 block" style={{ fontFamily: "'Inter', sans-serif" }}>Catalytic Marketing</span>
                <h4 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>Multiple creators. Multiple platforms. Compounding trust.</h4>
                <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Overlapping waves of exposure from independent voices. The same audience encounters the product multiple times from trusted sources. Higher conversion rate, lower cost per acquisition, and a campaign that turns spend into measurable revenue growth.
                </p>
              </div>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>

    <GradientDivider variant={0} />

    {/* Bottom line */}
    <TintedSection tint="purple">
      <section className="relative py-20 md:py-28">
        <div className="max-w-3xl mx-auto px-6">
          <FadeIn>
            <h3 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
              The bottom line.
            </h3>
            <p className="text-black/85 text-lg leading-relaxed font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
              Catalytic Marketing converts more of the right people into paying customers because it mirrors how people actually behave online. Nobody discovers, researches, and buys on the same platform in the same sitting from the same source. Regular influencer campaigns pretend they do, and that is why so much of the spend gets wasted on impressions that never turn into revenue.
            </p>
            <p className="text-black/85 text-lg leading-relaxed font-medium mt-6" style={{ fontFamily: "'Inter', sans-serif" }}>
              Catalytic Marketing meets the audience where they already are, reinforces the message through multiple trusted voices, and guides them through the full journey from first impression to purchase. The result is a higher conversion rate, a lower cost per acquisition, and a campaign that turns marketing spend into actual, measurable revenue growth.
            </p>
          </FadeIn>
        </div>
      </section>
    </TintedSection>

    {/* CTA */}
    <section className="relative py-24 md:py-32">
      
      <div className="relative z-10 max-w-3xl mx-auto px-6 text-center">
        <FadeIn>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-normal text-[#16130D] pb-3 mb-4" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            Ready to disperse your growth?
          </h2>
          <p className="text-black/75 text-lg max-w-lg mx-auto mb-10" style={{ fontFamily: "'Inter', sans-serif" }}>
            See how Catalytic Marketing would work for your product. Custom strategy and creator picks in 48 hours.
          </p>
          <GlowButton primary href="mailto:sales@centurionmedia.agency">Book a Strategy Call</GlowButton>
        </FadeIn>
      </div>
    </section>
  </>
);

/* ══════════════════════════════════════════════
   SERVICES PAGE COMPONENTS
   ══════════════════════════════════════════════ */

const ServicesPageHero = () => (
  <section className="relative pt-40 pb-24 md:pt-48 md:pb-32">
    
    
    
    
    <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
      <FadeIn delay={0.1}>
        <div className="inline-flex items-center gap-3 mb-10">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Our Services</span>
          </div>
      </FadeIn>
      <FadeIn delay={0.2}>
        <div className="mb-6">
          <div className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal text-[#16130D]" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>We don't run ads.</div>
          <div className="mt-2 md:mt-3">
            <span className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal inline-block pb-3" style={{ fontFamily: "'Cormorant Garamond', sans-serif", lineHeight: 1.3, color: "#6B7A4E" }}>
              We run word-of-mouth.
            </span>
          </div>
        </div>
      </FadeIn>
      <FadeIn delay={0.4}>
        <p className="text-lg md:text-xl text-black/80 max-w-2xl mx-auto leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
          Paid ads interrupt. Creators convince. We put your AI product in front of the right audience through people they already follow, trust, and listen to.
        </p>
      </FadeIn>
    </div>
  </section>
);

const serviceDetails = [
  {
    id: "creator-campaigns", label: "01", title: "Creator Campaigns", subtitle: "The right voice matters more than the loudest one.", accent: "#6B7A4E",
    description: "Most agencies hand you a spreadsheet of influencers sorted by follower count. We do the opposite. We study your product's adoption curve, identify the creator niches that mirror your power users, and build campaigns around authentic enthusiasm — not scripted endorsements. The creators we work with don't just post about your tool. They use it.",
    features: [
      { title: "Conversion-first vetting", desc: "We don't care about follower count. We track which creators actually drive downloads, signups, and purchases in the AI/tech space." },
      { title: "Native content angles", desc: "No \"check out this app\" scripts. We develop content hooks based on real use cases that make your product look essential, not sponsored." },
      { title: "Cross-platform orchestration", desc: "A YouTube deep-dive drops the same week as TikTok shorts and Twitter threads. Coordinated, not scattered." },
      { title: "Attribution you can trust", desc: "Custom links, promo codes, UTM tracking, and post-install event monitoring. You know exactly which creator drove which revenue." },
    ],
    icon: <svg width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>,
  },
  {
    id: "launch-campaigns", label: "02", title: "Launch Blitzes", subtitle: "Ship day should feel like an event, not a whisper.", accent: "#4A5A32",
    description: "You get one shot at a first impression. We turn your launch into a coordinated content storm — 10, 20, 50 creators publishing within the same window across every platform that matters. The result isn't just awareness. It's the feeling that your product is everywhere, all at once.",
    features: [
      { title: "Countdown coordination", desc: "Military-grade timelines. Every creator knows their publish window, their angle, and their CTA before launch day." },
      { title: "Early access seeding", desc: "We get creators using your product weeks before launch. The content is genuine because the experience is real." },
      { title: "Paid boost layer", desc: "Top-performing organic posts get fuel. We whitelist creator content and run it as paid — best of both worlds." },
      { title: "Real-time war room", desc: "During launch week we monitor every post, every metric, every comment. If something breaks, we pivot in hours, not days." },
    ],
    icon: <svg width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>,
  },
  {
    id: "performance-partnerships", label: "03", title: "Always-On Growth", subtitle: "One campaign is a spark. A programme is a fire.", accent: "#8B9A6E",
    description: "The AI products winning the creator game aren't doing one-off sponsorships. They have a rolling roster of creators who genuinely use the product and keep bringing it up — in tutorials, reviews, workflow videos, and replies. We build and manage that programme so your product stays in the conversation permanently.",
    features: [
      { title: "Creator portfolio management", desc: "We manage a bench of 10–50+ creators per client, rotating in fresh faces and doubling down on top performers every month." },
      { title: "Exclusivity deals", desc: "Your best-performing creators get locked in. Competitors can't touch them. Their audience becomes your audience." },
      { title: "Format experimentation", desc: "We continuously test long-form vs short-form, tutorials vs reviews, scripted vs casual — and shift budget toward what converts." },
      { title: "Growth compounding", desc: "Every month the data gets richer, the targeting gets sharper, and the cost per acquisition drops. That's the whole point." },
    ],
    icon: <svg width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>,
  },
];

const ServiceSection = ({ service, index }) => {
  const isReversed = index % 2 !== 0;
  return (
    <section className="relative py-24 md:py-32" id={service.id}>
      <div className="max-w-7xl mx-auto px-6">
        <div className={`flex flex-col ${isReversed ? "lg:flex-row-reverse" : "lg:flex-row"} gap-12 lg:gap-20 items-start`}>
          <div className="flex-1 lg:max-w-xl">
            <FadeIn delay={0.1}>
              <div className="mb-6">
                <span className="text-xs font-bold tracking-widest uppercase" style={{ color: service.accent, fontFamily: "'Inter', sans-serif" }}>{service.label}</span>
              </div>
            </FadeIn>
            <FadeIn delay={0.2}>
              <h2 className="text-3xl md:text-4xl lg:text-5xl font-normal text-[#16130D] pb-3 mb-4" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>{service.title}</h2>
            </FadeIn>
            <FadeIn delay={0.3}>
              <p className="text-lg md:text-xl font-medium mb-4" style={{ color: service.accent, fontFamily: "'Inter', sans-serif" }}>{service.subtitle}</p>
            </FadeIn>
            <FadeIn delay={0.4}>
              <p className="text-black/80 text-base leading-relaxed mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>{service.description}</p>
            </FadeIn>
            <FadeIn delay={0.5}>
              <GlowButton href="#contact">Get Started</GlowButton>
            </FadeIn>
          </div>
          <div className="flex-1 w-full">
            <div className="grid sm:grid-cols-2 gap-5">
              {service.features.map((f, i) => (
                <FadeIn key={i} delay={0.2 + i * 0.1}>
                  <div className="group rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-6 hover:bg-transparent hover:border-[#6B7A4E]/30 hover:-translate-y-1 transition-all duration-600 h-full "
                    onMouseEnter={(e) => e.currentTarget.style.borderColor = `${service.accent}25`}
                    onMouseLeave={(e) => e.currentTarget.style.borderColor = "rgba(232,232,240,0.8)"}>
                    <div className="w-2 h-2 rounded-full mb-4 transition-transform duration-500 group-hover:scale-125" style={{ background: service.accent }} />
                    <h4 className="text-sm font-[580] text-[#16130D] mb-2 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{f.title}</h4>
                    <p className="text-black/75 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>{f.desc}</p>
                  </div>
                </FadeIn>
              ))}
            </div>
          </div>
        </div>
      </div>
      {index < serviceDetails.length - 1 && (
        <div className="max-w-7xl mx-auto px-6 mt-16 md:mt-20"><GradientDivider variant={index} /></div>
      )}
    </section>
  );
};

const platformIcons = {
  YouTube: (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
  ),
  TikTok: (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1v-3.5a6.37 6.37 0 00-.79-.05A6.34 6.34 0 003.15 15.2a6.34 6.34 0 0010.86 4.46V13a8.28 8.28 0 005.58 2.17v-3.45a4.85 4.85 0 01-3.77-1.26V6.69h3.77z"/></svg>
  ),
  Instagram: (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
  ),
  "Twitter / X": (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
  ),
  LinkedIn: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
  ),
  Podcasts: (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1a9 9 0 00-9 9v7a3 3 0 003 3h2a1 1 0 001-1v-6a1 1 0 00-1-1H6v-2a6 6 0 1112 0v2h-2a1 1 0 00-1 1v6a1 1 0 001 1h2a3 3 0 003-3v-7a9 9 0 00-9-9z"/></svg>
  ),
};

const platforms = [
  { name: "YouTube" }, { name: "TikTok" }, { name: "Instagram" },
  { name: "Twitter / X" }, { name: "LinkedIn" }, { name: "Podcasts" },
];

const Platforms = () => (
  <section className="relative py-24 md:py-32">
    <div className="max-w-7xl mx-auto px-6">
      <FadeIn>
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-3 mb-5">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Platform Coverage</span>
          </div>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-normal text-[#16130D] pb-3" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Your users aren't on one platform. Neither are we.</h2>
        </div>
      </FadeIn>
      <FadeIn delay={0.2}>
        <GradientBanner variant="purple">
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            {platforms.map((p, i) => (
              <div key={i} className="card-shine group flex flex-col items-center gap-3 rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-6 md:p-8 hover:bg-transparent hover:border-[#6B7A4E]/20 hover:border-[#6B7A4E]/30 hover:-translate-y-1.5 transition-all duration-500 cursor-default">
                <div className="text-[#6B7A4E]/40 group-hover:text-[#6B7A4E] transition-all duration-500 group-hover:scale-110">
                  {platformIcons[p.name]}
                </div>
                <span className="text-sm font-semibold text-black/80 group-hover:text-[#6B7A4E] transition-colors duration-300" style={{ fontFamily: "'Inter', sans-serif" }}>{p.name}</span>
              </div>
            ))}
          </div>
        </GradientBanner>
      </FadeIn>
    </div>
  </section>
);

const howSteps = [
  { num: "01", title: "30-minute strategy call", desc: "We learn your product, your users, and what growth actually means to you. No sales pitch — just sharp questions." },
  { num: "02", title: "Personalised plan", desc: "Within 48 hours you get a creator shortlist, content strategy, timeline, and budget breakdown. Ready to approve or adjust." },
  { num: "03", title: "Content goes live", desc: "Coordinated publishing across platforms. Real-time tracking dashboard goes live the same day. You watch the numbers climb." },
  { num: "04", title: "Optimise and scale", desc: "Weekly performance reviews. Underperformers get swapped. Winners get bigger budgets. The machine gets smarter every cycle." },
];

const HowItWorks = () => (
  <section className="relative py-24 md:py-32">
    <div className="max-w-5xl mx-auto px-6">
      <FadeIn>
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-3 mb-5">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>How It Works</span>
          </div>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-normal text-[#16130D] pb-3" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>You talk to us once. We handle the other 47 conversations.</h2>
        </div>
      </FadeIn>
      <div className="relative">
        <div className="hidden md:block absolute left-8 top-4 bottom-4 w-px bg-[#16130D]/[0.08]" />
        <div className="space-y-8">
          {howSteps.map((s, i) => (
            <FadeIn key={i} delay={0.1 * i}>
              <div className="group flex items-start gap-6 md:gap-8 cursor-default">
                <div className="relative z-10 flex-shrink-0 w-16 h-16 rounded-full bg-transparent border-2 border-[#6B7A4E]/15 flex items-center justify-center group-hover:border-[#6B7A4E]/40 group-hover:shadow-[0_0_35px_rgba(107,122,78,0.15)] transition-all duration-500">
                  <span className="text-sm font-bold text-[#6B7A4E]" style={{ fontFamily: "'Inter', sans-serif" }}>{s.num}</span>
                </div>
                <div className="pt-2 flex-1">
                  <h3 className="text-lg md:text-xl font-[580] text-[#16130D] mb-1.5 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{s.title}</h3>
                  <p className="text-black/75 text-sm md:text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>{s.desc}</p>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const ServicesCTA = () => (
  <section className="relative py-32 md:py-44" id="contact">
    
    <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
      <FadeIn>
        <div className="mb-6">
          <div className="text-4xl md:text-5xl lg:text-7xl font-normal text-[#16130D]" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Stop explaining your product.</div>
          <div className="mt-2 md:mt-3">
            <span className="text-4xl md:text-5xl lg:text-7xl font-normal inline-block pb-3" style={{ fontFamily: "'Cormorant Garamond', sans-serif", lineHeight: 1.3, color: "#6B7A4E" }}>
              Let creators show it.
            </span>
          </div>
        </div>
      </FadeIn>
      <FadeIn delay={0.15}>
        <p className="text-black/75 text-lg md:text-xl max-w-xl mx-auto mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
          One call. 48-hour turnaround on a custom strategy. Creator shortlist included. No obligations.
        </p>
      </FadeIn>
      <FadeIn delay={0.3}>
        <GlowButton primary href="mailto:sales@centurionmedia.agency">Book a Strategy Call</GlowButton>
      </FadeIn>
    </div>
  </section>
);

const ServicesPage = () => (
  <>
    <ServicesPageHero />
    {serviceDetails.map((s, i) => (
      <TintedSection key={s.id} tint={i % 2 === 0 ? "purple" : "violet"}>
        <ServiceSection service={s} index={i} />
      </TintedSection>
    ))}
    <GradientDivider variant={1} />
    <CatalyticMarketing />
    <GradientDivider variant={2} />
    <TintedSection tint="dark">
      <Platforms />
    </TintedSection>
    <TintedSection tint="blue">
      <HowItWorks />
    </TintedSection>
    <ServicesCTA />
  </>
);

/* ══════════════════════════════════════════════
   PROCESS PAGE COMPONENTS
   ══════════════════════════════════════════════ */

const ProcessPageHero = () => (
  <section className="relative pt-40 pb-24 md:pt-48 md:pb-32">
    
    
    
    
    <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
      <FadeIn delay={0.1}>
        <div className="inline-flex items-center gap-3 mb-10">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Our Process</span>
          </div>
      </FadeIn>
      <FadeIn delay={0.2}>
        <div className="mb-6">
          <div className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal text-[#16130D]" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            Engineered to eliminate
          </div>
          <div className="mt-2 md:mt-3">
            <span className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal inline-block pb-3" style={{ fontFamily: "'Cormorant Garamond', sans-serif", lineHeight: 1.3, color: "#6B7A4E" }}>
              guesswork.
            </span>
          </div>
        </div>
      </FadeIn>
      <FadeIn delay={0.4}>
        <p className="text-lg md:text-xl text-black/80 max-w-2xl mx-auto leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
          Most agencies improvise. We run a system. Every step has been pressure-tested across hundreds of AI campaigns. The result: faster launches, lower risk, and performance that compounds.
        </p>
      </FadeIn>
    </div>
  </section>
);

const processPhases = [
  {
    id: "strategy",
    phase: "Phase 01",
    title: "Strategy & Discovery",
    subtitle: "We don't start with creators. We start with your product.",
    accent: "#6B7A4E",
    description: "Before we touch a single influencer, we become your product's most informed user. We sign up, onboard, hit the paywall, test the workflows your best customers use. Then we map the creator landscape, study what your competitors have tried, and build a strategy that's grounded in how your product actually grows — not generic \"brand awareness\" playbooks.",
    details: [
      { title: "Product immersion", desc: "We use your product daily. We understand the aha moment, the friction points, and the features that make people pay." },
      { title: "Audience forensics", desc: "We study your best users — what they watch, who they follow, what content makes them click — and reverse-engineer the creator match." },
      { title: "Competitive gap analysis", desc: "We map every creator campaign your competitors have run, find what worked, and identify the angles they missed." },
      { title: "Reverse-engineered KPIs", desc: "We don't set vague goals. We start with the number you need and work backwards to the exact creator mix required." },
    ],
    icon: <svg width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42" /></svg>,
  },
  {
    id: "creator-matching",
    phase: "Phase 02",
    title: "Creator Matching",
    subtitle: "Followers are vanity. Conversions are sanity.",
    accent: "#8B9A6E",
    description: "This is where most agencies blow the budget. They sort by follower count and pick from the top. We do the opposite — we analyse which creators have audiences that actually download apps, subscribe to tools, and pay for software. Then we cross-reference with content quality, posting consistency, and brand safety. The shortlist you get isn't \"big names.\" It's the right names.",
    details: [
      { title: "Conversion archaeology", desc: "We dig into each creator's sponsorship history — not just who they worked with, but whether those campaigns actually drove results." },
      { title: "Audience overlap analysis", desc: "We compare creator audience demographics against your existing user base. The closer the match, the higher the conversion." },
      { title: "Authenticity filter", desc: "We check for bought followers, engagement pods, and artificially inflated metrics. If the audience isn't real, the creator doesn't make the list." },
      { title: "You approve everything", desc: "You see every creator, the data behind why we picked them, and estimated performance. Nothing goes live without your sign-off." },
    ],
    icon: <svg width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>,
  },
  {
    id: "campaign-launch",
    phase: "Phase 03",
    title: "Campaign Launch",
    subtitle: "We don't just press publish. We orchestrate impact.",
    accent: "#4A5A32",
    description: "Launch day isn't when the work starts — it's when the preparation pays off. By this point, every creator has used your product, received a tailored brief, produced content we've reviewed, and agreed to a coordinated publish schedule. When content drops, it drops with force.",
    details: [
      { title: "Briefs that don't sound like briefs", desc: "Every creator gets talking points, not a script. The content sounds like them — which is why their audience trusts it." },
      { title: "Pre-flight content review", desc: "We catch factual errors, weak hooks, and off-brand messaging before anything goes live. Not after." },
      { title: "Synchronised publishing", desc: "Multiple creators publishing in the same 48-hour window creates the \"everywhere at once\" effect that drives viral momentum." },
      { title: "Live performance dashboard", desc: "From the moment the first post goes live, you can see every view, click, and conversion attributed to every creator in real time." },
    ],
    icon: <svg width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>,
  },
  {
    id: "performance-scaling",
    phase: "Phase 04",
    title: "Performance Scaling",
    subtitle: "The campaign ends. The growth doesn't.",
    accent: "#6B7A4E",
    description: "Publishing is the start, not the finish. We monitor performance obsessively in the first 72 hours, then run a full post-campaign analysis. Creators who outperformed get renewed. Content that converted gets boosted with paid spend. Angles that flopped get killed. The next cycle starts sharper, cheaper, and bigger.",
    details: [
      { title: "72-hour triage", desc: "Within three days of launch we know which creators, platforms, and content formats are winning — and we act on it immediately." },
      { title: "Winner economics", desc: "Top performers get expanded budgets, longer contracts, and exclusivity offers. Your best channels get protected." },
      { title: "Content recycling", desc: "High-performing creator content gets repurposed as paid social ads, landing page testimonials, and sales collateral." },
      { title: "Compounding playbook", desc: "Every campaign produces data that makes the next one better. After 3 cycles, your CPA is a fraction of where it started." },
    ],
    icon: <svg width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>,
  },
];

const ProcessPhaseSection = ({ phase, index }) => {
  const isReversed = index % 2 !== 0;
  return (
    <section className="relative py-24 md:py-32" id={phase.id}>
      <div className="max-w-7xl mx-auto px-6">
        <div className={`flex flex-col ${isReversed ? "lg:flex-row-reverse" : "lg:flex-row"} gap-12 lg:gap-20 items-start`}>
          <div className="flex-1 lg:max-w-xl">
            <FadeIn delay={0.1}>
              <div className="mb-6">
                <span className="text-xs font-bold tracking-widest uppercase" style={{ color: phase.accent, fontFamily: "'Inter', sans-serif" }}>{phase.phase}</span>
              </div>
            </FadeIn>
            <FadeIn delay={0.2}>
              <h2 className="text-3xl md:text-4xl lg:text-5xl font-normal text-[#16130D] pb-3 mb-4" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>{phase.title}</h2>
            </FadeIn>
            <FadeIn delay={0.3}>
              <p className="text-lg md:text-xl font-medium mb-4" style={{ color: phase.accent, fontFamily: "'Inter', sans-serif" }}>{phase.subtitle}</p>
            </FadeIn>
            <FadeIn delay={0.4}>
              <p className="text-black/80 text-base leading-relaxed mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>{phase.description}</p>
            </FadeIn>
            <FadeIn delay={0.5}>
              <GlowButton href="#contact">Get Started</GlowButton>
            </FadeIn>
          </div>
          <div className="flex-1 w-full">
            <div className="grid sm:grid-cols-2 gap-5">
              {phase.details.map((d, i) => (
                <FadeIn key={i} delay={0.2 + i * 0.1}>
                  <div className="group rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-6 hover:bg-transparent hover:border-[#6B7A4E]/30 hover:-translate-y-1 transition-all duration-600 h-full "
                    onMouseEnter={(e) => e.currentTarget.style.borderColor = `${phase.accent}25`}
                    onMouseLeave={(e) => e.currentTarget.style.borderColor = "rgba(232,232,240,0.8)"}>
                    <div className="w-2 h-2 rounded-full mb-4 transition-transform duration-500 group-hover:scale-125" style={{ background: phase.accent }} />
                    <h4 className="text-sm font-[580] text-[#16130D] mb-2 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{d.title}</h4>
                    <p className="text-black/75 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>{d.desc}</p>
                  </div>
                </FadeIn>
              ))}
            </div>
          </div>
        </div>
      </div>
      {index < processPhases.length - 1 && (
        <div className="max-w-7xl mx-auto px-6 mt-16 md:mt-20"><GradientDivider variant={index} /></div>
      )}
    </section>
  );
};

// ─── Timeline Overview ───
const TimelineOverview = () => (
  <section className="relative py-24 md:py-32">
    <div className="max-w-5xl mx-auto px-6">
      <FadeIn>
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-3 mb-5">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Typical Timeline</span>
          </div>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-normal text-[#16130D] pb-3" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Creators posting about your product in 5 weeks. Not 5 months.</h2>
        </div>
      </FadeIn>

      <FadeIn delay={0.15}>
        <GradientBanner variant="blue">
          <div className="grid md:grid-cols-4 gap-6">
            {[
              { week: "Week 1", title: "Decode & plan", desc: "Product deep-dive, audience analysis, strategy doc, and creator shortlist delivered.", color: "#6B7A4E" },
              { week: "Week 2", title: "Lock in creators", desc: "Outreach, negotiation, contracts signed. Creators get early product access.", color: "#8B9A6E" },
              { week: "Week 3–4", title: "Content production", desc: "Creators film, write, and produce. We review every draft before approval.", color: "#4A5A32" },
              { week: "Week 5+", title: "Go live & scale", desc: "Coordinated publishing. Real-time tracking. Instant optimisation. Repeat.", color: "#6B7A4E" },
            ].map((t, i) => (
              <div key={i} className="card-shine group rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-7 hover:bg-transparent hover:border-[#6B7A4E]/30 hover:-translate-y-1.5 transition-all duration-500 h-full"
                onMouseEnter={(e) => e.currentTarget.style.borderColor = `${t.color}25`}
                onMouseLeave={(e) => e.currentTarget.style.borderColor = "rgba(232,232,240,0.6)"}>
                <span className="text-xs font-bold tracking-widest uppercase mb-3 block" style={{ color: t.color, fontFamily: "'Inter', sans-serif" }}>{t.week}</span>
                <h3 className="text-base font-[580] text-[#16130D] mb-2 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{t.title}</h3>
                <p className="text-black/75 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>{t.desc}</p>
              </div>
            ))}
          </div>
        </GradientBanner>
      </FadeIn>
    </div>
  </section>
);

// ─── What Makes Us Different ───
const Differentiators = () => (
  <section className="relative py-24 md:py-32">
    <div className="max-w-7xl mx-auto px-6">
      <FadeIn>
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-3 mb-5">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Why Centurion Media</span>
          </div>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-normal text-[#16130D] pb-3" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Why AI and high growth software companies pick us over the big agencies.</h2>
        </div>
      </FadeIn>

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[
          { title: "We only do AI & software", desc: "We're not a generalist agency that also does fashion, food, and fitness. Every campaign we've ever run is for a tech product. We know this buyer." },
          { title: "We optimise for revenue, not views", desc: "Impressions are nice. Signups are better. Revenue is what matters. Every decision we make is measured against your bottom line." },
          { title: "You talk to operators, not account managers", desc: "No handoff to a junior after the sales call. The people who build your strategy are the same people who execute it." },
          { title: "We've mapped the AI creator ecosystem", desc: "We know which tech YouTubers actually drive downloads, which TikTokers convert, and which Twitter accounts are just noise." },
          { title: "Real-time visibility, not monthly PDFs", desc: "You get a live dashboard from day one. Every view, click, signup, and dollar — tracked by creator, by platform, by hour." },
          { title: "Flexible, not locked in", desc: "Start with a single campaign. Scale to an always-on programme. Pause when you need to. No 12-month contracts required." },
        ].map((d, i) => (
          <FadeIn key={i} delay={0.1 * i}>
            <div className="group rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-7 hover:bg-transparent hover:border-[#6B7A4E]/30 hover:-translate-y-1 transition-all duration-600 h-full ">
              <div className="w-2.5 h-2.5 rounded-full bg-[#6B7A4E] mb-4" />
              <h3 className="text-base font-[580] text-[#16130D] mb-2 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{d.title}</h3>
              <p className="text-black/75 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>{d.desc}</p>
            </div>
          </FadeIn>
        ))}
      </div>
    </div>
  </section>
);

const ProcessCTA = () => (
  <section className="relative py-32 md:py-44" id="contact">
    
    <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
      <FadeIn>
        <div className="mb-6">
          <div className="text-4xl md:text-5xl lg:text-7xl font-normal text-[#16130D]" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>See the playbook.</div>
          <div className="mt-2 md:mt-3">
            <span className="text-4xl md:text-5xl lg:text-7xl font-normal inline-block pb-3" style={{ fontFamily: "'Cormorant Garamond', sans-serif", lineHeight: 1.3, color: "#6B7A4E" }}>
              Built for your product.
            </span>
          </div>
        </div>
      </FadeIn>
      <FadeIn delay={0.15}>
        <p className="text-black/75 text-lg md:text-xl max-w-xl mx-auto mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
          Book a 30-minute call. We'll walk you through exactly how we'd approach your product — with a creator shortlist and strategy outline ready within 48 hours.
        </p>
      </FadeIn>
      <FadeIn delay={0.3}>
        <GlowButton primary href="mailto:sales@centurionmedia.agency">Book a Strategy Call</GlowButton>
      </FadeIn>
    </div>
  </section>
);

const ProcessPage = () => (
  <>
    <ProcessPageHero />
    {processPhases.map((p, i) => (
      <TintedSection key={p.id} tint={i % 2 === 0 ? "purple" : "violet"}>
        <ProcessPhaseSection phase={p} index={i} />
      </TintedSection>
    ))}
    <GradientDivider variant={1} />
    <TimelineOverview />
    <TintedSection tint="blue">
      <Differentiators />
    </TintedSection>
    <ProcessCTA />
  </>
);
/* ══════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════ */

const ContactPage = () => (
  <>
    <section className="relative pt-40 pb-16 md:pt-48 md:pb-20">
      
      <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
        <FadeIn delay={0.1}>
          <div className="inline-flex items-center gap-3 mb-10">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Contact</span>
          </div>
        </FadeIn>
        <FadeIn delay={0.2}>
          <div className="mb-6">
            <div className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal text-[#16130D]" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Let's build your</div>
            <div className="mt-2 md:mt-3">
              <span className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal inline-block pb-3" style={{ fontFamily: "'Cormorant Garamond', sans-serif", lineHeight: 1.3, color: "#6B7A4E" }}>
                next campaign.
              </span>
            </div>
          </div>
        </FadeIn>
        <FadeIn delay={0.4}>
          <p className="text-lg md:text-xl text-black/80 max-w-2xl mx-auto leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
            Whether you're launching next week or planning for next quarter, we'd love to hear about your product.
          </p>
        </FadeIn>
      </div>
    </section>

    {/* Contact options */}
    <section className="relative py-16 md:py-24">
      <div className="max-w-5xl mx-auto px-6">
        <div className="grid md:grid-cols-3 gap-6">
          <FadeIn delay={0.1}>
            <a href="mailto:sales@centurionmedia.agency" className="block group rounded-3xl bg-transparent border border-[#16130D]/[0.08] p-8 md:p-10 hover:bg-[#16130D]/[0.02] hover:border-[#6B7A4E]/15 transition-all duration-500 h-full  hover:border-[#6B7A4E]/30 hover:-translate-y-1 text-center">
              <div className="w-2.5 h-2.5 rounded-full bg-[#6B7A4E] mx-auto mb-5" />
              <h3 className="text-xl font-[580] text-[#16130D] mb-3 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>Email us</h3>
              <p className="text-[#6B7A4E] text-sm font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>sales@centurionmedia.agency</p>
              <p className="text-black/85 text-xs mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>We reply within 24 hours</p>
            </a>
          </FadeIn>
          <FadeIn delay={0.2}>
            <div className="group rounded-3xl bg-transparent border border-[#16130D]/[0.08] p-8 md:p-10 hover:bg-[#16130D]/[0.02] hover:border-[#4A5A32]/15 transition-all duration-500 h-full  hover:border-[#6B7A4E]/30 hover:-translate-y-1 text-center cursor-default">
              <div className="w-2.5 h-2.5 rounded-full bg-[#4A5A32] mx-auto mb-5" />
              <h3 className="text-xl font-[580] text-[#16130D] mb-3 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>Book a call</h3>
              <p className="text-black/80 text-sm" style={{ fontFamily: "'Inter', sans-serif" }}>30 minutes. No pitch deck.</p>
              <p className="text-black/85 text-xs mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>We'll discuss your product & goals</p>
            </div>
          </FadeIn>
          <FadeIn delay={0.3}>
            <div className="group rounded-3xl bg-transparent border border-[#16130D]/[0.08] p-8 md:p-10 hover:bg-[#16130D]/[0.02] hover:border-[#8B9A6E]/15 transition-all duration-500 h-full  hover:border-[#6B7A4E]/30 hover:-translate-y-1 text-center cursor-default">
              <div className="w-2.5 h-2.5 rounded-full bg-[#8B9A6E] mx-auto mb-5" />
              <h3 className="text-xl font-[580] text-[#16130D] mb-3 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>Get a proposal</h3>
              <p className="text-black/80 text-sm" style={{ fontFamily: "'Inter', sans-serif" }}>Custom strategy in 48 hours.</p>
              <p className="text-black/85 text-xs mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>Creator picks & timeline included</p>
            </div>
          </FadeIn>
        </div>
      </div>
    </section>

    {/* What happens next */}
    <TintedSection tint="purple">
      <section className="relative py-24 md:py-32">
        <div className="max-w-3xl mx-auto px-6">
          <FadeIn>
            <div className="text-center mb-14">
              <h2 className="text-3xl md:text-4xl font-normal text-[#16130D] pb-3" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>What happens after you reach out.</h2>
            </div>
          </FadeIn>
          <div className="space-y-6">
            {[
              { num: "01", title: "We reply within 24 hours", desc: "With a few smart questions about your product, audience, and goals." },
              { num: "02", title: "30-minute strategy call", desc: "We learn what you're building and discuss whether influencer marketing is the right channel right now." },
              { num: "03", title: "Custom proposal in 48 hours", desc: "If it's a fit, you get a full strategy doc with creator picks, budget breakdown, timeline, and expected outcomes." },
              { num: "04", title: "You decide", desc: "No pressure. No follow-up sequences. If it makes sense, we start. If not, no hard feelings." },
            ].map((step, i) => (
              <FadeIn key={i} delay={0.08 * i}>
                <div className="flex items-start gap-6">
                  <div className="flex-shrink-0 w-12 h-12 rounded-full bg-white border-2 border-[#6B7A4E]/15 flex items-center justify-center">
                    <span className="text-sm font-bold text-[#6B7A4E]" style={{ fontFamily: "'Inter', sans-serif" }}>{step.num}</span>
                  </div>
                  <div className="pt-1">
                    <h4 className="text-base font-[580] text-[#16130D] mb-1" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{step.title}</h4>
                    <p className="text-black/75 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>{step.desc}</p>
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>
    </TintedSection>

    {/* Final CTA */}
    <section className="relative py-24 md:py-32">
      
      <div className="relative z-10 max-w-3xl mx-auto px-6 text-center">
        <FadeIn>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            Ready when you are.
          </h2>
          <GlowButton primary href="mailto:sales@centurionmedia.agency">Email sales@centurionmedia.agency</GlowButton>
        </FadeIn>
      </div>
    </section>
  </>
);

/* ══════════════════════════════════════════════
   TERMS OF SERVICE PAGE
   ══════════════════════════════════════════════ */

const TermsPage = () => (
  <>
    <section className="relative pt-40 pb-16 md:pt-48 md:pb-20">
      <div className="relative z-10 max-w-3xl mx-auto px-6">
        <FadeIn delay={0.1}>
          <h1 className="text-4xl md:text-5xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            Terms of Service
          </h1>
          <p className="text-black/85 text-sm mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
            Last updated: {new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}
          </p>
        </FadeIn>

        <FadeIn delay={0.2}>
          <div className="space-y-10">
            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>1. Overview</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                These Terms of Service govern your use of the Centurion Media website and any services provided by Centurion Media Ltd. By accessing our website or engaging our services, you agree to be bound by these terms. If you do not agree, please do not use our website or services.
              </p>
            </div>

            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>2. Services</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Centurion Media provides influencer marketing services for AI and high growth software companies. Our services include creator sourcing, campaign strategy, content management, and performance reporting. The specific scope, deliverables, and fees for each engagement are defined in a separate agreement between Centurion Media and the client.
              </p>
            </div>

            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>3. Client Obligations</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Clients are responsible for providing accurate product information, timely access to their product for creator use, and prompt feedback during content review stages. Delays caused by the client may affect campaign timelines and are not the responsibility of Centurion Media.
              </p>
            </div>

            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>4. Payment Terms</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Fees are agreed upon before campaign commencement and are outlined in the client agreement. Payment is due according to the schedule specified in the agreement. All fees are non-refundable once a campaign has commenced, unless otherwise stated in writing.
              </p>
            </div>

            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>5. Intellectual Property</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Content created by influencers as part of a campaign is subject to the licensing terms agreed upon in the creator contract. Centurion Media does not claim ownership of client trademarks, logos, or product materials. Campaign strategies and proprietary methodologies, including Catalytic Marketing, remain the intellectual property of Centurion Media.
              </p>
            </div>

            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>6. Confidentiality</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Both parties agree to keep confidential any proprietary information shared during the course of the engagement. This includes but is not limited to campaign strategies, performance data, creator rates, and business information. This obligation survives the termination of any agreement.
              </p>
            </div>

            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>7. Performance & Results</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                While Centurion Media strives to deliver the best possible results, we do not guarantee specific performance outcomes such as views, clicks, signups, or revenue. Influencer marketing results depend on numerous factors outside our control, including platform algorithms, market conditions, and product-market fit.
              </p>
            </div>

            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>8. Limitation of Liability</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Centurion Media's total liability under any engagement shall not exceed the fees paid by the client for that specific campaign. Centurion Media shall not be liable for any indirect, incidental, consequential, or punitive damages arising from or related to our services.
              </p>
            </div>

            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>9. Termination</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Either party may terminate an engagement with written notice as specified in the client agreement. In the event of termination, the client is responsible for payment of all work completed and any non-cancellable creator commitments made on the client's behalf.
              </p>
            </div>

            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>10. Governing Law</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                These Terms of Service are governed by and construed in accordance with the laws of England and Wales. Any disputes arising from these terms shall be subject to the exclusive jurisdiction of the courts of England and Wales.
              </p>
            </div>

            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>11. Changes to Terms</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Centurion Media reserves the right to update these Terms of Service at any time. Changes will be posted on this page with an updated revision date. Continued use of our website or services following any changes constitutes acceptance of the revised terms.
              </p>
            </div>

            <div>
              <h2 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>12. Contact</h2>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                If you have any questions about these Terms of Service, please contact us at <a href="mailto:sales@centurionmedia.agency" className="text-[#6B7A4E] hover:text-[#4A5A32] transition-colors">sales@centurionmedia.agency</a>.
              </p>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  </>
);

/* ══════════════════════════════════════════════
/* ══════════════════════════════════════════════
   MEDIA KIT PAGE
   ══════════════════════════════════════════════ */

const MediaKitPage = () => (
  <>
    {/* Hero */}
    <section className="relative pt-40 pb-16 md:pt-48 md:pb-20">
      
      <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
        <FadeIn delay={0.1}>
          <div className="inline-flex items-center gap-3 mb-10">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Media Kit</span>
          </div>
        </FadeIn>
        <FadeIn delay={0.2}>
          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            Centurion Media at a glance.
          </h1>
        </FadeIn>
        <FadeIn delay={0.4}>
          <p className="text-lg md:text-xl text-black/80 max-w-2xl mx-auto leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
            The only influencer marketing agency built exclusively for AI and high growth software companies. Here's everything you need to know about who we are, how we work, and what makes us different.
          </p>
        </FadeIn>
      </div>
    </section>

    {/* Company snapshot */}
    <section className="relative py-16 md:py-24">
      <div className="max-w-5xl mx-auto px-6">
        <FadeIn>
          <GradientBanner variant="purple">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
              {[
                { val: "2024", label: "Founded" },
                { val: "London", label: "Headquarters" },
                { val: "AI & SaaS", label: "Exclusive focus" },
                { val: "340+", label: "Campaigns delivered" },
              ].map((s, i) => (
                <div key={i}>
                  <div className="text-2xl md:text-3xl font-normal text-[#16130D] tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.005em" }}>{s.val}</div>
                  <div className="text-black/85 text-xs mt-1" style={{ fontFamily: "'Inter', sans-serif" }}>{s.label}</div>
                </div>
              ))}
            </div>
          </GradientBanner>
        </FadeIn>
      </div>
    </section>

    {/* What we do */}
    <section className="relative py-20 md:py-28">
      <div className="max-w-3xl mx-auto px-6">
        <FadeIn>
          <h2 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>What Centurion Media does</h2>
          <p className="text-black/80 text-base leading-relaxed mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
            Centurion Media runs fully managed influencer marketing campaigns for AI productivity apps and high-growth software companies. We handle everything — from identifying and vetting the right creators, to negotiating deals, managing content production, coordinating multi-platform launches, and delivering real-time performance reporting. Our clients provide product access and campaign goals. We deliver results.
          </p>
          <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
            We work with creators across YouTube, TikTok, Instagram, Twitter/X, LinkedIn, and podcasts — placing each creator on the platform where their content style and audience alignment are strongest.
          </p>
        </FadeIn>
      </div>
    </section>

    <GradientDivider variant={0} />

    {/* Catalytic Marketing deep dive */}
    <TintedSection tint="purple">
      <section className="relative py-20 md:py-28">
        <div className="max-w-3xl mx-auto px-6">
          <FadeIn>
            <div className="inline-flex items-center gap-3 mb-8">
            <span className="w-6 h-px bg-[#6B7A4E]" />
            <span className="text-[#6B7A4E] text-[11px] font-medium tracking-[0.18em] uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Proprietary Strategy</span>
          </div>
            <h2 className="text-3xl md:text-4xl font-normal text-[#16130D] pb-3 mb-2" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Catalytic Marketing</h2>
            <p className="text-[#6B7A4E] text-lg font-medium mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>The catalyst for your business.</p>
          </FadeIn>
          <FadeIn delay={0.15}>
            <div className="space-y-6">
              <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Catalytic Marketing is Centurion Media's proprietary multi-platform influencer strategy. Instead of concentrating budget behind a single creator on a single channel, Catalytic Marketing places one to three carefully selected influencers across two to three different platforms simultaneously.
              </p>
              <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                The same target audience encounters the product from different voices in different places. Someone might see a short-form video on TikTok from one creator, then a longer breakdown on YouTube from another, and then a post on Instagram from a third. Each touchpoint reinforces the last, and the repeated exposure from independent sources builds a level of trust that a single post from a single creator cannot match.
              </p>
              <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                This approach works because people don't make buying decisions in one place. They discover on one platform, research on another, and convert on a third. A regular campaign that lives on just one channel catches the audience at only one stage of that journey. Catalytic Marketing covers more of that journey by design — creating multiple entry points so even if someone misses one piece of content, they encounter another on a different platform.
              </p>
              <p className="text-black/80 text-base leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                The financial advantage is efficiency. Traditional campaigns generate a spike of attention that fades within days. Catalytic Marketing creates several smaller waves that overlap and sustain momentum over a longer window. The budget isn't spent harder — it's spent wider and smarter, turning the same investment into significantly more revenue.
              </p>
            </div>
          </FadeIn>
        </div>
      </section>
    </TintedSection>

    {/* How Catalytic Marketing works - visual */}
    <section className="relative py-20 md:py-28">
      <div className="max-w-5xl mx-auto px-6">
        <FadeIn>
          <h2 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-10 text-center" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>How Catalytic Marketing Works</h2>
        </FadeIn>
        <FadeIn delay={0.15}>
          <GradientBanner variant="blue">
            <div className="grid md:grid-cols-3 gap-6">
              {[
                { step: "01 — Discovery", platform: "Short-form (TikTok / Reels)", desc: "A creator grabs attention with a quick, native-feeling video. The audience encounters the product for the first time in a format they consume daily.", accent: "#6B7A4E" },
                { step: "02 — Research", platform: "Long-form (YouTube)", desc: "A different creator provides a detailed breakdown — features, use cases, demonstrations. The audience moves from awareness to understanding.", accent: "#4A5A32" },
                { step: "03 — Conversion", platform: "Social proof (Instagram / X)", desc: "A third voice reinforces the message with a direct link or endorsement. The audience has now seen the product from three independent, trusted sources.", accent: "#8B9A6E" },
              ].map((p, i) => (
                <div key={i} className="rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-6">
                  <span className="text-xs font-bold tracking-widest uppercase block mb-3" style={{ color: p.accent, fontFamily: "'Inter', sans-serif" }}>{p.step}</span>
                  <h4 className="text-base font-[580] text-[#16130D] mb-2" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{p.platform}</h4>
                  <p className="text-black/75 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>{p.desc}</p>
                </div>
              ))}
            </div>
            <div className="mt-8 text-center">
              <p className="text-[#6B7A4E] text-sm font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                Each touchpoint reinforces the last &rarr; Trust compounds &rarr; Conversions multiply
              </p>
            </div>
          </GradientBanner>
        </FadeIn>
      </div>
    </section>

    {/* Catalytic vs Traditional */}
    <section className="relative py-16 md:py-24">
      <div className="max-w-5xl mx-auto px-6">
        <FadeIn>
          <h2 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-10 text-center" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Catalytic Marketing vs Traditional Campaigns</h2>
        </FadeIn>
        <FadeIn delay={0.15}>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="rounded-3xl bg-[#16130D]/[0.03] border border-[#16130D]/[0.06] p-8 md:p-10">
              <span className="text-xs font-bold tracking-widest uppercase text-black/85 mb-5 block" style={{ fontFamily: "'Inter', sans-serif" }}>Traditional Approach</span>
              <div className="space-y-4">
                {[
                  "Single creator, single platform",
                  "One moment of impact that fades in days",
                  "Audience sees product once from one source",
                  "Entire budget depends on one post performing",
                  "Covers only one stage of the buying journey",
                  "Spike-and-fade attention pattern",
                ].map((item, i) => (
                  <div key={i} className="flex items-start gap-3">
                    <span className="text-[#16130D]/20 text-sm mt-0.5">✕</span>
                    <p className="text-black/85 text-sm" style={{ fontFamily: "'Inter', sans-serif" }}>{item}</p>
                  </div>
                ))}
              </div>
            </div>
            <div className="relative rounded-3xl overflow-hidden">
              
              <div className="relative bg-transparent border border-[#6B7A4E]/15 rounded-3xl p-8 md:p-10 h-full">
                <span className="text-xs font-bold tracking-widest uppercase text-[#6B7A4E] mb-5 block" style={{ fontFamily: "'Inter', sans-serif" }}>Catalytic Marketing</span>
                <div className="space-y-4">
                  {[
                    "Multiple creators across multiple platforms",
                    "Overlapping waves that sustain momentum",
                    "Audience encounters product from independent voices",
                    "Risk distributed — no single point of failure",
                    "Covers discovery, research, and conversion stages",
                    "Compounding trust drives higher conversion rates",
                  ].map((item, i) => (
                    <div key={i} className="flex items-start gap-3">
                      <span className="text-[#6B7A4E] text-sm mt-0.5">✓</span>
                      <p className="text-black/85 text-sm" style={{ fontFamily: "'Inter', sans-serif" }}>{item}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>

    <GradientDivider variant={1} />

    {/* Creator network & platforms */}
    <section className="relative py-20 md:py-28">
      <div className="max-w-5xl mx-auto px-6">
        <FadeIn>
          <h2 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-6 text-center" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Creator Network & Platform Coverage</h2>
          <p className="text-black/75 text-base text-center max-w-2xl mx-auto mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
            We maintain relationships with creators across every major platform, with a deep specialisation in AI, productivity, developer tools, and SaaS content.
          </p>
        </FadeIn>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            { platform: "YouTube", focus: "Long-form reviews, tutorials, workflow breakdowns", audience: "Tech-savvy professionals, developers, productivity enthusiasts", formats: "Dedicated videos, integrations, sponsored segments" },
            { platform: "TikTok", focus: "Short-form demos, tips, reaction-style content", audience: "Early adopters, Gen Z / young professionals, trend-followers", formats: "15–60 second native-style videos, duets, trends" },
            { platform: "Instagram", focus: "Reels, carousels, Stories with swipe-up links", audience: "Creative professionals, founders, design-oriented users", formats: "Reels, carousel guides, Story sequences" },
            { platform: "Twitter / X", focus: "Threads, product endorsements, community engagement", audience: "Founders, VCs, developers, AI researchers", formats: "Threads, quote tweets, live commentary" },
            { platform: "LinkedIn", focus: "Thought leadership, case studies, professional endorsements", audience: "B2B buyers, enterprise decision-makers, hiring managers", formats: "Long-form posts, video, document carousels" },
            { platform: "Podcasts", focus: "In-depth interviews, product mentions, ad reads", audience: "Commuters, long-form listeners, niche tech communities", formats: "Host-read ads, interview features, co-branded episodes" },
          ].map((p, i) => (
            <FadeIn key={i} delay={0.08 * i}>
              <div className="rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-7 h-full hover:bg-[#16130D]/[0.02] hover:border-[#6B7A4E]/30 hover:-translate-y-0.5 transition-all duration-500">
                <h3 className="text-base font-bold text-[#16130D] mb-4" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{p.platform}</h3>
                <div className="space-y-3">
                  <div>
                    <span className="text-[#6B7A4E] text-[10px] font-bold tracking-widest uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Focus</span>
                    <p className="text-black/75 text-sm" style={{ fontFamily: "'Inter', sans-serif" }}>{p.focus}</p>
                  </div>
                  <div>
                    <span className="text-[#6B7A4E] text-[10px] font-bold tracking-widest uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Audience</span>
                    <p className="text-black/75 text-sm" style={{ fontFamily: "'Inter', sans-serif" }}>{p.audience}</p>
                  </div>
                  <div>
                    <span className="text-[#6B7A4E] text-[10px] font-bold tracking-widest uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Formats</span>
                    <p className="text-black/75 text-sm" style={{ fontFamily: "'Inter', sans-serif" }}>{p.formats}</p>
                  </div>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>

    <GradientDivider variant={2} />

    {/* Campaign types */}
    <TintedSection tint="violet">
      <section className="relative py-20 md:py-28">
        <div className="max-w-5xl mx-auto px-6">
          <FadeIn>
            <h2 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-10 text-center" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Campaign Formats</h2>
          </FadeIn>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              { title: "Creator Campaigns", desc: "One-off influencer campaigns with handpicked creators matched to your product. Ideal for testing influencer marketing or promoting a specific feature.", timeline: "3–5 weeks", creators: "1–10" },
              { title: "Launch Blitzes", desc: "Coordinated multi-creator, multi-platform rollouts designed to generate maximum impact during a product launch or major feature release.", timeline: "4–6 weeks", creators: "5–50" },
              { title: "Always-On Growth", desc: "Ongoing monthly programmes with a rolling roster of creators. Content published continuously, optimised every cycle, compounding growth over time.", timeline: "Ongoing", creators: "10–50+" },
            ].map((c, i) => (
              <FadeIn key={i} delay={0.1 * i}>
                <div className="rounded-3xl bg-transparent border border-[#16130D]/[0.08] p-8 h-full hover:bg-[#16130D]/[0.02] hover:border-[#6B7A4E]/30 hover:-translate-y-0.5 transition-all duration-500">
                  <div className="w-2 h-2 rounded-full bg-[#6B7A4E] mb-5" />
                  <h3 className="text-lg font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{c.title}</h3>
                  <p className="text-black/75 text-sm leading-relaxed mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>{c.desc}</p>
                  <div className="grid grid-cols-2 gap-4 pt-4 border-t border-[#16130D]/[0.05]">
                    <div>
                      <div className="text-[#6B7A4E] text-[10px] font-bold tracking-widest uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Timeline</div>
                      <div className="text-[#16130D] text-sm font-semibold mt-0.5" style={{ fontFamily: "'Inter', sans-serif" }}>{c.timeline}</div>
                    </div>
                    <div>
                      <div className="text-[#6B7A4E] text-[10px] font-bold tracking-widest uppercase" style={{ fontFamily: "'Inter', sans-serif" }}>Creators</div>
                      <div className="text-[#16130D] text-sm font-semibold mt-0.5" style={{ fontFamily: "'Inter', sans-serif" }}>{c.creators}</div>
                    </div>
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>
    </TintedSection>

    {/* What's included in every campaign */}
    <section className="relative py-20 md:py-28">
      <div className="max-w-5xl mx-auto px-6">
        <FadeIn>
          <h2 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-10 text-center" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Included in Every Campaign</h2>
        </FadeIn>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {[
            { title: "Creator scouting & vetting", desc: "Audience analysis, engagement scoring, conversion history, and brand-fit assessment for every creator." },
            { title: "Deal negotiation & contracting", desc: "Rate negotiation, contract drafting, and execution. Clients never speak to a creator's manager." },
            { title: "Campaign strategy", desc: "Custom messaging angles, content hooks, and CTA frameworks tailored to how the product gets adopted." },
            { title: "Content direction & review", desc: "Detailed briefs and pre-publish review of every piece of content for accuracy, messaging, and quality." },
            { title: "Multi-platform coordination", desc: "Synchronised publishing schedules across platforms to maximise the Catalytic Marketing effect." },
            { title: "Real-time tracking & reporting", desc: "Live dashboards during the campaign, plus comprehensive post-campaign analysis with full attribution." },
          ].map((item, i) => (
            <FadeIn key={i} delay={0.08 * i}>
              <div className="rounded-xl bg-transparent border border-[#16130D]/[0.08] px-5 py-5 h-full">
                <div className="w-1.5 h-1.5 rounded-full bg-[#6B7A4E] mb-3" />
                <h4 className="text-sm font-[580] text-[#16130D] mb-1.5" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>{item.title}</h4>
                <p className="text-black/75 text-xs leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>{item.desc}</p>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>

    <GradientDivider variant={0} />

    {/* Performance benchmarks */}
    <section className="relative py-20 md:py-28">
      <div className="max-w-5xl mx-auto px-6">
        <FadeIn>
          <h2 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-10 text-center" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Performance Benchmarks</h2>
        </FadeIn>
        <FadeIn delay={0.15}>
          <GradientBanner variant="purple">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
              {[
                { val: "500M+", label: "Total creator impressions" },
                { val: "12x", label: "Average ROAS" },
                { val: "98%", label: "Client retention rate" },
                { val: "5 weeks", label: "Average time to live content" },
              ].map((s, i) => (
                <div key={i}>
                  <div className="text-2xl md:text-3xl font-normal text-[#16130D] tracking-tight" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.005em" }}>{s.val}</div>
                  <div className="text-black/85 text-xs mt-1" style={{ fontFamily: "'Inter', sans-serif" }}>{s.label}</div>
                </div>
              ))}
            </div>
          </GradientBanner>
        </FadeIn>
      </div>
    </section>

    {/* Ideal client profile */}
    <TintedSection tint="blue">
      <section className="relative py-20 md:py-28">
        <div className="max-w-3xl mx-auto px-6">
          <FadeIn>
            <h2 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Who We Work With</h2>
            <p className="text-black/80 text-base leading-relaxed mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
              Centurion Media works exclusively with AI and software companies. Our ideal clients include:
            </p>
          </FadeIn>
          <FadeIn delay={0.15}>
            <div className="space-y-4">
              {[
                "AI productivity tools (writing, design, coding, workflow automation)",
                "SaaS platforms preparing for product launches or feature releases",
                "Venture-backed companies looking to scale user acquisition through creators",
                "Developer tools and API platforms targeting technical audiences",
                "AI-native apps looking to build brand awareness in competitive markets",
              ].map((item, i) => (
                <div key={i} className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-[#6B7A4E] mt-2 flex-shrink-0" />
                  <p className="text-black/80 text-base" style={{ fontFamily: "'Inter', sans-serif" }}>{item}</p>
                </div>
              ))}
            </div>
          </FadeIn>
        </div>
      </section>
    </TintedSection>

    {/* Brand guidelines */}
    <section className="relative py-20 md:py-28">
      <div className="max-w-3xl mx-auto px-6">
        <FadeIn>
          <h2 className="text-2xl md:text-3xl font-normal text-[#16130D] pb-3 mb-8" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>Brand Guidelines</h2>
        </FadeIn>
        <div className="space-y-6">
          <FadeIn delay={0.1}>
            <div className="rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-7">
              <h3 className="text-base font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>Company Name</h3>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Always written as "Centurion Media" — "Centurion" in bold, "Media" in regular weight. Never "centurion media" or "centurion Media". "Centurion Media" on first mention, "Centurion" acceptable thereafter.
              </p>
            </div>
          </FadeIn>
          <FadeIn delay={0.15}>
            <div className="rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-7">
              <h3 className="text-base font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>Catalytic Marketing</h3>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Always capitalised as "Catalytic Marketing". It is a proprietary strategy and trademark of Centurion Media Ltd. Should not be used to describe other methodologies or third-party services.
              </p>
            </div>
          </FadeIn>
          <FadeIn delay={0.2}>
            <div className="rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-7">
              <h3 className="text-base font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>Brand Colours</h3>
              <div className="flex flex-wrap gap-4 mt-3">
                {[
                  { name: "Primary Purple", hex: "#6B7A4E" },
                  { name: "Deep Indigo", hex: "#4A5A32" },
                  { name: "Light Violet", hex: "#8B9A6E" },
                  { name: "Dark", hex: "#16130D" },
                ].map((c, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg" style={{ background: c.hex }} />
                    <div>
                      <div className="text-xs font-semibold text-[#16130D]" style={{ fontFamily: "'Inter', sans-serif" }}>{c.name}</div>
                      <div className="text-black/85 text-xs" style={{ fontFamily: "'Inter', sans-serif" }}>{c.hex}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </FadeIn>
          <FadeIn delay={0.25}>
            <div className="rounded-2xl bg-transparent border border-[#16130D]/[0.08] p-7">
              <h3 className="text-base font-[580] text-[#16130D] mb-3" style={{ fontFamily: "'Cormorant Garamond', serif", letterSpacing: "-0.01em" }}>Typography</h3>
              <p className="text-black/80 text-sm leading-relaxed" style={{ fontFamily: "'Inter', sans-serif" }}>
                Headings: <span className="font-bold">Syne</span> (bold/extrabold). Body: <span className="font-bold">DM Sans</span> (regular/medium). Both available via Google Fonts.
              </p>
            </div>
          </FadeIn>
        </div>
      </div>
    </section>

    {/* Contact CTA */}
    <section className="relative py-24 md:py-32">
      
      <div className="relative z-10 max-w-3xl mx-auto px-6 text-center">
        <FadeIn>
          <h2 className="text-3xl md:text-4xl font-normal text-[#16130D] pb-3 mb-4" style={{ fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            Press, partnerships & enquiries
          </h2>
          <p className="text-black/75 text-lg max-w-lg mx-auto mb-10" style={{ fontFamily: "'Inter', sans-serif" }}>
            For interviews, features, partnership opportunities, or campaign enquiries — we'd love to hear from you.
          </p>
          <GlowButton primary href="mailto:sales@centurionmedia.agency">Email sales@centurionmedia.agency</GlowButton>
        </FadeIn>
      </div>
    </section>
  </>
);

/* ══════════════════════════════════════════════
   SHARED COMPONENTS
   ══════════════════════════════════════════════ */

const Footer = ({ onNavigate }) => (
  <footer className="relative py-8 border-t border-[#16130D]/[0.08]" style={{ background: "#F0EBD9" }}>
    <div className="max-w-7xl mx-auto px-6">
      <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
        <LogoFull size={24} />
        <a href="mailto:sales@centurionmedia.agency" className="text-[#6B7A4E] text-xs font-medium hover:text-[#4A5A32] transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>sales@centurionmedia.agency</a>
        <div className="flex items-center gap-4">
          <a href="#" onClick={(e) => { e.preventDefault(); onNavigate("terms"); }} className="text-black/85 text-xs hover:text-[#6B7A4E] transition-colors cursor-pointer" style={{ fontFamily: "'Inter', sans-serif" }}>Terms of Service</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNavigate("mediakit"); }} className="text-black/85 text-xs hover:text-[#6B7A4E] transition-colors cursor-pointer" style={{ fontFamily: "'Inter', sans-serif" }}>Media Kit</a>
          <p className="text-black/85 text-xs" style={{ fontFamily: "'Inter', sans-serif" }}>
            &copy; {new Date().getFullYear()} Centurion Media Ltd.
          </p>
        </div>
      </div>
    </div>
  </footer>
);

const GlobalStyles = () => (
  <style>{`
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
    * { margin: 0; padding: 0; box-sizing: border-box; }
    h1, h2, h3, h4, h5, h6 { overflow: visible !important; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; }
    body { background: #F0EBD9; color: #16130D; overflow-x: hidden; overscroll-behavior: none; }
    ::selection { background: rgba(107,122,78, 0.2); color: #16130D; }

    /* Grain texture overlay */
    .::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0.025;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    50% { background-position: 100% 50%; }
    }

    50% { box-shadow: 0 4px 50px rgba(107,122,78,0.45), 0 0 80px rgba(107,122,78,0.1); }
    }

    /* Floating animation variants */
    @keyframes floatIcon { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-14px) rotate(2deg); } 66% { transform: translateY(7px) rotate(-1.5deg); } }
    @keyframes spinSlow { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
    @keyframes meshFloat1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-60px, 40px); } }
    @keyframes meshFloat2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(50px, -30px); } }
    @keyframes meshFloat3 { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.15); } }

    /* Premium scrollbar */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #6B7A4E; border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: #4A5A32; }
  `}</style>
);

/* ══════════════════════════════════════════════
   MAIN APP WITH ROUTING
   ══════════════════════════════════════════════ */

function AOGMedia() {
  const pathToPage = { "/": "home", "/ts": "terms", "/media-kit": "mediakit", "/services": "services", "/process": "process", "/contact": "contact", "/catalytic-marketing": "catalytic" };
  const pageToPath = { home: "/", terms: "/ts", mediakit: "/media-kit", services: "/services", process: "/process", contact: "/contact", catalytic: "/catalytic-marketing" };

  const getPageFromPath = () => {
    if (typeof window === "undefined") return "home";
    return pathToPage[window.location.pathname] || "home";
  };

  const [page, setPage] = useState(getPageFromPath);

  useEffect(() => {
    const onPop = () => setPage(getPageFromPath());
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const navigate = (target) => {
    setPage(target);
    const path = pageToPath[target] || "/";
    window.history.pushState({}, "", path);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <div className="relative min-h-screen" style={{ background: "#F0EBD9" }}>
      <GlobalStyles />
      <MeshGradient />
      <ParticleCanvas />
      <Navbar page={page} onNavigate={navigate} />
      <main className="relative z-10">
        {page === "home" && <HomePage onNavigate={navigate} />}
        {page === "catalytic" && <CatalyticPage />}
        {page === "services" && <ServicesPage />}
        {page === "process" && <ProcessPage />}
        {page === "contact" && <ContactPage />}
        {page === "terms" && <TermsPage />}
        {page === "mediakit" && <MediaKitPage />}
        <Footer onNavigate={navigate} />
      </main>
    </div>
  );
}


window.AOGMedia = AOGMedia;
