// Sections for Thamjid Hassan — business/sales/marketing strategist portfolio

const Hero = () => {
  const heroRef = React.useRef(null);

  React.useEffect(() => {
    const name = heroRef.current; // .hero-name element
    const section = name && name.closest(".hero");
    const navLogo = document.querySelector(".mark-logo");
    const navMark = document.querySelector(".site-header .mark");
    if (!name || !section || !navLogo || !navMark) return;

    // Other hero children that should fade out as we scroll (everything except the name)
    const fadeEls = Array.from(section.children).filter((el) => el !== name && !el.classList.contains("hero-grid"));
    // Placeholder to reserve space when name goes fixed
    let placeholder = null;

    const isMobile = () => window.innerWidth <= 900;

    let raf = 0;

    const setFade = (op) => {
      fadeEls.forEach((el) => {el.style.opacity = String(op);el.style.transition = "opacity 0.2s ease";});
    };

    // ---------- Mobile: simple scale-down + fade-up in place ----------
    const updateMobile = () => {
      raf = 0;
      const scrollY = window.scrollY;
      const trigger = Math.max(180, window.innerHeight * 0.5);
      const p = Math.max(0, Math.min(1, scrollY / trigger));
      const t = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
      if (t <= 0.001) {
        name.style.transform = "";
        name.style.opacity = "1";
        setFade(1);
        navLogo.style.opacity = "0";
        return;
      }
      const scale = 1 - t * 0.55;
      const ty = -t * 60;
      name.style.transformOrigin = "center top";
      name.style.transform = `translate3d(0, ${ty}px, 0) scale(${scale})`;
      name.style.opacity = String(1 - t);
      setFade(1 - t);
      navLogo.style.opacity = String(Math.max(0, (t - 0.75) / 0.25));
    };

    // ---------- Desktop: morph the name into the nav logo ----------
    const updateDesktop = () => {
      raf = 0;
      const targetRect = navLogo.getBoundingClientRect();
      const scrollY = window.scrollY;
      const trigger = Math.max(200, window.innerHeight * 0.6);
      const p = Math.max(0, Math.min(1, scrollY / trigger));
      const t = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;

      if (t <= 0.001) {
        name.style.transform = "";
        name.style.position = "";
        name.style.left = "";
        name.style.right = "";
        name.style.top = "";
        name.style.margin = "";
        name.style.width = "";
        name.style.height = "";
        name.style.opacity = "1";
        if (placeholder && placeholder.parentNode) {placeholder.parentNode.removeChild(placeholder);placeholder = null;}
        delete name.dataset.w;
        delete name.dataset.h;
        delete name.dataset.top;
        delete name.dataset.left;
        setFade(1);
        navLogo.style.opacity = "0";
        return;
      }

      // Cache natural geometry the first time we cross the threshold
      if (!name.dataset.w) {
        const r = name.getBoundingClientRect();
        name.dataset.w = r.width;
        name.dataset.h = r.height;
        name.dataset.top = r.top + scrollY;
        name.dataset.left = r.left;

        // Insert a placeholder so the rest of the hero doesn't reflow
        placeholder = document.createElement("div");
        placeholder.style.width = r.width + "px";
        placeholder.style.height = r.height + "px";
        placeholder.style.flex = "0 0 auto";
        placeholder.style.pointerEvents = "none";
        name.parentNode.insertBefore(placeholder, name);
      }

      name.style.position = "fixed";
      name.style.left = "0";
      name.style.top = "0";
      name.style.margin = "0";
      name.style.pointerEvents = "none";
      name.style.zIndex = "50";

      const naturalW = parseFloat(name.dataset.w);
      const naturalH = parseFloat(name.dataset.h);
      const naturalTop = parseFloat(name.dataset.top);
      const naturalLeft = parseFloat(name.dataset.left);

      const scale = (naturalW * (1 - t) + targetRect.width * t) / naturalW;

      const startX = naturalLeft;
      const endX = targetRect.left;
      const x = startX * (1 - t) + endX * t;
      const startY = naturalTop - scrollY;
      const endY = targetRect.top;
      const y = startY * (1 - t) + endY * t;

      name.style.transformOrigin = "top left";
      name.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;
      name.style.width = naturalW + "px";
      name.style.height = naturalH + "px";
      name.style.opacity = String(1 - Math.max(0, (t - 0.75) / 0.25));
      setFade(Math.max(0, 1 - t * 1.2));
      navLogo.style.opacity = String(Math.max(0, (t - 0.75) / 0.25));
    };

    navLogo.style.opacity = "0";
    navLogo.style.transition = "opacity 0.25s ease";

    const update = () => isMobile() ? updateMobile() : updateDesktop();

    const onScroll = () => {
      if (!raf) raf = requestAnimationFrame(update);
    };
    const onResize = () => {
      delete name.dataset.w;
      delete name.dataset.h;
      delete name.dataset.top;
      delete name.dataset.left;
      name.style.cssText = "";
      if (placeholder && placeholder.parentNode) {placeholder.parentNode.removeChild(placeholder);placeholder = null;}
      setFade(1);
      navLogo.style.opacity = "0";
      update();
    };

    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onResize);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section className="hero hero-tp" id="hero">
      <div className="hero-tp-grid" style={{ padding: "100px 0px 60px", margin: "0px 0px 90px" }}>
        {/* LEFT — heading + copy + CTAs + stats */}
        <div className="hero-tp-left" style={{ margin: "0px 0px 120px" }}>
          <h1 className="hero-name hero-tp-headline word-reveal d1" ref={heroRef}>
            <span className="line" style={{ fontFamily: "Vipnagorgialla, VipnagorgiallaFallback, sans-serif" }}>Thamjid</span>
            <span className="line" style={{ fontFamily: "Vipnagorgialla, VipnagorgiallaFallback, sans-serif", color: "rgb(255, 255, 255)", fontWeight: 300 }}>Canoli.</span>
          </h1>

          <p className="hero-tp-copy reveal d2">
            Business Systems Strategist &amp; Growth Architect — engineering
            <span className="em"> predictable, repeatable growth</span> for
            founders through Sales, Marketing, Automation and Consumer
            Psychology.
          </p>

          <div className="hero-tp-ctas reveal d3">
            <a href="contact.html" className="hero-tp-btn primary" data-cursor="write">
              <span style={{ fontWeight: "400", letterSpacing: "1.54px", fontFamily: "\"Roboto Mono\"" }}>CHAT WITH ME</span>
              <span className="arrow">↗</span>
            </a>
          </div>

          <div className="hero-tp-stats reveal d4">
            <div className="hero-tp-stat">
              <div className="hero-tp-stat-num" style={{ fontFamily: "VipnagorgiallaFallback" }}>98<span style={{ fontFamily: "VipnagorgiallaFallback" }}>%</span></div>
              <div className="hero-tp-stat-label">Client Retention</div>
            </div>
            <div className="hero-tp-stat">
              <div className="hero-tp-stat-num" style={{ fontFamily: "VipnagorgiallaFallback" }}>40<span>+</span></div>
              <div className="hero-tp-stat-label">Businesses Systemised</div>
            </div>
            <div className="hero-tp-stat">
              <div className="hero-tp-stat-num" style={{ fontFamily: "VipnagorgiallaFallback" }}>12<span>yrs</span></div>
              <div className="hero-tp-stat-label">Entrepreneurial Practice</div>
            </div>
          </div>
        </div>

        {/* CENTER — portrait image */}
        <div className="hero-tp-image">
          <div className="hero-tp-image-frame">
            <img
              src="assets/hero-portrait.png"
              alt="Thamjid Canoli"
              className="hero-tp-image-img"
              onError={(e) => {e.currentTarget.style.display = 'none';e.currentTarget.parentNode.classList.add('is-empty');}} style={{ margin: "0px 100px 120px 0px" }} />
            <div className="hero-tp-image-empty">
              <div className="hero-tp-image-empty-inner">
                <div className="hero-tp-image-empty-icon">⤓</div>
                <strong>DROP PORTRAIT HERE</strong>
                <span>assets/hero-portrait.png</span>
                <em>Transparent PNG · portrait · ~1200×1600</em>
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT — quote + 5 service points */}
        <div className="hero-tp-right" style={{ margin: "0px 0px 3px", padding: "10px 0px" }}>
          <div className="hero-tp-quote hero-fx-quote" style={{ margin: "0px 0px 5px" }}>
            <q>I build and scale businesses by combining Sales, Marketing, Technology, Psychology, and Execution Systems.</q>
            <span className="hero-tp-quote-attr">-Thamjid Canoli</span>
          </div>

          <div className="hero-tp-cards" style={{ margin: "0px 0px 100px" }}>
            <div className="hero-tp-card" data-cursor="view">
              <div className="hero-tp-card-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 17l5-5 4 4 8-9" />
                  <path d="M14 7h6v6" />
                </svg>
              </div>
              <h3 style={{ fontSize: "12px", fontWeight: "400" }}>BUSINESS GROWTH STRATEGY</h3>
            </div>

            <div className="hero-tp-card" data-cursor="view">
              <div className="hero-tp-card-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 20V8M10 20V4M16 20v-9M22 20H2" />
                </svg>
              </div>
              <h3 style={{ fontSize: "12px", fontWeight: "400" }}>SALES SYSTEM ENGINEERING</h3>
            </div>

            <div className="hero-tp-card" data-cursor="view">
              <div className="hero-tp-card-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="8" />
                  <path d="M12 4v16M4 12h16" />
                </svg>
              </div>
              <h3 style={{ fontSize: "12px", fontWeight: "400" }}>MARKETING PSYCHOLOGY<br />&amp; BRAND POSITIONING</h3>
            </div>

            <div className="hero-tp-card" data-cursor="view">
              <div className="hero-tp-card-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="3" />
                  <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2" />
                </svg>
              </div>
              <h3 style={{ fontSize: "12px", fontWeight: "400" }}>AUTOMATION &amp; CRM SYSTEMS</h3>
            </div>

            <div className="hero-tp-card" data-cursor="view">
              <div className="hero-tp-card-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M9 18h6M10 21h4" />
                  <path d="M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z" />
                </svg>
              </div>
              <h3 style={{ fontSize: "12px", fontWeight: "400" }}>ENTREPRENEURIAL INNOVATION</h3>
            </div>
          </div>
        </div>
      </div>

      <div className="scroll-hint" aria-hidden="true"><span className="dot" /></div>
    </section>);

};

const Marquee = () =>
<div className="marquee" aria-hidden="true">
    <div className="marquee-track">
      {Array.from({ length: 2 }).map((_, k) =>
    <React.Fragment key={k}>
          <span>Sales Systems</span>
          <span>Marketing Strategy</span>
          <span className="accent">— engineered —</span>
          <span>Automation</span>
          <span>Consumer Psychology</span>
          <span>Growth Ops</span>
          <span className="accent">— predictable —</span>
          <span>Scale</span>
        </React.Fragment>
    )}
    </div>
  </div>;


const Counter = ({ to, decimals = 0, start }) => {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    if (!start) return;
    const dur = 1600;const t0 = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - t0) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(to * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [start, to]);
  return <span>{v.toFixed(decimals)}</span>;
};

const Metrics = () => {
  const ref = React.useRef(null);
  const [started, setStarted] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((e) => {if (e[0].isIntersecting) {setStarted(true);io.disconnect();}}, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  // Scroll-linked slide-out: each metric drifts right and fades as the section leaves viewport
  React.useEffect(() => {
    const section = ref.current;
    if (!section) return;
    const metrics = section.querySelectorAll('.metric');
    let raf = 0;
    const update = () => {
      raf = 0;
      const rect = section.getBoundingClientRect();
      const vh = window.innerHeight;
      // Progress 0 when section is fully centered, 1 when fully scrolled off top
      // Start animating when section top reaches 20% of viewport from top
      const sectionTop = rect.top;
      const sectionH = rect.height;
      // Progress scrubs from 0 → 1 as the section center moves from viewport-center to above-viewport
      let p = 0;
      const centerY = sectionTop + sectionH / 2;
      if (centerY < vh / 2) {
        p = Math.min(1, Math.max(0, (vh / 2 - centerY) / (vh * 0.6)));
      }
      metrics.forEach((m, i) => {
        // Stagger: later items lag slightly
        const lag = i * 0.08;
        const localP = Math.max(0, Math.min(1, (p - lag) / (1 - lag)));
        // Easing (ease-in-out cubic)
        const t = localP < 0.5 ? 4 * localP * localP * localP : 1 - Math.pow(-2 * localP + 2, 3) / 2;
        const translate = t * 400; // px to the right
        const opacity = 1 - t;
        m.style.transform = `translate3d(${translate}px, 0, 0)`;
        m.style.opacity = String(opacity);
      });
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(update);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
      metrics.forEach((m) => {
        m.style.transform = '';
        m.style.opacity = '';
      });
    };
  }, []);

  const items = [
  { end: 12, suffix: "yrs", label: "Entrepreneurial Practice" },
  { end: 40, suffix: "plus", label: "Businesses Systemised" },
  { end: 10, suffix: "x lift", label: "Avg. Conversion Gain", decimals: 0 },
  { end: 7, suffix: "sectors", label: "Industries Served" }];

  return (
    <section className="metrics" id="results" ref={ref}>
      <div className="container">
        <div className="metrics-grid">
          {items.map((it, i) =>
          <div className="metric reveal" key={i} style={{ transitionDelay: `${i * 0.1}s` }}>
              <div className="metric-num">
                <Counter to={it.end} decimals={it.decimals || 0} start={started} />
                <span className="metric-suffix">{it.suffix}</span>
              </div>
              <div className="metric-label">{it.label}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const TrustedBy = () =>
<section className="trusted">
    <div className="container">
      <div className="trusted-head">
        <span className="eyebrow">Engagements across</span>
      </div>
      <div className="trusted-row" style={{ fontFamily: "Roboto" }}>
        {["Education", "Consulting", "Training", "Real Estate", "D2C", "EdTech", "Coaching", "SaaS"].map((s, i) =>
      <div className="trusted-item reveal" key={s} style={{ transitionDelay: `${i * 0.06}s` }}>
            <span className="trusted-dot" />
            <span style={{ fontFamily: "VipnagorgiallaFallback" }}>{s}</span>
          </div>
      )}
      </div>
    </div>
  </section>;


const Authority = () => {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const section = ref.current;
    if (!section) return;
    const content = section.querySelector('.authority-content');
    const image = section.querySelector('.authority-image');
    if (!content || !image) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const rect = section.getBoundingClientRect();
      const vh = window.innerHeight;
      const sectionTop = rect.top;
      const sectionH = rect.height;
      let p = 0;
      const centerY = sectionTop + sectionH / 2;
      if (centerY < vh / 2) {
        p = Math.min(1, Math.max(0, (vh / 2 - centerY) / (vh * 0.6)));
      }
      // Eased
      const ease = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
      const t1 = ease(p);
      const t2 = ease(Math.max(0, Math.min(1, (p - 0.08) / 0.92)));
      // Content slides LEFT
      content.style.transform = `translate3d(${-t1 * 400}px, 0, 0)`;
      content.style.opacity = String(1 - t1);
      // Image slides LEFT too (slightly lagging)
      image.style.transform = `translate3d(${-t2 * 500}px, 0, 0)`;
      image.style.opacity = String(1 - t2);
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(update);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
      content.style.transform = '';
      content.style.opacity = '';
      image.style.transform = '';
      image.style.opacity = '';
    };
  }, []);

  return (
    <section className="authority-section" id="authority" ref={ref}>
      <div className="container">
        <div className="authority-content">
          <span className="eyebrow reveal">01 — Authority</span>
          <div className="authority-body word-reveal d1" style={{ textAlign: "left", fontFamily: "VipnagorgiallaFallback" }}>
            A decade of entrepreneurial practice — building and scaling ventures
            across <span className="accent" style={{ fontFamily: "VipnagorgiallaFallback" }}>education, consulting, and training.</span>
            <span className="dim">
              His expertise lies in designing high-performance business ecosystems —
              where lead generation, conversion, and delivery work seamlessly
              together. Known for blending strategic thinking with execution, he
              moves businesses from inconsistent growth to structured, system-driven
              scale.
            </span>
          </div>
        </div>
        <figure className="authority-image reveal">
          <img src="assets/authority.jpg" alt="Thamjid Canoli speaking" className="authority-image-img" />
        </figure>
      </div>
    </section>);

};


const Story = () => {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const section = ref.current;
    if (!section) return;
    const portrait = section.querySelector('.story-portrait');
    const content = section.querySelector('.story-content');
    if (!portrait || !content) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const rect = section.getBoundingClientRect();
      const vh = window.innerHeight;
      const sectionTop = rect.top;
      const sectionH = rect.height;
      let p = 0;
      const centerY = sectionTop + sectionH / 2;
      if (centerY < vh / 2) {
        p = Math.min(1, Math.max(0, (vh / 2 - centerY) / (vh * 0.6)));
      }
      const ease = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
      const t1 = ease(p);
      const t2 = ease(Math.max(0, Math.min(1, (p - 0.08) / 0.92)));
      // Portrait slides RIGHT (it's on the left, so moves to right)
      portrait.style.transform = `translate3d(${t1 * 500}px, 0, 0)`;
      portrait.style.opacity = String(1 - t1);
      // Content slides RIGHT too
      content.style.transform = `translate3d(${t2 * 400}px, 0, 0)`;
      content.style.opacity = String(1 - t2);
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(update);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
      portrait.style.transform = '';
      portrait.style.opacity = '';
      content.style.transform = '';
      content.style.opacity = '';
    };
  }, []);

  return (
    <section className="story-section" id="story" ref={ref}>
      <div className="container">
        <figure className="story-portrait reveal">
          <img src="assets/portrait.jpg" alt="Thamjid Canoli" className="story-portrait-img" />
        </figure>
        <div className="story-content">
          <span className="eyebrow reveal">02 — The Deep Story</span>
          <h2 className="story-heading word-reveal d1" style={{ fontFamily: "VipnagorgiallaFallback" }}>
            Businesses don&apos;t fail from lack of <span className="accent">effort</span>. They fail from lack of <span className="accent">systems</span>.
          </h2>
          <div className="story reveal d2">
            <p style={{ marginBottom: 16 }}>Early on, I kept noticing the same pattern. Businesses were pouring budget into marketing or sales — yet without a clear structure underneath, the results stayed unpredictable.</p>
            <p style={{ marginBottom: 16 }}>That&apos;s when I stopped chasing tactics and started building <strong>systems</strong> — structures that connect every part of a business so every lead, every process, and every conversion is designed, measured, and optimised.</p>
            <p>Today, the focus is simple: help businesses create growth that is not accidental, but <strong>engineered</strong>.</p>
          </div>
        </div>
      </div>
    </section>);

};


const PILLARS = [
{ num: "01", name: "Sales Systems", desc: "Structured sales processes that lift conversion and make team performance repeatable — not dependent on a single star closer." },
{ num: "02", name: "Marketing Strategy", desc: "Predictable lead generation engines that consistently bring in qualified prospects — not just traffic or vanity reach." },
{ num: "03", name: "Technology & Automation", desc: "Tools and workflows that reduce manual effort, close loops between teams, and let the business run when you step away." },
{ num: "04", name: "Consumer Psychology", desc: "Understanding what actually drives decisions — and using it to sharpen communication, positioning, and conversions." }];


const Framework = () => {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const section = ref.current;
    if (!section) return;
    const title = section.querySelector('.framework-title');
    const kicker = section.querySelector('.framework-kicker');
    const pillars = Array.from(section.querySelectorAll('.pillar'));
    if (!title) return;
    let raf = 0;
    const ease = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
    const update = () => {
      raf = 0;
      const vh = window.innerHeight;
      // Elements animate based on their own position in viewport
      const animate = (el, progress, direction = 'up', distance = 80) => {
        if (!el) return;
        const t = ease(progress);
        const tx = direction === 'left' ? -t * distance : direction === 'right' ? t * distance : 0;
        const ty = direction === 'up' ? -t * distance : 0;
        const scale = 1 - t * 0.25;
        el.style.transform = `translate3d(${tx}px, ${ty}px, 0) scale(${scale})`;
        el.style.opacity = String(1 - t);
      };

      // Progress per element: starts when el top crosses 40% of vh, fully faded when el bottom is above viewport
      const progressFor = (el) => {
        const rect = el.getBoundingClientRect();
        const start = vh * 0.4;
        const end = -rect.height - 100;
        const p = (start - rect.top) / (start - end);
        return Math.max(0, Math.min(1, p));
      };

      animate(title, progressFor(title), 'up', 120);
      animate(kicker, progressFor(kicker), 'up', 80);
      pillars.forEach((p, i) => {
        // Alternate direction for rhythm
        const dir = i % 2 === 0 ? 'left' : 'right';
        animate(p, progressFor(p), dir, 300);
      });
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(update);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
      [title, kicker, ...pillars].forEach((el) => {
        if (!el) return;
        el.style.transform = '';
        el.style.opacity = '';
      });
    };
  }, []);

  return (
    <section id="work" ref={ref}>
      <div className="container">
        <div className="framework-head">
          <h2 className="framework-title word-reveal">
            A four-pillar framework for <span className="accent">engineered</span> growth.
          </h2>
          <p className="framework-kicker reveal d1">
            Instead of treating sales, marketing, tech, and psychology as separate
            disciplines, the practice treats them as one connected system. Each
            pillar reinforces the next.
          </p>
        </div>

        <div className="pillars">
          {PILLARS.map((p) =>
          <div className="pillar reveal" key={p.num} data-cursor="expand">
              <div className="pillar-num">[ {p.num} ]</div>
              <div className="pillar-name word-reveal">{p.name}</div>
              <div className="pillar-desc word-reveal">{p.desc}</div>
              <div className="pillar-arrow">↗</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};


const DIFFERENCES = [
{ num: "01", label: "Consistent lead flow", meta: "Predictable" },
{ num: "02", label: "Higher conversion rates", meta: "Measurable" },
{ num: "03", label: "Scalable operations", meta: "Durable" },
{ num: "04", label: "Reduced dependency on guesswork", meta: "Engineered" }];


const Difference = () => {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const section = ref.current;
    if (!section) return;
    const head = section.querySelector('.diff-head');
    const items = Array.from(section.querySelectorAll('.diff-item'));
    if (!head) return;
    let raf = 0;
    const ease = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
    const update = () => {
      raf = 0;
      const vh = window.innerHeight;
      const progressFor = (el) => {
        const rect = el.getBoundingClientRect();
        const start = vh * 0.4;
        const end = -rect.height - 100;
        const p = (start - rect.top) / (start - end);
        return Math.max(0, Math.min(1, p));
      };
      const t1 = ease(progressFor(head));
      head.style.transform = `translate3d(${-t1 * 500}px, 0, 0)`;
      head.style.opacity = String(1 - t1);
      items.forEach((el) => {
        const t = ease(progressFor(el));
        el.style.transform = `translate3d(${-t * 600}px, 0, 0)`;
        el.style.opacity = String(1 - t);
      });
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(update);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
      [head, ...items].forEach((el) => {
        if (!el) return;
        el.style.transform = '';
        el.style.opacity = '';
      });
    };
  }, []);

  return (
    <section className="difference" id="difference" ref={ref}>
      <div className="difference-inner">
        <div className="diff-head">
          <span className="eyebrow reveal">03 — What&apos;s different</span>
          <h2 className="difference-heading word-reveal d1" style={{ marginTop: 20 }}>
            Not isolated tactics. A complete <span className="accent">operating system</span> for growth.
          </h2>
        </div>
        <div className="diff-list">
          {DIFFERENCES.map((d, i) =>
          <div className="diff-item reveal" key={i} style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="diff-num">{d.num}</div>
              <div className="diff-label word-reveal" style={{ fontFamily: "Roboto" }}>{d.label}</div>
              <div className="diff-meta">{d.meta}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};


const Vision = () =>
<section className="vision" id="vision">
    <div className="container">
      <span className="eyebrow reveal" style={{ marginBottom: 32, display: "inline-flex" }}>04 — Vision</span>
      <p className="vision-quote word-reveal d1" style={{ fontWeight: "400", fontSize: "50px" }}>
        From from to <span className="accent">clarity</span>. Growth that isn&apos;t just bigger — but <span className="accent">predictable</span>, and <span className="accent">controllable</span>.
      </p>
      <div className="vision-attribution reveal d2">— The Practice</div>
    </div>
  </section>;


const CTA = () =>
<section className="cta" id="contact">
    <div className="cta-inner">
      <div>
        <span className="eyebrow reveal">05 — Let&apos;s build</span>
        <h2 className="cta-heading word-reveal d1" style={{ marginTop: 20 }}>
          Ready to move beyond <span className="accent">trial-and-error</span>?
        </h2>
      </div>
      <div className="reveal d2">
        <p className="cta-sub">
          I work with business owners who are serious about scaling — and ready
          to build systems that actually work. If that&apos;s you, this is where we
          start.
        </p>
        <a href="contact.html" className="cta-button" data-cursor="book">
          <span>Book a strategy call</span>
          <span className="arrow">→</span>
        </a>
        <div className="cta-contacts" style={{ marginTop: 36 }}>
          <div className="contact-row"><span className="k">Email</span><span className="v">hello@thamjidhassan.com</span></div>
          <div className="contact-row"><span className="k">Instagram</span><span className="v">@thamjidhassan</span></div>
          <div className="contact-row"><span className="k">LinkedIn</span><span className="v">/in/thamjidhassan</span></div>
        </div>
      </div>
    </div>
  </section>;


const Footer = () =>
<footer className="site-footer">
    <div>
      <div style={{ color: "var(--fg-dim)", marginBottom: 10 }}>© 2026 — All systems reserved.</div>
      <div>Designed &amp; <strong>engineered</strong></div>
    </div>
    <div style={{ textAlign: "center" }}>
      <div className="footer-mark"><img src="assets/logo.png?v=2" alt="Thamjid Canoli" className="footer-mark-logo" /></div>
    </div>
    <div style={{ textAlign: "right" }}>
      <div className="footer-links" style={{ justifyContent: "flex-end", marginBottom: 10 }}>
        <a href="#" data-cursor="open">Instagram</a>
        <a href="#" data-cursor="open">LinkedIn</a>
        <a href="#" data-cursor="open">X</a>
      </div>
      <div>v 1.1 — April 2026</div>
    </div>
  </footer>;


Object.assign(window, { Hero, Marquee, Metrics, TrustedBy, Authority, Story, Framework, Difference, Vision, CTA, Footer });