{
/* ============================================================
   Content Stack Lab — About Page
   ============================================================ */
const { useEffect } = React;
const { Button } = window.ContentStackLabDesignSystem_cbb53c;
const Arrow = window.Arrow;
const admin = window.CSLAdmin || {};
const aboutHero = (admin.heroes && admin.heroes.about) || {};
const aboutCta = (admin.ctas && admin.ctas.about && (admin.ctas.about.main || admin.ctas.about["start-call"])) || {};

const story = [
  "I spent my early career figuring out how organizations talk to their customers, to their people, and to the world. Different industries, different challenges, but the same lesson every time: most companies have no idea how to tell their own story.",
  "So, I started telling it for them.",
  "I built one of Pakistan's most active entrepreneurship ecosystems at TiE Lahore: 200+ events, 10,000+ attendees, and a network of mentors, investors, and founders who needed someone to make the noise make sense.",
  "I built the entire communications department from scratch at NetSol Technologies, shaped how their CEO showed up in the market, and launched NSPIRE, Pakistan's first IT business incubator from concept to curriculum to launch.",
  "At Fatima Group, I modernized communications, led a rebrand of their packaging division, and reimagined their flagship MTO program from Coffee with Fatima to Empower to Lead, giving their most prestigious HR initiative a brand identity that matched its ambition.",
  "At Sapphire Finishing Mills, I repositioned the company for international markets, launched CSR and sustainability programs that won consecutive NFEH awards, and initiated a group-wide brand identity revamp.",
  "Two legacy industrial organizations. Same challenge: give them a modern voice.",
  "I took that playbook international, leading marketing and communications for B2B tech clients across the US and UK at Message Muse, then building the Epiphany brand around 20+ emerging tech, gaming, and entrepreneurship initiatives, including curating Ten18, an award-winning international conference.",
  "And then came the work that made everything click: launching B2B tech products. OTNexus in OT cybersecurity. Sentinel EHS in industrial compliance. Irinatech Digital in enterprise AI across three countries. I've taken multiple tech brands from zero to qualified pipeline, and I've sat inside the industrial companies those products sell to.",
  "That's why Content Stack Lab exists. The more technical the company, the worse the marketing. Someone needs to sit between the engineers and the market and translate. That someone is me."
];

const speaking = [
  ["Moderator, Fireside Chat", "Count Her In: Accelerating Gender Equality Through Economic Empowerment at Standard Chartered Bank, hosted by Innoventures Global", "2024"],
  ["Moderator, Panel", "Demystifying the Gaming & Creative Industry for Investors and Financial Services Providers at Ten18 Conference", "2023"],
  ["Moderator", "Flatten the Curve for Climate Change on Earth Day, Australia Awards", "2020"],
  ["Panelist", "Biodiversity Conservation in South and West Asia on World Environment Day, Australia Awards", "2020"],
  ["Speaker", "Is Climate Change Real? on World Environment Day, Pakistan-US Alumni Network", "2019"]
];

const recognition = [
  ["US State Department, IVLP", "Selected for International Visitor Leadership Program, Women Entrepreneurs - Drivers of Economy, USA", "2023"],
  ["Climate Reality Leadership Corps", "Climate Certification, Brisbane, Australia", "2019"],
  ["Standard Chartered Women in Tech, SCWIT", "Selected for the 4-month incubation program, recognizing My Organising Stories as a high-potential women-led venture", "2019"],
  ["Australia Awards Regional Alumni Workshop", "First Runners-up, Sohni Dharti Climate Change Initiative, Bhutan", "2018"],
  ["Australia Awards", "Selected for Business Incubation Management Program, University of Queensland, Brisbane", "2017"],
  ["UNESCO-APEID", "Represented Pakistani Entrepreneurial Network, 3rd Meeting on Entrepreneurship Education, Malaysia", "2013"]
];

const whyWork = [
  {
    title: "I've sat in your chair",
    body: "17 years on the brand side means I don't give advice from the sidelines. I've run the campaigns, managed the budgets, and reported to the CEO.",
    icon: "chair",
    color: "#2e9bf6"
  },
  {
    title: "No junior handoffs",
    body: "You talk to me. You work with me. No bait-and-switch where a senior sells you and a junior delivers.",
    icon: "person",
    color: "#a87cf0"
  },
  {
    title: "Complex made clear",
    body: "Cybersecurity, OT/ICS, EHS, enterprise AI. I translate complex products into messaging buyers actually understand.",
    icon: "layers",
    color: "#96b41e"
  },
  {
    title: "Both sides of the table",
    body: "I've worked inside the tech companies and inside the industrial organizations they sell to. I know your product and your buyer's world.",
    icon: "scale",
    color: "#f050be"
  },
  {
    title: "AI-augmented, not AI-replaced",
    body: "I use modern AI tools to move faster and deliver more, but the thinking is human. Your brand deserves better than a prompt and a prayer.",
    icon: "spark",
    color: "#e5a23f"
  }
];

function AboutWhyIcon({ type }) {
  const common = { width: 30, height: 30, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  if (type === "chair") return <svg {...common}><path d="M6 11V8a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v3" /><path d="M5 11h14v6H5z" /><path d="M7 17v2" /><path d="M17 17v2" /></svg>;
  if (type === "person") return <svg {...common}><circle cx="9" cy="8" r="3" /><path d="M3 19a6 6 0 0 1 12 0" /><path d="m17 11 2 2 4-5" /></svg>;
  if (type === "layers") return <svg {...common}><path d="m12 3 9 5-9 5-9-5 9-5Z" /><path d="m3 12 9 5 9-5" /><path d="m3 16 9 5 9-5" /></svg>;
  if (type === "scale") return <svg {...common}><path d="m12 3 0 18" /><path d="m6 7 12 0" /><path d="m6 7-3 6h6l-3-6Z" /><path d="m18 7-3 6h6l-3-6Z" /></svg>;
  return <svg {...common}><path d="M12 3l1.7 5.2L19 10l-5.3 1.8L12 17l-1.7-5.2L5 10l5.3-1.8L12 3Z" /><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15Z" /></svg>;
}

function AboutHero() {
  return (
    <section className="about-hero dark-theme" id="top">
      <div className="wrap about-hero__grid">
        <div className="about-hero__copy reveal">
          <p className="eyebrow">About</p>
          <window.CSLRichDotTitle text={aboutHero.heading} fallback="About" />
          {aboutHero.subheading ? <p>{aboutHero.subheading}</p> : null}
        </div>
      </div>
    </section>
  );
}

function StudioIntro() {
  return (
    <section className="sec sec--sunken">
      <div className="wrap about-split">
        <div className="sec-head reveal">
          <p className="eyebrow">How it works</p>
          <h2>Lean, founder-led, AI-augmented<span className="dot">.</span></h2>
        </div>
        <div className="about-copy reveal">
          <p>Founded by Saira Ahmad after 17 years of doing this work inside companies from startups to industrial conglomerates and realizing the same pattern everywhere: brilliant companies struggling to communicate clearly. CSL was built to bridge that gap.</p>
          <p>You get one senior person who learns your business deeply and builds systems that last beyond the engagement.</p>
        </div>
      </div>
    </section>
  );
}

function WhyWorkWithMe() {
  return (
    <section className="sec sec--sunken about-why-work">
      <div className="wrap">
        <div className="sec-head reveal">
          <p className="eyebrow">Why work with me</p>
          <h2>Here's what's different, and why it matters<span className="dot">.</span></h2>
        </div>
        <div className="about-why-work__grid reveal">
          {whyWork.map((item) => (
            <article className="about-why-work__card" key={item.title}>
              <div className="about-why-work__icon" style={{ background: item.color }}>
                <AboutWhyIcon type={item.icon} />
              </div>
              <h3>{item.title}</h3>
              <p>{item.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FounderStory() {
  return (
    <section className="sec sec--tint" id="saira">
      <div className="wrap about-story">
        <div className="sec-head reveal">
          <p className="eyebrow">The person behind the practice</p>
          <h2>From boardrooms to brand launches and everything in between<span className="dot">.</span></h2>
          <p>When I position your product for technical buyers, I'm not guessing what they care about. I've been in their boardrooms.</p>
        </div>
        <div className="about-story__content">
          <div className="about-story__body reveal">
            {story.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          <div className="about-story__media reveal">
            <image-slot id="about-story-photo" src="uploads/img2.jpeg" shape="rect" placeholder="Drop story photo" fit="cover"></image-slot>
          </div>
        </div>
        <div className="about-tags reveal">
          <span>OT Cybersecurity</span><span>Industrial IoT</span><span>EHS / compliance tech</span><span>Enterprise AI</span><span>Manufacturing</span><span>Textiles</span><span>Education</span><span>Startup ecosystems</span><span>Sustainability / climate tech</span>
        </div>
      </div>
    </section>
  );
}

function BeyondDeck() {
  return (
    <section className="sec">
      <div className="wrap about-split">
        <div className="sec-head reveal">
          <p className="eyebrow">Beyond the strategy deck</p>
          <h2>The stuff that does not fit on a LinkedIn profile<span className="dot">.</span></h2>
        </div>
        <div className="about-copy reveal">
          <p>I host <a href="https://youtube.com/@myorganisingstories"><strong>The In Between Moment</strong></a>, a podcast about resilience, reinvention, and the real conversations people have between the big moments. I built it from scratch: concept, name, set design, guest curation, production, post-production, and social media strategy. Every episode, end to end.</p>
          <p>The podcast grew out of <a href="https://www.facebook.com/groups/myorganisingstories"><strong>My Organising Stories</strong></a>, a Facebook community I built to over 40,000 women focused on organizing life, financial independence, and finding purpose. When I tell clients I understand audience building and content systems, this is what I mean. I've done it for myself, not just for brands.</p>
        </div>
      </div>
    </section>
  );
}

function TimelineSection({ eyebrow, title, items }) {
  return (
    <section className="sec sec--sunken">
      <div className="wrap about-timeline">
        <div className="sec-head reveal">
          <p className="eyebrow">{eyebrow}</p>
          <h2>{title}<span className="dot">.</span></h2>
        </div>
        <div className="about-list reveal">
          {items.map(([role, detail, year]) => (
            <article className="about-list__row" key={role + detail}>
              <span className="about-list__year">{year}</span>
              <div>
                <h3>{role}</h3>
                <p>{detail}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutCTA() {
  return (
    <div className="about-card-footer dark-theme" id="contact">
      <div className="wrap about-card-footer__inner">
        <div className="sec-head reveal">
            <p className="eyebrow">Not Sure Where to Start?</p>
          {aboutCta.heading ? <h2>{aboutCta.heading}<span className="dot">.</span></h2> : null}
          {aboutCta.subheading ? <p>{aboutCta.subheading}</p> : null}
        </div>
        <div className="reveal">
          <window.ConsultationCard slotId="about-consultation-card-avatar" />
        </div>
      </div>
    </div>
  );
}

function AboutPage() {
  window.useReveal();
  useEffect(() => window.scrollTo(0, 0), []);
  return (
    <div className="about-page-shell">
      <window.Header />
      <main className="dark-theme">
        <AboutHero />
        <StudioIntro />
        <FounderStory />
        <BeyondDeck />
        <TimelineSection eyebrow="On stage" title="Speaking and moderating" items={speaking} />
        <TimelineSection eyebrow="International recognition" title="Selected, nominated, and recognized" items={recognition} />
        <WhyWorkWithMe />
        <AboutCTA />
      </main>
      <div className="dark-theme">
        <window.SiteFooter />
      </div>
    </div>
  );
}

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