// React/component imports
import React, {useEffect, useState} from 'react';
import WatchDogs from './components/WatchDogs.js';
import reagan from './images/reagan.png';
import julia from './images/julia.jpg';
import clark from './images/clark.png';
import michael from './images/michael.jpg';
import previewwatchdog from './images/previewwatchdog.png';
import mainlogo from './images/mainlogo.png';


import './css/Landing.css';

function App() {
  const [startApp, setStartApp] = useState(false);

  const startModal = () => {
    document.getElementById("main-modal").style.display = 'block';
    setStartApp(false);
  }
  const exitModal = () => {
    document.getElementById("main-modal").style.display = 'none';
    setStartApp(true);
  }
  
  return (
    <>
   
      {(!startApp) ?  
        <div className="body" id="main-modal">
            <div class="nav-bar">
            <div class="topnav">
                <a href="#team">Team</a>
                <a href="#app-intro">About</a>
                <a href="#intro">Home</a>
            </div>
            </div>

            <main>

                <section id="intro" class="intro">
                <img src={mainlogo} alt="logo"></img>
                <button id="enter-watchdogs" onClick={exitModal}>ENTER</button>
                </section>

                <section id="1" class="app-preview">
                <img id="preview" src={previewwatchdog}></img>
                <span id="preview-text">preview</span>
                </section>

                <section id="app-intro">
                <h1 class="heading">About Our App</h1>
                <p></p>
                <p class="text">WatchDogs utilizes a simple, 
                    interactive interface to provide you with the latest 
                    data relating to high-profile investors’ trades. Directly from 
                    the SEC, WatchDogs relays information regarding “inside” investors 
                    and their recent trades, as well as provides computed values such 
                    as an individual’s net profit from a stock at time of trade and a 
                    ranking of individuals most likely recently involved in insider trading. 
                    The computed “suspicion ranks” are determined using multiple factors 
                    (including recent trade profitability and investor connectedness) 
                    and a complex algorithm. For added convenience, YOU choose the 
                    timeframe WatchDogs considers when analyzing trade data. WatchDogs 
                    makes insider trade data accessible to the public, and provides 
                    low-level intuition regarding which investors are more and less 
                    likely to be committing unlawful insider trading.</p>
                <div class="appinfotxt">It is important to remember that suspicion 
                    ranks returned by WatchDogs’ algorithm DO NOT prove--or even suggest--that 
                    an individual has engaged in insider trading. WatchDogs suspicion 
                    ranks should not be interpreted as indication of an individual’s 
                    participation in illegal activity. WatchDogs data, including suspicion ranks, 
                    cannot be used as evidence in legal proceedings. Please use WatchDogs 
                    as it is intended, and use discretion when interpreting algorithmic 
                    results.</div>
                <p></p>
                <p class="text h2">The Data</p>
                <div class="text">WatchDogs uses data retrieved from SEC.gov’s 
                    EDGAR API. Trades analyzed by WatchDogs are of the type Form 4, 
                    meaning the filing individual is an “insider” (e.g. the CEO) at 
                    the company whose stock they are trading. In-app data relating 
                    to investors, trades, and profitability is accessible to the public via 
                    the SEC, and only public data is input to the SuspicionRank algorithm.</div>
                <p></p>
                <p class="text h2">Our Algorithm</p>
                <div class="text">WatchDogs suspicion rank represents the likelihood 
                    of an individual being involved in insider trading. The SuspicionRank algorithm, 
                    a derivative of Lary Page’s PageRank algorithm, considers “insiders” who similarly 
                    trade stocks (within a given timeframe) as “linked”, while simultaneously 
                    considering involved individuals’ net profit on their stocks at the time 
                    of trade. (Obviously, an “inside” investor who makes a counter-productive 
                    trade is not likely to be insider trading.)</div>
                <p></p><p></p><p></p><p></p><p></p>
                </section>
      
                <section id="team">
                    <div class="team">
                    <div id="team-holder" class="center">
                        <h1 id="team-heading" class="heading">Meet the Team</h1>
                        <div id="people-holder">
                            <div class="team-person-holder">
                                <div class="team-person">
                                    <img src={clark} height="100%"></img>
                                </div>
                                <p class="team-text">Clark Oh-Willeke</p>
                            </div>

                            <div class="team-person-holder">
                                <div class="team-person">
                                    <img src={julia} height="100%"></img>
                                </div>
                                <p class="team-text">Julia McCauley</p>
                            </div>

                            <div class="team-person-holder">
                                <div class="team-person">
                                    <img src={michael} height="100%"></img>
                                </div>
                                <p class="team-text">Michael Foiani</p>
                            </div>

                            <div class="team-person-holder">
                                <div class="team-person">
                                    <img src={reagan} height="100%"></img>
                                </div>
                                <p class="team-text">Reagan Hunt</p>
                            </div>
                        </div>
                        </div>
                    </div>
                </section>
            </main>

            <footer id="footer">
                <p></p>
                <div class="footer-item">Disclaimer</div>
                <p></p>
                <div class="footer-subtext">Suspicion ranks returned by <span>WatchDogs</span>’ 
                algorithm DO NOT prove--or even suggest--that an individual has 
                engaged in insider trading. <span>WatchDogs</span> suspicion ranks should not 
                be interpreted as indication of an individual’s participation in 
                illegal activity. <span>WatchDogs</span> data, including suspicion ranks, cannot 
                be used as evidence in legal proceedings. Please use WatchDogs as 
                it is intended, and use discretion when interpreting algorithmic results. 
                </div>
                <p></p>
            </footer>
        </div>
        
     : 
        <WatchDogs></WatchDogs>
      }
    
    </>
  );
}






export default App;