// sections3.jsx — process, work, about, contact, footer.

// ─────────────────────────────────────────────────────────────────────────────
// PROCESS — sticky scroll-scrubbed timeline (Apple Pro page energy)
const PROCESS_STEPS = [
  { n:"01", t:"Diagnose",
    d:"We start with the metric you're paid to move. Audit funnel, channels, content, and ops to find where attention leaks.",
    bullets:["Funnel + analytics audit","Channel teardown","Competitive read","KPI tree"] },
  { n:"02", t:"Strategize",
    d:"A 90-day plan with the few things that actually matter. Positioning, narrative pillars, channel mix, and a calendar everyone can defend.",
    bullets:["Positioning brief","Narrative pillars","Quarterly calendar","KPI targets"] },
  { n:"03", t:"Build",
    d:"Design and ship. Site, funnel, automations, templates, and the asset library that production runs on.",
    bullets:["Site + landers","Lifecycle automations","Asset library","Reporting"] },
  { n:"04", t:"Run",
    d:"Daily execution across every channel, with weekly reviews against the metric. We touch the work; you watch the line.",
    bullets:["Daily posting","Weekly broadcasts","Monthly campaigns","Quarterly review"] },
];

function Process() {
  const ref = useRef(null);
  // Sticky stage is ~ (steps.length) * 100vh tall. Progress 0..1 over that range.
  const stages = PROCESS_STEPS.length;
  const p = useScrollProgress(ref, { start:0.0, end:1.0 });
  // Index changes through 0..stages-1 over the inner ~90% of the scroll range.
  const inner = Math.max(0, Math.min(1, (p - 0.05) / 0.9));
  const fIdx = inner * (stages - 1);
  const idx = Math.min(stages - 1, Math.floor(fIdx));
  const sub = fIdx - idx; // 0..1 within current step

  return (
    <section id="process" ref={ref} style={{
      position:"relative", height:`${stages * 110}vh`,
    }}>
      <div style={{
        position:"sticky", top:0, height:"100vh",
        display:"flex", alignItems:"center",
        overflow:"hidden",
      }}>
        <div className="container" style={{ width:"100%" }}>
          <Reveal>
            <div className="h-eyebrow" style={{ marginBottom:14 }}>How we work</div>
          </Reveal>
          <Reveal delay={1}>
            <h2 className="display" style={{ fontSize:"clamp(36px,5.4vw,72px)", margin:"0 0 36px", maxWidth:900 }}>
              A four-phase loop.<br/>Run quarterly.
            </h2>
          </Reveal>

          {/* Timeline rail */}
          <div style={{ position:"relative", margin:"30px 0 24px" }}>
            <div style={{
              position:"absolute", left:0, right:0, top:18,
              height:1, background:"var(--line-strong)",
            }}/>
            <div style={{
              position:"absolute", left:0, top:18,
              width:`${((idx + sub) / (stages - 1)) * 100}%`,
              height:2, background:"var(--accent)", marginTop:-0.5,
              transition:"width .08s linear",
              boxShadow:"0 0 12px rgba(255,159,10,.6)",
            }}/>
            <div style={{ display:"grid", gridTemplateColumns:`repeat(${stages}, 1fr)`, position:"relative" }}>
              {PROCESS_STEPS.map((s, i) => {
                const active = i <= idx;
                return (
                  <div key={i} style={{ display:"flex", flexDirection:"column", alignItems:"flex-start" }}>
                    <div style={{
                      width:14, height:14, borderRadius:"50%",
                      background: active ? "var(--accent)" : "var(--bg)",
                      border: `1px solid ${active ? "var(--accent)" : "var(--line-strong)"}`,
                      marginTop:12,
                      transition:"background .2s, border-color .2s",
                      boxShadow: active ? "0 0 0 4px rgba(255,159,10,.15)" : "none",
                    }}/>
                    <div style={{
                      marginTop:14, fontSize:11, letterSpacing:".1em", textTransform:"uppercase",
                      color: i===idx ? "var(--fg)" : "var(--fg-dim)",
                      fontWeight: i===idx ? 600 : 500,
                      transition:"color .2s",
                    }}>{s.n} · {s.t}</div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Current step pane */}
          <div style={{ marginTop:60, display:"grid", gridTemplateColumns:"minmax(0,1.05fr) minmax(0,1fr)", gap:"clamp(32px,5vw,80px)", alignItems:"center" }}>
            <div style={{ position:"relative", minHeight:280 }}>
              {PROCESS_STEPS.map((s, i) => (
                <div key={i} style={{
                  position: i === 0 ? "relative" : "absolute",
                  inset: 0,
                  opacity: i === idx ? 1 : 0,
                  transform: `translateY(${i === idx ? 0 : (i < idx ? -20 : 20)}px)`,
                  transition: "opacity .35s ease, transform .35s ease",
                  pointerEvents: i === idx ? "auto" : "none",
                }}>
                  <h3 className="display" style={{ fontSize:"clamp(40px,5.4vw,80px)", margin:"0 0 18px", letterSpacing:"-.03em" }}>
                    {s.t}.
                  </h3>
                  <p style={{ color:"var(--fg-mute)", fontSize:19, lineHeight:1.45, maxWidth:520, margin:0, textWrap:"pretty" }}>
                    {s.d}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ position:"relative", minHeight:280 }}>
              {PROCESS_STEPS.map((s, i) => (
                <ul key={i} style={{
                  position: i === 0 ? "relative" : "absolute",
                  inset: 0, listStyle:"none", padding:0, margin:0,
                  display:"grid", gap:10,
                  opacity: i === idx ? 1 : 0,
                  transform: `translateY(${i === idx ? 0 : (i < idx ? -20 : 20)}px)`,
                  transition: "opacity .35s ease .05s, transform .35s ease .05s",
                }}>
                  {s.bullets.map((b, j) => (
                    <li key={j} className="glass" style={{
                      display:"flex", alignItems:"center", gap:12,
                      padding:"14px 16px", borderRadius:14,
                      fontSize:15.5, color:"var(--fg)",
                    }}>
                      <span style={{
                        width:24, height:24, borderRadius:"50%",
                        background:"linear-gradient(180deg, rgba(255,211,77,.35), rgba(255,138,24,.25))",
                        color:"#ffd34d",
                        display:"inline-flex", alignItems:"center", justifyContent:"center",
                        fontSize:11, fontWeight:700, fontFamily:"'Inter Tight'",
                        boxShadow:"inset 0 1px 0 rgba(255,255,255,.35)",
                      }}>{j+1}</span>
                      {b}
                    </li>
                  ))}
                </ul>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// WORK — placeholder logos + 3 case study cards
const LOGOS = ["Outfield Coffee","Nomad Bank","Halo Studio","Ledger SaaS","Kindling","Forager","Atlas Bikes","Plenty Wine"];

const CASES = [
  { client:"Outfield Coffee", tag:"DTC · Subscription",
    title:"Subscriber base up 3.4× in two quarters",
    blurb:"Rebuilt the site, rewrote the lifecycle, and shipped a content engine across IG and TikTok.",
    stats:[{n:"3.4×", l:"subscribers"},{n:"−38%", l:"CAC"},{n:"54%", l:"open rate"}],
    visual:"Hero shot — coffee bag on warm gradient, brand mark"
  },
  { client:"Nomad Bank", tag:"Fintech · Launch",
    title:"From stealth to 12k waitlist in 9 weeks",
    blurb:"Brand site, paid funnels, and a referral mechanic that did the heavy lifting at launch.",
    stats:[{n:"12,400", l:"signups"},{n:"$0.41", l:"CPL"},{n:"4.1×", l:"K-factor"}],
    visual:"Phone mockup — Nomad onboarding, dark UI"
  },
  { client:"Halo Studio", tag:"B2B · Demand gen",
    title:"Pipeline doubled on the same ad spend",
    blurb:"Reworked the funnel, fixed attribution, and built the asset library their AEs run on.",
    stats:[{n:"2.1×", l:"pipeline"},{n:"38%", l:"win rate"},{n:"−22d", l:"sales cycle"}],
    visual:"Dashboard — pipeline view, line going up-right"
  },
];

function Work() {
  return (
    <section id="work" className="section">
      <div className="container">
        <div style={{ display:"flex", flexWrap:"wrap", alignItems:"flex-end", justifyContent:"space-between", gap:30, marginBottom:50 }}>
          <div>
            <Reveal><div className="h-eyebrow">Selected work</div></Reveal>
            <Reveal delay={1}>
              <h2 className="display" style={{ fontSize:"clamp(40px,6vw,84px)", margin:"14px 0 0", maxWidth:760 }}>
                Results, not deliverables.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <a className="btn-link" href="#contact" style={{ paddingBottom:8 }}>
              Full case studies <Glyph.arrow className="arr"/>
            </a>
          </Reveal>
        </div>

        {/* Logo strip */}
        <Reveal delay={1}>
          <div className="glass" style={{
            display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:0,
            borderRadius:20,
            marginBottom:60,
            overflow:"hidden",
          }}>
            {LOGOS.map((name, i) => (
              <div key={name} style={{
                padding:"22px 14px", textAlign:"center",
                color:"var(--fg-dim)", fontFamily:"'Inter Tight'", fontWeight:700, letterSpacing:"-.02em", fontSize:15,
                borderLeft: i%4!==0 ? "1px solid var(--line)" : "none",
                borderTop:  i>=4   ? "1px solid var(--line)" : "none",
                opacity:.7, transition:"opacity .25s, color .25s",
              }}
              onMouseEnter={(e)=>{e.currentTarget.style.opacity="1";e.currentTarget.style.color="var(--fg)"}}
              onMouseLeave={(e)=>{e.currentTarget.style.opacity=".7";e.currentTarget.style.color="var(--fg-dim)"}}>
                {name}
              </div>
            ))}
          </div>
          <style>{`@media (max-width:700px){#work .container > div:nth-child(2){grid-template-columns:repeat(2,1fr) !important}}`}</style>
        </Reveal>

        {/* Case study cards */}
        <div style={{ display:"grid", gap:20 }}>
          {CASES.map((c, i) => (
            <Reveal key={c.client} delay={Math.min(3,i+1)}>
              <CaseCard c={c} reverse={i % 2 === 1}/>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseCard({ c, reverse }) {
  return (
    <div className="glass" style={{
      borderRadius:"var(--radius-lg)", overflow:"hidden",
      display:"grid", gridTemplateColumns:"minmax(0,1fr) minmax(0,1.1fr)",
      minHeight:380, direction: reverse ? "rtl" : "ltr",
    }}>
      <div style={{ direction:"ltr", padding:"36px 38px", display:"flex", flexDirection:"column", justifyContent:"space-between", gap:24 }}>
        <div>
          <div style={{ color:"var(--accent)", fontSize:12, letterSpacing:".08em", textTransform:"uppercase", fontWeight:600, marginBottom:14 }}>
            {c.client} <span style={{ color:"var(--fg-dim)", marginLeft:8 }}>· {c.tag}</span>
          </div>
          <h3 className="display" style={{ fontSize:"clamp(28px,3vw,42px)", margin:"0 0 14px", letterSpacing:"-.025em", lineHeight:1.08 }}>
            {c.title}
          </h3>
          <p style={{ color:"var(--fg-mute)", fontSize:16, lineHeight:1.5, margin:0, maxWidth:480 }}>{c.blurb}</p>
        </div>
        <div style={{ display:"flex", gap:30, flexWrap:"wrap" }}>
          {c.stats.map((s, i) => (
            <div key={i}>
              <div className="display" style={{ fontSize:32, color:"var(--fg)", letterSpacing:"-.03em", lineHeight:1 }}>{s.n}</div>
              <div style={{ color:"var(--fg-dim)", fontSize:11, textTransform:"uppercase", letterSpacing:".1em", marginTop:6 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ direction:"ltr", padding:18 }}>
        <Placeholder label={c.visual} ratio="auto" style={{ height:"100%", minHeight:300 }}/>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// ABOUT
function About() {
  return (
    <section id="about" className="section">
      <div className="container">
        <div style={{ display:"grid", gridTemplateColumns:"minmax(0,1fr) minmax(0,1.2fr)", gap:"clamp(40px,7vw,120px)", alignItems:"start" }}>
          <div style={{ position:"sticky", top:"calc(48px + 6vh)" }}>
            <Reveal><div className="h-eyebrow">About</div></Reveal>
            <Reveal delay={1}>
              <h2 className="display" style={{ fontSize:"clamp(40px,5.4vw,76px)", margin:"14px 0 0", letterSpacing:"-.03em" }}>
                Quiet outside.<br/>
                <span style={{ color:"var(--accent)" }}>Loud results.</span>
              </h2>
            </Reveal>
          </div>
          <div>
            <Reveal>
              <p style={{ fontSize:"clamp(20px,1.6vw,26px)", lineHeight:1.4, color:"var(--fg)", margin:"0 0 28px", maxWidth:640, fontWeight:400, letterSpacing:"-.01em", textWrap:"pretty" }}>
                Catcus is a small studio that runs growth for a few companies at a time. We trade volume for ownership: every account has a senior on it, every week.
              </p>
            </Reveal>
            <Reveal delay={1}>
              <p style={{ fontSize:17, lineHeight:1.55, color:"var(--fg-mute)", margin:"0 0 40px", maxWidth:580 }}>
                We don't have a deck for you. We have a Monday-morning view of the metric, a Friday list of what we shipped, and a quarterly plan that adapts when the numbers say so. The work outlives the engagement.
              </p>
            </Reveal>

            <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:20, marginTop:30 }}>
              {[
                { n:140, suffix:"+", l:"Campaigns shipped" },
                { n:42,  suffix:"M", l:"Impressions driven", fmt:(n)=>Math.round(n)+"M" },
                { n:18,  suffix:"",  l:"Brands in residency" },
              ].map((s,i)=>(
                <Reveal key={i} delay={i+1}>
                  <div style={{ borderTop:"1px solid var(--line-strong)", paddingTop:18 }}>
                    <div className="display" style={{ fontSize:"clamp(36px,4vw,56px)", letterSpacing:"-.03em", lineHeight:1, color:"var(--fg)" }}>
                      <Ticker to={s.n} suffix={s.suffix} fmt={s.fmt}/>
                    </div>
                    <div style={{ color:"var(--fg-dim)", fontSize:12, textTransform:"uppercase", letterSpacing:".08em", marginTop:10 }}>{s.l}</div>
                  </div>
                </Reveal>
              ))}
            </div>

            <Reveal delay={3}>
              <div className="glass" style={{ marginTop:60, padding:"28px 30px", borderRadius:24, background:"rgba(255,185,20,.06)", border:"1px solid rgba(255,185,20,.20)" }}>
                <div style={{ fontSize:11, letterSpacing:".1em", textTransform:"uppercase", color:"var(--accent)", fontWeight:600, marginBottom:10 }}>
                  Operating principle
                </div>
                <p className="display" style={{ fontSize:"clamp(22px,2vw,30px)", lineHeight:1.2, margin:0, color:"var(--fg)", letterSpacing:"-.02em" }}>
                  "Build the system, then run it. The plan that survives contact with reality is the one that wins."
                </p>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 900px){#about .container > div{grid-template-columns:1fr !important}#about .container > div > div:first-child{position:static !important}}`}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CONTACT
function Contact() {
  return (
    <section id="contact" className="section" style={{ paddingBottom:"calc(var(--section-y) - 20px)" }}>
      <div className="container" style={{ textAlign:"center" }}>
        <Reveal><div className="h-eyebrow" style={{ marginBottom:18 }}>Start a project</div></Reveal>
        <Reveal delay={1}>
          <h2 className="display" style={{ fontSize:"clamp(48px,9vw,140px)", margin:"0 0 30px", letterSpacing:"-.035em" }}>
            Let's make<br/>something that<br/><span style={{ color:"var(--accent)" }}>compounds.</span>
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p style={{ color:"var(--fg-mute)", fontSize:19, maxWidth:520, margin:"0 auto 44px", lineHeight:1.45 }}>
            Tell us the metric you're trying to move. We'll come back within a day with whether we can help and how.
          </p>
        </Reveal>

        <Reveal delay={2}>
          <a href="mailto:hello@catcus.media" style={{
            display:"inline-block", marginBottom:30,
            fontSize:"clamp(22px,2.4vw,32px)", fontWeight:600, letterSpacing:"-.02em",
            color:"var(--fg)", borderBottom:"1px solid var(--line-strong)", paddingBottom:6,
            transition:"color .25s, border-color .25s",
          }}
          onMouseEnter={(e)=>{e.currentTarget.style.color="var(--accent)";e.currentTarget.style.borderColor="var(--accent)"}}
          onMouseLeave={(e)=>{e.currentTarget.style.color="var(--fg)";e.currentTarget.style.borderColor="var(--line-strong)"}}>
            hello@catcus.media
          </a>
        </Reveal>

        <Reveal delay={3}>
          <div style={{ display:"flex", gap:14, justifyContent:"center", flexWrap:"wrap", marginTop:18 }}>
            <MagButton primary href="#"><span>Book a 20-min intro</span><Glyph.arrow/></MagButton>
            <MagButton href="mailto:hello@catcus.media">Send a brief</MagButton>
          </div>
        </Reveal>

        <Reveal delay={4}>
          <div style={{ marginTop:64, display:"flex", gap:32, justifyContent:"center", flexWrap:"wrap", color:"var(--fg-dim)", fontSize:13 }}>
            <span><span style={{ color:"var(--fg-mute)", fontWeight:500 }}>Brisbane</span> · HQ</span>
            <span><span style={{ color:"var(--fg-mute)", fontWeight:500 }}>Remote</span> · Worldwide</span>
            <span><span style={{ color:"var(--fg-mute)", fontWeight:500 }}>Mon–Fri</span> · 9–6 AEST</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ borderTop:"1px solid var(--line)", padding:"40px 0 32px", color:"var(--fg-dim)", fontSize:13 }}>
      <div className="container" style={{ display:"flex", flexWrap:"wrap", gap:24, justifyContent:"space-between", alignItems:"center" }}>
        <div style={{ display:"flex", alignItems:"center", gap:12, color:"var(--fg-mute)" }}>
          <img src="assets/catcus-mark-256.png" alt="" width="32" height="32" style={{ display:"block" }}/>
          <span style={{ fontWeight:600, color:"var(--fg)" }}>Catcus Media</span>
          <span style={{ marginLeft:6 }}>© 2026</span>
        </div>
        <div style={{ display:"flex", gap:22 }}>
          <a href="#" style={{ transition:"color .2s" }} onMouseEnter={(e)=>e.currentTarget.style.color="var(--fg)"} onMouseLeave={(e)=>e.currentTarget.style.color=""}>Instagram</a>
          <a href="#" onMouseEnter={(e)=>e.currentTarget.style.color="var(--fg)"} onMouseLeave={(e)=>e.currentTarget.style.color=""}>LinkedIn</a>
          <a href="#" onMouseEnter={(e)=>e.currentTarget.style.color="var(--fg)"} onMouseLeave={(e)=>e.currentTarget.style.color=""}>YouTube</a>
          <a href="#" onMouseEnter={(e)=>e.currentTarget.style.color="var(--fg)"} onMouseLeave={(e)=>e.currentTarget.style.color=""}>Privacy</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Process, Work, About, Contact, Footer });