// Canvas — preserves the original Figma-style design preview at /canvas.
// Renders all artboards stacked, exactly as the original index.html did.

const CanvasApp = () => {
  return (
    <DesignCanvas
      title="RedGone — Hi-fi"
      subtitle="Compliance-first AI email client · brand sheet, mascot, onboarding flood, and product screens"
    >
      <DCSection id="brand" title="Brand foundation">
        <DCArtboard id="brand-sheet" label="Brand sheet · color, type, surfaces, gradient, neu" width={1280} height={2400}>
          <BrandSheet/>
        </DCArtboard>

        <DCArtboard id="mascot-trio" label="Angel-robot · pixel sprite · front + side" width={920} height={680}>
          <div style={{
            width: 920, height: 680, background: "var(--white-pure)",
            display: "flex", flexDirection: "column", padding: 48, gap: 24,
          }}>
            <div>
              <div className="micro">Mascot</div>
              <div className="h2" style={{ marginTop: 6 }}>The angel-robot</div>
              <div className="body" style={{ color: "var(--midnight-soft)", marginTop: 8, maxWidth: 540 }}>
                Tiny pixel sprite. White / very light blue, halo above. Two views — front for empty
                states and the all-clear, side profile (leaning right) for the onboarding push.
              </div>
            </div>
            <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="pillow" style={{ padding: 24, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14 }}>
                <AngelRobot size={260} view="front"/>
                <div className="micro">Front · empty states · all-clear</div>
              </div>
              <div className="pillow" style={{ padding: 24, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14, background: "linear-gradient(135deg, rgba(244,196,48,0.25), rgba(230,57,70,0.85))" }}>
                <AngelRobot size={260} view="side"/>
                <div className="micro" style={{ color: "#FFFFFF" }}>Side · pushing the red away</div>
              </div>
            </div>
            <div style={{ display: "flex", gap: 32, alignItems: "center", justifyContent: "center" }}>
              <div style={{ display:"flex", alignItems:"center", gap: 12 }}><AngelRobot size={120} view="front"/><div className="micro">120 · medium</div></div>
              <div style={{ display:"flex", alignItems:"center", gap: 12 }}><AngelRobot size={56} view="front"/><div className="micro">56 · inline</div></div>
            </div>
          </div>
        </DCArtboard>
      </DCSection>

      <DCSection id="onboarding" title="Onboarding · the hero moment">
        <DCArtboard id="onboarding-live" label="Live animation · scan rhythm with pauses" width={1200} height={760}>
          <OnboardingLive/>
        </DCArtboard>
        <DCArtboard id="onboarding-0" label="Frame · 0% · screen entirely red" width={1200} height={760}>
          <OnboardingFrame percent={0}/>
        </DCArtboard>
        <DCArtboard id="onboarding-33" label="Frame · 33% · numeral splits white/midnight" width={1200} height={760}>
          <OnboardingFrame percent={33}/>
        </DCArtboard>
        <DCArtboard id="onboarding-66" label="Frame · 66% · red receding behind robot" width={1200} height={760}>
          <OnboardingFrame percent={66}/>
        </DCArtboard>
        <DCArtboard id="onboarding-100" label="Frame · 100% · purified, CTA appears" width={1200} height={760}>
          <OnboardingFrame percent={100}/>
        </DCArtboard>
      </DCSection>

      <DCSection id="product" title="Product screens">
        <DCArtboard id="dashboard" label="Compliance dashboard · score is the hero" width={1440} height={900}>
          <Dashboard/>
        </DCArtboard>

        <DCArtboard id="compose" label="Compose · Grammarly for compliance · Fix-All ready" width={1440} height={900}>
          <ComposeView mode="before"/>
        </DCArtboard>

        <DCArtboard id="compose-after" label="Compose · after Fix-All · all clear" width={1440} height={900}>
          <ComposeView mode="after"/>
        </DCArtboard>

        <DCArtboard id="inbox" label="Inbox · auto-classified · daily summary" width={1440} height={900}>
          <Inbox/>
        </DCArtboard>

        <DCArtboard id="spec" label="Spec builder · co-write rules with the AI" width={1440} height={980}>
          <SpecBuilder/>
        </DCArtboard>

        <DCArtboard id="settings" label="Settings · compliance mode · Internal expanded" width={1440} height={980}>
          <Settings/>
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
};

window.CanvasApp = CanvasApp;