// ───────────── About / Studio page ─────────────
const TWEAK_DEFAULTS_ABOUT = /*EDITMODE-BEGIN*/{
  "palette": "aurora",
  "grain": true
}/*EDITMODE-END*/;

function ManifestoBlock({ accent }) {
  return (
    <section className="section" style={{ paddingTop: 40 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }} className="manif-grid">
          <Reveal>
            <span className="kicker"><span className="dot"/> Manifesto</span>
            <h2 className="font-serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: "-0.02em", marginTop: 22 }}>
              Built for the<br/>
              <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>second decade</span><br/>
              of the internet.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ color: "rgba(255,255,255,0.78)", fontSize: 19, lineHeight: 1.7, display: "grid", gap: 22 }}>
              <p>Digitacurve started in 2017 as a two-person studio in a Surry Hills warehouse with a kettle, a borrowed router and an outsized opinion about <em className="italic-serif" style={{ color: "#fff" }}>craft</em>.</p>
              <p>Nine years and 142 clients later, we still pick projects one at a time. We still write the brand voice, draw the wireframes, and ship the code &mdash; usually in the same week.</p>
              <p>We don&rsquo;t do bench-warmers. We don&rsquo;t do design-by-committee. We do <em className="italic-serif" style={{ color: "#fff" }}>useful, beautiful, on-time</em> &mdash; and we measure the work against what it earned, not what it cost.</p>
              <p style={{ color: "rgba(255,255,255,0.55)" }}>&mdash; Mira Rajan & Theo Kassidis<br/>Founders</p>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 880px){ .manif-grid{ grid-template-columns: 1fr !important; gap: 36px !important; } }`}</style>
    </section>
  );
}

function NumbersStrip({ accent }) {
  const stats = [
    { n: "142", l: "Brands shipped" },
    { n: "9", l: "Years in studio" },
    { n: "4", l: "Studios, 3 timezones" },
    { n: "+183%", l: "Avg. growth, year one" },
    { n: "4.96", l: "Studio rating" },
  ];
  return (
    <section className="section" style={{ padding: "60px 24px" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${stats.length}, 1fr)`, gap: 0, borderTop: "1px solid rgba(255,255,255,0.08)", borderBottom: "1px solid rgba(255,255,255,0.08)" }} className="numbers-grid">
          {stats.map((s, i) => (
            <Reveal key={s.l} delay={i*60}>
              <div style={{ padding: "40px 24px", borderLeft: i ? "1px solid rgba(255,255,255,0.06)" : "none", textAlign: "center" }}>
                <div className="font-serif" style={{ fontSize: 72, lineHeight: 0.95,
                  background: `linear-gradient(160deg, ${accent[0]}, ${accent[1]} 60%)`,
                  WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent",
                  letterSpacing: "-0.025em"
                }}>{s.n}</div>
                <div style={{ color: "rgba(255,255,255,0.55)", fontSize: 13, letterSpacing: "0.16em", textTransform: "uppercase", marginTop: 8 }}>{s.l}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 880px){ .numbers-grid{ grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
    </section>
  );
}

function Values({ accent }) {
  const values = [
    { n: "01", t: "Craft over volume", d: "We&rsquo;d rather ship one thing perfectly than ten things approximately. We turn down 9 in 10 enquiries." },
    { n: "02", t: "Senior only", d: "Every project is run by a senior designer and senior engineer. No juniors hiding behind the deck." },
    { n: "03", t: "Show, don&rsquo;t pitch", d: "We don&rsquo;t do credentials decks. We do working prototypes by week one, no exceptions." },
    { n: "04", t: "Outcome-led", d: "We measure our work in revenue, engagement and joy &mdash; not impressions, deliverables or hours billed." },
  ];
  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <span className="kicker"><span className="dot"/> Values</span>
          <h2 className="section-title" style={{ marginTop: 22, marginBottom: 56, maxWidth: 800 }}>
            Four ideas we won&rsquo;t <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>compromise</span> on.
          </h2>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16 }}>
          {values.map((v, i) => (
            <Reveal key={v.n} delay={i*80}>
              <TiltCard className="liquid-glass-strong" style={{ borderRadius: 22, padding: 32, height: "100%", minHeight: 280 }}>
                <div className="font-mono" style={{ color: accent[0], fontSize: 12, letterSpacing: "0.2em", marginBottom: 36 }}>{v.n}</div>
                <h3 className="font-serif" style={{ fontSize: 32, letterSpacing: "-0.01em", marginBottom: 14 }} dangerouslySetInnerHTML={{__html: v.t}}/>
                <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 15, lineHeight: 1.6 }} dangerouslySetInnerHTML={{__html: v.d}}/>
              </TiltCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Timeline({ accent }) {
  const items = [
    { y: "2017", t: "Studio one", d: "Mira & Theo open Digitacurve out of a Surry Hills warehouse. First client: a Sydney indie bookstore." },
    { y: "2019", t: "First award", d: "Awwwds Site of the Day for Halocene. The team grows to six." },
    { y: "2021", t: "Bangalore opens", d: "Engineering pod set up in Bangalore to keep the studio running 22 hours a day." },
    { y: "2023", t: "100th project", d: "We ship our 100th brand. We celebrate by closing the studio for a week." },
    { y: "2024", t: "Growth team forms", d: "We start running paid + lifecycle in-house. Growth retainers become half our book." },
    { y: "2025", t: "NYC + London", d: "Studios open in New York and London. Headcount: 38." },
    { y: "2026", t: "AI workflows", d: "We add a small AI practice &mdash; for content ops, RAG search and personalisation." },
  ];
  return (
    <section className="section" style={{ background: "linear-gradient(180deg, #07070a 0%, #0d0d12 100%)" }}>
      <div className="container">
        <Reveal>
          <span className="kicker"><span className="dot"/> Timeline</span>
          <h2 className="section-title" style={{ marginTop: 22, marginBottom: 56, maxWidth: 800 }}>
            Nine years, in <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>seven moments</span>.
          </h2>
        </Reveal>
        <div style={{ position: "relative" }}>
          <div style={{ position: "absolute", left: 90, top: 18, bottom: 18, width: 1, background: "linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0))" }} className="timeline-line"/>
          <div style={{ display: "grid", gap: 4 }}>
            {items.map((it, i) => (
              <Reveal key={it.y} delay={i*50}>
                <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 32, padding: "20px 0", alignItems: "start" }} className="tl-row">
                  <div style={{ position: "relative" }}>
                    <div className="font-mono" style={{ color: i === items.length - 1 ? accent[0] : "rgba(255,255,255,0.5)", fontSize: 14, letterSpacing: "0.16em" }}>{it.y}</div>
                    <div style={{
                      position: "absolute", left: 86, top: 4, width: 10, height: 10, borderRadius: 99,
                      background: i === items.length - 1 ? accent[0] : "rgba(255,255,255,0.4)",
                      boxShadow: i === items.length - 1 ? `0 0 0 4px ${accent[0]}20` : "0 0 0 4px rgba(7,7,10,1)"
                    }}/>
                  </div>
                  <div style={{ paddingLeft: 32 }}>
                    <h3 className="font-serif" style={{ fontSize: 32, letterSpacing: "-0.01em", marginBottom: 6 }}>{it.t}</h3>
                    <p style={{ color: "rgba(255,255,255,0.62)", fontSize: 16, lineHeight: 1.55, maxWidth: 600 }} dangerouslySetInnerHTML={{__html: it.d}}/>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Team({ accent }) {
  const people = [
    { n: "Mira Rajan", r: "Founder, Creative", i: "MR", c1: "#7e5cff", c2: "#43e8ff" },
    { n: "Theo Kassidis", r: "Founder, Engineering", i: "TK", c1: "#b5fd5b", c2: "#46e0a3" },
    { n: "Jules Kim", r: "Head of Brand", i: "JK", c1: "#ff6b9d", c2: "#ffd66e" },
    { n: "Asha Tan", r: "Head of Growth", i: "AT", c1: "#6ee7ff", c2: "#a78bfa" },
    { n: "Sam Park", r: "Head of Engineering", i: "SP", c1: "#ff8a5c", c2: "#ff5cc8" },
    { n: "Leila Dahir", r: "Head of Content", i: "LD", c1: "#46e0a3", c2: "#b5fd5b" },
    { n: "Noah Wilkes", r: "Studio Director, NYC", i: "NW", c1: "#a78bfa", c2: "#ff6b9d" },
    { n: "Priya Singh", r: "Studio Director, BLR", i: "PS", c1: "#ffd66e", c2: "#ff8a5c" },
    { n: "Ben Holloway", r: "Studio Director, LON", i: "BH", c1: "#43e8ff", c2: "#7e5cff" },
    { n: "Iris Romero", r: "Senior Designer", i: "IR", c1: "#d894ff", c2: "#6ee7ff" },
    { n: "Kenji Watanabe", r: "Senior Engineer", i: "KW", c1: "#b5fd5b", c2: "#a7f3ff" },
    { n: "Zara Idris", r: "Strategy Director", i: "ZI", c1: "#ffb14a", c2: "#f24e64" },
  ];
  return (
    <section className="section">
      <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"/> The studio</span>
              <h2 className="section-title" style={{ marginTop: 22, maxWidth: 800 }}>
                38 people. <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: 360, fontSize: 16, lineHeight: 1.6 }}>
              The faces below are the senior leads you&rsquo;ll actually work with.
              No bait-and-switch, no agency layer.
            </p>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }}>
          {people.map((p, i) => (
            <Reveal key={p.n} delay={i*40}>
              <TiltCard max={4} className="liquid-glass-strong" style={{ borderRadius: 20, padding: 22, aspectRatio: "1/1.18", display: "flex", flexDirection: "column", gap: 18 }}>
                <div style={{ flex: 1, borderRadius: 14, position: "relative", overflow: "hidden",
                  background: `linear-gradient(135deg, ${p.c1}, ${p.c2})` }}>
                  <div style={{ position: "absolute", inset: 0,
                    background: "radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.4), transparent 60%)"
                  }}/>
                  <div className="font-serif" style={{
                    position: "absolute", left: 0, right: 0, top: "50%", transform: "translateY(-50%)",
                    fontSize: 72, color: "rgba(7,7,10,0.85)", textAlign: "center", letterSpacing: "-0.04em"
                  }}>{p.i}</div>
                  <div style={{ position: "absolute", top: 12, right: 12, display: "flex", gap: 6 }}>
                    <span className="liquid-glass" style={{ width: 28, height: 28, borderRadius: 99, display: "flex", alignItems: "center", justifyContent: "center", color: "#fff" }}>
                      <I.Linkedin size={12} stroke={1.6}/>
                    </span>
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 17, color: "#fff", fontWeight: 500, marginBottom: 2 }}>{p.n}</div>
                  <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 13 }}>{p.r}</div>
                </div>
              </TiltCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function StudioLife({ accent }) {
  const tiles = [
    { c1: "#1a2a4a", c2: "#0f1525", t: "Surry Hills HQ", sub: "Sydney" },
    { c1: "#3a2418", c2: "#1f1411", t: "All-hands Fridays", sub: "Studio one" },
    { c1: "#0f2820", c2: "#0a1813", t: "Bangalore pod", sub: "WeWork Galaxy" },
    { c1: "#2a1a3e", c2: "#160c22", t: "Annual offsite", sub: "Byron Bay, 2025" },
    { c1: "#3a1f1f", c2: "#1f0f0f", t: "Library wall", sub: "Books we&rsquo;ve worn out" },
    { c1: "#1f3a2f", c2: "#0f1f17", t: "Studio dog", sub: "Wally, est. 2021" },
  ];
  return (
    <section className="section" style={{ background: "#0d0d12" }}>
      <div className="container">
        <Reveal>
          <span className="kicker"><span className="dot"/> Studio life</span>
          <h2 className="section-title" style={{ marginTop: 22, marginBottom: 56, maxWidth: 800 }}>
            Working here, in <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>six</span> frames.
          </h2>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gridAutoRows: "260px", gap: 14 }} className="life-grid">
          {tiles.map((t, i) => {
            const span = i === 0 ? "col-span-2 row-span-2" : i === 3 ? "col-span-2" : "";
            return (
              <Reveal key={i} delay={i*60} className={span} style={{
                gridColumn: i === 0 ? "span 2" : i === 3 ? "span 2" : "span 1",
                gridRow: i === 0 ? "span 2" : "span 1",
              }}>
                <TiltCard max={3} style={{ borderRadius: 20, position: "relative", overflow: "hidden", height: "100%",
                  background: `linear-gradient(135deg, ${t.c1}, ${t.c2})` }}>
                  <div style={{ position: "absolute", inset: 0,
                    background: "radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 50%)" }}/>
                  {/* Procedural shapes */}
                  <svg viewBox="0 0 400 300" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.4 }}>
                    {Array.from({ length: 24 }).map((_, k) => {
                      const cx = (i * 30 + k * 17) % 400;
                      const cy = (i * 50 + k * 23) % 300;
                      return <circle key={k} cx={cx} cy={cy} r={(k % 5) + 2} fill="rgba(255,255,255,0.12)"/>;
                    })}
                  </svg>
                  <div style={{ position: "absolute", left: 24, bottom: 24, color: "#fff" }}>
                    <h3 className="font-serif" style={{ fontSize: 28, letterSpacing: "-0.01em", marginBottom: 4 }} dangerouslySetInnerHTML={{__html: t.t}}/>
                    <div style={{ color: "rgba(255,255,255,0.7)", fontSize: 13 }} dangerouslySetInnerHTML={{__html: t.sub}}/>
                  </div>
                </TiltCard>
              </Reveal>
            );
          })}
        </div>
      </div>
      <style>{`@media (max-width: 760px){ .life-grid{ grid-template-columns: 1fr !important; } .life-grid > *{ grid-column: span 1 !important; grid-row: auto !important; } }`}</style>
    </section>
  );
}

function Awards({ accent }) {
  const items = [
    "Webby — Best Agency Site, 2025",
    "Awwwds — SOTD ×17",
    "FWA — Cutting Edge, 2024",
    "Brand New — Best of 2024",
    "Communication Arts — Design Annual 65",
    "TYPE Directors Club — Cert. of Excellence",
    "Fast Company — Innovation by Design",
    "ADC — Gold Cube, 2023",
  ];
  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 50, gap: 24, flexWrap: "wrap" }}>
            <div>
              <span className="kicker"><span className="dot"/> Recognition</span>
              <h2 className="section-title" style={{ marginTop: 22 }}>
                Some <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>shiny</span> things.
              </h2>
            </div>
            <p style={{ color: "rgba(255,255,255,0.55)", maxWidth: 360, fontSize: 14, lineHeight: 1.55 }}>
              Awards aren&rsquo;t the point &mdash; the work is. But every now and then a juror disagrees.
            </p>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }}>
          {items.map((it, i) => (
            <Reveal key={it} delay={i*40}>
              <div style={{
                padding: "26px 24px", borderTop: "1px solid rgba(255,255,255,0.08)",
                display: "flex", alignItems: "center", gap: 16
              }}>
                <I.Star size={14} stroke={1.6} className="award-star"/>
                <span style={{ color: "rgba(255,255,255,0.85)", fontSize: 15 }}>{it}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`.award-star{ color: ${accent[0]}; }`}</style>
    </section>
  );
}

function Careers({ accent }) {
  const roles = [
    { t: "Senior Brand Designer", l: "Sydney", c: "Studio team" },
    { t: "Senior Engineer (Next.js)", l: "Remote / Bangalore", c: "Product team" },
    { t: "Growth Strategist", l: "New York", c: "Growth team" },
    { t: "Motion Designer", l: "Sydney or remote", c: "Studio team" },
  ];
  return (
    <section id="careers" className="section" style={{ background: "#0d0d12" }}>
      <div className="container">
        <Reveal>
          <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 50, gap: 24, flexWrap: "wrap" }}>
            <div>
              <span className="kicker"><span className="dot"/> Careers</span>
              <h2 className="section-title" style={{ marginTop: 22, maxWidth: 760 }}>
                Want to <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>join</span>?
              </h2>
            </div>
            <p style={{ color: "rgba(255,255,255,0.62)", maxWidth: 380, fontSize: 16, lineHeight: 1.6 }}>
              We hire slowly and rarely. If the role below feels like yours, send us
              <em className="italic-serif" style={{ color: "#fff" }}> three pieces of work</em>
              you&rsquo;re proud of and one you&rsquo;re not.
            </p>
          </div>
        </Reveal>
        <div style={{ display: "grid", gap: 4 }}>
          {roles.map((r, i) => (
            <Reveal key={r.t} delay={i*60}>
              <a href="mailto:careers@digitacurve.studio" style={{
                display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr auto", gap: 24, alignItems: "center",
                padding: "24px 24px", borderTop: "1px solid rgba(255,255,255,0.08)",
                textDecoration: "none", color: "#fff",
                transition: "background .25s"
              }}
              className="career-row"
              onMouseEnter={e=>e.currentTarget.style.background="rgba(255,255,255,0.025)"}
              onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
                <div className="font-serif" style={{ fontSize: 28, letterSpacing: "-0.01em" }}>{r.t}</div>
                <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 14 }}>{r.l}</div>
                <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 14 }}>{r.c}</div>
                <div style={{
                  width: 44, height: 44, borderRadius: 99,
                  border: "1px solid rgba(255,255,255,0.15)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "#fff"
                }}>
                  <I.ArrowUpRight size={16} stroke={1.5}/>
                </div>
              </a>
            </Reveal>
          ))}
          <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}/>
        </div>
        <Reveal>
          <div style={{ marginTop: 36, padding: "20px 24px", color: "rgba(255,255,255,0.55)", fontSize: 14, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
            <span>Don&rsquo;t see your role? <a href="mailto:careers@digitacurve.studio" style={{ color: "#fff", textDecoration: "underline" }}>Send us a note anyway.</a></span>
            <span className="font-mono">4 open · 12 reviewed this month</span>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 760px){ .career-row{ grid-template-columns: 1fr auto !important; } .career-row > div:nth-child(2), .career-row > div:nth-child(3){ display: none !important; } }`}</style>
    </section>
  );
}

function AboutApp() {
  const t = useSiteTweaks(TWEAK_DEFAULTS_ABOUT);
  const accent = PALETTES[t.palette] || PALETTES.aurora;
  return (
    <SiteChrome accent={accent} t={t}>
      <PageHero
        accent={accent}
        eyebrow="Studio"
        title="An independent studio for"
        italic="curious"
        suffix="founders."
        sub="We're 38 people across Sydney, Bangalore, New York and London &mdash; designers, strategists and engineers shipping brand, product and growth in one room."
      >
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a href="work.html" className="btn-primary">See selected work <I.Arrow size={16} stroke={2}/></a>
          <a href="contact.html" className="btn-ghost">Start a project</a>
        </div>
      </PageHero>

      <ManifestoBlock accent={accent}/>
      <NumbersStrip accent={accent}/>
      <Values accent={accent}/>
      <Testimonials accent={accent}/>
      <Timeline accent={accent}/>
      <Team accent={accent}/>
      <StudioLife accent={accent}/>
      <Awards accent={accent}/>
      <Careers accent={accent}/>
      <CTABand accent={accent} title="Bring us<br/>your next thing."/>
    </SiteChrome>
  );
}

const aboutRoot = ReactDOM.createRoot(document.getElementById("root"));
aboutRoot.render(<AboutApp/>);