// (Reveal + TiltCard + Footer live in shell.jsx)

// ═══════════════════════════════════════════════════════════════
// HIGHLIGHTS — bento grid of why-Digitacurve
// ═══════════════════════════════════════════════════════════════
function Highlights({ accent }) {
  return (
    <section id="highlights" className="section" style={{ paddingTop: 80 }}>
      <div className="container">
        <Reveal>
          <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 56, gap: 24, flexWrap: "wrap" }}>
            <div>
              <span className="kicker"><span className="dot"/> Highlights</span>
              <h2 className="section-title" style={{ marginTop: 22, maxWidth: 820 }}>
                A studio built for the <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>second decade</span> of the internet.
              </h2>
            </div>
            <p style={{ color: "rgba(255,255,255,0.62)", maxWidth: 380, fontSize: 16, lineHeight: 1.6 }}>
              We pair strategy with craft &mdash; brand systems, growth engines and digital products,
              shipped by a tight team that gives a damn.
            </p>
          </div>
        </Reveal>

        {/* Bento */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(12, 1fr)",
          gridAutoRows: "minmax(220px, auto)",
          gap: 16
        }}>
          <Reveal style={{ gridColumn: "span 7" }}>
            <BentoCard accent={accent} title="Compounding growth" sub="We don't ship campaigns, we ship engines." big>
              <Counters accent={accent}/>
            </BentoCard>
          </Reveal>
          <Reveal delay={80} style={{ gridColumn: "span 5" }}>
            <BentoCard accent={accent} title="Always shipping" sub="Weekly drops, not quarterly reports.">
              <ShippingRing accent={accent}/>
            </BentoCard>
          </Reveal>
          <Reveal delay={120} style={{ gridColumn: "span 4" }}>
            <BentoCard accent={accent} title="Senior only" sub="No juniors hidden behind the deck.">
              <SeniorVisual/>
            </BentoCard>
          </Reveal>
          <Reveal delay={160} style={{ gridColumn: "span 4" }}>
            <BentoCard accent={accent} title="Fixed price, no surprises" sub="Sprint pricing. Clear in / clear out.">
              <PriceVisual/>
            </BentoCard>
          </Reveal>
          <Reveal delay={200} style={{ gridColumn: "span 4" }}>
            <BentoCard accent={accent} title="3 timezones, one studio" sub="Sydney → Bangalore → New York.">
              <TimezoneVisual accent={accent}/>
            </BentoCard>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 880px){ #highlights .container > div:last-child > div{ grid-column: span 12 !important; } }`}</style>
    </section>
  );
}

function BentoCard({ title, sub, children, big, accent }) {
  return (
    <TiltCard className="liquid-glass-strong" style={{ borderRadius: 26, padding: 28, height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 24, minHeight: big ? 360 : 240 }}>
      <div>
        <h3 className="font-serif" style={{ fontSize: big ? 36 : 28, lineHeight: 1.02, marginBottom: 10, letterSpacing: "-0.01em" }}>{title}</h3>
        <p style={{ color: "rgba(255,255,255,0.55)", fontSize: 14, maxWidth: 360 }}>{sub}</p>
      </div>
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>{children}</div>
    </TiltCard>
  );
}

function Counters({ accent }) {
  const stats = [
    { n: "+183%", l: "Avg. growth YoY" },
    { n: "8.4x", l: "ROAS, paid social" },
    { n: "142", l: "Brands shipped" },
    { n: "4.96", l: "Studio rating" }
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 18, width: "100%" }}>
      {stats.map(s => (
        <div key={s.l} style={{ padding: "20px 0", borderTop: "1px solid rgba(255,255,255,0.07)" }}>
          <div className="big-num" style={{ fontSize: 56,
            background: `linear-gradient(135deg, ${accent[0]}, ${accent[1]})`,
            WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent"
          }}>{s.n}</div>
          <div style={{ color: "rgba(255,255,255,0.55)", fontSize: 13, marginTop: 4 }}>{s.l}</div>
        </div>
      ))}
    </div>
  );
}

function ShippingRing({ accent }) {
  return (
    <div style={{ position: "relative", width: 220, height: 220 }}>
      <div className="spin-slow" style={{ position: "absolute", inset: 0, border: "1px solid rgba(255,255,255,0.08)", borderRadius: "50%" }}/>
      <div className="spin-rev" style={{ position: "absolute", inset: 30, border: "1px solid rgba(255,255,255,0.1)", borderTop: `1px solid ${accent[0]}`, borderRadius: "50%" }}/>
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", textAlign: "center" }}>
        <div className="font-serif" style={{ fontSize: 48, lineHeight: 1, color: "#fff" }}>4.2d</div>
        <div style={{ fontSize: 11, color: "rgba(255,255,255,0.5)", letterSpacing: "0.16em", textTransform: "uppercase", marginTop: 6 }}>avg. ship cycle</div>
      </div>
    </div>
  );
}

function SeniorVisual() {
  const people = [
    { i: "MR", c1: "#7e5cff", c2: "#43e8ff" },
    { i: "JK", c1: "#ff6b9d", c2: "#ffd66e" },
    { i: "AT", c1: "#b5fd5b", c2: "#46e0a3" },
    { i: "SP", c1: "#ff8a5c", c2: "#ff5cc8" },
    { i: "LD", c1: "#6ee7ff", c2: "#a78bfa" }
  ];
  return (
    <div style={{ display: "flex" }}>
      {people.map((p,i) => (
        <div key={i} style={{ marginLeft: i ? -12 : 0,
          width: 44, height: 44, borderRadius: "50%",
          background: `linear-gradient(135deg, ${p.c1}, ${p.c2})`,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontSize: 12, fontWeight: 600, color: "#07070a",
          border: "2px solid #0d0d12" }}>{p.i}</div>
      ))}
      <div style={{ marginLeft: -12,
        width: 44, height: 44, borderRadius: "50%",
        background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.7)",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 12, fontWeight: 500, border: "2px solid #0d0d12" }}>+9</div>
    </div>
  );
}

function PriceVisual() {
  return (
    <div className="font-mono" style={{ fontSize: 13, color: "rgba(255,255,255,0.7)", width: "100%" }}>
      <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px dashed rgba(255,255,255,0.08)" }}>
        <span>Brand sprint</span><span style={{ color: "#fff" }}>$24k</span>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px dashed rgba(255,255,255,0.08)" }}>
        <span>Site, full build</span><span style={{ color: "#fff" }}>$48k</span>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0" }}>
        <span>Growth retainer</span><span style={{ color: "#fff" }}>$12k/mo</span>
      </div>
    </div>
  );
}

function TimezoneVisual({ accent }) {
  const cities = [
    { c: "SYD", t: "14:22" },
    { c: "BLR", t: "09:52" },
    { c: "NYC", t: "23:22" }
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10, width: "100%" }}>
      {cities.map(c => (
        <div key={c.c} style={{ padding: "14px 10px", borderRadius: 14, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.06)", textAlign: "center" }}>
          <div className="font-mono" style={{ color: accent[0], fontSize: 13 }}>{c.c}</div>
          <div className="font-serif" style={{ fontSize: 22, color: "#fff", marginTop: 4 }}>{c.t}</div>
        </div>
      ))}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// SERVICES (amenities mapped)
// ═══════════════════════════════════════════════════════════════
function Services({ accent }) {
  const items = [
    {
      icon: <I.Compass size={22} stroke={1.4}/>,
      title: "Brand identity",
      blurb: "Strategy, naming, visual systems, voice — the foundations that make every other dollar work harder.",
      bullets: ["Positioning & narrative", "Logo & wordmark", "Type system & motion", "Brand guidelines"]
    },
    {
      icon: <I.Layers size={22} stroke={1.4}/>,
      title: "Digital product",
      blurb: "Marketing sites, e-commerce and tooling, designed and engineered in the same room.",
      bullets: ["Webflow & Next.js", "Headless commerce", "Design systems", "CMS & integrations"]
    },
    {
      icon: <I.Megaphone size={22} stroke={1.4}/>,
      title: "Growth marketing",
      blurb: "Paid, SEO, lifecycle and content — operated as one system, measured against revenue.",
      bullets: ["Paid social & search", "SEO & content engines", "Lifecycle / CRM", "Analytics & attribution"]
    },
    {
      icon: <I.Camera size={22} stroke={1.4}/>,
      title: "Content & film",
      blurb: "Editorial, photography, motion design and 3D — production in-house, on-brand, on-time.",
      bullets: ["Brand films & ads", "Photography & CGI", "Editorial & social", "Motion / 3D"]
    },
    {
      icon: <I.Code size={22} stroke={1.4}/>,
      title: "Engineering",
      blurb: "Modern stacks for fast, accessible, search-friendly sites and lightweight web apps.",
      bullets: ["Next.js & TypeScript", "Performance & SEO", "Shopify & Sanity", "AI integrations"]
    },
    {
      icon: <I.Sparkles size={22} stroke={1.4}/>,
      title: "AI workflows",
      blurb: "Practical AI &mdash; for content, ops, support and personalisation. Less theatre, more leverage.",
      bullets: ["Content automations", "Chat & search", "RAG & private models", "Custom internal tools"]
    },
  ];

  return (
    <section id="services" className="section">
      <div className="container">
        <Reveal>
          <span className="kicker"><span className="dot"/> Capabilities</span>
          <h2 className="section-title" style={{ marginTop: 22, maxWidth: 980, marginBottom: 56 }}>
            Six teams. One <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>integrated</span> studio that
            ships <span style={{
              background: `linear-gradient(110deg, ${accent[0]}, ${accent[1]} 55%, ${accent[2]})`,
              WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent"
            }}>end to end.</span>
          </h2>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 16 }}>
          {items.map((it, i) => (
            <Reveal key={it.title} delay={i*60}>
              <TiltCard className="service-card liquid-glass-strong" style={{ borderRadius: 22, minHeight: 360 }}>
                <div style={{
                  width: 50, height: 50, borderRadius: 14,
                  background: `linear-gradient(135deg, ${accent[0]}26, ${accent[2]}26)`,
                  border: "1px solid rgba(255,255,255,0.1)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "#fff", marginBottom: 22
                }}>{it.icon}</div>
                <div style={{ color: "rgba(255,255,255,0.45)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 8 }}>0{i+1}</div>
                <h3 className="font-serif" style={{ fontSize: 32, marginBottom: 12, letterSpacing: "-0.01em" }}>{it.title}</h3>
                <p style={{ color: "rgba(255,255,255,0.62)", fontSize: 15, lineHeight: 1.55, marginBottom: 20 }} dangerouslySetInnerHTML={{__html: it.blurb}}/>
                <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 8 }}>
                  {it.bullets.map(b => (
                    <li key={b} style={{ display: "flex", alignItems: "center", gap: 10, color: "rgba(255,255,255,0.72)", fontSize: 14 }}>
                      <span style={{ width: 14, height: 14, borderRadius: 99, border: `1px solid ${accent[0]}`, display: "flex", alignItems: "center", justifyContent: "center", color: accent[0] }}>
                        <I.Check size={9} stroke={2.4}/>
                      </span>
                      {b}
                    </li>
                  ))}
                </ul>
              </TiltCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// GALLERY — selected work, 3D tilt cards
// ═══════════════════════════════════════════════════════════════
function Gallery({ accent }) {
  const [filter, setFilter] = useState("All");
  const filters = ["All", "Brand", "Site", "Campaign", "Product"];

  const projects = [
    { tag: "Brand",    name: "Halocene",    sub: "Audio hardware rebrand", year: "2026", color: "#FF7A4D", color2: "#C13B3B", shape: "wave" },
    { tag: "Site",     name: "MeinHaus",    sub: "Service-provider directory", year: "2025", color: "#3E60FF", color2: "#7B57FF", shape: "stack" },
    { tag: "Campaign", name: "Wikistrings", sub: "Guitar-string review platform", year: "2025", color: "#1F1F1F", color2: "#3a3a3a", shape: "type" },
    { tag: "Product",  name: "AMPS",        sub: "Entrepreneurship education", year: "2024", color: "#B5FD5B", color2: "#46E0A3", shape: "grid" },
    { tag: "Brand",    name: "Northvane",   sub: "Boutique architecture firm", year: "2024", color: "#0F1417", color2: "#243038", shape: "orb" },
    { tag: "Campaign", name: "Verdant Co.", sub: "DTC skincare launch", year: "2023", color: "#E7DCC2", color2: "#A28D62", shape: "leaf" }
  ];

  const visible = filter === "All" ? projects : projects.filter(p => p.tag === filter);

  return (
    <section id="gallery" className="section" style={{ background: "linear-gradient(180deg, #07070a 0%, #0d0d12 100%)" }}>
      <div className="container">
        <Reveal>
          <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 40, gap: 20, flexWrap: "wrap" }}>
            <div>
              <span className="kicker"><span className="dot"/> Selected work</span>
              <h2 className="section-title" style={{ marginTop: 22, maxWidth: 720 }}>
                Six recent <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>shipped</span> projects.
              </h2>
            </div>
            <div className="liquid-glass" style={{ borderRadius: 999, padding: 6, display: "flex", gap: 4 }}>
              {filters.map(f => (
                <button key={f} onClick={()=>setFilter(f)} style={{
                  padding: "8px 16px", borderRadius: 999,
                  background: filter === f ? "#fff" : "transparent",
                  color: filter === f ? "#07070a" : "rgba(255,255,255,0.78)",
                  border: "none", cursor: "pointer", fontSize: 13, fontWeight: 500,
                  transition: "all .3s"
                }}>{f}</button>
              ))}
            </div>
          </div>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(420px, 1fr))", gap: 18 }}>
          {visible.map((p, i) => (
            <Reveal key={p.name} delay={i*80}>
              <ProjectCard p={p} accent={accent}/>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div style={{ textAlign: "center", marginTop: 56 }}>
            <a href="#" className="btn-ghost">View full archive (37) <I.ArrowUpRight size={14} stroke={2}/></a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ProjectCard({ p, accent }) {
  return (
    <TiltCard max={3} style={{ position: "relative", borderRadius: 22, overflow: "hidden", aspectRatio: "4/3", cursor: "pointer", border: "1px solid rgba(255,255,255,0.06)" }}>
      <ProjectArt p={p}/>
      {/* gradient overlay */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.6) 100%)",
        pointerEvents: "none"
      }}/>
      {/* meta */}
      <div style={{ position: "absolute", top: 18, left: 18, display: "flex", gap: 8 }}>
        <span className="liquid-glass" style={{ borderRadius: 999, padding: "6px 12px", fontSize: 12, color: "#fff" }}>{p.tag}</span>
        <span className="liquid-glass" style={{ borderRadius: 999, padding: "6px 12px", fontSize: 12, color: "rgba(255,255,255,0.7)" }}>{p.year}</span>
      </div>
      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: 24, display: "flex", justifyContent: "space-between", alignItems: "end", color: "#fff" }}>
        <div>
          <h3 className="font-serif" style={{ fontSize: 32, lineHeight: 1.05, letterSpacing: "-0.01em", marginBottom: 4 }}>{p.name}</h3>
          <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 14 }}>{p.sub}</p>
        </div>
        <div className="liquid-glass" style={{
          width: 48, height: 48, borderRadius: 99,
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "#fff", flexShrink: 0
        }}>
          <I.ArrowUpRight size={18} stroke={1.6}/>
        </div>
      </div>
    </TiltCard>
  );
}

function ProjectArt({ p }) {
  // Custom abstract artwork per project
  const bg = `linear-gradient(135deg, ${p.color} 0%, ${p.color2} 100%)`;
  if (p.shape === "wave") return (
    <div style={{ position: "absolute", inset: 0, background: bg }}>
      <svg viewBox="0 0 400 300" style={{ width: "100%", height: "100%" }}>
        {Array.from({ length: 14 }).map((_, i) => (
          <path key={i} d={`M 0 ${150 + Math.sin(i*0.6)*8} Q 100 ${100 + i*8}, 200 ${150 + Math.cos(i*0.7)*30} T 400 ${150 + Math.sin(i*0.4)*20}`}
                fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1.2" transform={`translate(0, ${-50 + i*12})`}/>
        ))}
      </svg>
    </div>
  );
  if (p.shape === "stack") return (
    <div style={{ position: "absolute", inset: 0, background: bg, display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div style={{ perspective: 800 }}>
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} style={{
            position: "absolute", left: "50%", top: "50%",
            transform: `translate(-50%,-50%) rotateX(58deg) rotateZ(${i*8}deg) translateZ(${i*14}px)`,
            width: 220, height: 130, borderRadius: 14,
            background: `rgba(255,255,255,${0.06 + i*0.04})`,
            border: "1px solid rgba(255,255,255,0.2)"
          }}/>
        ))}
      </div>
    </div>
  );
  if (p.shape === "type") return (
    <div style={{ position: "absolute", inset: 0, background: bg, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
      <div className="italic-serif" style={{ fontSize: 220, lineHeight: 0.85, color: "rgba(255,255,255,0.93)", letterSpacing: "-0.05em" }}>W</div>
      <span style={{ position: "absolute", top: 22, right: 22, fontSize: 11, color: "rgba(255,255,255,0.7)", letterSpacing: "0.2em", textTransform: "uppercase" }}>tone of voice</span>
    </div>
  );
  if (p.shape === "grid") return (
    <div style={{ position: "absolute", inset: 0, background: "#07070a" }}>
      <div style={{ position: "absolute", inset: 0, background: `radial-gradient(circle at 30% 40%, ${p.color}40, transparent 60%)` }}/>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px)", backgroundSize: "40px 40px" }}/>
      <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)" }}>
        <div className="font-serif" style={{ fontSize: 72, lineHeight: 0.95, color: "#fff", letterSpacing: "-0.02em" }}>AMPS<span style={{ color: p.color }}>.</span></div>
      </div>
    </div>
  );
  if (p.shape === "orb") return (
    <div style={{ position: "absolute", inset: 0, background: bg, overflow: "hidden" }}>
      <div className="floaty" style={{ position: "absolute", top: "20%", left: "50%", transform: "translateX(-50%)",
        width: 260, height: 260, borderRadius: "50%",
        background: "radial-gradient(circle at 30% 30%, #d4dde6, #5b6b78 60%, #1a2127)",
        boxShadow: "inset -30px -30px 80px rgba(0,0,0,0.6), 0 30px 60px rgba(0,0,0,0.5)"
      }}/>
    </div>
  );
  // leaf
  return (
    <div style={{ position: "absolute", inset: 0, background: bg, overflow: "hidden" }}>
      <svg viewBox="0 0 400 300" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        {Array.from({ length: 18 }).map((_, i) => {
          const cx = (i * 51) % 400, cy = (i * 73) % 300;
          return <ellipse key={i} cx={cx} cy={cy} rx="28" ry="9" fill="none" stroke="rgba(0,0,0,0.18)" transform={`rotate(${i*23} ${cx} ${cy})`}/>;
        })}
      </svg>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// PROCESS
// ═══════════════════════════════════════════════════════════════
function Process({ accent }) {
  const steps = [
    { n: "01", t: "Listen", d: "We start with a long, honest conversation. Goals, constraints, the awkward stuff. One week, no slides." },
    { n: "02", t: "Shape", d: "Strategy, brand and product directions on paper. Two routes, real options, no design-by-committee." },
    { n: "03", t: "Build", d: "Design and engineering in parallel sprints. Weekly Friday demos. You see the work as it grows." },
    { n: "04", t: "Compound", d: "Ship, measure, iterate. Growth retainers turn launch energy into a long arc of progress." }
  ];
  return (
    <section id="process" className="section">
      <div className="container">
        <Reveal>
          <span className="kicker"><span className="dot"/> How we work</span>
          <h2 className="section-title" style={{ marginTop: 22, maxWidth: 920, marginBottom: 56 }}>
            Four steps, sized for the <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>real world</span>.
          </h2>
        </Reveal>

        <div style={{ position: "relative" }}>
          {/* line */}
          <div style={{ position: "absolute", left: 24, top: 30, bottom: 30, width: 1,
            background: "linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0))" }}/>
          <div style={{ display: "grid", gap: 28 }}>
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={i * 80}>
                <div style={{ display: "grid", gridTemplateColumns: "60px 220px 1fr", gap: 32, alignItems: "start", padding: "12px 0" }}
                     className="process-row">
                  <div style={{ position: "relative" }}>
                    <div style={{
                      width: 48, height: 48, borderRadius: 99,
                      background: i === 0 ? `linear-gradient(135deg, ${accent[0]}, ${accent[1]})` : "rgba(255,255,255,0.04)",
                      border: i === 0 ? "none" : "1px solid rgba(255,255,255,0.1)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      color: i === 0 ? "#07070a" : "#fff",
                      fontWeight: 600, fontSize: 14, position: "relative", zIndex: 1
                    }}>{s.n}</div>
                  </div>
                  <h3 className="font-serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: "-0.02em" }}>{s.t}</h3>
                  <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 17, lineHeight: 1.6, paddingTop: 14, maxWidth: 540 }}>{s.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px){
          .process-row{ grid-template-columns: 48px 1fr !important; }
          .process-row h3{ font-size: 36px !important; grid-column: 2; }
          .process-row p{ grid-column: 2; padding-top: 4px !important; }
        }
      `}</style>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// LOCATION — Global studio map
// ═══════════════════════════════════════════════════════════════
function Location({ accent }) {
  const offices = [
    { city: "Sydney", country: "Australia", flag: "🇦🇺", addr: "Suite 401, 88 Foveaux St, Surry Hills NSW 2010", phone: "+61 2 8095 6440", x: 84, y: 78, lead: true },
    { city: "Bangalore", country: "India", flag: "🇮🇳", addr: "WeWork Galaxy, 43 Residency Road, Bangalore 560025", phone: "+91 80 4969 1200", x: 70, y: 52 },
    { city: "New York", country: "USA", flag: "🇺🇸", addr: "Floor 8, 175 Varick St, New York, NY 10014", phone: "+1 212 555 0140", x: 28, y: 38 },
    { city: "London", country: "UK", flag: "🇬🇧", addr: "Second Home, 68 Hanbury St, London E1 5JL", phone: "+44 20 4538 9120", x: 48, y: 32 },
  ];
  const [active, setActive] = useState(0);
  return (
    <section id="location" className="section" style={{ background: "linear-gradient(180deg, #0d0d12 0%, #07070a 100%)" }}>
      <div className="container">
        <Reveal>
          <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 56, gap: 24, flexWrap: "wrap" }}>
            <div>
              <span className="kicker"><span className="dot"/> Studio</span>
              <h2 className="section-title" style={{ marginTop: 22, maxWidth: 800 }}>
                Four studios, <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>one</span> craft team.
              </h2>
            </div>
            <p style={{ color: "rgba(255,255,255,0.62)", maxWidth: 380, fontSize: 16, lineHeight: 1.6 }}>
              Sydney is our home. Bangalore, New York and London are our friends.
              We follow the sun &mdash; work runs 22 hours a day.
            </p>
          </div>
        </Reveal>

        <Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24 }} className="loc-grid">
            {/* MAP */}
            <div className="liquid-glass-strong" style={{ borderRadius: 26, padding: 24, position: "relative", minHeight: 520, overflow: "hidden" }}>
              <WorldMap offices={offices} active={active} onSelect={setActive} accent={accent}/>
            </div>

            {/* CITY DETAIL */}
            <div className="liquid-glass-strong" style={{ borderRadius: 26, padding: 32, display: "flex", flexDirection: "column" }}>
              <div style={{ display: "flex", gap: 6, marginBottom: 28, flexWrap: "wrap" }}>
                {offices.map((o, i) => (
                  <button key={o.city} onClick={()=>setActive(i)} style={{
                    padding: "8px 14px", borderRadius: 99,
                    background: active === i ? "rgba(255,255,255,0.08)" : "transparent",
                    border: `1px solid ${active === i ? "rgba(255,255,255,0.16)" : "rgba(255,255,255,0.06)"}`,
                    color: active === i ? "#fff" : "rgba(255,255,255,0.55)",
                    fontSize: 13, fontWeight: 500, cursor: "pointer", transition: "all .25s",
                    fontFamily: "inherit"
                  }}>
                    <span style={{ marginRight: 6 }}>{o.flag}</span>{o.city}
                  </button>
                ))}
              </div>
              <div style={{ flex: 1 }}>
                {offices[active].lead && <div style={{ display: "inline-block", marginBottom: 14, padding: "4px 10px", borderRadius: 99, background: `${accent[0]}22`, color: accent[0], fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", fontWeight: 500 }}>HQ</div>}
                <h3 className="font-serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: "-0.02em", marginBottom: 6 }}>
                  {offices[active].city}
                </h3>
                <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 15, marginBottom: 28 }}>{offices[active].country}</div>

                <div style={{ display: "grid", gap: 22, marginBottom: 32 }}>
                  <Info icon={<I.Pin size={16} stroke={1.5}/>} label="Address" value={offices[active].addr}/>
                  <Info icon={<I.Phone size={16} stroke={1.5}/>} label="Phone" value={offices[active].phone}/>
                  <Info icon={<I.Mail size={16} stroke={1.5}/>} label="Direct" value={`${offices[active].city.toLowerCase()}@digitacurve.studio`}/>
                </div>
              </div>
              <a href="#" className="btn-ghost" style={{ alignSelf: "start" }}>Open in Maps <I.ArrowUpRight size={14} stroke={2}/></a>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 880px){ .loc-grid{ grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function Info({ icon, label, value }) {
  return (
    <div style={{ display: "flex", gap: 14, alignItems: "start" }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.75)", flexShrink: 0 }}>{icon}</div>
      <div>
        <div style={{ color: "rgba(255,255,255,0.45)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 4 }}>{label}</div>
        <div style={{ color: "#fff", fontSize: 15, lineHeight: 1.5 }}>{value}</div>
      </div>
    </div>
  );
}

function WorldMap({ offices, active, onSelect, accent }) {
  // Dotted world map (procedurally placed dots from a simple landmass approximation)
  const dots = [];
  // Generate a dot-pattern only over rough landmasses using a simple heightmap-ish lookup
  const land = (lon, lat) => {
    // crude continent shapes via overlapping ellipses
    const ell = [
      // N America
      { cx: -100, cy: 45, rx: 30, ry: 22 },
      { cx: -85, cy: 20, rx: 18, ry: 8 },
      // S America
      { cx: -65, cy: -15, rx: 18, ry: 24 },
      // Europe
      { cx: 12, cy: 50, rx: 22, ry: 14 },
      // Africa
      { cx: 22, cy: 5, rx: 25, ry: 28 },
      // Asia
      { cx: 80, cy: 40, rx: 50, ry: 22 },
      { cx: 100, cy: 15, rx: 18, ry: 12 },
      // Australia
      { cx: 135, cy: -25, rx: 18, ry: 12 },
      // UK / Ireland
      { cx: -4, cy: 55, rx: 5, ry: 5 },
    ];
    return ell.some(e => Math.pow((lon - e.cx) / e.rx, 2) + Math.pow((lat - e.cy) / e.ry, 2) < 1);
  };

  const step = 4;
  for (let lat = -55; lat <= 70; lat += step) {
    for (let lon = -170; lon <= 175; lon += step) {
      if (land(lon, lat)) {
        const x = ((lon + 180) / 360) * 100;
        const y = ((90 - lat) / 180) * 100;
        dots.push({ x, y });
      }
    }
  }

  return (
    <div style={{ position: "relative", width: "100%", height: "100%", minHeight: 470 }}>
      <svg viewBox="0 0 100 60" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid meet">
        {dots.map((d, i) => (
          <circle key={i} cx={d.x} cy={d.y * 0.6} r="0.22" fill="rgba(255,255,255,0.22)"/>
        ))}
      </svg>

      {/* pins */}
      {offices.map((o, i) => (
        <button key={o.city} onClick={()=>onSelect(i)} style={{
          position: "absolute", left: `${o.x}%`, top: `${o.y * 0.6}%`,
          transform: "translate(-50%,-50%)",
          background: "transparent", border: "none", cursor: "pointer", padding: 0
        }}>
          <div style={{ position: "relative" }}>
            <div className={active === i ? "pulse-dot" : ""} style={{
              width: active === i ? 16 : 10,
              height: active === i ? 16 : 10,
              borderRadius: 99,
              background: active === i ? accent[0] : "#fff",
              boxShadow: active === i ? `0 0 0 4px ${accent[0]}30, 0 0 18px ${accent[0]}` : "0 0 0 3px rgba(255,255,255,0.18)",
              transition: "all .35s"
            }}/>
            {active === i && (
              <div style={{
                position: "absolute", left: "50%", bottom: "120%", transform: "translateX(-50%)",
                background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.1)",
                backdropFilter: "blur(10px)",
                padding: "6px 12px", borderRadius: 99, fontSize: 12, color: "#fff", whiteSpace: "nowrap"
              }}>{o.flag} {o.city}</div>
            )}
          </div>
        </button>
      ))}

      {/* corner badge */}
      <div style={{ position: "absolute", top: 18, left: 18, color: "rgba(255,255,255,0.45)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>
        <span className="font-mono">DC-MAP / v2.6</span>
      </div>
      <div style={{ position: "absolute", bottom: 18, right: 18, color: "rgba(255,255,255,0.45)", fontSize: 11, letterSpacing: "0.14em" }}>
        <span className="font-mono">22h / 365d coverage</span>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// Testimonials
// ═══════════════════════════════════════════════════════════════
function Testimonials({ accent }) {
  const items = [
    { q: "They stayed connected long after launch &mdash; the kind of partner that protects your ROI when everyone else has moved on.", n: "Priya Shenoy", r: "VP Marketing, Halocene", i: "PS" },
    { q: "An outstanding technical team. We hit a major milestone faster than I thought possible because they actually cared.", n: "Marcus Reilly", r: "Founder, MeinHaus", i: "MR" },
    { q: "Above and beyond on responsiveness, adaptability and the willingness to wrestle with an idea.", n: "Sofia Liang", r: "CMO, AMPS Institute", i: "SL" },
    { q: "Took a plain, boring website and turned it into the centre of our growth engine.", n: "Jonas Becker", r: "CEO, Northvane", i: "JB" },
  ];
  return (
    <section className="section" style={{ paddingTop: 60 }}>
      <div className="container">
        <Reveal>
          <span className="kicker"><span className="dot"/> Words from clients</span>
          <h2 className="section-title" style={{ marginTop: 22, maxWidth: 860, marginBottom: 50 }}>
            We&rsquo;re measured by what we ship, but <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>remembered</span> for how we work.
          </h2>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(360px, 1fr))", gap: 16 }}>
          {items.map((t, i) => (
            <Reveal key={i} delay={i*60}>
              <div className="liquid-glass-strong" style={{ borderRadius: 22, padding: 30, height: "100%", display: "flex", flexDirection: "column", gap: 24 }}>
                <div style={{ display: "flex", gap: 4, color: accent[0] }}>
                  {Array.from({length: 5}).map((_,k)=><I.Star key={k} size={14} fill="currentColor" stroke={0}/>)}
                </div>
                <p className="font-serif" style={{ fontSize: 24, lineHeight: 1.25, letterSpacing: "-0.01em", color: "#fff", flex: 1 }} dangerouslySetInnerHTML={{__html: `&ldquo;${t.q}&rdquo;`}}/>
                <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                  <div style={{ width: 42, height: 42, borderRadius: 99,
                    background: `linear-gradient(135deg, ${accent[0]}, ${accent[2]})`,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontWeight: 600, color: "#07070a", fontSize: 13 }}>{t.i}</div>
                  <div>
                    <div style={{ color: "#fff", fontWeight: 500, fontSize: 15 }}>{t.n}</div>
                    <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 13 }}>{t.r}</div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// ENQUIRY FORM
// ═══════════════════════════════════════════════════════════════
function Enquiry({ accent }) {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({ name: "", email: "", company: "", service: "", budget: "", timeline: "", message: "" });
  const [submitted, setSubmitted] = useState(false);

  const set = (k) => (e) => setData(d => ({ ...d, [k]: e.target.value }));
  const pick = (k, v) => setData(d => ({ ...d, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    console.log("Enquiry:", data);
  };

  const services = ["Brand identity", "Digital product", "Growth marketing", "Content & film", "Engineering", "AI workflows"];
  const budgets = ["< $25k", "$25k – $75k", "$75k – $150k", "$150k+"];
  const timelines = ["ASAP", "1–2 months", "3–6 months", "Just exploring"];

  return (
    <section id="enquiry" className="section" style={{ paddingTop: 60 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "start" }} className="eq-grid">
          <Reveal>
            <span className="kicker"><span className="dot"/> Start a project</span>
            <h2 className="section-title" style={{ marginTop: 22, marginBottom: 28 }}>
              Tell us<br/>
              <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>what you&rsquo;re</span><br/>
              building.
            </h2>
            <p style={{ color: "rgba(255,255,255,0.62)", fontSize: 17, lineHeight: 1.6, maxWidth: 460, marginBottom: 40 }}>
              We take on <strong style={{ color: "#fff" }}>4–6 new partnerships</strong> a year.
              We&rsquo;ll reply inside 24 hours &mdash; with the team you&rsquo;d actually work with, not a salesperson.
            </p>

            <div style={{ display: "grid", gap: 22 }}>
              <DirectLink icon={<I.Mail size={16} stroke={1.5}/>} label="Email" value="hello@digitacurve.studio"/>
              <DirectLink icon={<I.Phone size={16} stroke={1.5}/>} label="Sydney" value="+61 2 8095 6440"/>
              <DirectLink icon={<I.Cursor size={16} stroke={1.5}/>} label="Calendly" value="cal.com/digitacurve/intro · 30 min"/>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div className="liquid-glass-strong" style={{ borderRadius: 28, padding: 36, position: "relative", overflow: "hidden" }}>
              {!submitted ? (
                <form onSubmit={submit} style={{ display: "grid", gap: 20 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
                    <div className="font-mono" style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", letterSpacing: "0.15em" }}>STEP {step} / 2</div>
                    <div style={{ display: "flex", gap: 4 }}>
                      <div style={{ width: 36, height: 3, borderRadius: 99, background: step >= 1 ? accent[0] : "rgba(255,255,255,0.1)" }}/>
                      <div style={{ width: 36, height: 3, borderRadius: 99, background: step >= 2 ? accent[0] : "rgba(255,255,255,0.1)" }}/>
                    </div>
                  </div>

                  {step === 1 ? (
                    <>
                      <Field label="Your name">
                        <input className="field" placeholder="Alex Rivera" value={data.name} onChange={set("name")} required/>
                      </Field>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                        <Field label="Email">
                          <input type="email" className="field" placeholder="alex@company.com" value={data.email} onChange={set("email")} required/>
                        </Field>
                        <Field label="Company">
                          <input className="field" placeholder="Company name" value={data.company} onChange={set("company")}/>
                        </Field>
                      </div>
                      <Field label="What do you need help with?">
                        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                          {services.map(s => (
                            <button key={s} type="button" onClick={()=>pick("service", s)} style={{
                              padding: "9px 14px", borderRadius: 99,
                              background: data.service === s ? "#fff" : "rgba(255,255,255,0.03)",
                              color: data.service === s ? "#07070a" : "rgba(255,255,255,0.78)",
                              border: `1px solid ${data.service === s ? "transparent" : "rgba(255,255,255,0.1)"}`,
                              fontSize: 13, fontWeight: 500, cursor: "pointer", transition: "all .2s",
                              fontFamily: "inherit"
                            }}>{s}</button>
                          ))}
                        </div>
                      </Field>
                      <div style={{ display: "flex", justifyContent: "end", marginTop: 6 }}>
                        <button type="button" className="btn-primary" onClick={()=>setStep(2)} disabled={!data.name || !data.email}>
                          Next <I.Arrow size={16} stroke={2}/>
                        </button>
                      </div>
                    </>
                  ) : (
                    <>
                      <Field label="Budget">
                        <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 8 }}>
                          {budgets.map(b => (
                            <button key={b} type="button" onClick={()=>pick("budget", b)} style={{
                              padding: "14px 16px", borderRadius: 12, textAlign: "left",
                              background: data.budget === b ? "rgba(255,255,255,0.07)" : "rgba(255,255,255,0.02)",
                              border: `1px solid ${data.budget === b ? accent[0] : "rgba(255,255,255,0.08)"}`,
                              color: "#fff", fontSize: 14, fontWeight: 500, cursor: "pointer",
                              fontFamily: "inherit", transition: "all .2s"
                            }}>{b}</button>
                          ))}
                        </div>
                      </Field>
                      <Field label="Timeline">
                        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                          {timelines.map(t => (
                            <button key={t} type="button" onClick={()=>pick("timeline", t)} style={{
                              padding: "9px 14px", borderRadius: 99,
                              background: data.timeline === t ? "#fff" : "rgba(255,255,255,0.03)",
                              color: data.timeline === t ? "#07070a" : "rgba(255,255,255,0.78)",
                              border: `1px solid ${data.timeline === t ? "transparent" : "rgba(255,255,255,0.1)"}`,
                              fontSize: 13, fontWeight: 500, cursor: "pointer", fontFamily: "inherit"
                            }}>{t}</button>
                          ))}
                        </div>
                      </Field>
                      <Field label="Tell us about the project">
                        <textarea className="field" rows={5} placeholder="A few sentences about what you're building, your audience and what success looks like." value={data.message} onChange={set("message")} required style={{ resize: "vertical" }}/>
                      </Field>
                      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, gap: 12 }}>
                        <button type="button" className="btn-ghost" onClick={()=>setStep(1)}>Back</button>
                        <button type="submit" className="btn-primary">Send enquiry <I.Send size={14} stroke={2}/></button>
                      </div>
                    </>
                  )}
                </form>
              ) : (
                <div style={{ display: "flex", flexDirection: "column", alignItems: "start", gap: 18, padding: "20px 0" }}>
                  <div style={{ width: 56, height: 56, borderRadius: 99,
                    background: `linear-gradient(135deg, ${accent[0]}, ${accent[1]})`,
                    display: "flex", alignItems: "center", justifyContent: "center", color: "#07070a" }}>
                    <I.Check size={26} stroke={2.4}/>
                  </div>
                  <h3 className="font-serif" style={{ fontSize: 44, lineHeight: 1, letterSpacing: "-0.02em" }}>
                    Thanks, {data.name.split(" ")[0]}.
                  </h3>
                  <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 16, lineHeight: 1.6, maxWidth: 440 }}>
                    Your note&rsquo;s landed in the studio. Expect a real reply from a real person within 24 hours.
                    In the meantime, your inbox is in good hands.
                  </p>
                  <button type="button" className="btn-ghost" onClick={()=>{ setSubmitted(false); setStep(1); setData({ name: "", email: "", company: "", service: "", budget: "", timeline: "", message: "" }); }}>
                    Send another <I.Arrow size={14} stroke={2}/>
                  </button>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 880px){ .eq-grid{ grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
    </section>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ color: "rgba(255,255,255,0.55)", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 10 }}>{label}</div>
      {children}
    </label>
  );
}

function DirectLink({ icon, label, value }) {
  return (
    <a href="#" style={{ display: "flex", alignItems: "center", gap: 16, color: "#fff", textDecoration: "none", padding: "14px 0", borderTop: "1px solid rgba(255,255,255,0.08)" }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.75)" }}>{icon}</div>
      <div style={{ flex: 1 }}>
        <div style={{ color: "rgba(255,255,255,0.45)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 2 }}>{label}</div>
        <div style={{ color: "#fff", fontSize: 16 }}>{value}</div>
      </div>
      <I.ArrowUpRight size={16} stroke={1.5}/>
    </a>
  );
}

Object.assign(window, {
  Highlights, Services, Gallery, Process, Location, Testimonials, Enquiry, ProjectArt, ProjectCard
});
