/* About / Team data + page */

const TEAM = [
  { name: "Eng. Hasan Kassas", role: "Founder & CEO",        loc: "Dubai",    hue: 285 },
  { name: "Layla Hadid",   role: "Head of Design",       loc: "Dubai",    hue: 320 },
  { name: "Karim Saab",    role: "Head of Engineering",  loc: "Damascus", hue: 220 },
  { name: "Nour Demir",    role: "Principal Engineer",   loc: "Istanbul", hue: 195 },
  { name: "Maris Tamm",    role: "EU Operations Lead",   loc: "Tallinn",  hue: 175 },
  { name: "Ahmed El-Far",  role: "Mobile Engineer",      loc: "Dubai",    hue: 25  },
  { name: "Yasmin Khalil", role: "Product Designer",     loc: "Damascus", hue: 350 },
  { name: "Bilal Aydin",   role: "Backend Engineer",     loc: "Istanbul", hue: 60  },
  { name: "Hana Saleem",   role: "Engineering Manager",  loc: "Dubai",    hue: 245 },
  { name: "Otto Lepik",    role: "ML Engineer",          loc: "Tallinn",  hue: 270 },
  { name: "Zaid Mansour",  role: "DevOps Engineer",      loc: "Damascus", hue: 145 },
  { name: "Selin Demir",   role: "Brand Designer",       loc: "Istanbul", hue: 305 },
];

const VALUES = [
  { title: "Craft over hustle",       desc: "We'd rather ship one thing that lasts a decade than ten that ship Tuesday and break Friday." },
  { title: "Honest estimates",        desc: "If we don't know, we say so. Padding numbers is a habit of agencies, not partners." },
  { title: "Code that reads itself",  desc: "Tomorrow's engineer is you, with no memory. Write for them." },
  { title: "Bilingual, by default",   desc: "Arabic and English from the first sketch — not after the QA pass." },
  { title: "Default to writing",      desc: "Tickets, RFCs, retros, postmortems. If it isn't written down, it didn't happen." },
  { title: "No one is the customer",  desc: "Everyone on the team ships, supports, and listens. Engineers do customer calls." },
];

function AboutPage() {
  React.useEffect(() => {
    document.title = "About — Innoveev";
    let m = document.head.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name","description"); document.head.appendChild(m); }
    m.setAttribute("content", "Innoveev is a product studio of designers and engineers, building software across Dubai, Damascus, Istanbul and Tallinn since 2018.");
  }, []);

  return (
    <>
      <Nav />

      <header className="sub-hero">
        <div className="mesh" aria-hidden="true">
          <span className="mesh__blob mesh__blob--1"></span>
          <span className="mesh__blob mesh__blob--2"></span>
          <span className="mesh__blob mesh__blob--3"></span>
          <span className="mesh__fade-bottom"></span>
        </div>
        <div className="container">
          <div className="sub-hero__head">
            <span className="eyebrow">About · Est. 2018</span>
            <h1 className="sub-hero__title">
              A small studio building things people <em>actually use.</em>
            </h1>
            <p className="sub-hero__lede">
              Innoveev started as four engineers in a Dubai apartment in 2018. Today we're 28 people across
              four cities, working on a deliberately small number of products at a time — so each one gets
              real attention.
            </p>
          </div>
        </div>
      </header>

      <section className="section section--tight">
        <div className="container">
          <div className="about-grid">
            <div className="about-founder">
              <div className="about-founder__photo about-founder__photo--img">
                <img src="assets/hasan-kassas.png" alt="Eng. Hasan Kassas, Founder & Chief Executive Officer" />
              </div>
              <div className="about-founder__caption">Eng. Hasan Kassas · Founder & Chief Executive Officer</div>
              <blockquote className="about-founder__quote">
                "Apps built in the Middle East deserve to stand among the best in the world. That
                conviction is why Innoveev exists — and why we refuse to compromise on a single detail
                of the experience."
              </blockquote>
              <p className="about-founder__bio">
                A young Syrian engineer and entrepreneur with an obsessive eye for UI/UX, Hasan founded
                Innoveev on a simple belief: products from this region can — and should — compete with
                the best apps in the world.
              </p>
              <div className="about-founder__sig">
                <strong>Eng. Hasan Kassas</strong>
                <span>Dubai</span>
              </div>
            </div>

            <div>
              <span className="eyebrow">Our story</span>
              <h2 className="h2 section-head__title" style={{ marginTop: 14 }}>Built in the region we ship to.</h2>
              <div className="about-story" style={{ marginTop: 28 }}>
                <p>
                  We're a software studio operating from <em>Dubai</em>, where all of our design,
                  engineering and management happens. Our offices in <em>Damascus</em> and
                  <em> Istanbul</em> are operational, with an expansion base in <em>Tallinn</em>.
                </p>
                <p>
                  Most of our work is private — financial systems, healthcare networks, logistics
                  platforms — but the products you can see on <a href="apps.html" style={{ color: "var(--accent)" }}>our apps page</a> are
                  honest representatives of how we build: opinionated design systems, careful motion,
                  legible code, and bilingual UX that doesn't feel translated.
                </p>
                <p>
                  We are deliberately small. Each engagement gets a senior team and a senior designer,
                  not three juniors and a project manager.
                </p>
              </div>

              <div className="about-stats">
                <div className="about-stat">
                  <div className="about-stat__val"><AnimatedCounter value={28} /></div>
                  <div className="about-stat__label">Team</div>
                </div>
                <div className="about-stat">
                  <div className="about-stat__val"><AnimatedCounter value={10} /></div>
                  <div className="about-stat__label">Products shipped</div>
                </div>
                <div className="about-stat">
                  <div className="about-stat__val"><AnimatedCounter value={4} /></div>
                  <div className="about-stat__label">Offices</div>
                </div>
                <div className="about-stat">
                  <div className="about-stat__val"><AnimatedCounter value={2018} formatter={(n) => Math.round(n)} /></div>
                  <div className="about-stat__label">Since</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="section section--tight">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">What we hold ourselves to</span>
              <h2 className="h2 section-head__title">Six unspoken rules, written out.</h2>
            </div>
          </div>
          <ol className="values-list">
            {VALUES.map((v, i) => (
              <li key={v.title}>
                <span className="num">0{i + 1}</span>
                <div>
                  <strong>{v.title}</strong>
                  <p>{v.desc}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* Closing CTA */}
      <section className="section section--tight">
        <div className="container">
          <div className="faq-closing">
            <h2 className="faq-closing__title">Want to work <em>with us?</em></h2>
            <p className="faq-closing__lede">
              Either as a partner shipping a product, or as someone we should be hiring — both
              conversations start the same way.
            </p>
            <div className="faq-closing__ctas">
              <a href="index.html#contact" className="btn btn--primary">Start a discovery <Arrow /></a>
              <a href="careers.html" className="btn btn--secondary">See open roles</a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <TweaksUI />
      <StickyCTA />
      <BuildMode />
      <KeyboardEggs />
      <CookieBanner />
      <CustomCursor enabled={window.useTweaksDefaults.cursor} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<AboutPage />);