// ToolKit for Training — landing page for professional AI trainers.
// Instant Studio design system proper: white canvas, Hubot Sans Condensed,
// DM Sans, DM Mono, orange + lavender. Renders into #app.

const { useState } = React;

// Same Calendly booking flow as the Instant Studio corp site.
const CALENDLY_URL = "https://calendly.com/instantstudio/letstalk";

const MODELS = [
  ["FLUX.2", "https://cdn.simpleicons.org/flux/101010"],
  ["GPT-Image", "https://unpkg.com/@lobehub/icons-static-svg@1.24.0/icons/openai.svg"],
  ["Gemini 3 Pro", "https://cdn.simpleicons.org/googlegemini/101010"],
  ["Veo 3.1", "https://cdn.simpleicons.org/google/101010"],
  ["SeeDream", "https://cdn.simpleicons.org/bytedance/101010"],
  ["SeeDance 2.0", "https://cdn.simpleicons.org/bytedance/101010"],
  ["Kling 3", "https://cdn.simpleicons.org/kuaishou/101010"],
  ["Wan 2.2", "https://cdn.simpleicons.org/alibabadotcom/101010"],
];

const Check = () => (
  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" /></svg>
);
const X = () => (
  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17" strokeLinecap="round" /></svg>
);

/* ---------------- local primitives ---------------- */
function Eyebrow({ children }) {
  return <span className="eyebrow"><span className="dot" />{children}</span>;
}
function Tag({ children }) {
  return <span className="tag">{children}</span>;
}
function ModelTag({ name, icon }) {
  return (
    <span className="tag tag--model">
      <img src={icon} alt="" loading="lazy" onError={e => e.currentTarget.remove()} />
      {name}
    </span>
  );
}
function Button({ variant = "lavender", children, ...rest }) {
  const cls = variant === "outline" ? "btn btn-outline" : variant === "dark" ? "btn btn-dark" : "btn btn-lavender";
  return <a className={cls} {...rest}>{children}</a>;
}
function ProdCard({ label, src, video, w, h, style }) {
  const vref = React.useRef(null);
  React.useEffect(() => {
    const v = vref.current;
    if (!v) return;
    const io = new IntersectionObserver(([e]) => { e.isIntersecting ? v.play().catch(() => {}) : v.pause(); }, { threshold: 0.25 });
    io.observe(v);
    return () => io.disconnect();
  }, []);
  return (
    <div className="prodcard" style={style}>
      <span className="prodcard__label">{label}</span>
      <div className="prodcard__content" style={{ width: w, height: h }}>
        {video ? <video ref={vref} src={video} preload="metadata" loop muted playsInline /> : <img src={src} alt="" loading="lazy" />}
      </div>
    </div>
  );
}

/* ---------------- Navbar ---------------- */
function Nav({ onCta }) {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  const links = [["What's inside", "#inside"], ["Compare", "#compare"], ["FAQ", "#faq"]];
  return (
    <div className="nav-wrap">
      <div className="nav-inner">
        <a className="nav-brand" href="#top"><img src="assets/logos/instant-studio-icon-orange.png" alt="" />toolkit / training</a>
        <nav className={`nav-menu ${open ? "open" : ""}`}>
          {links.map(([l, h]) => <a key={l} className="nav-link" href={h} onClick={close}>{l}</a>)}
          <a className="nav-link" href="https://toolkit.instantstudio.ai">Client login</a>
          <a className="btn btn-lavender nav-cta" href={CALENDLY_URL} onClick={e => { close(); onCta(e); }}>Request a workspace</a>
        </nav>
        <button className="nav-burger" aria-label="menu" aria-expanded={open} onClick={() => setOpen(!open)}><span /><span /></button>
      </div>
    </div>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ onCta, primaryBtn }) {
  return (
    <section className="section tk-hero" id="top" data-screen-label="Hero">
      <div className="container">
        <div className="tk-hero__grid">
          <div>
            <Eyebrow>toolkit · for training</Eyebrow>
            <h1>A production-grade AI studio. Rented by the session.</h1>
            <p className="lead">The private workspace you hand to the room — image, video and voice on the leading models, a seat for every attendee, wiped when you leave.</p>
            <p className="tk-hero__aud">Built for consultants, agencies and training teams running hands-on AI workshops.</p>
          </div>
          <div className="tk-offer">
            <h3 className="tk-offer__h">One workspace. One fee. Nothing left behind.</h3>
            <ul className="tk-offer__list">
              {[
                "One private link — attendees create their own accounts in seconds",
                "Leading models and credits included",
                "Image, video and voice — production-grade tools",
                "Shared gallery and portfolio for the room",
                "Auto-wiped after the session",
              ].map(t => (
                <li key={t}><span className="tk-check"><Check /></span>{t}</li>
              ))}
            </ul>
            <div className="tk-offer__foot">
              <div className="tk-offer__price">
                From $499
                <small>flat fee per session, not per seat — the whole room on one fee</small>
              </div>
              <Button variant={primaryBtn} onClick={onCta} href={CALENDLY_URL}>Request a workspace</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- What's inside (bento) ---------------- */
function Inside() {
  return (
    <section className="section" id="inside" data-screen-label="What's inside">
      <div className="container">
        <div className="tk-head">
          <Eyebrow>what's inside</Eyebrow>
          <h2 className="is-display h2">Everything in one workspace.</h2>
          <p className="lead">Image, video, voice and repeatable workflows in one workspace. No tab-hopping, no fragmented stack.</p>
        </div>
        <div className="tk-bento">
          <div className="tk-tile tile-images">
            <h3>Images</h3>
            <p>Create, edit or combine images with plain language. Attendees upload references, compare models and learn by seeing results side by side.</p>
            <div className="tk-imggrid">
              <ProdCard label="input: product shot" src="assets/images/perfume-input-product.webp" />
              <ProdCard label="scene composed" src="assets/images/perfume-products-combined.webp" />
              <ProdCard label="restyled: golden hour" src="assets/images/perfume-restyled.webp" />
            </div>
          </div>

          <div className="tk-tile tile-video">
            <h3>Video</h3>
            <p>Turn images into motion with plain-language camera direction — pan, push in, tracking shot — and pin the first and last frame. Up to 1080p.</p>
            <ProdCard label="video generated" video="assets/videos/perfume-scene-generated.mp4" style={{ marginTop: "auto" }} />
          </div>

          <div className="tk-tile tile-text">
            <h3>Voice</h3>
            <p>Turn a script into polished narration — a range of voices across tones, accents and languages, ready for workshop exercises.</p>
            <div className="tk-waveform">
              {[7, 14, 9, 20, 12, 22, 10, 16, 8, 18, 11, 15, 7, 13].map((h, i) => (
                <span key={i} style={{ height: h }} />
              ))}
            </div>
          </div>

          <div className="tk-tile tile-workflow">
            <h3>Workflows & templates</h3>
            <p>Chain the tools into repeatable flows — image to video to voiceover — or hand attendees a prompt template so the first generation lands in minutes.</p>
            <div className="tk-modeltags">
              <Tag>chain steps</Tag><Tag>prompt templates</Tag><Tag>repeatable</Tag>
            </div>
          </div>

          <div className="tk-tile tile-class">
            <h3>Built for the room</h3>
            <p>Every generation is logged with its prompt and model, so trainers can review the room's work and attendees can save the keepers.</p>
            <div className="tk-modeltags">
              <Tag>shared gallery</Tag><Tag>portfolio</Tag><Tag>trainer view</Tag>
            </div>
          </div>

          <div className="tk-tile tile-models">
            <div>
              <h3 style={{ marginBottom: 6 }}>Leading models, one workspace</h3>
              <p>Switch between image, video and voice models — no separate accounts, billing or credits.</p>
            </div>
            <div className="tk-modeltags">
              {MODELS.map(([m, icon]) => <ModelTag key={m} name={m} icon={icon} />)}
              <Tag>+ more</Tag>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- How it works ---------------- */
function HowItWorks() {
  const steps = [
    ["Scope the session", "Tell us the headcount, session length and the tools you need."],
    ["We provision the workspace", "Models, credits, templates and attendee access — ready before the room sits down."],
    ["Attendees join from one link", "No installs, no separate model accounts, no payment cards."],
    ["Export the keepers", "The best work goes home with the room; the workspace wipes itself after."],
  ];
  return (
    <section className="section tight tk-how" data-screen-label="How it works">
      <div className="container">
        <div className="tk-head">
          <Eyebrow>how it works</Eyebrow>
          <h2 className="is-display h2">A workspace for the session, not another software rollout.</h2>
        </div>
        <ol className="tk-how__steps">
          {steps.map(([h, p], i) => (
            <li key={h} className="tk-how__step">
              <span className="tk-how__num">{String(i + 1).padStart(2, "0")}</span>
              <h3>{h}</h3>
              <p>{p}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ---------------- See it in action ---------------- */
const IN_ACTION_TOOLS = [
  {
    id: "image",
    tab: "Image",
    title: "Instant Studio — Image Anything",
    url: "app.instantstudio.ai/image-anything",
    src: "assets/images/product-screenshot-image-anything.webp",
    alt: "The ToolKit image tool generating a luxury perfume product photo",
  },
  {
    id: "video",
    tab: "Video",
    title: "Instant Studio — Image to Video",
    url: "app.instantstudio.ai/image-to-video",
    src: "assets/images/product-screenshot-image-to-video.webp",
    alt: "The ToolKit video tool animating the perfume product photo into a short ad clip",
  },
  {
    id: "voice",
    tab: "Voice",
    title: "Instant Studio — Audio",
    url: "app.instantstudio.ai/audio",
    src: "assets/images/product-screenshot-audio.webp",
    alt: "The ToolKit voice tool turning the perfume ad script into narration, with takes from several voices",
    audio: "assets/audio/perfume-voiceover-generated.mp3",
  },
  {
    id: "workflows",
    tab: "Workflows",
    title: "Instant Studio — Canvases",
    url: "app.instantstudio.ai/canvases",
    src: "assets/images/product-screenshot-canvases.webp",
    alt: "The ToolKit workflow canvas chaining text, LLM and image nodes into a repeatable casting flow",
  },
];

// Floating play chip over the frame — lets visitors hear the generated take.
function ListenChip({ src }) {
  const aref = React.useRef(null);
  const [playing, setPlaying] = useState(false);
  const [dur, setDur] = useState(null);
  React.useEffect(() => {
    const a = aref.current;
    return () => a && a.pause();
  }, []);
  const fmt = s => `0:${String(Math.round(s)).padStart(2, "0")}`;
  return (
    <>
      <audio ref={aref} src={src} preload="metadata"
        onLoadedMetadata={e => setDur(e.currentTarget.duration)}
        onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} onEnded={() => setPlaying(false)} />
      <button className="tk-inaction__listen" onClick={() => { const a = aref.current; if (a.paused) { a.currentTime = 0; a.play(); } else { a.pause(); } }}>
        <svg viewBox="0 0 24 24" aria-hidden="true">
          {playing ? <path d="M7 5h4v14H7zM13 5h4v14h-4z" /> : <path d="M8 5l12 7-12 7z" />}
        </svg>
        {playing ? "playing" : "hear the take"}{dur ? ` · ${fmt(dur)}` : ""}
      </button>
    </>
  );
}

function InAction() {
  const [tool, setTool] = useState(IN_ACTION_TOOLS[0]);
  return (
    <section className="section tight tk-inaction" data-screen-label="See it in action">
      <div className="container">
        <div className="tk-head" style={{ alignItems: "center", textAlign: "center", marginLeft: "auto", marginRight: "auto" }}>
          <Eyebrow>see it in action</Eyebrow>
          <h2 className="is-display h2">Real tools, real output.</h2>
          <p className="lead">Image, video and voice — and the workflows that chain them. A taste of what's inside every ToolKit workspace.</p>
        </div>
        <div>
          <div className="tk-inaction__tabs" role="tablist">
            {IN_ACTION_TOOLS.map(t => (
              <button key={t.id} role="tab" aria-selected={t.id === tool.id} className={"tk-inaction__tab" + (t.id === tool.id ? " is-active" : "")} onClick={() => setTool(t)}>{t.tab}</button>
            ))}
          </div>
          <div className="tk-inaction__stage">
            <div className="tk-inaction__frame">
              <ChromeWindow width="100%" height="100%" tabs={[{ title: tool.title }]} url={tool.url}>
                <img src={tool.src} alt={tool.alt} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top", display: "block" }} />
              </ChromeWindow>
            </div>
            {tool.audio && <ListenChip src={tool.audio} />}
          </div>
          <p className="tk-inaction__cap">the same studio your attendees sign into — nothing to install, no personal subscriptions</p>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Comparison ---------------- */
function Compare() {
  const rows = [
    ["Attendee logins", "6+ signups each", "One link, instant accounts"],
    ["Credits & tokens", "Free tiers die mid-session", "Included"],
    ["Billing", "Your card on five platforms", "One flat fee"],
    ["Models", "Whatever each tool ships", "Leading models in one place"],
    ["Setup", "Hours before each session", "None — provisioned for you"],
    ["Afterwards", "Client data on consumer tools", "Export what you keep, then auto-wiped"],
  ];
  return (
    <section className="section tight" id="compare" data-screen-label="Compare">
      <div className="container">
        <div className="tk-head">
          <Eyebrow>the math</Eyebrow>
          <h2 className="is-display h2">Your session is too expensive to run on free trials.</h2>
          <p className="lead">Without ToolKit, every attendee signs up for a handful of consumer tools — and hits account friction or free-tier limits halfway through the afternoon.</p>
        </div>
        <table className="tk-cmp">
          <thead>
            <tr><th /><th className="c-diy">Juggling platforms</th><th className="c-us">One ToolKit workspace</th></tr>
          </thead>
          <tbody>
            {rows.map(([k, a, b]) => (
              <tr key={k}>
                <td>{k}</td>
                <td className="c-diy"><span className="tk-cell"><span className="tk-ic no"><X /></span>{a}</span></td>
                <td className="c-us"><span className="tk-cell"><span className="tk-ic yes"><Check /></span>{b}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

/* ---------------- Trust stat ---------------- */
function Stat() {
  return (
    <section className="section tk-stat" data-screen-label="Trust stat">
      <div className="container">
        <div className="tk-stat__grid">
          <div className="tk-stat__num">200+<small>attendees through live AI workshops, and counting</small></div>
          <div>
            <h2 className="is-display">Proven in the room.</h2>
            <p>Over 200 attendees have created their first AI-made image, video or narration inside a ToolKit session — the keepers exported, the workspace wiped after.</p>
            <div className="tk-row">
              <Tag>private workspace</Tag><Tag>shared gallery</Tag><Tag>auto-wiped</Tag>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Trusted-by strip ---------------- */
function TrustedBy() {
  return (
    <div className="tk-logos" data-screen-label="Trusted by">
      <div className="container tk-logos__row">
        <span className="tk-logos__label">the same platform trusted by</span>
        <div className="tk-logos__marks">
          <img src="assets/logos/havas.png" alt="Havas" />
          <img src="assets/logos/maxus.webp" alt="Maxus" />
          <img src="assets/logos/kickers.webp" alt="Kickers" />
          <img src="assets/logos/sunlife-color.png" alt="Sun Life" />
          <img src="assets/logos/duvel.png" alt="Duvel" />
          <span className="tk-logos__more">+ more</span>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Testimonial ---------------- */
function Testimonial() {
  return (
    <section className="section tk-quote-section" data-screen-label="Testimonial">
      <div className="container">
        <div className="tk-quote">
          <span className="tk-quote__mark">“</span>
          <p className="tk-quote__text">ToolKit powers the entirety of our image training workshops. We love the pure simplicity of it — one link, no extra signups or dealing with credits. ToolKit makes our training work.</p>
          <div className="tk-quote__by">
            <img className="tk-quote__photo" src="assets/images/stephane-monsallier.png" alt="Stephane Monsallier" />
            <div className="tk-quote__meta">
              <span className="tk-quote__name">Stephane Monsallier</span>
              <span className="tk-quote__role">CEO, System in Motion</span>
            </div>
            <img className="tk-quote__logo" src="assets/logos/systeminmotion.png" alt="System in Motion" />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
function Faq() {
  const items = [
    ["How long does a workspace stay live?", "A single afternoon, a full day, or a multi-session programme. It expires exactly when you say."],
    ["What do attendees need to join?", "A browser and your private link. Accounts take seconds — no installs, no personal subscriptions, no credit cards, no IT tickets."],
    ["What does it cost?", "From $499 per session as a flat fee, scoped to headcount and length — models, credits, provisioning and cleanup included. Most trainers build it into their session rate."],
    ["Which models are included?", "The leading image, video and voice models — the current lineup is in the tiles above. We confirm the exact list for your session before the workspace goes live; credits are included."],
    ["What happens to the work afterwards?", "Attendees export what they want to keep. When the workspace expires, temporary access and session data are wiped — nothing left sitting on your client's side."],
    ["Can I see what attendees are making?", "Yes. Every generation is logged with its prompt and model in a shared gallery — and the best work goes into a portfolio you can walk the room through."],
    ["Can it run under my own brand?", "Yes — white-label workspaces are available at premium pricing. Your logo on the studio your clients see."],
    ["How many attendees can one workspace handle?", "From a boardroom of eight to a full floor. Tell us the headcount and we'll size the workspace to match."],
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq" data-screen-label="FAQ">
      <div className="container">
        <div className="tk-head" style={{ alignItems: "center", textAlign: "center", marginLeft: "auto", marginRight: "auto" }}>
          <Eyebrow>questions we hear</Eyebrow>
          <h2 className="is-display h2">Before you ask.</h2>
        </div>
        <div className="tk-faq">
          {items.map(([q, a], i) => (
            <div key={q} className={`tk-faq__item ${open === i ? "open" : ""}`}>
              <button className="tk-faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                {q}<span className="tk-faq__sign">+</span>
              </button>
              <div className="tk-faq__a" style={{ maxHeight: open === i ? 240 : 0 }}><p>{a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- CTA ---------------- */
function CtaSection({ onCta, primaryBtn }) {
  return (
    <section className="section tk-cta" data-screen-label="CTA">
      <div className="container">
        <Eyebrow>get started</Eyebrow>
        <h2 style={{ marginTop: 16 }} className="is-display">You run the session. We run the studio.</h2>
        <p className="lead">Rent the studio, one session at a time. We provision the workspace, attendees join from one link, and it wipes itself after.</p>
        <div className="tk-cta__row">
          <Button variant={primaryBtn} onClick={onCta} href={CALENDLY_URL}>Request a workspace</Button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  const cols = [
    ["Product", [["What's inside", "#inside"], ["Compare", "#compare"], ["FAQ", "#faq"]]],
    ["Company", [["instantstudio.ai", "https://www.instantstudio.ai"]]],
  ];
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="container">
        <div className="footer__inner">
          <div className="footer__brand">
            <span className="word"><img src="assets/logos/instant-studio-icon-orange.png" alt="" />toolkit / training</span>
            <p>A private AI studio professional trainers hand to the room — powered by Instant Studio.</p>
          </div>
          <div className="footer__cols">
            {cols.map(([h, links]) => (
              <div className="footer__col" key={h}>
                <span className="footer__h">{h}</span>
                {links.map(([l, href]) => <a key={l} href={href}>{l}</a>)}
              </div>
            ))}
            <div className="footer__col">
              <span className="footer__h">Get in touch</span>
              <a href="mailto:connect@instantstudio.ai">connect@instantstudio.ai</a>
            </div>
          </div>
        </div>
        <div className="footer__base">
          <span>© 2026 Instant Studio. All rights reserved.</span>
          <div className="footer__base-links"><a href="#">Privacy</a><a href="#">Terms</a></div>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- App ---------------- */
function App() {
  const t = { primaryBtn: "lavender" };
  // Calendly popup (same flow as the corp site); falls back to a new tab
  // if the widget script hasn't loaded yet.
  const openBooking = e => {
    if (e) e.preventDefault();
    if (window.Calendly) window.Calendly.initPopupWidget({ url: CALENDLY_URL });
    else window.open(CALENDLY_URL, "_blank", "noopener");
  };

  return (
    <div className="tk-page">
      <Nav onCta={openBooking} />
      <Hero onCta={openBooking} primaryBtn={t.primaryBtn} />
      <TrustedBy />
      <Testimonial />
      <Inside />
      <HowItWorks />
      <InAction />
      <Compare />
      <Stat />
      <Faq />
      <CtaSection onCta={openBooking} primaryBtn={t.primaryBtn} />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);