/* global React, Mascot */
// Team + Careers + Contact/Footer.

const TEAM = [
  { id: "t1", name: "Michael Solomon", role: "Co-founder", note: "Sets the bets. Obsesses over the product.", a: "var(--accent)", img: "assets/images/michael-solomon.jpeg" },
  { id: "t2", name: "Semere Talegngeta", role: "Co-founder", note: "Ships it, then makes it faster.", a: "var(--arqi-blue)", img: "assets/images/semere-talegngeta.jpg" },
  { id: "t3", name: "Temesgen Gashaw", role: "Co-founder", note: "Makes it feel inevitable.", a: "var(--mint)", img: "assets/images/temesgen-gashaw.jpeg" },
];

function Team() {
  return (
    <section className="section" id="team">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="eyebrow"><span className="tick"></span>The people</div>
          <h2>Small team.<br /><span className="serif-em">High</span> standards.</h2>
          <p>The folks behind bebe. We build products we love.</p>
        </div>
        <div className="team-grid">
          {TEAM.map((m, i) => (
            <div className="member reveal" data-d={(i % 3) + 1} key={m.id}>
              <div className="member-photo" style={{ "--m-accent": m.a }}>
                {/* image-slot is a custom element; renders fine in React */}
                <image-slot id={"team-" + m.id} shape="circle"
                  style={{ width: "100%", height: "100%", display: "block" }}
                  src={m.img}
                  placeholder="Drop photo"></image-slot>
              </div>
              <div className="member-name" suppressContentEditableWarning>{m.name}</div>
              <div className="member-role">{m.role}</div>
              <p className="member-note">{m.note}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Careers() {
  const roles = [
    { t: "Product Engineer", d: "React · TypeScript · taste" },
    { t: "Product Designer", d: "Systems thinker, pixel obsessive" },
    { t: "Founding GTM", d: "Take our products to market" },
  ];
  return (
    <section className="section careers" id="careers">
      <div className="wrap careers-inner reveal">
        <div className="careers-copy">
          <div className="eyebrow"><span className="tick"></span>Building with us</div>
          <h2>We hire rarely —<br />but <span className="serif-em">very</span> well.</h2>
          <p>
            If you'd rather build a few things exceptionally than many things adequately,
            we should talk. Open or speculative — we read everything.
          </p>
          <a href="#contact" className="btn btn-primary">See open roles <span className="arrow">→</span></a>
        </div>
        <div className="roles">
          {roles.map((r, i) => (
            <a className="role-row reveal" data-d={i + 1} href="#contact" key={r.t}>
              <span className="role-t">{r.t}</span>
              <span className="role-d">{r.d}</span>
              <span className="role-go">→</span>
            </a>
          ))}
          <div className="role-spec">
            Don't see your role? <a href="#contact">Pitch us anyway →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section className="contact-cta" id="contact">
      <div className="wrap">
        <div className="cc-inner reveal">
          <div className="cc-mascot"><Mascot size={150} blink={true} /></div>
          <div className="eyebrow"><span className="tick"></span>Let's talk</div>
          <h2 className="cc-h">
            Got something worth<br /><span className="serif-em">building?</span>
          </h2>
          <p className="cc-sub">Tell us about your product, your team, or your wildest idea.</p>
          <div className="cc-actions">
            <a href="mailto:hello@bebe.studio" className="btn btn-primary">hello@bebe.studio <span className="arrow">→</span></a>
            <a href="https://arqicraft.com" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
              See arqicraft live <span className="arrow">↗</span>
            </a>
          </div>
        </div>
      </div>

      <footer className="footer">
        <div className="wrap footer-inner">
          <div className="footer-brand">
            <span className="logo-word">bebe<span className="logo-dot">.</span></span>
            <p>A software studio. We ship our own products and build custom software for teams we believe in.</p>
            <span className="footer-copy">© {new Date().getFullYear()} bebe studio. All rights reserved.</span>
          </div>
          <div className="footer-cols">
            <div>
              <h4>Studio</h4>
              <a href="#studio">About</a><a href="#team">Team</a><a href="#careers">Careers</a>
            </div>
            <div>
              <h4>Products</h4>
              <a href="https://arqicraft.com" target="_blank" rel="noopener noreferrer">arqicraft ↗</a>
              <a href="#work">HELM</a><a href="#work">SCOUT</a>
            </div>
            <div>
              <h4>Connect</h4>
              <a href="mailto:hello@bebe.studio">Email</a><a href="#contact">X / Twitter</a><a href="#contact">LinkedIn</a>
            </div>
          </div>
        </div>
      </footer>
    </section>
  );
}

Object.assign(window, { Team, Careers, Contact });