// app.jsx — torontoagentic.ca

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "register": "essayistic",
  "accent": "#2e4a6b",
  "breaks": "titled",
  "wordmark": "domain",
  "portrait": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#1f2937", // graphite
  "#8a4a32", // clay
  "#a8541f", // copper
  "#2c4a3e", // forest
  "#2e4a6b", // ink blue
  "#6b3a52", // plum
  "#7a2e3a", // burgundy
  "#2d5e60"  // teal
];

function setRootVar(name, value) {
  document.documentElement.style.setProperty(name, value);
}
function applyRegister(reg) {
  document.documentElement.dataset.register = reg;
}

const HOW = [
  {
    title: "Find AI opportunities, together.",
    body: "Collaborative workshops that bring your team into the room to identify real opportunities in how you work \u2014 and estimate their impact.",
    artifacts: "Discovery workshop. Workflow audit."
  },
  {
    title: "Prototype, test, and build what's needed.",
    body: "AI agents, pipelines, and generative AI productivity tools, designed to fit how your team actually works.",
    artifacts: "Prototype. Production-ready system."
  },
  {
    title: "Deliver for actual use.",
    body: "What I build is shaped to your organizational context, workflow, and team skill level \u2014 so it actually gets used.",
    artifacts: "Rollout plan. Embedded coaching during launch."
  }
];

const RECENT = [
  { kind: "Academic research", text: "Applied AI research in partnership with UCLA" },
  { kind: "Agent tooling", text: "An MCP server for human-in-the-loop coordination across multi-agent systems (Group in the Loop)" },
  { kind: "Conversion", text: "Conversational onboarding for a generative animation tool" },
  { kind: "Productivity", text: "IdeateLive: an AI-assisted collaboration tool for team alignment" },
  { kind: "Analysis tools", text: "AI-assisted analysis tools for usability research" },
  { kind: "AI pipelines", text: "AI-first research operations at a major Canadian insurer" }
];

function Wordmark({ style }) {
  if (style === "none") return <span className="wm wm-spacer" aria-hidden="true"></span>;
  if (style === "monogram") {
    return (
      <a href="#top" className="wm wm-mono" aria-label="torontoagentic.ca">
        <span className="wm-glyph">ta</span>
      </a>
    );
  }
  return (
    <a href="#top" className="wm wm-domain" aria-label="torontoagentic.ca">
      <span className="wm-dot" aria-hidden="true"></span>
      <span>torontoagentic.ca</span>
    </a>
  );
}

function SectionLabel({ n, title, breaks }) {
  if (breaks === "hairline") {
    return <div className="sect-rule" aria-hidden="true"></div>;
  }
  if (breaks === "titled") {
    return (
      <div className="sect-label sect-titled">
        <span className="sect-title">{title}</span>
      </div>
    );
  }
  return (
    <div className="sect-label sect-numbered">
      <span className="sect-num">§ {String(n).padStart(2, "0")}</span>
      <span className="sect-title">{title}</span>
    </div>
  );
}

function HeroCTAs() {
  return (
    <ul className="contact-list contact-list--hero">
      <li>
        <a className="cta" href="https://www.linkedin.com/in/francisszakacs/" target="_blank" rel="noopener">
          <span className="cta-label">Message me on LinkedIn</span>
          <span className="cta-arrow" aria-hidden="true">↗</span>
        </a>
      </li>
      <li>
        <a className="cta" href="https://calendar.app.google/jHJ1xDHwkzEftDwe8" target="_blank" rel="noopener">
          <span className="cta-label">Book a 20-minute call</span>
          <span className="cta-arrow" aria-hidden="true">↗</span>
        </a>
      </li>
    </ul>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { setRootVar("--accent", t.accent); }, [t.accent]);
  React.useEffect(() => { applyRegister(t.register); }, [t.register]);

  return (
    <div className="page" id="top">
      <header className="topbar">
        <Wordmark style={t.wordmark} />
        <div className="topbar-meta">
          <span className="status">
            <span className="status-dot" aria-hidden="true"></span>
            Available · Toronto
          </span>
        </div>
      </header>

      <main className="stack">
        <section className="sect hero" aria-labelledby="h-hero">
          <SectionLabel n={1} title="What I do" breaks={t.breaks} />
          <h1 id="h-hero" className="lede">
            I help organizations use AI and agents in ways that make a real
            difference. I find the right opportunities, build the right tools,
            and help people use them well.
          </h1>
          <HeroCTAs />
        </section>

        <section className="sect how" aria-labelledby="h-how">
          <SectionLabel n={2} title="How I work" breaks={t.breaks} />
          <ol className="how-list">
            {HOW.map((step, i) => (
              <li className="how-item" key={i}>
                <span className="how-marker" aria-hidden="true">{String(i + 1).padStart(2, "0")}</span>
                <div className="how-body">
                  <p className="how-line">
                    <strong className="how-title">{step.title}</strong>{" "}
                    <span className="how-text">{step.body}</span>
                  </p>
                  <p className="how-art">{step.artifacts}</p>
                </div>
              </li>
            ))}
          </ol>
        </section>

        <section className="sect recent" aria-labelledby="h-recent">
          <SectionLabel n={3} title="Recent work" breaks={t.breaks} />
          <p className="recent-lead">Recent engagements include:</p>
          <ul className="recent-list">
            {RECENT.map((r, i) => (
              <li className="recent-item" key={i}>
                <span className="recent-kind">{r.kind}</span>
                <span className="recent-text">{r.text}</span>
              </li>
            ))}
          </ul>
        </section>

        <section className="sect about" aria-labelledby="h-about">
          <SectionLabel n={4} title="About" breaks={t.breaks} />
          <div className="about-body">
            <p>
              I'm <em>Francis Szakacs</em>. I've led research and product teams
              at major Canadian telcos and insurance providers, and worked on
              technology change with companies like <em>T-Mobile</em>,{" "}
              <em>LEGO</em>, <em>Rogers</em>, and <em>Scotiabank</em> over the
              past 15+ years. Earlier in my career I was a product manager for
              an IoT technology in Europe.
            </p>
            <p>
              I partner with <em>UCLA</em> on applied AI research, and won a
              prize at <em>MIT</em> for an AR project. I also run{" "}
              <em>IdeateLive</em> and develop{" "}
              <em>Group in the Loop</em>, a framework for human-in-the-loop
              multi-agent systems.
            </p>
            {t.portrait && (
              <figure className="portrait-figure">
                <span className="portrait portrait--lg" aria-hidden="true">
                  <img src="profile.JPG" alt="Portrait" />
                </span>
                <figcaption>Toronto, sometime last winter.</figcaption>
              </figure>
            )}
          </div>
        </section>

        <section className="sect contact" aria-labelledby="h-contact">
          <SectionLabel n={5} title="Get in touch" breaks={t.breaks} />
          <p className="contact-lead">
            Find me on LinkedIn, or book a 20-minute intro call.
          </p>
          <ul className="contact-list">
            <li>
              <a className="cta" href="https://www.linkedin.com/in/francisszakacs/" target="_blank" rel="noopener">
                <span className="cta-label">Message me on LinkedIn</span>
                <span className="cta-arrow" aria-hidden="true">↗</span>
              </a>
            </li>
            <li>
              <a className="cta" href="https://calendar.app.google/jHJ1xDHwkzEftDwe8" target="_blank" rel="noopener">
                <span className="cta-label">Book a 20-minute call</span>
                <span className="cta-arrow" aria-hidden="true">↗</span>
              </a>
            </li>
          </ul>
        </section>
      </main>

      <footer className="foot">
        <span className="foot-mark">torontoagentic.ca</span>
        <span className="foot-meta">© 2026 · Toronto, Canada</span>
      </footer>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual register" />
        <TweakRadio
          label="Style"
          value={t.register}
          options={["essayistic", "institutional", "technical"]}
          onChange={(v) => setTweak("register", v)}
        />

        <TweakSection label="Color" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Section breaks"
          value={t.breaks}
          options={["numbered", "titled", "hairline"]}
          onChange={(v) => setTweak("breaks", v)}
        />
        <TweakRadio
          label="Wordmark"
          value={t.wordmark}
          options={["domain", "monogram", "none"]}
          onChange={(v) => setTweak("wordmark", v)}
        />
        <TweakToggle
          label="Show portrait"
          value={t.portrait}
          onChange={(v) => setTweak("portrait", v)}
        />
      </TweaksPanel>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);