/* eslint-disable */
// About page, Partnering / Story / Team / FAQs

const TEAM = [
{ name: "Janey Treleaven", role: "Founder & CEO", slot: "team-janey",
  email: "janey@intelligenceassist.com.au", phone: "(+61) 410 504 966",
  bio: [
    "Janey is a seasoned strategist and transformation leader with a passion for leveraging artificial intelligence to drive business growth and innovation. With over two decades of experience in the Financial Services, Technology, and Payments sectors, she is adept at solving complex problems and delivering outstanding results. Janey\u2019s journey in the corporate world has been diverse and enriching, with executive roles at the Commonwealth Bank of Australia and Macquarie Group, where she honed her skills in project management, governance, and strategic workforce planning.",
    "Her tenure as the first female Rear Commodore of the Cruising Yacht Club of Australia further underscores her leadership capabilities and her commitment to fostering diversity and inclusion.",
    "At Intelligence Assist, Janey brings her wealth of experience to the fore, helping small and medium-sized businesses understand and harness the power of AI. She focuses on analysing their existing operational models and processes, identifying areas where AI can provide efficiencies. Her approach is technology-agnostic, offering detailed training, guidance, and adoption strategies rather than promoting specific tools. Janey\u2019s expertise extends beyond just offering solutions; she is dedicated to easing the fear of AI, empowering businesses to stay competitive without fearing technological advancement or job displacement.",
    "Her work at Intelligence Assist is about driving forward a technologically enabled future \u2014 one business at a time."
  ] },
{ name: "Issey Stevens", role: "Head of AI Solutions Engineering", slot: "team-harriet",
  email: "issey@intelligenceassist.com.au", phone: "(+61) 414 620 969",
  bio: [
    "Issey Stevens is a driven young professional fascinated by emerging technologies and their potential within business. Growing up in London, England, Issey holds a Bachelor of Science degree specialising in Computer Science and Mathematics from the University of Manchester. After graduating, Issey began research and development in rising technologies, with a focus on Artificial Intelligence, realising its possibilities and capabilities. She started working on custom chatbots tailored to individual company needs, creating private agents that could learn and grow from business data. This is where she discovered her love and passion for generative AI and understanding how it can enhance success across all industries.",
    "Working with Intelligence Assist, Issey is evaluating different AI tools and platforms against specific criteria, identifying appropriate AI-driven solutions for client requirements. Following this evaluation, Issey will support the implementation and optimisation of these selected tools, engineering client-tailored solutions. This role involves consistently staying up-to-date with the latest AI trends, tools, and technologies to inform valuable decision-making.",
    "In the same vein as her fascination with diverse innovation, Issey has moved from London to Sydney to explore a new and different lifestyle. She has quickly settled in, balancing her social and work life whilst also finding plenty of time to enjoy the Australian sunshine. Her adaptability, passion, and knowledge make her a valuable addition to Intelligence Assist and the consultancy industry."
  ] },
{ name: "Nick Drummond", role: "AI Associate Engineer", slot: "team-mo",
  email: "nick@intelligenceassist.com.au", phone: "+61 416 275 627",
  bio: [
    "Nick Drummond is a technically driven and solutions-focused professional with a passion for building intelligent systems that solve real-world problems. Originally from New Zealand, Nick is currently completing his bachelor\u2019s degree in Software Engineering at the University of New South Wales, where he has developed a strong foundation in software architecture, systems design, and the principles underpinning modern artificial intelligence.",
    "Nick\u2019s interest in AI stems from a desire to understand how systems can be engineered to be robust, scalable, and genuinely useful. He is drawn to the practical application of AI technologies \u2014 exploring how intelligent solutions can be designed and deployed to create meaningful impact across industries. This technical curiosity, combined with an engineering-first mindset, shapes his approach to problem-solving both in and out of the workplace.",
    "As an AI Engineering Associate at Intelligence Assist, Nick supports the development of AI-driven solutions tailored to client needs, contributing to the design and implementation of intelligent agents and data pipelines. His role involves staying closely attuned to the rapidly evolving AI landscape, ensuring that clients benefit from the most effective and current tools available. Nick\u2019s software engineering background brings a structured, disciplined approach to building practical, high-quality solutions.",
    "Outside of work and study, Nick is a competitive sailor who has represented both New Zealand and Australia at international level. He is also a regular competitor in the iconic Sydney to Hobart Yacht Race \u2014 one of the world\u2019s most infamously demanding offshore races. The same focus, resilience, and strategic thinking that defines his sailing carries through to his professional life, making him a sharp and dependable member of the Intelligence Assist team."
  ] },
{ name: "Arsh Zair", role: "Principal Consultant - AI & Technology", slot: "team-kate" },
{ name: "Alma Spies-Kostrup", role: "AI Associate Engineer", slot: "team-libby" },
{ name: "Nozomi Nemoto", role: "Engineering Intern", slot: "team-6" }];


function AboutScreen({ go, t }) {
  const [open, setOpen] = React.useState(null);
  const [cols, setCols] = React.useState(4);
  const gridRef = React.useRef(null);
  React.useEffect(() => {
    const measure = () => {
      const el = gridRef.current;
      if (!el) return;
      const n = getComputedStyle(el).gridTemplateColumns.split(" ").filter(Boolean).length;
      if (n) setCols(n);
    };
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, []);
  return (
    <div data-screen-label="14 About">
      {/* HERO, navy slab */}
      <section className="section section--ink" style={{ background: "var(--ia-dark-blue)", color: "#fff", paddingTop: 96, paddingBottom: 96, position: "relative", overflow: "hidden" }}>
        {/* Base graphic crops in corners */}
        <div aria-hidden style={{
          position: "absolute", top: -60, left: -60, width: 380, height: 380,
          background: "url(assets/graphics/ia-base-graphic-full.png) center/cover no-repeat",
          opacity: .35,
          maskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)",
          WebkitMaskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)"
        }} />
        <div aria-hidden style={{
          position: "absolute", bottom: -80, right: -80, width: 420, height: 420,
          background: "url(assets/graphics/ia-base-graphic-full.png) center/cover no-repeat",
          opacity: .25,
          maskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)",
          WebkitMaskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)",
          transform: "rotate(180deg)"
        }} />

        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          <Crumbs items={["Intelligence Assist", "About"]} />
          <h1 className="h-display" style={{ marginTop: 22, maxWidth: "22ch" }}>
            Welcome to <em>Intelligence Assist.</em>
          </h1>
          <p className="lede" style={{ marginTop: 22, maxWidth: 640 }}>
            Australia's friendly AI partner for small &amp; medium businesses, the people,
            the story, and the way we work alongside you.
          </p>
        </div>
      </section>

      {/* BLOCK 1, Partnering for Success */}
      <section className="section section--paper" style={{ paddingTop: 24, paddingBottom: 80 }}>
        <div className="container">
          <div className="about-block">
            <div className="about-block-media">
              <image-slot id="about-partner" placeholder="Photo: team in conversation with a client" shape="rect" fit="cover" style={{ width: "100%", height: "100%" }} />
            </div>
            <div className="about-block-body">
              <Eyebrow>Partnering for Success</Eyebrow>
              <h2 className="h-section" style={{ marginTop: 10, fontSize: 40 }}>Tailored AI guidance.</h2>
              <p className="lede" style={{ marginTop: 20 }}>
                We see ourselves as your partner in AI adoption, here to guide you
                through the process, from prioritisation to implementation and beyond. Our
                team works closely with you to understand your business context and craft
                a tailored approach.
              </p>
              <p style={{ margin: "16px 0 0", fontSize: 16, color: "#4A4F60", lineHeight: 1.6 }}>
                Whether you're just starting to explore AI or scaling existing initiatives,
                our strategic approach and comprehensive roadmap make sure your AI journey
                delivers the results you came for.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                <Button variant="primary" onClick={() => go("contact")}>
                  Contact us today <Icon name="arrow-right" size={14} className="arrow" />
                </Button>
                <Button variant="secondary" onClick={() => go("about-pmv")}>
                  Purpose, mission &amp; values
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* BLOCK 2, Our Story */}
      <section className="section section--white" style={{ paddingTop: 64, paddingBottom: 80 }}>
        <div className="container">
          <div className="about-block about-block--reverse">
            <div className="about-block-media">
              <image-slot id="about-story" placeholder="Photo: Janey, or an early IA workshop" shape="rect" fit="cover" style={{ width: "100%", height: "100%" }} />
            </div>
            <div className="about-block-body">
              <Eyebrow>Our Story</Eyebrow>
              <h2 className="h-section" style={{ marginTop: 10, fontSize: 40 }}>
                Born from experience, <em>built for small businesses.</em>
              </h2>
              <p className="lede" style={{ marginTop: 20 }}>
                The motivation behind establishing Intelligence Assist is rooted in personal
                experience. Janey's parents, small business owners themselves, were always
                eager to adopt the latest technologies, but they struggled with finding
                the right guidance.
              </p>
              <p style={{ margin: "16px 0 0", fontSize: 16, color: "#4A4F60", lineHeight: 1.6 }}>
                While earlier tech advancements could be appended, AI presents a unique
                challenge: it requires deep integration with existing business models, a complexity that's not always easy for small businesses to navigate.
              </p>
              <p style={{ margin: "16px 0 0", fontSize: 16, color: "#4A4F60", lineHeight: 1.6 }}>
                Recognising the demanding schedules of small business operators, and
                the value of real human interaction, Janey founded IA. We go beyond
                being AI specialists or prompt engineers. We're process people. Our
                approach is simple: <strong style={{ color: "var(--ink)", fontWeight: 600 }}>talk, understand, identify, and optimise.</strong>
              </p>
              <p style={{ margin: "16px 0 0", fontSize: 16, color: "#4A4F60", lineHeight: 1.6 }}>
                At IA, we don't just help you adopt AI, we empower you to reinvent
                and scale, giving you a competitive edge in today's business world.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* BLOCK 3, Team */}
      <section className="section section--paper" style={{ paddingTop: 64, paddingBottom: 80 }}>
        <div className="container">
          <div className="section-head section-head--center" style={{ marginBottom: 56 }}>
            <Eyebrow>The team</Eyebrow>
            <h2 className="h-section" style={{ textAlign: "center", maxWidth: "20ch" }}>AI Leaders &amp; Technical Experts</h2>
          </div>
          <div className="team-grid" ref={gridRef}>
            {(() => {
            const openIndex = open ? TEAM.findIndex((m) => m.slot === open.slot) : -1;
            const rowEnd = openIndex >= 0 ? Math.min(TEAM.length - 1, Math.floor(openIndex / cols) * cols + (cols - 1)) : -1;
            return TEAM.map((p, i) => {
              const openable = Array.isArray(p.bio) && p.bio.length > 0;
              const isOpen = open && open.slot === p.slot;
              return (
                <React.Fragment key={p.slot}>
                  <figure className={`team-card ${openable ? "team-card--clickable" : ""} ${isOpen ? "team-card--active" : ""}`}>
                    <div className="team-photo">
                      <image-slot id={p.slot} placeholder={`Photo of ${p.name}`} shape="rect" fit="cover" style={{ width: "100%", height: "100%" }} />
                    </div>
                    <figcaption>
                      <div className="team-name">{p.name}</div>
                      <div className="team-role">{p.role}</div>
                      {openable &&
                      <button className="team-readbio" onClick={() => setOpen(isOpen ? null : p)}>
                        {isOpen ? "Hide bio" : "Read bio"} <Icon name={isOpen ? "chevron-up" : "arrow-right"} size={13} className="arrow" />
                      </button>
                      }
                    </figcaption>
                  </figure>
                  {open && i === rowEnd &&
                  <div className="team-unfold" key={open.slot}>
                    <div className="team-unfold-inner">
                      <div className="team-unfold-card">
                        <button className="team-modal-close" onClick={() => setOpen(null)} aria-label="Close">
                          <Icon name="x" size={20} />
                        </button>
                        <div className="team-unfold-grid">
                          <div className="team-modal-body">
                            <div className="team-role">{open.role}</div>
                            <h3 className="team-modal-name">{open.name}</h3>
                            <div className="team-modal-bio">
                              {open.bio.map((para, j) => <p key={j}>{para}</p>)}
                            </div>
                            {(open.email || open.phone) &&
                            <div className="team-modal-contact">
                              <div className="tm-contact-h">Contact</div>
                              {open.email &&
                              <a href={`mailto:${open.email}`} className="tm-contact-row">
                                <Icon name="mail" size={16} color="var(--ia-blue)" /> {open.email}
                              </a>
                              }
                              {open.phone &&
                              <a href={`tel:${open.phone.replace(/[^0-9+]/g, "")}`} className="tm-contact-row">
                                <Icon name="phone" size={16} color="var(--ia-blue)" /> {open.phone}
                              </a>
                              }
                              {open.slot === "team-janey" &&
                              <Button variant="primary" onClick={() => { setOpen(null); go("contact"); }} style={{ marginTop: 6 }}>
                                Book time to meet <Icon name="arrow-right" size={14} className="arrow" />
                              </Button>
                              }
                            </div>
                            }
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  }
                </React.Fragment>
              );
            });
          })()}
          </div>
          <div className="team-credit">
            <span>Team headshots created with</span>
            <a className="team-credit-brand" href="https://headshotpro.com" target="_blank" rel="noopener noreferrer">
              <img src="https://www.google.com/s2/favicons?sz=128&domain=headshotpro.com" alt="" />
              HeadshotPro
            </a>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section section--white" style={{ paddingTop: 64, paddingBottom: 80 }}>
        <div className="container">
          <PageFAQ
            pageId="about"
            go={go}
            eyebrow="Common questions"
            title="About Intelligence Assist"
          />
        </div>
      </section>

      {/* CTA */}
      <section className="section section--paper" style={{ paddingTop: 0, paddingBottom: 64 }}>
        <div className="container">
          <OffRamp
            label="Got a question we haven't answered?"
            title={<span>Book a 30-minute scoping call, no deck, no pitch. Or start with an <strong>AI Blueprint</strong>.</span>}
            cta="Book a Blueprint"
            onCta={() => go("blueprint")}
            variant="primary"
          />
        </div>
      </section>
    </div>);

}

window.AboutScreen = AboutScreen;