// sections.jsx — page sections.

const SERVICES = [
  { n: "01", k: "web",     name: "Websites that earn the click",
    blurb: "Design and build for sites that load fast, look considered, and convert. From landing pages to full marketing sites.",
    tag: "Design & development", visual: "Website mockup — homepage hero, 3 case study tiles, blurred device chrome" },
  { n: "02", k: "funnel",  name: "Funnels engineered to convert",
    blurb: "Acquisition flows that take a stranger and turn them into a customer. Built around the metric that actually matters.",
    tag: "Funnel builds", visual: "Funnel diagram — ad → lead magnet → nurture → offer → checkout" },
  { n: "03", k: "ops",     name: "Systems that run themselves",
    blurb: "We connect the tools you already pay for — CRM, billing, calendar, ESP — into a quiet, dependable backend.",
    tag: "Workflow automation", visual: "Workflow graph — nodes & connectors between SaaS logos" },
  { n: "04", k: "email",   name: "Email that people open",
    blurb: "Lifecycle campaigns, broadcasts, and segmentation that lift LTV without burning your list.",
    tag: "Email marketing", visual: "Inbox preview — open rate chart overlay, three email mockups" },
  { n: "05", k: "social",  name: "Social, on every channel",
    blurb: "Daily posting, community, and DMs across IG, TikTok, X, LinkedIn, YouTube. One voice, eight feeds.",
    tag: "Social media", visual: "Phone with grid of posts — IG, TikTok, LinkedIn tiles" },
  { n: "06", k: "content", name: "Production with a point of view",
    blurb: "Photo, short-form video, podcasts, and stills. Studio sets and on-location, shot to a brief that survives the edit.",
    tag: "Content production", visual: "Studio still — softbox, camera rig, talent silhouette" },
  { n: "07", k: "plan",    name: "Strategy before the camera",
    blurb: "Quarterly plans, narrative arcs, channel architecture, and KPIs — so every post pulls in the same direction.",
    tag: "Content strategy", visual: "Calendar board — pillars, beats, color-coded weeks" },
  { n: "08", k: "video",   name: "Edits that hold attention",
    blurb: "Hook-first cuts, motion captions, sound design. Built for the platform and tuned to the metric.",
    tag: "Video editing", visual: "Editor timeline — multi-track, waveform, captions" },
];

// ─────────────────────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className="nav-wrap">
      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <a href="#top" className="nav-logo" aria-label="Catcus Media — home">
          <img src="assets/catcus-mark-256.png" alt=""/>
          <span>Catcus</span>
        </a>
        <span className="nav-divider hide-sm"/>
        <div className="nav-links">
          <a href="#services" className="hide-sm">Services</a>
          <a href="#process"  className="hide-sm">Process</a>
          <a href="#work">Work</a>
          <a href="#about"    className="hide-sm">About</a>
        </div>
        <a href="#contact" className="nav-cta">Start a project</a>
      </nav>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// HERO — three variants
function Hero({ variant, accent }) {
  if (variant === "aurora") return <HeroAurora/>;
  if (variant === "reel")   return <HeroReel/>;
  return <HeroTypography/>;
}

function HeroShell({ children, bg }) {
  return (
    <section id="top" className="hero" style={{
      position:"relative", minHeight:"100vh", paddingTop:"96px", paddingBottom:"40px",
      display:"flex", flexDirection:"column", justifyContent:"center",
      overflow:"hidden",
    }}>
      {bg}
      <div className="container" style={{ position:"relative", zIndex:2, width:"100%" }}>
        {children}
      </div>
    </section>
  );
}

function HeroCopy({ align = "center" }) {
  return (
    <div style={{ textAlign: align, maxWidth: 1240, margin: align==="center" ? "0 auto" : 0, padding:"0 12px" }}>
      <div style={{
        fontSize:11, fontWeight:600, letterSpacing:".22em", textTransform:"uppercase",
        color:"var(--fg-dim)", marginBottom:40,
        display:"flex", alignItems:"center", gap:14, justifyContent:align==="center"?"center":"flex-start",
        whiteSpace:"nowrap",
      }}>
        <span style={{ width:24, height:1, background:"var(--fg-dim)", display:"inline-block" }}/>
        <span>Catcus Media</span>
        <span style={{ width:24, height:1, background:"var(--fg-dim)", display:"inline-block" }}/>
      </div>

      <h1 style={{
        fontFamily:"'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,sans-serif",
        fontSize:"clamp(34px, 5.6vw, 80px)",
        lineHeight: 1.05,
        letterSpacing:"-0.035em",
        margin:"0 0 56px",
        fontWeight: 400,
        textWrap:"balance",
        color:"var(--fg)",
      }}>
        <span style={{ display:"block", fontWeight:300, fontStyle:"italic", color:"#ffffff", opacity:.92 }}>
          In a desert full of noise,
        </span>
        <span style={{ display:"block", fontWeight:800, color:"var(--accent)", marginTop:".15em", letterSpacing:"-0.04em" }}>
          we stay soft, strange,<br/>and standing.
        </span>
      </h1>

      <div style={{ display:"flex", gap:12, justifyContent:align==="center"?"center":"flex-start", flexWrap:"wrap" }}>
        <MagButton primary href="#contact">Start a project <Glyph.arrow/></MagButton>
        <MagButton href="#work">See the work</MagButton>
      </div>
    </div>
  );
}

function HeroTypography(props) {
  return (
    <HeroShell bg={
      <>
        {/* hairline grid, masked */}
        <div style={{
          position:"absolute", inset:0, opacity:.18, pointerEvents:"none",
          backgroundImage:"linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px)",
          backgroundSize:"96px 96px",
          maskImage:"radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 85%)",
          WebkitMaskImage:"radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 85%)",
        }}/>
      </>
    }>
      <HeroBento/>
    </HeroShell>
  );
}

// New hero \u2014 bento composition: copy left, brand mark + floating preview cards right.
function HeroBento() {
  return (
    <div className="hero-bento" style={{
      display:"grid",
      gridTemplateColumns:"minmax(0,1.25fr) minmax(0,0.95fr)",
      gap:"clamp(32px, 5vw, 72px)",
      alignItems:"center",
      width:"100%",
    }}>
      <HeroBentoCopy/>
      <HeroBentoMark/>
      <style>{`
        @media (max-width: 1080px){
          .hero-bento{ grid-template-columns: 1fr !important; gap:48px !important; }
          .hero-bento-mark{ order: -1; min-height: 380px !important; }
          .hero-bento-copy{ text-align: center !important; max-width: 720px !important; margin: 0 auto !important; }
          .hero-bento-copy .eyebrow{ justify-content: center !important; }
          .hero-bento-copy .ctas{ justify-content: center !important; }
          .hero-bento-copy .stats{ justify-content: center !important; }
        }
      `}</style>
    </div>
  );
}

function HeroBentoCopy() {
  return (
    <div className="hero-bento-copy" style={{ maxWidth: 760 }}>
      <div className="eyebrow" style={{
        fontSize:11, fontWeight:600, letterSpacing:".22em", textTransform:"uppercase",
        color:"var(--fg-dim)", marginBottom:32,
        display:"flex", alignItems:"center", gap:12,
        whiteSpace:"nowrap",
      }}>
        <span style={{
          width:18, height:18, borderRadius:"50%",
          background:"linear-gradient(180deg, #ffd34d, #ff8a18)",
          boxShadow:"inset 0 1px 0 rgba(255,255,255,.6), 0 0 14px rgba(255,138,24,.55)",
          display:"inline-block", flex:"none",
        }}/>
        <span>Catcus Media · Est. 2024</span>
      </div>

      <h1 style={{
        fontFamily:"'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,sans-serif",
        fontSize:"clamp(28px, 3.4vw, 52px)",
        lineHeight: 1.08,
        letterSpacing:"-0.025em",
        margin:"0 0 28px",
        fontWeight: 400,
        textWrap:"balance",
        color:"var(--fg)",
      }}>
        <span style={{ display:"block", fontWeight:300, fontStyle:"italic", color:"#fff", opacity:.95 }}>
          In a desert full of noise,
        </span>
        <span style={{ display:"block", fontWeight:800, color:"var(--accent)", marginTop:".22em", letterSpacing:"-0.03em" }}>
          we stay <WordTyper words={["soft.", "strange.", "standing."]}/>
        </span>
      </h1>

      <p style={{
        color:"var(--fg-mute)", fontSize:17, lineHeight:1.5, maxWidth:480,
        margin:"0 0 36px", textWrap:"pretty",
      }}>
        A marketing &amp; media studio for brands that would rather mean something than make noise. Sites, funnels, content, the channels that run them — built and run by one team.
      </p>

      <div className="ctas" style={{ display:"flex", gap:12, flexWrap:"wrap", marginBottom:48 }}>
        <MagButton primary href="#contact">Start a project <Glyph.arrow/></MagButton>
        <MagButton href="#work">See the work</MagButton>
      </div>

      <div className="stats" style={{
        display:"flex", gap:"clamp(24px, 4vw, 48px)",
        paddingTop:24, borderTop:"1px solid var(--line)",
      }}>
        {[
          { n:"140+", l:"Projects shipped" },
          { n:"42M",  l:"Impressions driven" },
          { n:"18",   l:"Brands in residency" },
        ].map((s,i)=>(
          <div key={i}>
            <div style={{
              fontFamily:"'Inter Tight'", fontWeight:700, fontSize:"clamp(22px, 2.3vw, 30px)",
              letterSpacing:"-.025em", lineHeight:1, color:"var(--fg)",
            }}>{s.n}</div>
            <div style={{ color:"var(--fg-dim)", fontSize:11.5, textTransform:"uppercase", letterSpacing:".09em", marginTop:8 }}>
              {s.l}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroBentoMark() {
  return (
    <div className="hero-bento-mark" style={{
      position:"relative", width:"100%", minHeight:580,
      display:"flex", alignItems:"center", justifyContent:"center",
    }}>
      {/* Sun-disc halo behind the mark */}
      <div style={{
        position:"absolute", left:"50%", top:"50%", transform:"translate(-50%,-50%)",
        width:"min(80%, 460px)", aspectRatio:"1/1",
        borderRadius:"50%",
        background:"radial-gradient(closest-side, rgba(255,185,20,.35), rgba(255,138,24,.10) 50%, transparent 75%)",
        filter:"blur(40px)",
        animation:"sunPulse 9s ease-in-out infinite",
      }}/>

      {/* The brand mark \u2014 hero element */}
      <img src="assets/catcus-mark.png" alt="Catcus Media" style={{
        position:"relative", zIndex:2,
        width:"min(72%, 420px)", aspectRatio:"1/1",
        objectFit:"contain",
        filter:"drop-shadow(0 30px 60px rgba(255,138,24,.25)) drop-shadow(0 0 60px rgba(255,185,20,.2))",
        animation:"markFloat 10s ease-in-out infinite",
      }}/>

      {/* Floating preview cards — deliberately overlap the brand mark for depth */}
      <FloatingCard pos={{ top:"4%", right:"-18%" }} delay="-1s" rot={4} width={300}>
        <MiniWebCard/>
      </FloatingCard>
      <FloatingCard pos={{ bottom:"6%", left:"-8%" }} delay="-3.5s" rot={-5}>
        <MiniSocialCard/>
      </FloatingCard>
      <FloatingCard pos={{ bottom:"10%", right:"-4%" }} delay="-6s" rot={3} width={210}>
        <MiniMetricCard/>
      </FloatingCard>

      <style>{`
        @keyframes sunPulse{0%,100%{opacity:1}50%{opacity:.82}}
        @keyframes markFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
        @keyframes cardFloatA{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-8px) rotate(var(--rot,0deg))}}
      `}</style>
    </div>
  );
}

function FloatingCard({ children, pos, delay = "0s", small, rot = 0, width }) {
  return (
    <div className="glass" style={{
      position:"absolute", ...pos, zIndex: 3,
      width: width || (small ? 170 : 200),
      borderRadius:18, padding:12,
      transform:`rotate(${rot}deg)`,
      animation:`cardFloatA 7s ease-in-out ${delay} infinite`,
    }}>
      {children}
    </div>
  );
}

function MiniWebCard() {
  return (
    <div>
      <div style={{ display:"flex", alignItems:"center", gap:5, marginBottom:8 }}>
        <i style={{ width:7, height:7, borderRadius:"50%", background:"#3a3a3f", display:"inline-block" }}/>
        <i style={{ width:7, height:7, borderRadius:"50%", background:"#3a3a3f", display:"inline-block" }}/>
        <i style={{ width:7, height:7, borderRadius:"50%", background:"#3a3a3f", display:"inline-block" }}/>
        <div style={{ flex:1, height:8, marginLeft:4, background:"rgba(255,255,255,.08)", borderRadius:3 }}/>
      </div>
      <div style={{
        aspectRatio:"1507 / 853", borderRadius:10, overflow:"hidden",
        border:"1px solid rgba(255,255,255,.06)",
        background:"#000",
      }}>
        <img src="assets/site-launch.png" alt="Site launch preview"
          style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }}/>
      </div>
      <div style={{
        marginTop:10, fontSize:10, color:"var(--fg)", letterSpacing:".14em", textTransform:"uppercase",
        fontWeight:600, opacity:.85,
        display:"flex", alignItems:"center", gap:6,
      }}>
        <span style={{ width:14, height:1, background:"var(--accent)" }}/>
        Site launch
      </div>
    </div>
  );
}

function MiniSocialCard() {
  return (
    <div>
      <div style={{ fontSize:10, color:"var(--fg)", letterSpacing:".14em", textTransform:"uppercase", marginBottom:8, fontWeight:600, opacity:.85, display:"flex", alignItems:"center", gap:6 }}>
        <span style={{ width:14, height:1, background:"var(--accent)" }}/>
        Social grid
      </div>
      <div style={{
        aspectRatio:"9/16", borderRadius:12, overflow:"hidden",
        border:"1px solid rgba(255,255,255,.1)",
        background:"#000",
        boxShadow:"inset 0 0 0 1px rgba(255,255,255,.04)",
      }}>
        <img src="assets/social-grid.jpg" alt="Instagram profile"
          style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }}/>
      </div>
      <div style={{ marginTop:10, display:"flex", justifyContent:"space-between", fontSize:10, color:"#c5c5cb", fontWeight:500 }}>
        <span>+1.1M followers</span><span style={{ color:"var(--accent)" }}>↑ 18%</span>
      </div>
    </div>
  );
}

function MiniMetricCard() {
  return (
    <div>
      <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:10 }}>
        <div style={{ display:"flex", alignItems:"center", gap:6 }}>
          <span style={{
            width:6, height:6, borderRadius:"50%",
            background:"#30d158", boxShadow:"0 0 8px rgba(48,209,88,.7)",
          }}/>
          <span style={{ fontSize:10, color:"#f5f5f7", fontWeight:600, letterSpacing:".06em", textTransform:"uppercase" }}>
            This week
          </span>
        </div>
        <span style={{ fontSize:9, color:"#a1a1a6", letterSpacing:".04em" }}>Live</span>
      </div>
      <div style={{ display:"flex", alignItems:"baseline", gap:6 }}>
        <div style={{ fontFamily:"'Inter Tight'", fontWeight:800, fontSize:34, letterSpacing:"-.035em", lineHeight:1, color:"#fff" }}>
          +3.4×
        </div>
        <div style={{ fontSize:11, color:"var(--accent)", fontWeight:600 }}>↑ 240%</div>
      </div>
      <div style={{ fontSize:11, color:"#c5c5cb", marginTop:6, fontWeight:500 }}>Conversion lift</div>
      <svg viewBox="0 0 140 44" style={{ width:"100%", height:36, marginTop:10 }}>
        <defs>
          <linearGradient id="miniA" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="var(--accent)" stopOpacity=".55"/>
            <stop offset="1" stopColor="var(--accent)" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <line x1="0" y1="38" x2="140" y2="38" stroke="rgba(255,255,255,.08)" strokeDasharray="2 3"/>
        <path d="M0,34 C 20,30 30,28 45,22 C 60,16 80,14 100,8 L 140,2 L 140,44 L 0,44 Z" fill="url(#miniA)"/>
        <path d="M0,34 C 20,30 30,28 45,22 C 60,16 80,14 100,8 L 140,2" stroke="var(--accent)" strokeWidth="1.6" fill="none"/>
        <circle cx="140" cy="2" r="3" fill="var(--accent)"/>
        <circle cx="140" cy="2" r="6" fill="var(--accent)" opacity=".25"/>
      </svg>
      <div style={{ display:"flex", justifyContent:"space-between", fontSize:9, color:"#86868b", marginTop:4 }}>
        <span>Mon</span><span>Wed</span><span>Fri</span><span>Sun</span>
      </div>
    </div>
  );
}

Object.assign(window, { HeroBento, HeroBentoCopy, HeroBentoMark, FloatingCard, MiniWebCard, MiniSocialCard, MiniMetricCard });

function HeroAurora(props) {
  return (
    <HeroShell bg={<Aurora/>}>
      <HeroCopy {...props}/>
    </HeroShell>
  );
}

function Aurora() {
  // Drifting colored orbs, heavy blur, slow loop — Apple Pro page energy.
  const blobs = [
    { c1:"#ff9f0a", c2:"#ff375f", x:"15%", y:"18%", s:560, d:"22s",  delay:"0s" },
    { c1:"#5e5ce6", c2:"#0a84ff", x:"75%", y:"30%", s:620, d:"28s",  delay:"-6s" },
    { c1:"#30d158", c2:"#5e5ce6", x:"60%", y:"75%", s:520, d:"32s",  delay:"-12s" },
    { c1:"#ff9f0a", c2:"#bf5af2", x:"20%", y:"80%", s:480, d:"24s",  delay:"-3s" },
  ];
  return (
    <div style={{ position:"absolute", inset:0, overflow:"hidden", pointerEvents:"none" }}>
      <style>{`
        @keyframes auroraDrift {
          0%   { transform: translate3d(-8%,-6%,0) scale(1); }
          50%  { transform: translate3d(10%,8%,0)  scale(1.18); }
          100% { transform: translate3d(-8%,-6%,0) scale(1); }
        }
      `}</style>
      {blobs.map((b,i)=>(
        <div key={i} style={{
          position:"absolute", left:b.x, top:b.y, width:b.s, height:b.s,
          marginLeft:-b.s/2, marginTop:-b.s/2,
          borderRadius:"50%",
          background:`radial-gradient(closest-side, ${b.c1}, transparent 70%), radial-gradient(closest-side, ${b.c2}, transparent 80%)`,
          filter:"blur(80px)", opacity:.55, mixBlendMode:"screen",
          animation:`auroraDrift ${b.d} ease-in-out ${b.delay} infinite`,
        }}/>
      ))}
      {/* darken edges */}
      <div style={{
        position:"absolute", inset:0,
        background:"radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(0,0,0,.75) 100%)",
      }}/>
    </div>
  );
}

function HeroReel(props) {
  const tiles = useMemo(() => (
    ["Brand film — Outfield Coffee","Site launch — Nomad Bank","Reel — Halo Studio Q3",
     "Funnel — Ledger SaaS","TikTok — Kindling Apparel","Campaign — Forager Skin",
     "Podcast — Operator Hours","Photo — Ferment Foods","Edit — Tide Run","Spot — Atlas Bikes",
     "Site — Plenty Wine","Ad — Cargo Studio"]
  ), []);
  return (
    <HeroShell bg={
      <div style={{ position:"absolute", inset:0, overflow:"hidden", pointerEvents:"none" }}>
        <style>{`
          @keyframes reelL { from{transform:translateX(0)} to{transform:translateX(-50%)} }
          @keyframes reelR { from{transform:translateX(-50%)} to{transform:translateX(0)} }
          .reel-track{display:flex;gap:18px;will-change:transform}
          .reel-row{display:flex;width:max-content}
        `}</style>
        <div style={{ position:"absolute", inset:"8% 0 auto 0", opacity:.35 }}>
          <div className="reel-row" style={{ animation:"reelL 60s linear infinite" }}>
            {[...tiles,...tiles].map((t,i)=>(
              <div key={"a"+i} style={{ width:340, marginRight:18, flex:"none" }}>
                <Placeholder label={t} ratio="16/10"/>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position:"absolute", inset:"auto 0 8% 0", opacity:.35 }}>
          <div className="reel-row" style={{ animation:"reelR 80s linear infinite" }}>
            {[...tiles.slice().reverse(),...tiles.slice().reverse()].map((t,i)=>(
              <div key={"b"+i} style={{ width:300, marginRight:18, flex:"none" }}>
                <Placeholder label={t} ratio="4/3"/>
              </div>
            ))}
          </div>
        </div>
        <div style={{
          position:"absolute", inset:0,
          background:"radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,.78) 30%, rgba(0,0,0,.95) 80%)",
        }}/>
      </div>
    }>
      <HeroCopy {...props}/>
    </HeroShell>
  );
}

function HeroScrollHint() {
  return (
    <div style={{
      position:"absolute", left:"50%", bottom:28, transform:"translateX(-50%)",
      fontSize:11, letterSpacing:".18em", textTransform:"uppercase", color:"var(--fg-dim)",
      display:"flex", flexDirection:"column", alignItems:"center", gap:8,
      zIndex:3,
    }}>
      <span>Scroll</span>
      <div style={{
        width:1, height:28, background:"linear-gradient(var(--fg-dim), transparent)",
        animation:"scrollPulse 2.4s ease-in-out infinite",
      }}/>
      <style>{`@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}`}</style>
    </div>
  );
}

Object.assign(window, { SERVICES, Nav, Hero });