/* Techonymous — Home page sections */

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH, useMemo: useMemoH } = React;

/* ============================================================
   HERO
   ============================================================ */
function Hero() {
  const headlineRef = useRefH(null);
  const cardsRef = useRefH(null);
  const [statsInView, setStatsInView] = useStateH(false);
  const statsRef = useRefH(null);

  // SplitText-like char animation via GSAP
  useEffectH(() => {
    if (!window.gsap || !headlineRef.current) return;
    const el = headlineRef.current;
    const chars = el.querySelectorAll(".hero__char");
    window.gsap.set(chars, { opacity: 0, y: 60, rotateX: -75 });
    window.gsap.to(chars, {
      opacity: 1, y: 0, rotateX: 0,
      duration: 0.9, stagger: 0.018, ease: "power3.out", delay: 0.15
    });
  }, []);

  // Stats observer
  useEffectH(() => {
    if (!statsRef.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) setStatsInView(true);});
    }, { threshold: 0.3 });
    io.observe(statsRef.current);
    return () => io.disconnect();
  }, []);

  // 3D tilt on floating cards (mouse move)
  useEffectH(() => {
    const wrap = cardsRef.current;
    if (!wrap) return;
    const cards = Array.from(wrap.querySelectorAll(".float-card"));
    const onMove = (e) => {
      const r = wrap.getBoundingClientRect();
      const cx = (e.clientX - r.left) / r.width - 0.5;
      const cy = (e.clientY - r.top) / r.height - 0.5;
      cards.forEach((c, i) => {
        const depth = c.dataset.depth ? +c.dataset.depth : 1;
        c.style.transform = `translate3d(${cx * 20 * depth}px, ${cy * 20 * depth}px, 0) rotateY(${cx * 6}deg) rotateX(${-cy * 6}deg)`;
      });
    };
    const onLeave = () => {cards.forEach((c) => c.style.transform = "");};
    window.addEventListener("mousemove", onMove);
    wrap.addEventListener("mouseleave", onLeave);
    return () => {window.removeEventListener("mousemove", onMove);wrap.removeEventListener("mouseleave", onLeave);};
  }, []);

  const splitChars = (s) => s.split("").map((c, i) =>
  <span key={i} className="hero__char" style={{ display: c === " " ? "inline" : "inline-block", fontSize: "78px" }}>{c === " " ? "\u00A0" : c}</span>
  );

  const stats = [
  { value: 500, suffix: "+", label: "Websites Built" },
  { value: 120, prefix: "$", suffix: "M+", label: "Revenue Generated" },
  { value: 97, suffix: "%", label: "Client Retention" },
  { value: 4.9, suffix: "★", label: "Average Rating", decimals: 1 }];


  return (
    <section className="hero" data-screen-label="01 Hero">
      <Aurora />
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <div ref={cardsRef} style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.35fr) 1fr", gap: 60, alignItems: "center",paddingTop:"105px"}}>
          <div>
            <div className="hero__pill" style={{ opacity: 0, animation: "fadeUp 0.8s 0.05s cubic-bezier(0.2,0.8,0.2,1) forwards" }}>
              <span className="hero__pill-dot">✦</span>
              <span><span className="hero__pill-pulse" style={{ display: "inline-block", verticalAlign: "middle", marginRight: 8 }}></span>Now booking growth partnerships for Q3 2026</span>
            </div>
            <h1 ref={headlineRef} style={{ fontSize: "92px", width: "707px", color: "rgb(255, 255, 255)" }}>
              {splitChars("Websites that work Marketing that wins")}
              
            </h1>
            <p className="hero__sub reveal">
              Techonymous engineers high-converting digital experiences and deploys cutting-edge marketing strategies that turn visitors into revenue. <em className="font-serif" style={{ color: "var(--txt-1)" }}>One funnel, one obsession at a time.</em>
            </p>
            <div className="hero__ctas reveal">
              <a href={(window.__base||"")+"contact/index.html"} className="btn btn-primary">
                Start your growth journey <Icon name="arrow-right" size={16} className="btn-arrow" />
              </a>
              <a href={(window.__base||"")+"work/index.html"} className="btn btn-ghost">
                <Icon name="play" size={14} />
                See our work
              </a>
            </div>
            <div ref={statsRef} className="hero__stats">
              {stats.map((s, i) => <HeroStat key={i} {...s} start={statsInView} sep={i < stats.length - 1} />)}
            </div>
          </div>

          {/* Floating cards column */}
          <div style={{ position: "relative", height: 560, perspective: 1200 }}>
            <FloatCardTraffic />
            <FloatCardRoi />
            <FloatCardClock />
            {/* Decorative orbits */}
            <div aria-hidden="true" style={{
              position: "absolute", top: "50%", left: "50%", width: 380, height: 380,
              transform: "translate(-50%,-50%)",
              borderRadius: "50%",
              border: "1px dashed rgba(255,255,255,0.08)",
              animation: "spinSlow 60s linear infinite"
            }}></div>
            <div aria-hidden="true" style={{
              position: "absolute", top: "50%", left: "50%", width: 240, height: 240,
              transform: "translate(-50%,-50%)",
              borderRadius: "50%",
              border: "1px dashed rgba(255,255,255,0.06)",
              animation: "spinSlow 40s linear infinite reverse"
            }}></div>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes spinSlow { to { transform: translate(-50%, -50%) rotate(360deg); } }
        @media (max-width: 960px) {
          .hero > .container-x > div { grid-template-columns: 1fr !important; }
          .hero .float-card { display: none; }
        }
      `}</style>
    </section>);

}

function HeroStat({ value, prefix = "", suffix = "", label, decimals = 0, start, sep }) {
  const v = useCountUp(value, { duration: 1600, start, decimals });
  return (
    <>
      <div>
        <div className="hero__stat-num">{prefix}{v}{suffix}</div>
        <div className="hero__stat-label">{label}</div>
      </div>
      {sep && <div className="hero__stat-sep"></div>}
    </>);

}

function FloatCardTraffic() {
  const data = [12, 16, 14, 22, 20, 28, 32, 30, 40, 44, 52, 60, 56, 68, 75, 84];
  return (
    <div className="float-card" data-depth="1.2" style={{ top: 30, left: 0, width: 250 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
        <span style={{ fontSize: 12, color: "var(--txt-2)", fontFamily: "JetBrains Mono, monospace", letterSpacing: "0.05em" }}>ORGANIC TRAFFIC</span>
        <span style={{ fontSize: 11, color: "#34D399", background: "rgba(52,211,153,0.12)", padding: "3px 8px", borderRadius: 999 }}>+340%</span>
      </div>
      <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em" }}>2.4M <span style={{ fontSize: 13, color: "var(--txt-2)", fontWeight: 400 }}>visits / mo</span></div>
      <Sparkline data={data} color="#00D4FF" />
    </div>);

}

function FloatCardRoi() {
  return (
    <div className="float-card" data-depth="0.8" style={{ top: 220, right: 0, width: 230 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div>
          <div style={{ fontSize: 12, color: "var(--txt-2)", fontFamily: "JetBrains Mono, monospace", letterSpacing: "0.05em" }}>AD SPEND ROI</div>
          <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: "-0.025em", marginTop: 6 }}>12.4<span style={{ fontSize: 18, color: "var(--txt-2)" }}>×</span></div>
          <div style={{ fontSize: 12, color: "var(--txt-2)", marginTop: 4 }}>Q1 2026 avg.</div>
        </div>
        <svg width="68" height="68" viewBox="0 0 68 68">
          <defs>
            <linearGradient id="roi-grad" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#7B2FFF" />
              <stop offset="100%" stopColor="#00D4FF" />
            </linearGradient>
          </defs>
          <circle cx="34" cy="34" r="28" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="6" />
          <circle cx="34" cy="34" r="28" fill="none" stroke="url(#roi-grad)" strokeWidth="6" strokeDasharray="176" strokeDashoffset="22" strokeLinecap="round" transform="rotate(-90 34 34)" />
          <text x="34" y="38" textAnchor="middle" fontSize="11" fontFamily="JetBrains Mono" fill="#fff" fontWeight="600">87%</text>
        </svg>
      </div>
    </div>);

}

function FloatCardClock() {
  return (
    <div className="float-card" data-depth="1" style={{ bottom: 20, left: 60, width: 230 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12,
          background: "linear-gradient(135deg, rgba(123,47,255,0.25), rgba(0,212,255,0.15))",
          border: "1px solid rgba(255,255,255,0.08)",
          display: "grid", placeItems: "center",
          color: "#00D4FF"
        }}>
          <Icon name="zap" size={20} />
        </div>
        <div>
          <div style={{ fontSize: 12, color: "var(--txt-2)", fontFamily: "JetBrains Mono, monospace", letterSpacing: "0.05em" }}>TIME TO FIRST RESULT</div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginTop: 4 }}>47 days <span style={{ fontSize: 12, color: "var(--txt-2)", fontWeight: 400 }}>avg.</span></div>
        </div>
      </div>
    </div>);

}

/* ============================================================
   MARQUEE
   ============================================================ */
function Marquee() {
  const items = [
  "E-Commerce", "SaaS", "FinTech", "D2C", "Health Tech", "Local Business",
  "Real Estate", "EdTech", "B2B Services", "Hospitality", "Wellness", "Creator Economy",
  "Marketplaces", "Insurance", "Legal", "Manufacturing"];

  const renderRow = () => items.map((it, i) =>
  <span key={i} className="marquee__item"><span className="marquee__dot"></span>{it}</span>
  );
  return (
    <div className="marquee">
      <div className="marquee__track">
        {renderRow()}{renderRow()}
      </div>
    </div>);

}

/* ============================================================
   TRUST BAR
   ============================================================ */
function TrustBar() {
  const logos = ["Northwind", "Lattice", "Stripeline", "Veridian", "Mosaic Co.", "Halcyon"];
  return (
    <section className="section-sm" data-screen-label="02 Trust">
      <div className="container-x">
        <p className="eyebrow" style={{ textAlign: "center", marginBottom: 24 }}>Trusted by fast-growing brands across 20+ industries</p>
        <div className="trust-row reveal">
          {logos.map((l, i) => <div key={i} className="trust-logo">{l}</div>)}
        </div>
        <div className="review-row reveal">
          <div className="review-badge glass">
            <div style={{ width: 36, height: 36, borderRadius: 8, background: "#fff", display: "grid", placeItems: "center", color: "#0F0F1A", fontWeight: 700, fontSize: 17 }}>G</div>
            <div style={{ flex: 1 }}>
              <div className="review-badge__src">Google Reviews</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span className="review-badge__score">4.9</span>
                <span className="review-badge__stars">★★★★★</span>
              </div>
            </div>
            <div style={{ fontSize: 12, color: "var(--txt-3)" }}>184 reviews</div>
          </div>
          <div className="review-badge glass">
            <div style={{ width: 36, height: 36, borderRadius: 8, background: "#205D9F", display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 15 }}>C</div>
            <div style={{ flex: 1 }}>
              <div className="review-badge__src">Clutch</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span className="review-badge__score">4.9</span>
                <span className="review-badge__stars">★★★★★</span>
              </div>
            </div>
            <div style={{ fontSize: 12, color: "var(--txt-3)" }}>72 reviews</div>
          </div>
          <div className="review-badge glass">
            <div style={{ width: 36, height: 36, borderRadius: 8, background: "#00B67A", display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 17 }}>★</div>
            <div style={{ flex: 1 }}>
              <div className="review-badge__src">Trustpilot</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span className="review-badge__score">4.8</span>
                <span className="review-badge__stars">★★★★★</span>
              </div>
            </div>
            <div style={{ fontSize: 12, color: "var(--txt-3)" }}>231 reviews</div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   SERVICES BENTO
   ============================================================ */
function Services() {
  const cards = [
  {
    span: "lg", icon: "code",
    title: "High-Converting Web Design &amp; Development",
    desc: "Custom React, Next.js, and headless commerce builds engineered for speed, conversions, and SEO — not just looks. Lighthouse 95+ baseline, every time.",
    tags: ["React", "Next.js", "Webflow", "Shopify"]
  },
  { span: "md", icon: "search",
    title: "SEO & Content Strategy",
    desc: "Topical authority engineering. We rank for the queries that actually move revenue."
  },
  { span: "md", icon: "target",
    title: "Performance Marketing",
    desc: "Meta, Google, TikTok, LinkedIn — full-funnel paid campaigns with ROAS-first creative."
  },
  { span: "sm", icon: "trending-up", title: "CRO", desc: "Heatmaps, session replays, AB testing — relentless funnel optimization." },
  { span: "sm", icon: "sparkles", title: "Brand Strategy", desc: "Positioning, messaging, and identity that earns premium pricing." },
  {
    span: "md", icon: "layers",
    title: "Marketing Automation & Funnels",
    desc: "Lifecycle email, lead scoring, attribution, and CRM stacks that compound. Every touchpoint pays you back.",
    tags: ["HubSpot", "Klaviyo", "Segment", "Customer.io"]
  }];

  return (
    <section className="section" data-screen-label="03 Services" id="services">
      <Aurora />
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <div className="sec-head reveal">
          <div className="sec-head__eye eyebrow">04 — Capabilities</div>
          <h2>Our arsenal of <span className="font-serif text-grad">growth weapons</span></h2>
          <p>Six tightly coupled disciplines, run by one senior team. No silos, no agency-of-agencies finger-pointing — just compounding leverage on your numbers.</p>
        </div>
        <div className="bento">
          {cards.map((c, i) =>
          <div key={i} className={`glass glass-border bento__card bento__card--${c.span} reveal`} style={{ transitionDelay: `${i * 0.06}s` }}>
              <div className="bento__icon"><Icon name={c.icon} size={22} /></div>
              <h3 className="bento__title" dangerouslySetInnerHTML={{ __html: c.title }} />
              <p className="bento__desc">{c.desc}</p>
              {c.tags &&
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 4 }}>
                  {c.tags.map((t) =>
              <span key={t} style={{
                fontSize: 11.5, fontFamily: "JetBrains Mono, monospace",
                padding: "4px 10px", borderRadius: 999,
                background: "rgba(255,255,255,0.04)",
                border: "1px solid var(--border-glass)",
                color: "var(--txt-1)"
              }}>{t}</span>
              )}
                </div>
            }
              <a href={(window.__base||"")+"services/index.html"} className="bento__more">
                Learn more <Icon name="arrow-right" size={14} />
              </a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   PROCESS
   ============================================================ */
function Process() {
  const steps = [
  { n: "01", icon: "search", title: "Deep Research & Audit", desc: "We dissect your market, competitors, funnel leaks, and ICP behavior — surfacing the bottlenecks costing you the most revenue today." },
  { n: "02", icon: "compass", title: "Strategy Blueprint", desc: "A custom 90-day roadmap built around revenue goals, not deliverables. Every initiative is tied to a number." },
  { n: "03", icon: "wand", title: "Build & Implement", desc: "Design, develop, launch, and run campaigns in parallel — not waterfall. Compressed timelines, no quality compromise." },
  { n: "04", icon: "trending-up", title: "Optimize & Scale", desc: "Weekly experiments, monthly retros, quarterly rebuilds. We iterate on data until the numbers keep climbing." }];

  return (
    <section className="section" data-screen-label="04 Process" style={{ background: "linear-gradient(180deg, transparent, rgba(15,15,26,0.6) 30%, transparent)" }}>
      <div className="container-x">
        <div className="sec-head reveal">
          <div className="sec-head__eye eyebrow">05 — How we work</div>
          <h2>Our 4-step <span className="font-serif text-grad">growth formula</span></h2>
          <p>The same operating system we've used to build 500+ growth engines. Predictable, measurable, repeatable.</p>
        </div>
        <div className="process">
          <div className="process__line"></div>
          {steps.map((s, i) =>
          <div key={i} className="process__step reveal" style={{ transitionDelay: `${i * 0.12}s` }}>
              <div className="process__num"><span>{s.n}</span></div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   CASE STUDIES
   ============================================================ */
const CASES = [
{
  name: "Lumen & Loom", industry: "E-Commerce", cat: "ecom",
  metrics: [["+412%", "Revenue YoY"], ["6.8×", "ROAS"]],
  palette: ["#7B2FFF", "#00D4FF"],
  sub: "Headless Shopify rebuild + paid scale",
  kind: "ecom"
},
{
  name: "Northwind Cloud", industry: "SaaS", cat: "saas",
  metrics: [["+184%", "MQLs / mo"], ["32%", "Trial → Paid"]],
  palette: ["#34D399", "#00D4FF"],
  sub: "Product-led growth funnel rebuild",
  kind: "saas"
},
{
  name: "Halcyon Dental", industry: "Local Business", cat: "local",
  metrics: [["+217%", "Bookings / mo"], ["$84", "Cost / patient"]],
  palette: ["#F5C947", "#7B2FFF"],
  sub: "Local SEO + Google Ads",
  kind: "local"
},
{
  name: "Mosaic Apparel", industry: "D2C", cat: "d2c",
  metrics: [["+340%", "Email revenue"], ["3.2×", "AOV"]],
  palette: ["#EC4899", "#7B2FFF"],
  sub: "Klaviyo flows + post-purchase",
  kind: "d2c"
},
{
  name: "Veridian Labs", industry: "SaaS", cat: "saas",
  metrics: [["+96%", "Organic traffic"], ["#1", "for 28 terms"]],
  palette: ["#00D4FF", "#7B2FFF"],
  sub: "Programmatic SEO engine",
  kind: "saas"
},
{
  name: "Stripeline Co.", industry: "E-Commerce", cat: "ecom",
  metrics: [["+128%", "CVR"], ["4.1×", "ROAS"]],
  palette: ["#7B2FFF", "#EC4899"],
  sub: "CRO program + creative engine",
  kind: "ecom"
}];


function CaseThumb({ palette, kind, name }) {
  // Different abstract "screenshot-style" thumbs per kind
  const [a, b] = palette;
  if (kind === "saas") {
    return (
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(ellipse at 0% 0%, ${a}33, transparent 55%), radial-gradient(ellipse at 100% 100%, ${b}33, transparent 55%), linear-gradient(135deg, #0F0F1A, #15151F)`
      }}>
        <div style={{ position: "absolute", top: 14, left: 14, right: 14, display: "flex", gap: 6 }}>
          <span style={{ width: 8, height: 8, borderRadius: 4, background: "#FF5F57" }}></span>
          <span style={{ width: 8, height: 8, borderRadius: 4, background: "#FEBC2E" }}></span>
          <span style={{ width: 8, height: 8, borderRadius: 4, background: "#28C840" }}></span>
        </div>
        <div style={{ position: "absolute", top: 38, left: 20, right: 20, bottom: 20, display: "grid", gridTemplateColumns: "60px 1fr", gap: 12 }}>
          <div style={{ background: "rgba(255,255,255,0.04)", borderRadius: 6 }}></div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <div style={{ display: "flex", gap: 8 }}>
              <div style={{ flex: 1, height: 36, background: `linear-gradient(135deg, ${a}55, ${a}22)`, borderRadius: 6 }}></div>
              <div style={{ flex: 1, height: 36, background: `linear-gradient(135deg, ${b}55, ${b}22)`, borderRadius: 6 }}></div>
              <div style={{ flex: 1, height: 36, background: "rgba(255,255,255,0.05)", borderRadius: 6 }}></div>
            </div>
            <div style={{ flex: 1, background: "rgba(255,255,255,0.04)", borderRadius: 6, position: "relative", overflow: "hidden" }}>
              <svg viewBox="0 0 200 80" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
                <path d="M0 60 L 20 55 L 40 50 L 60 45 L 80 35 L 100 38 L 120 25 L 140 20 L 160 15 L 180 8 L 200 5"
                stroke={a} strokeWidth="2" fill="none" />
                <path d="M0 60 L 20 55 L 40 50 L 60 45 L 80 35 L 100 38 L 120 25 L 140 20 L 160 15 L 180 8 L 200 5 L 200 80 L 0 80 Z"
                fill={`${a}30`} />
              </svg>
            </div>
          </div>
        </div>
      </div>);

  }
  if (kind === "ecom" || kind === "d2c") {
    return (
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(ellipse at 100% 0%, ${a}40, transparent 55%), linear-gradient(135deg, #0F0F1A, #15151F)`
      }}>
        <div style={{ position: "absolute", inset: 20, display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 8 }}>
          <div style={{
            background: `linear-gradient(135deg, ${a}, ${b})`,
            borderRadius: 8, position: "relative", overflow: "hidden"
          }}>
            <div style={{ position: "absolute", bottom: 10, left: 10, right: 10, color: "#fff", fontFamily: "Geist", fontWeight: 600, fontSize: 14, letterSpacing: "-0.02em" }}>{name}</div>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent, rgba(0,0,0,0.4))" }}></div>
          </div>
          <div style={{ background: "rgba(255,255,255,0.06)", borderRadius: 8 }}></div>
          <div style={{ background: "rgba(255,255,255,0.04)", borderRadius: 8 }}></div>
          <div style={{ background: "rgba(255,255,255,0.04)", borderRadius: 8 }}></div>
          <div style={{ background: `linear-gradient(135deg, ${b}55, ${b}22)`, borderRadius: 8 }}></div>
          <div style={{ background: "rgba(255,255,255,0.04)", borderRadius: 8 }}></div>
        </div>
      </div>);

  }
  // local
  return (
    <div style={{
      position: "absolute", inset: 0,
      background: `radial-gradient(ellipse at 50% 100%, ${a}33, transparent 55%), linear-gradient(135deg, #0F0F1A, #15151F)`
    }}>
      <div style={{ position: "absolute", inset: 22 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
          <div style={{ width: 12, height: 12, borderRadius: "50%", background: a }}></div>
          <div style={{ height: 8, width: 80, background: "rgba(255,255,255,0.12)", borderRadius: 4 }}></div>
        </div>
        <div style={{ display: "flex", gap: 6, marginBottom: 14 }}>
          {[1, 2, 3, 4, 5].map((i) => <span key={i} style={{ color: "#F5C947", fontSize: 12 }}>★</span>)}
        </div>
        <div style={{ height: 110, background: `linear-gradient(135deg, ${a}33, ${b}22)`, borderRadius: 10, position: "relative", overflow: "hidden" }}>
          <svg width="100%" height="100%" viewBox="0 0 200 110" preserveAspectRatio="none">
            <path d="M 0 80 Q 30 60 60 70 T 120 65 T 200 50 L 200 110 L 0 110 Z" fill={`${a}40`} />
            <circle cx="120" cy="55" r="5" fill={b} />
            <circle cx="120" cy="55" r="10" fill="none" stroke={b} strokeWidth="1" opacity="0.5" />
          </svg>
        </div>
      </div>
    </div>);

}

function CaseStudies() {
  const [filter, setFilter] = useStateH("all");
  const filters = [
  { id: "all", label: "All" },
  { id: "ecom", label: "E-Commerce" },
  { id: "saas", label: "SaaS" },
  { id: "local", label: "Local Business" },
  { id: "d2c", label: "D2C" }];

  const visible = filter === "all" ? CASES : CASES.filter((c) => c.cat === filter);

  return (
    <section className="section" data-screen-label="05 Cases" id="work">
      <div className="container-x">
        <div className="sec-head reveal">
          <div className="sec-head__eye eyebrow">06 — Results</div>
          <h2>Proof in the <span className="font-serif text-grad">numbers</span></h2>
          <p>Six recent partnerships. Every metric tied to dollars in the bank, not pageviews or impressions.</p>
        </div>
        <div className="case-filters reveal">
          {filters.map((f) =>
          <button key={f.id} className={`case-filter ${filter === f.id ? "is-active" : ""}`} onClick={() => setFilter(f.id)}>
              {f.label}
            </button>
          )}
        </div>
        <div className="case-grid">
          {visible.map((c, i) =>
          <a key={c.name} href={(window.__base||"")+"work/index.html"} className="case-card reveal" style={{ transitionDelay: `${i * 0.05}s` }}>
              <div className="case-card__thumb">
                <CaseThumb palette={c.palette} kind={c.kind} name={c.name} />
              </div>
              <div className="case-card__body">
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div>
                    <div className="case-card__industry">{c.industry}</div>
                    <h3 className="case-card__name">{c.name}</h3>
                    <div style={{ fontSize: 13, color: "var(--txt-2)", marginTop: 2 }}>{c.sub}</div>
                  </div>
                  <Icon name="arrow-up-right" size={18} />
                </div>
                <div className="case-card__metrics">
                  {c.metrics.map(([v, l], j) =>
                <div key={j}>
                      <div className="case-card__metric-val up">{v}</div>
                      <div className="case-card__metric-lbl">{l}</div>
                    </div>
                )}
                </div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   WHY US
   ============================================================ */
function WhyUs() {
  const points = [
  { icon: "search", title: "Research-First Approach", desc: "Every engagement opens with a 21-day deep audit. No guessing." },
  { icon: "layers", title: "Full-Funnel Ownership", desc: "Awareness to revenue, owned end-to-end. No agency hand-offs." },
  { icon: "bar-chart", title: "No Vanity Metrics", desc: "Pipeline, MRR, and ROAS only. Impressions don't pay rent." },
  { icon: "users", title: "Dedicated Growth Team", desc: "A senior strategist, designer, engineer, and media buyer per client." },
  { icon: "globe", title: "Transparent Reporting", desc: "Real-time dashboards. Open-book Slack channels. No black box." },
  { icon: "shield-check", title: "47-Day Results Guarantee", desc: "Meaningful lift in 47 days or we work free until you see it." }];

  return (
    <section className="section" data-screen-label="06 Why" id="why">
      <Aurora />
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <div className="sec-head reveal">
          <div className="sec-head__eye eyebrow">07 — Differentiators</div>
          <h2>Why 500+ brands chose <span className="font-serif text-grad">Techonymous</span></h2>
          <p>What separates a growth partner from a vendor with a Slack channel.</p>
        </div>
        <div className="why-grid">
          {points.map((p, i) =>
          <div key={p.title} className={`glass why-card reveal ${i % 2 === 0 ? "reveal-left" : "reveal-right"}`} style={{ transitionDelay: `${i % 3 * 0.08}s` }}>
              <div className="why-card__icon"><Icon name={p.icon} size={28} /></div>
              <h3 style={{ fontFamily: "Geist", fontWeight: 600, fontSize: 19, letterSpacing: "-0.015em", margin: 0 }}>{p.title}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--txt-2)", margin: 0 }}>{p.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
const TESTIMONIALS = [
{ name: "Priya Raman", role: "Co-Founder, Northwind Cloud", initials: "PR", quote: "We'd burned three agencies before Techonymous. They rebuilt our PLG funnel in 11 weeks and trial-to-paid jumped from 9% to 32%. Just don't ask us to share their contract.", rating: 5 },
{ name: "Marcus Tanaka", role: "VP Growth, Mosaic Apparel", initials: "MT", quote: "ROAS went from 1.8x to 6.2x in two quarters. Their creative team out-shipped our in-house squad five-to-one.", rating: 5 },
{ name: "Elena Sorokina", role: "Founder, Lumen & Loom", initials: "ES", quote: "Six months in, organic traffic is up 4x and our checkout speed is faster than Shopify's own demo store. They sweat details nobody else even sees.", rating: 5 },
{ name: "Daniel Okafor", role: "CEO, Veridian Labs", initials: "DO", quote: "Programmatic SEO engine that prints qualified leads while we sleep. I've never seen a team treat our P&L like their own.", rating: 5 },
{ name: "Sophia Lindqvist", role: "CMO, Halcyon Group", initials: "SL", quote: "47-day guarantee felt like marketing. Then they hit it on day 38. Bookings have tripled and held for two years.", rating: 5 }];


function Testimonials() {
  return (
    <section className="section" data-screen-label="07 Testimonials" id="testimonials">
      <div className="container-x">
        <div className="sec-head reveal" style={{ textAlign: "center", margin: "0 auto 64px" }}>
          <div className="sec-head__eye eyebrow" style={{ textAlign: "center" }}>08 — Voices</div>
          <h2 style={{ textAlign: "center" }}>Words from our <span className="font-serif text-grad">growth partners</span></h2>
        </div>
        <div className="feature-quote reveal">
          <div className="feature-quote__mark">"</div>
          <p className="feature-quote__text">They don't act like a vendor. They act like a co-founder who happens to ship code, run ads, and write the angles — all before standup.</p>
          <div className="feature-quote__author">
            <div className="feature-quote__avatar">PR</div>
            <div style={{ textAlign: "left" }}>
              <div style={{ fontWeight: 500 }}>Priya Raman</div>
              <div style={{ fontSize: 13, color: "var(--txt-2)" }}>Co-Founder, Northwind Cloud</div>
            </div>
          </div>
        </div>
        <div className="testimonial-carousel">
          {TESTIMONIALS.slice(1, 4).map((t, i) =>
          <div key={t.name} className="glass testi-card reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="testi-card__stars">{"★".repeat(t.rating)}</div>
              <p className="testi-card__quote">"{t.quote}"</p>
              <div className="testi-card__author">
                <div className="testi-card__avatar">{t.initials}</div>
                <div>
                  <div className="testi-card__name">{t.name}</div>
                  <div className="testi-card__role">{t.role}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   PRICING
   ============================================================ */
function Pricing() {
  const tiers = [
  {
    name: "Starter", price: "$6.5K", period: "/ month",
    desc: "For seed-stage and early-revenue brands ready to compound their first $1M.",
    features: [
    "Dedicated growth strategist",
    "1 paid channel (Meta or Google)",
    "Conversion-focused landing pages",
    "Monthly reporting + strategy call",
    "47-day results guarantee"],

    cta: "Start with Starter",
    featured: false
  },
  {
    name: "Growth", price: "$14K", period: "/ month",
    desc: "Our most popular package. Full-funnel ownership for $1M – $25M ARR brands.",
    features: [
    "Senior strategist + dedicated team",
    "All paid channels + creative engine",
    "Programmatic SEO + content engine",
    "Lifecycle email + automation buildout",
    "Real-time dashboard + weekly war room",
    "CRO program (4 tests / month)"],

    cta: "Talk to growth team",
    featured: true
  },
  {
    name: "Scale", price: "Custom", period: "",
    desc: "For $25M+ ARR brands ready to dominate category leadership.",
    features: [
    "Embedded growth pod (5+ specialists)",
    "Custom data warehouse + attribution",
    "Brand strategy + creative direction",
    "International expansion playbooks",
    "Quarterly off-sites with leadership",
    "Equity-aligned partnerships available"],

    cta: "Book a discovery call",
    featured: false
  }];

  return (
    <section className="section" data-screen-label="08 Pricing" id="pricing">
      <div className="container-x">
        <div className="sec-head reveal" style={{ textAlign: "center", margin: "0 auto 64px" }}>
          <div className="sec-head__eye eyebrow" style={{ textAlign: "center" }}>09 — Investment</div>
          <h2 style={{ textAlign: "center" }}>Simple pricing. <span className="font-serif text-grad">Serious results.</span></h2>
          <p style={{ textAlign: "center", margin: "0 auto" }}>No long contracts. Cancel any month. Most clients stay 18+ months because the math keeps working.</p>
        </div>
        <div className="pricing-grid">
          {tiers.map((t, i) =>
          <div key={t.name} className={`glass price-card reveal ${t.featured ? "price-card--featured" : ""}`} style={{ transitionDelay: `${i * 0.08}s` }}>
              {t.featured && <div className="price-card__tag">Most Popular</div>}
              <div>
                <p className="price-card__name">{t.name}</p>
                <div className="price-card__price" style={{ marginTop: 8 }}>
                  {t.price}<small>{t.period}</small>
                </div>
              </div>
              <p className="price-card__desc">{t.desc}</p>
              <ul className="price-card__features">
                {t.features.map((f) =>
              <li key={f} className="price-card__feature">
                    <Icon name="check" size={16} />
                    <span>{f}</span>
                  </li>
              )}
              </ul>
              <a href={(window.__base||"")+"contact/index.html"} className={`btn ${t.featured ? "btn-primary" : "btn-ghost"}`} style={{ justifyContent: "center", marginTop: "auto" }}>
                {t.cta} <Icon name="arrow-right" size={16} className="btn-arrow" />
              </a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   FAQ
   ============================================================ */
function FAQ() {
  const [open, setOpen] = useStateH(0);
  const items = [
  { q: "How is Techonymous different from a typical agency?",
    a: "Most agencies sell deliverables. We sell outcomes. Every engagement is scoped against a revenue target, every team is senior-only, and every result is owned end-to-end. No production studios, no offshore teams, no account managers stuck reading the same slide deck back to you." },
  { q: "What's the 47-day guarantee?",
    a: "Within 47 days of kickoff we commit to a meaningful, measurable lift on a primary KPI we set together. If we miss it, we work for free until we hit it. We've invoked it once in three years." },
  { q: "Do you work with B2B SaaS or only e-commerce?",
    a: "Both. Our case studies span B2B SaaS, D2C, e-commerce, local service businesses, and creator brands. Our process is the same; the channels and copy adapt to the audience." },
  { q: "Can we keep our existing brand and tech stack?",
    a: "Absolutely. We audit and extend what works. Many engagements start with a 30-day audit of your existing stack before we touch a single pixel." },
  { q: "What does month one actually look like?",
    a: "Week 1 — kickoff, access, data plumbing. Week 2 — competitive teardown + funnel diagnostic. Week 3 — strategy blueprint + sprint plan. Week 4 — first experiments and builds live. You'll have shipped something measurable inside 30 days." },
  { q: "How do you price beyond the listed tiers?",
    a: "Custom Scale engagements are scoped from a strategy intensive. We don't quote without first understanding your P&L, current channels, and growth bottleneck. Most Scale partnerships land between $28K – $80K / month." }];

  return (
    <section className="section" data-screen-label="09 FAQ" id="faq">
      <div className="container-x" style={{ maxWidth: 940 }}>
        <div className="sec-head reveal" style={{ textAlign: "center", margin: "0 auto 56px" }}>
          <div className="sec-head__eye eyebrow" style={{ textAlign: "center" }}>10 — Questions</div>
          <h2 style={{ textAlign: "center" }}>Things people <span className="font-serif text-grad">always ask</span></h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) =>
          <div key={i} className={`faq-item ${open === i ? "is-open" : ""}`}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-q__plus"><Icon name="plus" size={14} /></span>
              </div>
              <div className="faq-a"><div className="faq-a__inner">{it.a}</div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   FINAL CTA
   ============================================================ */
function FinalCTA() {
  return (
    <section className="section" data-screen-label="10 CTA">
      <div className="container-x">
        <div className="final-cta reveal">
          <div className="eyebrow" style={{ marginBottom: 18 }}>Ready when you are</div>
          <h2>Let's turn your traffic into <span className="font-serif text-grad">revenue.</span></h2>
          <p>Book a 30-minute strategy call. We'll teardown your funnel live, and you'll leave with three concrete plays whether we work together or not.</p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <a href={(window.__base||"")+"contact/index.html"} className="btn btn-primary">
              Book your free audit <Icon name="arrow-right" size={16} className="btn-arrow" />
            </a>
            <a href={(window.__base||"")+"work/index.html"} className="btn btn-ghost">
              <Icon name="play" size={14} />
              Watch a case study
            </a>
          </div>
          <div style={{ display: "flex", gap: 24, justifyContent: "center", marginTop: 36, fontSize: 13, color: "var(--txt-2)", flexWrap: "wrap" }}>
            <span style={{ display: "flex", alignItems: "center", gap: 6 }}><Icon name="check" size={14} /> No long contracts</span>
            <span style={{ display: "flex", alignItems: "center", gap: 6 }}><Icon name="check" size={14} /> 47-day guarantee</span>
            <span style={{ display: "flex", alignItems: "center", gap: 6 }}><Icon name="check" size={14} /> Senior team, no juniors</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   HOME ROOT
   ============================================================ */
function HomePage() {
  useScrollReveal();
  return (
    <PageShell active="home">
      <Hero />
      <Marquee />
      <TrustBar />
      <Services />
      <Process />
      <CaseStudies />
      <WhyUs />
      <Testimonials />
      <Pricing />
      <FAQ />
      <FinalCTA />
    </PageShell>);

}

window.HomePage = HomePage;