/* 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">
          <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 productized version of our HT agency offer to deliver massive value in a short amount of time to help founders get their freedom back. We help you install the whole system into your business in 30 days. You also get access to weekly coaching calls, a community for ongoing support, and courses inside helping you master Notion, Claude and N8N so you can adapt the system as you scale." },
  { q: "What if I'd rather have it built for me?", a: "As a founding member we install your AIOS for you in 30 days and will also provide team training when you're ready to move your team over to your Business AIOS. The courses, weekly coaching and community are there to help you run, adapt and get the most out of the system after the install. We do also offer custom system builds if you're already running a big operation and team, which we can discuss on the strategy call." },
  { q: "How much time does this take?", a: "We install the system together with you in 30 days, so the heavy lifting is done and practically no risk on your side. After that, you'll have an extra 10h/week freed up you can spend on growing your business or going through the courses inside to master Notion, Claude, n8n and the AI Operating System your business is now running on." },
  { 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. We install the system for you, built around how your business actually runs, with the Notion course showing 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: "That's exactly what a system fixes, it gives you your time back. We install the system into your business for you in 30 days, so the build is done. The course is there to help you master the tools (Notion & Claude) and adapt the system as you grow, with coaching calls and a community for extra support & accountability." },
  { 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 is the system, training and coaching that makes them work together, not a markup on the tools." },
  { 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 install for clients, and what the AI courses in the community is 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 course and automations are built around Claude, so converting them is on you. Everything you get is yours to rebuild in whatever tool you prefer." }];

  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 ApplicationsOpen({ onApply }) {
  const apply = () => {if (window.openSystemizStrategyCall) {window.openSystemizStrategyCall();} else if (onApply) {onApply();}};

  return (
    <section className="section apps-open-section" data-screen-label="07 Applications Open">
      <div className="shell">
        <div className="apps-open reveal">
          <span className="eyebrow">Founding access · Applications open</span>
          <h2 className="apps-open-title">Systemizers is <span className="accent">invitation-only</span> for founding members.</h2>
          <p className="apps-open-body">If you're a solopreneur ready to install your AI OS and get the leverage of a team without the team, apply for a Strategy Call. We'll diagnose your business, map your install, and if it's a fit, invite you in at founding rates.</p>
          <button type="button" className="fo-cta apps-open-cta" onClick={apply}>
            Apply to 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>
          </button>
          <div className="apps-open-note">10 founding spots. When they're gone, they're gone.</div>
        </div>
      </div>
    </section>);

}

// Founding-member launch callout. Lives between the Fit and Team sections and
// carries the #founding anchor that the nav "Pricing" link + CTAs point at.
function FoundingLaunch() {
  const apply = () => {if (window.openSystemizStrategyCall) window.openSystemizStrategyCall();};
  return (
    <section className="section pricing-cta-section" id="founding" data-screen-label="Founding launch">
      <div className="shell">
        <div className="final-glow reveal">
          <span className="pc-badge"><i data-lucide="rocket"></i> Founding member launch</span>
          <h2>Ready to scale your<br />business with systems?</h2>
          <p>Systemizers is invitation-only for the first 10 founding members. Book a Strategy Call to see if you're the right fit and to get clarity on how your business can use an AI Operating System to grow and free up your time.</p>
          <button type="button" className="fo-cta" onClick={apply}>
            Apply to 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>
          </button>
          <div className="pc-price-sub" style={{ marginTop: "18px" }}></div>
        </div>
      </div>
    </section>);}

function PricingCTA() {
  const apply = () => {if (window.openSystemizStrategyCall) window.openSystemizStrategyCall();};
  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<br />while working less?</h2>
          <p>Systemizers is invitation-only for the first 10 founding members. Apply for a Strategy Call and we'll diagnose your business, map your systems, and if it's a fit, invite you into community and program at founding rates.</p>
          <button type="button" className="fo-cta" onClick={apply}>
            Apply to 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>
          </button>
          <div className="pc-price-sub" style={{ marginTop: "18px" }}>Founding members will get in at a 60% discount.</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">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="#founding">Pricing</a></li>
            <li><a href="terms.html">Terms and Conditions</a></li>
            <li><a href="mailto:chris@systemiz.com">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, ApplicationsOpen, FoundingLaunch, PricingCTA, Footer, BookModal });