/* Systemiz site — Founders, Stats, FAQ, Final CTA, Footer */

function Founders() {
  const team = [
  { name: "Chris Punt", role: "CEO · Founder", bio: "Certified Notion Expert & Ambassador. Spent 4 years becoming one of the best Notion builders in the world with over 100k+ Notion templates sold. Helped 100's of founders stop playing calendar Tetris with their time and actually get their business out of their head and into a system. This system is packaged into the AIOS product that Systemiz now deploys in 30 days. Based in Cape Town where he builds products, trains teams, and is one Claude conversation away from replacing himself with AI.", initials: "CP", photo: "assets/chris-founder.png", links: [{ type: "youtube", href: "https://www.youtube.com/@chrisnotion" }, { type: "linkedin", href: "https://www.linkedin.com/in/chrispunt/" }, { type: "skool", href: "https://www.skool.com/@chrispunt" }] },
  { name: "Jack Ward", role: "COO · Co-founder", bio: "Data scientist turned operations strategist. 7 years of experience in AI, automations and making business data visible, long before it became trendy on LinkedIn. Leads every AIOS project, turning the founder's chaos into a structured system. Taking businesses apart and putting them back together isn't his job description, it's just what he does for fun. Operates from Bali, thinks in numbers, and sleeps fine knowing your automations are running.", initials: "JW", photo: "assets/jack-founder.png", links: [{ type: "linkedin", href: "https://www.linkedin.com/in/jack-ward-/" }] },
  { name: "Yolita Panova", role: "CSM · Community", bio: "The person who makes sure a company obsessed with systems doesn't forget about the people using them. BSc Psychology and 8 years studying consciousness, human potential, and what it actually means to be human in a world of AI. Runs community, onboarding, and everything at Systemiz that can't be automated. Ensures your team operates 10x more effectively with AI instead of being replaced by it. Existential about the future of AI, but practical enough to organize it in Notion.", initials: "YP", photo: "assets/yolita-founder.png", links: [] }];

  const linkIcons = { youtube: "youtube", linkedin: "linkedin", twitter: "twitter", instagram: "instagram" };
  // Lucide deprecated brand icons — fall back to generic glyphs that exist
  const safeIcon = { youtube: "play", linkedin: "briefcase", twitter: "at-sign", instagram: "camera" };
  return (
    <section className="section" id="founders" data-screen-label="08 Founders">
      <div className="shell">
        <div className="section-head reveal" data-comment-anchor="5c3203b2de-div-15-9">
          <span className="eyebrow">The team</span>
          <h2>A lean team that <span className="dim">moves with speed.</span></h2>
          <p className="lede">We move fast because we run on our own AIOS. The systems and automations we build for clients are the same ones that let us deliver consistent, reliable results without growing the team. This is how we keep improving the product, by using it ourselves.

          </p>
        </div>
        <div className="founders reveal">
          {team.map((p, i) =>
          <div className="founder" key={i}>
              <div className="photo">
                {p.photo ?
              <img src={p.photo} alt={p.name} className="founder-photo-img" /> :
              <><span className="initials">{p.initials}</span>
                <span className="corner-mark">Photo · placeholder</span></>}
              </div>
              <div className="role">{p.role}</div>
              <div className="name">{p.name}</div>
              <p className="bio" style={{ whiteSpace: "pre-line" }}>{p.bio}</p>
              <div className="links">
                {p.links.map((l) => {
              const t = typeof l === "string" ? l : l.type;
              const href = typeof l === "object" && l.href ? l.href : "#";
              const ext = href !== "#";
              return (
              <a key={t} href={href} {...(ext ? { target: "_blank", rel: "noopener noreferrer" } : {})} aria-label={t}>
                {t === "skool" ? <span className="sk-mark">Sk</span> : <i data-lucide={safeIcon[t]}></i>}
              </a>);
            })}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Stats() {
  return (
    <section className="section" data-screen-label="09 Stats" style={{ paddingTop: 0 }}>
      <div className="shell">
        <div className="stats reveal">
          <div className="stat">
            <div className="num">50<span className="unit">k+</span></div>
            <div className="lbl">SUBSCRIBERS</div>
          </div>
          <div className="stat">
            <div className="num">5<span className="unit">k+</span></div>
            <div className="lbl">Community</div>
          </div>
          <div className="stat">
            <div className="num">100<span className="unit">+</span></div>
            <div className="lbl">AUDITS</div>
          </div>
        </div>
      </div>
    </section>);

}

function FAQ() {
  const items = [
  { q: "What exactly is an AIOS?", a: "Our AI Operating System is a structured Notion backend that makes your whole business visible, with Claude woven in to automate the work on top of it. It consists of 6 layers: System, Context, Data, Intelligence, Automation, Optimization. These 6 layers turn the chaos in your head into a system that runs without you." },
  { q: "How long does it take?", a: "Your Founder AIOS is built in a 30-day sprint. Bringing your team onto it (Team OS) takes 1-3 months depending on your team size and the project scope. The ongoing Systemiz partnership runs as long as you want it to. The audit is where we map out what you need and how to start." },
  { q: "Who is this for?", a: "Founders running real businesses doing $10K+/month who are still the bottleneck in their own company. Whether it's just you and your VA, or you have a team of 50 or anything in between, if the reason the business can't scale is a lack of systems, this is for you." },
  { q: "Do you build it, or do I?", a: "Whichever makes most sense for the current stage of your business, that's what we'll map out on the free audit. We can custom build it for you or coach you through the process of adapting our AIOS to your own business. It depends on what you need, but all paths lead to the same outcome, only the delivery method and speed of implementation is different." },
  { q: "What does it cost?", a: "It depends on the path that fits your business, your team, and how you want to build. You'll get a clear number on the audit call, based on what you actually need, not a generic package price." },
  { q: "Why is the audit free?", a: "Because the right path depends entirely on your business. We spend the 30 minutes mapping your operations and finding your real bottleneck, then give you a clear recommendation. You leave with a plan and real value whether or not you work with us." },
  { q: "Why Notion and Claude?", a: "Notion is the system of record and the system of engagement: the structured backend that makes your business visible that you and the team use each day. Claude is the system of intelligence that automates the work inside the system. Together they're the 3 systems every AIOS needs." },
  { q: "Do I need to know Notion already?", a: "No. By the time your AIOS is live, you'll be thoroughly trained by us personally and understand your new system from the inside-out and how to adapt it. The same goes for your team." },
  { q: "How is this different from a Notion template?", a: "A template is a generic structure you duplicate and hope fits. We'll build an AIOS around your business, your offers, your team, and your decisions, with the Claude automation layer that actually runs it." },
  { q: "What about my data and privacy?", a: "Your AIOS lives in your Notion workspace and your Claude account. The data sits in your tools and your accounts, not ours so you have full control." },
  { q: "What happens once it's live?", a: "You run the business; the system runs underneath you. When you're ready, we bring your team onto it with Team OS, and the Partnership keeps it sharp and improving as your business grows and as Notion and Claude ship new capabilities every week." }];

  const [open, setOpen] = useState(-1);
  return (
    <section className="section" id="faq" data-screen-label="10 FAQ">
      <div className="shell" data-comment-anchor="72f231618a-div-87-7">
        <div className="section-head reveal">
          <span className="eyebrow">Common questions</span>
          <h2>Everything you'd ask <span className="dim">on a first call.</span></h2>
        </div>
        <div className="faq reveal">
          {items.map((it, i) =>
          <div className={`faq-item ${open === i ? 'open' : ''}`} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="faq-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 5v14M5 12h14" /></svg>
                </span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FinalCTA({ onBook, ctaCopy = "Book a Free AI OS Audit" }) {
  return (
    <section className="section" id="book" data-screen-label="11 Final CTA">
      <div className="shell">
        <div className="cta-final reveal">
          <h2>Let's see what <span className="accent">AI OS</span> your business needs.</h2>
          <p className="lede" data-comment-anchor="ea61bd386b-p-116-11">A free 30min audit where we map out your business operations, find your biggest bottleneck, and help you create a clear AIOS action plan to solve it, whether we work together or not.</p>
          <div className="row">
            <button className="btn btn-primary" onClick={onBook}>
              {ctaCopy}
              <svg className="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
            </button>
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer" data-screen-label="12 Footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <span className="nav-wm">SYSTE<span className="torii">M</span>IZ</span>
          <a className="footer-news" href="https://systemiz.beehiiv.com/" target="_blank" rel="noopener noreferrer">
            <span className="footer-news-label" data-comment-anchor="f251e40b02-input-137-13">Join the Weekly Newsletter</span>
            <button type="button" tabIndex={-1}>Subscribe</button>
          </a>
        </div>
        <div className="footer-col">
          <h5>The AIOS</h5>
          <ul data-comment-anchor="5db8c980de-ul-143-11">
            <li><a href="#workspace-demo">Inside the system</a></li>
            <li><a href="#layers">The 6 layers</a></li>
            <li><a href="#fit">Who it's for</a></li>
            <li><a href="#roadmap">The path forward</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Resources</h5>
          <ul>
            <li data-comment-anchor="b3c0cd38c1-li-153-13"><a href="https://www.youtube.com/@chrisnotion" target="_blank" rel="noopener noreferrer">YouTube</a></li>
            <li data-comment-anchor="e0c31349b0-li-154-13"><a href="https://systemiz.beehiiv.com/" target="_blank" rel="noopener noreferrer">Newsletter</a></li>
            <li data-comment-anchor="027a172089-li-155-13"><a href="https://www.skool.com/notionwizards" target="_blank" rel="noopener noreferrer">Notion Wizards</a></li>
            <li data-comment-anchor="75ae1094eb-li-156-13"><a href="https://lifeosdashboard.com/" target="_blank" rel="noopener noreferrer">Life OS</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Company</h5>
          <ul>
            <li><a href="#founders">The team</a></li>
            <li data-comment-anchor="aa2f3f62a9-li-163-13"><a href="#book" onClick={(e) => { if (window.openSystemizAudit) { e.preventDefault(); window.openSystemizAudit(); } }}>Book an audit</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Systemiz · systemiz.com</span>
        <div className="links">
          <a href="#">Contact</a>
        </div>
      </div>
    </footer>);
}

function BookModal({ open, onClose }) {
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = "hidden";
      const t = setTimeout(() => setLoaded(true), 1200);
      return () => {clearTimeout(t);document.body.style.overflow = "";};
    } else {
      setLoaded(false);
    }
  }, [open]);
  React.useEffect(() => {
    const onKey = (e) => {if (e.key === "Escape" && open) onClose();};
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  return (
    <div className={`book-overlay ${open ? 'open' : ''}`} onClick={onClose}>
      <div className="book-modal" onClick={(e) => e.stopPropagation()}>
        <div className="book-head">
          <div className="ttl"><span className="dot"></span>Free audit · 30 min · cal.com/systemiz</div>
          <button className="book-close" onClick={onClose} aria-label="Close">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M18 6L6 18M6 6l12 12" /></svg>
          </button>
        </div>
        <div className="book-iframe-wrap">
          {!loaded &&
          <div className="book-loading">
              <div className="spinner"></div>
              <div className="label">Loading your slot</div>
            </div>
          }
          {loaded && open && <CalEmbedMock />}
        </div>
      </div>
    </div>);

}

// Cal.com-style embedded scheduler (mock — drop in real Cal.com embed in production)
function CalEmbedMock() {
  const [picked, setPicked] = React.useState(null);
  const [confirmed, setConfirmed] = React.useState(false);
  const slots = ["09:00", "09:30", "10:00", "11:30", "13:00", "14:00", "15:30", "16:00"];
  const days = [
  { d: "Mon", n: 28, m: "Apr" },
  { d: "Tue", n: 29, m: "Apr" },
  { d: "Wed", n: 30, m: "Apr" },
  { d: "Thu", n: 1, m: "May" },
  { d: "Fri", n: 2, m: "May" }];

  const [day, setDay] = React.useState(2);
  React.useEffect(() => {if (window.lucide) window.lucide.createIcons();}, [picked, confirmed, day]);

  if (confirmed) {
    return (
      <div style={{ padding: 64, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 18, height: "100%", justifyContent: "center" }}>
        <div style={{ width: 64, height: 64, borderRadius: 999, background: "rgba(33,213,104,0.12)", border: "1px solid rgba(33,213,104,0.3)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--success)" }}>
          <i data-lucide="check" style={{ width: 28, height: 28 }}></i>
        </div>
        <div style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 32, color: "#fff", letterSpacing: "-0.02em" }}>You're booked.</div>
        <div style={{ fontFamily: "Montserrat", fontSize: 14, color: "var(--fg-3)", maxWidth: 380 }}>
          A calendar invite + Google Meet link is on its way to your inbox. We'll see you {days[day].d} {days[day].n} {days[day].m} at {picked}.
        </div>
        <div style={{ fontFamily: "Montserrat", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--fg-5)", marginTop: 12 }}>
          In the meantime · check your email
        </div>
      </div>);

  }

  return (
    <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", height: "100%" }}>
      <div style={{ padding: 28, borderRight: "1px solid var(--border-faint)", background: "rgba(0,0,0,0.3)" }}>
        <div style={{ fontFamily: "Montserrat", fontWeight: 600, fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--brand)" }}>Systemiz</div>
        <div style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 24, color: "#fff", marginTop: 12, letterSpacing: "-0.02em" }}>Founder AI OS Audit</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 20, fontFamily: "Montserrat", fontSize: 13, color: "var(--fg-3)" }}>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}><i data-lucide="clock" style={{ width: 14, height: 14, color: "var(--fg-4)" }}></i> 30 min</div>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}><i data-lucide="video" style={{ width: 14, height: 14, color: "var(--fg-4)" }}></i> Google Meet</div>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}><i data-lucide="globe" style={{ width: 14, height: 14, color: "var(--fg-4)" }}></i> Auto · your timezone</div>
        </div>
        <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--border-faint)", fontFamily: "Montserrat", fontSize: 12.5, lineHeight: 1.6, color: "var(--fg-4)" }}>
          We'll map your operations, show you the Sprint, and tell you whether it's a fit. No pitch deck.
        </div>
      </div>
      <div style={{ padding: 28, overflowY: "auto" }}>
        <div style={{ fontFamily: "Montserrat", fontWeight: 500, fontSize: 14, color: "#fff", marginBottom: 18 }}>Pick a day</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8, marginBottom: 28 }}>
          {days.map((dd, i) =>
          <button key={i} onClick={() => {setDay(i);setPicked(null);}}
          style={{
            background: day === i ? "var(--brand)" : "var(--ink-200)",
            border: `1px solid ${day === i ? "var(--brand)" : "var(--border-soft)"}`,
            borderRadius: 12, padding: "12px 8px",
            color: day === i ? "#fff" : "var(--fg-2)",
            cursor: "pointer", textAlign: "center",
            transition: "all 200ms"
          }}>
              <div style={{ fontFamily: "Montserrat", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.7 }}>{dd.d}</div>
              <div style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 22, marginTop: 4, letterSpacing: "-0.02em" }}>{dd.n}</div>
              <div style={{ fontFamily: "Montserrat", fontSize: 10, marginTop: 2, opacity: 0.6 }}>{dd.m}</div>
            </button>
          )}
        </div>
        <div style={{ fontFamily: "Montserrat", fontWeight: 500, fontSize: 14, color: "#fff", marginBottom: 14 }}>Pick a time</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
          {slots.map((s) =>
          <button key={s} onClick={() => setPicked(s)}
          style={{
            background: picked === s ? "var(--brand)" : "transparent",
            border: `1px solid ${picked === s ? "var(--brand)" : "var(--border-soft)"}`,
            borderRadius: 10, padding: "12px",
            color: picked === s ? "#fff" : "var(--fg-2)",
            fontFamily: "Montserrat", fontWeight: 500, fontSize: 13,
            cursor: "pointer", transition: "all 200ms"
          }}>
              {s}
            </button>
          )}
        </div>
        {picked &&
        <button onClick={() => setConfirmed(true)} style={{
          marginTop: 28, height: 48, width: "100%",
          background: "var(--brand)", color: "#fff",
          border: 0, borderRadius: 999,
          fontFamily: "Montserrat", fontWeight: 600, fontSize: 14, letterSpacing: "0.02em",
          cursor: "pointer", boxShadow: "0 8px 24px rgba(239,58,76,0.3)"
        }}>
            Confirm · {days[day].d} {days[day].n} {days[day].m} at {picked}
          </button>
        }
      </div>
    </div>);

}

Object.assign(window, { Founders, Stats, FAQ, FinalCTA, Footer, BookModal });