import $ from "jquery";
import * as JSX from "./jsx";
import AsciiArt from "./ascii-art"
import { GroupBox, Page, RolldownList, RolldownListItem } from "./components";

const text_l = [
 "Have you considered how public AI tools might expose proprietary information?",
 "What would the impact be if the sensitive data you have shared with AI tool was leaked?",
 "How does your current AI provider handle security indicents? How transparent are they, really?",
 "What happens to your data after it is shared with public AI tools?",
 "Are you comfortable with the AI models that you interact with being retrained on the data you've shared with it?",
];

const text_r = [
  "Unrestricted prompt and tooling customization.",
  "100% private LLM access with dedicated personal instances.",
  "Frictionless access and removal for all of your shared information.",
  "Long-term memory, web access, and notes provided with base configuration.",
  "Custom embedded 'modules' available by direct contact via support page.",
  "Unlimited API calls.",
];

function runTypewriter( messages: string[], elId: string ) {
  const el = $( elId ).find( ".groupbody" );
  if( !el ) return;

  const type = ( el: JQuery, str: string ) => {
    const span = $( <span></span> );
    span.html( "&gt; " );
    el.append( span );

    let i = 0;
    const typeWord = () => {
      const words = str.split( ' ' );
      if( i < words.length ) {
        span.html( span.html() + words[i] + ' ' );
        setTimeout( typeWord, 25 + Math.random() * 100 );
      }
      ++i;
    };
    typeWord();
  }

  for( let msg of messages ) {
    type( el, msg );
    el.append( <br/> );
  }
}

function HomeInfo() {
  const ret = <div id="homepagemain">
    <GroupBox title="Questions to ask" id="q2a"/>
    <GroupBox title="Features" id="features" />
  </div>;

  setTimeout( () => {
    runTypewriter( text_l, "#q2a" );
    runTypewriter( text_r, "#features" );
  } );
  return ret;
}

function HomeFaq() {
  return <RolldownList title="FAQ" style="min-width: 333px; max-width: 600px; width: calc( 100% - 12px )">
    <RolldownListItem folded="What makes our service the ideal choice?">
      Unlike many of our competitors, we do not harvest or sell your personal data. We are hobbyists that simply want to provide the best possible service to assist you in achieving your goals.
    </RolldownListItem>
    <RolldownListItem folded="What do we offer that others can't?">
      We pride ourselves in the fact that we are small and tight-knit team of hobbyist developers with a passion to create and ship tools that can help reshape your daily life.
    </RolldownListItem>
    <RolldownListItem folded="How do you plan to shape the AI sector?">
      We believe that competition is a benefit in society. If we are successful in our growth, we can apply pressure towards others to stop data-brokering practices and instead focus on delivering real transparency and an ideal product.
    </RolldownListItem>
    <RolldownListItem folded="What forms of payment do we accept?">
      At the moment, we utilize Stripe to accept payments. If you have issues with this, please reach out to us on Twitter. We gladly accept BTC, and would prefer it for any custom work we may perform for you.
    </RolldownListItem>
    <RolldownListItem folded="How can I get in touch?">
      The best form of contact will be through our support account <a href="https://twitter.com/axonbox">here on Twitter</a>. Alternatively, you can email us <a href="mailto:support@axonbox.net">here</a>. However, since we are a small team, Twitter would be the most convenient.
    </RolldownListItem>
  </RolldownList>
}

export default function Home() {
  return <Page>
    <AsciiArt />
    <h3 style="margin-top: 15px">Welcome your new second-in-command</h3>
    <HomeInfo />
    <HomeFaq />
  </Page>;
}