// =============================================================
// Design Brains — About Page
// =============================================================

function AboutPage() {
  return (
    <div className="page-enter">
      <PageHero
        eyebrow="About · Design Brains"
        title={<>A small studio with <span style={{ color: "var(--brand)" }}>large opinions</span> about the work.</>}
        subtitle="We started Design Brains in 2018 from a co-working desk in Banani. Eight years and a lot of late nights later, we're still small on purpose — and still convinced that the best digital work happens when the people pitching it are the people building it."
      />

      <AboutStory />
      <MissionVision />
      <Values />
      <Timeline />
      <TeamCulture />
    </div>
  );
}

function AboutStory() {
  return (
    <section style={{ paddingTop: 40 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="story-grid">
          <Reveal>
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>The short version</div>
              <h2 className="h-section" style={{ marginBottom: 24 }}>Started by builders, run by builders.</h2>
              <p className="lead" style={{ marginBottom: 20 }}>
                Two of us met building a side-project that flopped commercially but taught us how to ship. We took those lessons into client work and never looked back.
              </p>
              <p style={{ color: "var(--fg-2)", marginBottom: 20 }}>
                Today we're a team of nine — designers, engineers, and one very patient project lead — working with founders, product teams, and operators across Bangladesh, Singapore, the UK, and the US.
              </p>
              <p style={{ color: "var(--fg-2)" }}>
                We don't sell hours. We sell outcomes — sites that convert, apps that get five stars, automations that stay in production. If we don't think we can deliver one of those for you, we'll say so on the first call.
              </p>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{
              aspectRatio: "1 / 1.1",
              borderRadius: "var(--radius-xl)",
              background: "linear-gradient(135deg, rgba(108,191,0,0.18), rgba(108,191,0,0.02))",
              border: "1px solid var(--border)",
              padding: 40,
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
              position: "relative",
              overflow: "hidden",
            }}>
              <div style={{ position: "absolute", top: -80, right: -80, width: 320, height: 320, borderRadius: "50%", border: "1px solid var(--brand)", opacity: 0.2 }}/>
              <div style={{ position: "absolute", top: -40, right: -40, width: 200, height: 200, borderRadius: "50%", background: "var(--brand)", opacity: 0.15, filter: "blur(40px)" }}/>
              <div className="font-mono" style={{ fontSize: 12, color: "var(--brand)", letterSpacing: "0.16em" }}>EST · 2018</div>
              <div>
                <div className="font-display" style={{ fontSize: "clamp(48px, 7vw, 88px)", lineHeight: 0.95, letterSpacing: "-0.04em", marginBottom: 12 }}>
                  9<span style={{ color: "var(--brand)" }}>.</span>
                </div>
                <div style={{ color: "var(--muted)", fontFamily: "JetBrains Mono, monospace", fontSize: 13, letterSpacing: "0.08em" }}>
                  PEOPLE · ONE STUDIO · ONE STANDARD
                </div>
              </div>
            </div>
          </Reveal>
        </div>
        <style>{`
          @media (max-width: 880px) { .story-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
        `}</style>
      </div>
    </section>
  );
}

function MissionVision() {
  return (
    <section>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="mv-grid">
          {[
            { tag: "Mission", title: "Make the digital tools businesses depend on actually feel good to use.", body: "Most software is tolerated, not loved. We build the kind that earns the second category — and we measure ourselves on whether we got there." },
            { tag: "Vision", title: "Be the studio Bangladeshi teams point to when they want world-class work close to home.", body: "We want clients to stop comparing local studios to overseas ones — because by then, the answer is obvious." },
          ].map((m, i) => (
            <Reveal key={m.tag} delay={i * 80}>
              <div className="card card-glow" style={{ minHeight: 320 }}>
                <div className="eyebrow" style={{ marginBottom: 24 }}>{m.tag}</div>
                <h3 className="font-display" style={{ fontSize: 28, lineHeight: 1.15, letterSpacing: "-0.02em", marginBottom: 16 }}>
                  {m.title}
                </h3>
                <p style={{ color: "var(--fg-2)", margin: 0 }}>{m.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <style>{`@media (max-width: 720px) { .mv-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
}

function Values() {
  const values = [
    { n: "01", t: "Taste over trends", d: "We've seen design trends come and go. The work that ages well is rooted in fundamentals — typography, hierarchy, restraint." },
    { n: "02", t: "Plain language", d: "If we can't explain a decision in a sentence your CFO would understand, we haven't earned the right to make it yet." },
    { n: "03", t: "Default to ownership", d: "Even when something isn't strictly our job, if it blocks the project we pick it up. That's the deal." },
    { n: "04", t: "Long memory, short ego", d: "We remember every commitment — to clients, to each other. We forget every disagreement the moment it's resolved." },
    { n: "05", t: "Ship & learn", d: "Perfect is a moving target. We'd rather get the first version in front of users on Friday than the perfect one in a quarter." },
    { n: "06", t: "Quietly excellent", d: "We don't post the work for likes. The thing on the screen does the talking. (We do still answer emails.)" },
  ];
  return (
    <section style={{ background: "var(--bg-2)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="container">
        <SectionHeader
          eyebrow="Our values"
          title="Six things we keep coming back to."
          subtitle="They're not laminated on a wall, but they do show up in how we hire, how we scope, and how we say no."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--border)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", overflow: "hidden" }} className="values-grid">
          {values.map((v, i) => (
            <Reveal key={v.n} delay={i * 50}>
              <div style={{ background: "var(--bg)", padding: 32, height: "100%" }}>
                <div className="font-mono" style={{ color: "var(--brand)", fontSize: 13, marginBottom: 20 }}>{v.n}</div>
                <h3 className="h-card" style={{ marginBottom: 12 }}>{v.t}</h3>
                <p style={{ color: "var(--fg-2)", margin: 0, fontSize: 14, lineHeight: 1.55 }}>{v.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <style>{`
          @media (max-width: 880px) { .values-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 600px) { .values-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

function Timeline() {
  const items = [
    { y: "2018", t: "Studio founded", d: "Two devs, one designer, a Banani co-working desk, a domain name." },
    { y: "2019", t: "First retainer client", d: "A regional retailer asks us to keep building after launch. Care plans become a thing." },
    { y: "2020", t: "Mobile practice", d: "We hire our first iOS engineer. Cross-platform follows the same year." },
    { y: "2022", t: "AI practice", d: "First production LLM workflow ships — a triage layer for a logistics client." },
    { y: "2024", t: "Team of nine", d: "Design, engineering, and ops — all senior, all in-house, no offshore subs." },
    { y: "2026", t: "120 projects in", d: "And every one of them with the founders still answering Slack." },
  ];
  return (
    <section>
      <div className="container">
        <SectionHeader
          eyebrow="Milestones"
          title="A short history of getting here."
        />
        <div style={{ position: "relative", paddingLeft: 40 }}>
          <div style={{ position: "absolute", left: 18, top: 8, bottom: 8, width: 1, background: "var(--border)" }}/>
          {items.map((it, i) => (
            <Reveal key={it.y} delay={i * 60}>
              <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 32, paddingBottom: 40, position: "relative" }} className="tl-row">
                <div style={{
                  position: "absolute", left: -28, top: 4,
                  width: 14, height: 14, borderRadius: "50%",
                  background: "var(--brand)", boxShadow: "0 0 0 4px var(--bg), 0 0 24px var(--brand-glow)",
                }}/>
                <div className="font-display" style={{ fontSize: 32, fontWeight: 600, letterSpacing: "-0.03em", color: "var(--brand)" }}>{it.y}</div>
                <div>
                  <h3 className="h-card" style={{ marginBottom: 8 }}>{it.t}</h3>
                  <p style={{ color: "var(--fg-2)", margin: 0 }}>{it.d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <style>{`
          @media (max-width: 600px) { .tl-row { grid-template-columns: 80px 1fr !important; gap: 16px !important; } .tl-row > div:first-of-type + div h3 { font-size: 18px; } }
        `}</style>
      </div>
    </section>
  );
}

function TeamCulture() {
  const team = [
    { name: "Reza Ahmed", role: "Co-founder, Design", initials: "RA", color: "#6CBF00" },
    { name: "Naila Hossain", role: "Co-founder, Engineering", initials: "NH", color: "#82C91E" },
    { name: "Imran Khan", role: "Lead iOS", initials: "IK", color: "#94D82D" },
    { name: "Mira Chen", role: "Senior Frontend", initials: "MC", color: "#A9E34B" },
    { name: "Tomás Vidal", role: "AI Engineering", initials: "TV", color: "#C0EB75" },
    { name: "Sadia Rahman", role: "Project Lead", initials: "SR", color: "#D8F5A2" },
  ];
  return (
    <section>
      <div className="container">
        <SectionHeader
          eyebrow="The studio"
          title="The people you'll actually work with."
          subtitle="No bench, no juniors-in-training-on-your-dime. Whoever you meet in week one is on the project until launch."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="team-grid">
          {team.map((p, i) => (
            <Reveal key={p.name} delay={i * 50}>
              <div className="card" style={{ display: "flex", alignItems: "center", gap: 20 }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 16, flexShrink: 0,
                  background: `linear-gradient(135deg, ${p.color}, #0A0C09)`,
                  border: "1px solid var(--border)",
                  display: "grid", placeItems: "center",
                  fontFamily: "DM Sans", fontSize: 20, fontWeight: 700,
                  color: "#0A0C09", textShadow: "0 1px 0 rgba(255,255,255,0.2)",
                }}>{p.initials}</div>
                <div>
                  <div className="font-display" style={{ fontSize: 18, fontWeight: 600 }}>{p.name}</div>
                  <div style={{ color: "var(--muted)", fontSize: 13, fontFamily: "JetBrains Mono, monospace" }}>{p.role}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <style>{`
          @media (max-width: 880px) { .team-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 600px) { .team-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

window.AboutPage = AboutPage;