/* 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.jpg", 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">
          <span className="eyebrow">The team</span>
          <h2>Your Fractional COO's</h2>
          <p className="lede">The systems we build for clients are the same ones that let us deliver consistent, reliable results with speed. 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 stats-section" data-screen-label="09 Stats">
      <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">100<span className="unit">k+</span></div>
            <div className="lbl">Templates sold</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 is Systemizers, and how does it work?", a: "Systemizers is a community where you get the Business OS (the same Notion + Claude system we build for our agency clients excluding anything custom) plus the courses, coaching calls and community support to set it up yourself. When you join you get a 1:1 onboarding call where Chris helps you set it up, then it's yours to use and adapt as you scale. You do this through the systems and automations you can duplicate from the community, the courses inside and the weekly group coaching calls to ask your questions and get support." },
  { q: "What if I'd rather have it done for me?", a: "Systemizers is do-it-yourself, but if you'd rather want 1:1 coaching or where we build your entire business AI system for you as well as train your team on it, then just book a strategy call below and we'll map out what systems and automations your business actually needs." },
  { q: "How much time does this take?", a: "You can get the core system set up in your first 30 days, starting with your onboarding call. From there it's up to you how fast you go. The courses and coaching are there so you can adapt it at your own pace, and the more you put in, the more time it gives you back." },
  { q: "I'm not technical, and I've tried Notion before.", a: "Most Notion attempts fail because the workspace was never connected to the business. You're not starting from a blank page, you get the full system pre-built, a 1:1 onboarding call to set it up around how you work, and a Notion course that shows you how to use and adapt it. If you can use Notion at a basic level and show up to the calls, you can run this." },
  { q: "I don't have time for another course.", a: "This isn't just a course, it's a system you can actually use. The courses are there to help you master Notion and Claude and adapt the system as you grow, but the value is the Business OS itself plus the coaching and community around it." },
  { q: "Do I still pay for Notion and Claude separately?", a: "Yes. You use your own Notion and Claude accounts, both with low-cost tiers to start on. Systemizers gives you the system, courses and coaching that make them work together, we don't control any of your data." },
  { q: "Do I need to use Claude, or can I use another AI?", a: "Claude is the best model to build AI automations with. It's what we recommend, what we build with, and what the AI courses in the community are about. We also believe Anthropic, the company behind Claude, is growing AI in a safer and more ethical way than alternatives, so it's what we encourage you to use. You're welcome to swap in another tool, but the courses and automations are built around Claude, so converting them is on you." }];

  const [open, setOpen] = useState(-1);
  return (
    <section className="section" id="faq" data-screen-label="10 FAQ">
      <div className="shell">
        <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() {
  const included = [
  { ic: "layout-dashboard", name: "The Business OS Dashboard", desc: "The Notion workspace we install for our agency clients.", val: "$3,000" },
  { ic: "phone-call", name: "1:1 Setup & Implementation Call w/ Chris", desc: "I personally help you install the Business OS into your business.", val: "$1,000" },
  { ic: "users", name: "Weekly Group Coaching w/ Chris", desc: "Coaching calls with Chris to get ongoing support after the install.", val: "$2,600/yr" },
  { ic: "calendar-plus", name: "Monthly Drops & Workshops", desc: "New systems & automations along with a workshop each month.", val: "$1,297/yr" },
  { ic: "graduation-cap", name: "Notion AIOS Course", desc: "How to use and adapt the AIOS for your business.", val: "$997" },
  { ic: "book-open", name: "Notion & Claude Course", desc: "Master Notion & Claude even if you're a complete beginner.", val: "$997" },
  { ic: "sparkles", name: "Claude Cowork Skills", desc: "Plug & play Claude skills to automate your system.", val: "$750" },
  { ic: "blocks", name: "n8n Automations", desc: "Plug & play n8n automations for data, invoices, meetings, etc.", val: "$750" },
  { ic: "heart-handshake", name: "The Systemizers Community", desc: "Private Skool community of other founders on the same path.", val: "$497" }];

  const join = (e) => {
    if (window.gtag) window.gtag('event', 'cta_click', { event_category: 'pricing', event_label: 'join_systemizers_founding' });
    if (window.openSystemizersJoin) { e.preventDefault(); window.openSystemizersJoin(); }
  };

  return (
    <>
    <section className="section founding-section" id="founding" data-screen-label="07 Pricing">
      <div className="shell">
        <div className="section-head reveal">
          <span className="eyebrow">Founding members</span>
          <h2>Join the community</h2>
          <p className="lede"></p>
        </div>

        <div className="price-card reveal">
          <div className="pc-top">
            <span className="pc-badge"><i data-lucide="rocket"></i> Founding member launch</span>
            <div className="pc-anchor">Our agency clients pay <s>$7,000+</s> for this system</div>
            <div className="pc-price"><span className="pc-cur">$</span>500<span className="pc-per">/ year</span></div>
            <div className="pc-price-sub">Rate locked. Doubles after 30 members.</div>
            <a className="fo-cta" href="https://www.skool.com/systemizers/about" target="_blank" rel="noopener noreferrer" onClick={join}>
              Join Systemizers
              <svg className="arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
            </a>
            <div className="fg-trust pc-trust">
              <span><i data-lucide="lock"></i> Secure checkout</span>
              <span><i data-lucide="crown"></i> Founding rate locked</span>
              <span><i data-lucide="shield-check"></i> 30-day guarantee</span>
            </div>
            <div className="pc-secure">Secure payment via <span style={{ color: "var(--fg-1)", fontWeight: "400" }}>Skool</span></div>
            <div className="pc-terms">T&C's apply.</div>
          </div>

          <div className="pc-section pc-section-last">
            <div className="pc-sec-head pc-sec-head-row">
              <span>Everything included</span>
            </div>
            <ul className="pc-incl">
              {included.map((row, i) => <li key={i}>
                  <span className="pc-ico"><i data-lucide={row.ic}></i></span>
                  <span className="pc-incl-main">
                    <span className="pc-incl-name">{row.name}</span>
                    <span className="pc-incl-desc">{row.desc}</span>
                  </span>
                </li>
                )}
            </ul>
          </div>

          <div className="pc-guarantee">
            <span className="pc-guarantee-ico"><i data-lucide="shield-check"></i></span>
            <div className="pc-guarantee-body">
              <span className="pc-guarantee-title">The 30-Day Install Guarantee</span>
              <span className="pc-guarantee-desc">If your business isn't running from one Notion system 30 days after<br />the install call, I'll work with you 1:1 until it is. See T&amp;C's to learn more.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
    </>);
}

function PricingCTA() {
  const join = (e) => {
    if (window.gtag) window.gtag('event', 'cta_click', { event_category: 'pricing', event_label: 'join_systemizers_final_cta' });
    if (window.openSystemizersJoin) { e.preventDefault(); window.openSystemizersJoin(); }
  };
  return (
    <section className="section pricing-cta-section" data-screen-label="13 Final CTA">
      <div className="shell">
        <div className="final-glow reveal">
          <span className="pc-badge"><i data-lucide="rocket"></i> Founding member launch</span>
          <h2>Ready to make more
while working less?</h2>
          <p>Only the first 10 founding members get the AIOS installed for them in 30 days at this rate. Once the 10 spots is filled,
the price doubles. Join now to get in at a massive discount.</p>
          <div className="fg-price-block">
            <div className="pc-anchor">Our agency clients pay <s>$7,000+</s> for this system</div>
            <div className="pc-price"><span className="pc-cur">$</span>500<span className="pc-per">/ year</span></div>
            <div className="pc-price-sub">Locked for life. Doubles after 30 members.</div>
          </div>
          <a className="fo-cta" href="https://www.skool.com/systemizers/about" target="_blank" rel="noopener noreferrer" onClick={join}>
            Join Systemizers
            <svg className="arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
          </a>
          <div className="fg-trust">
            <span><i data-lucide="lock"></i> Secure checkout</span>
            <span><i data-lucide="crown"></i> Founding rate locked for life</span>
            <span><i data-lucide="shield-check"></i> 30-day guarantee</span>
          </div>
          <div className="pc-secure">Secure payment via <span style={{ color: "var(--fg-1)", fontWeight: "400" }}>Skool</span></div>
          <div className="pc-terms">T&C's apply.</div>
        </div>
        <div className="bonus-foot bonus-ask reveal">
          <h3 className="bonus-ask-title">Still have questions?</h3>
          <button className="btn btn-book" onClick={() => window.openSystemizStrategyCall && window.openSystemizStrategyCall()}>
            Book a free AIOS strategy call
            <i data-lucide="calendar"></i>
          </button>
        </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">Join the Weekly Newsletter</span>
            <button type="button" tabIndex={-1}>Subscribe</button>
          </a>
        </div>
        <div className="footer-col">
          <h5>The AIOS</h5>
          <ul>
            <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>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Resources</h5>
          <ul>
            <li><a href="https://www.youtube.com/@chrisnotion" target="_blank" rel="noopener noreferrer">YouTube</a></li>
            <li><a href="https://systemiz.beehiiv.com/" target="_blank" rel="noopener noreferrer">Newsletter</a></li>
            <li><a href="https://www.skool.com/notionwizards" target="_blank" rel="noopener noreferrer">Notion Wizards</a></li>
            <li><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="about.html">About me</a></li>
            <li><a href="terms.html">Terms &amp; Conditions</a></li>
            <li><a href="https://mail.google.com/mail/?view=cm&amp;fs=1&amp;to=chris@systemiz.com" target="_blank" rel="noopener">Contact</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Systemiz · systemiz.com</span>
      </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, PricingCTA, Footer, BookModal });