import * as React from "react";

export default {
  title: "Apps|(To Scaffold)",
};

interface iStyle {
  IMG: React.CSSProperties;
  IMGSMALL: React.CSSProperties;
}
const style: iStyle = {
  IMG: {
    width: "100%",
  },
  IMGSMALL: {
    width: "44%",
    margin: "2%",
    textAlign: "center",
  },
};

export const Home: React.FC = () => (
  <img
    style={style.IMG}
    src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/hf_dashboard.png"
  />
);
export const Admin: React.FC = () => <div />;

export const Insights: React.FC = () => (
  <>
    {[
      <img
        style={style.IMG}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/hf_insights.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/hf_charteditor.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/insights_screen_main.gif"
      />,
    ]}
  </>
);

export const Campaigns: React.FC = () => (
  <>
    {[
      <img
        style={style.IMG}
        src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/hf_campaignbuilder.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/campaigns_screen_list.gif"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/campaigns_screen_edit.gif"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/pipeline_screen.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/canvas_screen_sidebar.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/canvas_screen_nodes.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/canvas_screen_add.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/insights_screen_main.gif"
      />,
    ]}
  </>
);

export const Calendar: React.FC = () => (
  <>
    {[
      <img
        style={style.IMG}
        src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/hf_calendar.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/calendar_screen_timeline.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/calendar_screen_month.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/calendar_screen_digest.png"
      />,
    ]}
  </>
);

export const Experiments: React.FC = () => (
  <>
    {[
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/experiments_screen_list.gif"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/experiments_screen_progress.gif"
      />,
    ]}
  </>
);

export const Contacts: React.FC = () => (
  <>
    {[
      <img
        style={style.IMG}
        src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/hf_crm.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/contacts_screen_list.gif"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/contacts_screen_view.gif"
      />,
    ]}
  </>
);

export const Ecommerce: React.FC = () => (
  <img
    style={style.IMG}
    src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/products_screen_list.gif"
  />
);

export const Collections: React.FC = () => (
  <>
    {[
      <img
        style={style.IMG}
        src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/hf_collections.png"
      />,
      <img
        style={style.IMGSMALL}
        src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/crud_screen_rows.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/collections_screen_success.gif"
      />,
      <img
        style={style.IMGSMALL}
        src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/collections_screen_fieldedit.png"
      />,
      <img
        style={style.IMGSMALL}
        src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/collections_screen_fields.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/collections_screen_kanban.gif"
      />,
      <img
        style={style.IMGSMALL}
        src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/crud_screen_table.png"
      />,
      <img
        style={style.IMGSMALL}
        src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/collections_screen_etl.png"
      />,
    ]}
  </>
);

export const Partnerships: React.FC = () => (
  <>
    {[
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/partners_screen_list.gif"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/partners_screen_funnel.gif"
      />,
    ]}
  </>
);

export const MachineLearning: React.FC = () => (
  <>
    {[
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/ai_screen_list.gif"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/ai_screen_jupyter.png"
      />,
    ]}
  </>
);

export const Membership: React.FC = () => (
  <>
    {[
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/membership_screen_list.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/membership_screen_post.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/membership_screen_course.png"
      />,
    ]}
  </>
);

export const Surveys: React.FC = () => (
  <>
    {[
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/quiz_screen_list.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/quiz_screen_questions.png"
      />,
    ]}
  </>
);

export const Webinars: React.FC = () => (
  <>
    {[
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/webinar_screen_list.png"
      />,
      <img
        style={style.IMGSMALL}
        src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/funnel_screen_simple.png"
      />,
    ]}
  </>
);

export const Settings: React.FC = () => (
  <>
    {[
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/settings_screen_billing.png"
      />,
    ]}
  </>
);

export const Media: React.FC = () => (
  <>
    {[
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/media_screen_list.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/media_screen_upload.png"
      />,
    ]}
  </>
);

export const University: React.FC = () => (
  <>
    {[
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/university_screen_dashboard.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/university_screen.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/university_screen_module.png"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/university_screen_article.png"
      />,
    ]}
  </>
);

export const Marketplace: React.FC = () => (
  <>
    {[
      <img
        style={style.IMG}
        src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/hf_marketplace.png"
      />,
    ]}
  </>
);

export const LogInAndOut: React.FC = () => (
  <>
    {[
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/auth_screen.gif"
      />,
      <img
        style={style.IMGSMALL}
        src="https://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/auth_layouts.png"
      />,
    ]}
  </>
);