import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import BrowserOnly from '@docusaurus/BrowserOnly';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';

import successStories from '../data/successStories';

const BLIND_75_URL =
  'https://www.teamblind.com/post/New-Year-Gift---Curated-List-of-Top-75-LeetCode-Questions-to-Save-Your-Time-OaM1orEU';
const BLIND_OFFER_NUMBERS_URL =
  'https://www.teamblind.com/post/Sharing-my-offer-numbers-from-big-companies-for-your-reference-yNgqUPQR';

const FEATURES = [
  {
    title: <>💯 Go From zero to hero</>,
    description: (
      <>
        Go from zero to tech interview hero with this handbook. No prior
        interview experience needed.
      </>
    ),
    link: '/software-engineering-interview-guide/',
  },
  {
    title: <>📝 Curated practice questions</>,
    description: (
      <>
        No one has time to practice a few hundred questions. We created the{' '}
        <a href={BLIND_75_URL} target="_blank" rel="noopener">
          Blind 75 List
        </a>{' '}
        to tell you which the best questions are.
      </>
    ),
    link: '/coding-interview-study-plan/',
  },
  {
    title: <>📋 Interview best practices</>,
    description: (
      <>
        Straight-to-the-point Do's and Don'ts during an interview. The battle is
        already half won.
      </>
    ),
    link: '/coding-interview-cheatsheet/',
  },
  {
    title: <>💁‍♀️ Practical algorithm tips</>,
    description: (
      <>
        Practical tips for every algorithm topic - common techniques and corner
        cases to look out for.
      </>
    ),
    link: '/algorithms/study-cheatsheet/',
  },
  {
    title: <>💬 Behavioral questions</>,
    description: (
      <>
        Check out what behavioral questions companies commonly ask and you can
        prepare your answers ahead of time.
      </>
    ),
    link: '/behavioral-interview-questions/',
  },
  {
    title: <>🧪 Tested and proven</>,
    description: (
      <>
        Countless engineers have gotten their dream jobs with the help of Tech
        Interview Handbook.
      </>
    ),
  },
];

function Tweet({url, handle, name, content, avatar, date}) {
  return (
    <div className={clsx('card', styles.tweet)}>
      <div className="card__header">
        <div className="avatar">
          <img alt={name} className="avatar__photo" src={avatar} />
          <div className="avatar__intro">
            <div className={styles.tweet}>
              <strong>{name}</strong>{' '}
              <span className={styles.tweetMeta}>
                @{handle} &middot;{' '}
                <a className={styles.tweetMeta} href={url} rel="noopener">
                  {date}
                </a>
              </span>
            </div>
            <div>{content}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Home() {
  const {siteConfig = {}} = useDocusaurusContext();
  return (
    <Layout
      title="Technical Interview Guide for Busy Engineers"
      description={siteConfig.tagline}>
      <HeroSection />
      <WhatIsThisSection />
      <FAANGTechLeadsSection />
      <TweetsSection />
      <HowToUseSection />
      <AlgoMonsterSection />
      <FeaturesSection />
      <DesignGurusSection />
      <SuccessStoriesSection />
      <SponsorshipSection />
      <PreFooterSection />
    </Layout>
  );
}

function HeroSection() {
  const {siteConfig = {}} = useDocusaurusContext();

  return (
    <header className={clsx('hero', styles.heroBanner)}>
      <div className="container">
        <img
          alt={siteConfig.title}
          className={clsx(styles.heroBannerLogo, 'margin-vert--md')}
          src={useBaseUrl('img/logo.svg')}
        />
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">
          {siteConfig.tagline} <br />
          Brought to you by the author of{' '}
          <a href={BLIND_75_URL} rel="noopener" target="_blank">
            Blind 75
          </a>
        </p>
        <div className={styles.buttons}>
          <Link
            className={clsx('button button--primary button--lg')}
            to="/software-engineering-interview-guide/">
            Start reading now&nbsp;&nbsp;→
          </Link>
        </div>
        <div className="margin-top--lg">
          <iframe
            src="https://ghbtns.com/github-btn.html?user=yangshun&amp;repo=tech-interview-handbook&amp;type=star&amp;count=true&amp;size=large"
            frameBorder={0}
            scrolling={0}
            width={160}
            height={30}
            title="GitHub Stars"
          />
        </div>
      </div>
    </header>
  );
}

function WhatIsThisSection() {
  return (
    <div className={clsx('padding-vert--xl', styles.sectionAlt)}>
      <div className="container">
        <div className="row">
          <div className="col col--8 col--offset-2">
            <h2 className="text--center margin-bottom--lg">
              <span className="badge badge--primary">What is this</span>
            </h2>
            <h3
              className={clsx(
                'text--center',
                'margin-bottom--lg',
                styles.sectionTitle,
              )}>
              The fastest way to prepare effectively for your software
              engineering interviews, used by over 500,000 engineers
            </h3>
            <p className={clsx('margin-bottom--lg', styles.sectionTagline)}>
              Tech Interview Handbook goes{' '}
              <strong>straight to the point</strong> and tells you the{' '}
              <strong>minimum</strong> you need to know to excel in your
              technical interviews.
              <br />
              <br />
              Having personally gone through the interviewing process, it was
              frustrating to have to find resources from everywhere to prepare
              for my technical interviews.
              <br />
              <br />
              This handbook contains the essence of technical interviewing I
              gathered over my last job hunt, which allowed me to clinch 9
              offers out of 11 top Bay Area companies -{' '}
              <strong>Google, Airbnb, Palantir, Dropbox, Lyft</strong>, and some
              startups!
              <br />
              <br />A senior Netflix engineer used Tech Interview Handbook and
              got{' '}
              <a href="https://www.teamblind.com/post/7-onsites-7-offers-aAFTykAD">
                7 offers from 7 companies
              </a>{' '}
              with the top offer being $800k USD 🤯!
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

function MoonchaserSection() {
  // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
  // we'll render this on the browser only.
  return (
    <BrowserOnly>
      {() => (
        <div className={clsx('padding-vert--lg', styles.sectionSponsor)}>
          <div className="container">
            <div className="row">
              <div className="col col--8 col--offset-2">
                <div className="margin-vert--lg text--center">
                  <div>
                    <h2 className={styles.sectionSponsorTitle}>
                      <strong>
                        Get paid more. Receive risk-free salary negotiation
                        advice from Moonchaser. You pay nothing unless your
                        offer is increased.
                      </strong>
                    </h2>
                    <div className="margin-vert--lg">
                      <a
                        className="button button--secondary button--lg"
                        href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_homepage"
                        rel="noopener"
                        target="_blank"
                        onClick={() => {
                          window.gtag('event', 'moonchaser.homepage.click');
                        }}>
                        Get risk-free negotiation advice&nbsp;&nbsp;→
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </BrowserOnly>
  );
}

function HowToUseStep({index, title, ctaLink, contents}) {
  return (
    <div className={clsx('card', styles.howToUseStep)}>
      <div className="card__header">
        <div className="margin-bottom--sm">
          <small className={styles.howToUseStepLabel}>STEP {index}</small>
        </div>
        <h3>{title}</h3>
      </div>
      <div className="card__body">
        <ul>
          {contents.map((content, i) => (
            <li key={i}>{content}</li>
          ))}
        </ul>
      </div>
      <div className="card__footer">
        <Link className="button button--primary button--block" to={ctaLink}>
          Read now →
        </Link>
      </div>
    </div>
  );
}

function HowToUseSection() {
  return (
    <div className={clsx('padding-vert--xl', styles.sectionAlt2)}>
      <div className="container">
        <div className="row">
          <div className="col col--10 col--offset-1">
            <h2 className="text--center margin-bottom--lg">
              <span className="badge badge--primary">How to use</span>
            </h2>
            <h3
              className={clsx(
                'text--center',
                'margin-bottom--lg',
                styles.sectionTitle,
              )}>
              Not sure where to start in your interview preparation?
              <br /> We've got you covered.
            </h3>
            <p
              className={clsx(
                'text--center',
                'margin-bottom--lg',
                styles.sectionTagline,
              )}>
              This guide is structured in a{' '}
              <strong>simple to follow, step-by-step</strong> style covering all
              aspects of your software engineering interview preparation -{' '}
              <strong>no prior interview experience required</strong>.
            </p>
          </div>
        </div>
        <div className={clsx('row', styles.featuresRow)}>
          <div
            className={clsx('col', 'col--3', styles.featuresRowItemContainer)}>
            <HowToUseStep
              index={1}
              title={<>Prepare a FAANG-ready resume</>}
              contents={[
                <>Create an ATS-proof resume</>,
                <>Software engineering specific resume content</>,
                <>Optimizing and testing your resume</>,
              ]}
              ctaLink="/resume/"
            />
          </div>
          <div
            className={clsx('col', 'col--3', styles.featuresRowItemContainer)}>
            <HowToUseStep
              index={2}
              title={<>Ace the interviews</>}
              contents={[
                <>Step-by-step coding interview preparation</>,
                <>Algorithms deep dive</>,
                <>System design interview preparation</>,
                <>Behavioral interview preparation</>,
              ]}
              ctaLink="/coding-interview-prep/"
            />
          </div>
          <div
            className={clsx('col', 'col--3', styles.featuresRowItemContainer)}>
            <HowToUseStep
              index={3}
              title={<>Negotiate the best offer</>}
              contents={[
                <>Negotiation strategies for software engineers</>,
                <>Guide on how compensation works for software engineers</>,
              ]}
              ctaLink="/understanding-compensation/"
            />
          </div>
          <div
            className={clsx('col', 'col--3', styles.featuresRowItemContainer)}>
            <HowToUseStep
              index={4}
              title={<>Prepare for the job</>}
              contents={[
                <>How to choose between companies</>,
                <>Guide to engineering levels</>,
              ]}
              ctaLink="/choosing-between-companies"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

function FeaturesSection() {
  return (
    <div className={clsx('padding-vert--xl', styles.sectionAlt)}>
      <div className="container">
        <div className="row">
          <div className="col col--10 col--offset-1">
            <h2 className="text--center margin-bottom--lg">
              <span className="badge badge--primary">Why this guide</span>
            </h2>
            <h3
              className={clsx(
                'text--center',
                'margin-vert--lg',
                styles.sectionTitle,
              )}>
              We have everything you need - all straight to the point
            </h3>
            <div className={clsx('row', styles.featuresRow)}>
              {FEATURES.map(({title, description, link}, idx) => (
                <div
                  key={idx}
                  className={clsx(
                    'col',
                    'col--4',
                    styles.featuresRowItemContainer,
                  )}>
                  <div className={clsx('card', styles.featuresRowItem)}>
                    <h3 className={styles.featuresRowItemTitle}>{title}</h3>
                    <p className={styles.featuresRowItemDescription}>
                      {description}
                    </p>
                    {link && (
                      <Link className={styles.featuresRowItemLink} to={link}>
                        <strong>Read now →</strong>
                      </Link>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DesignGurusSection() {
  return (
    <div
      className={clsx('padding-vert--lg')}
      style={{backgroundColor: '#6fc8cc'}}>
      <div className="container">
        <div className="row">
          <div className="col col--8 col--offset-2">
            <div className="margin-vert--lg text--center">
              <div>
                <h2 style={{color: '#083436'}}>
                  <strong>
                    Tired of grinding LeetCode? Grokking the Coding Interview is
                    the recommended way to quickly learn coding question
                    patterns to help you ace the coding interviews.
                  </strong>
                </h2>
                <div className="margin-vert--lg">
                  <a
                    className="button button--secondary button--lg"
                    href="https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview"
                    rel="noopener"
                    target="_blank"
                    onClick={() => {
                      window.gtag('event', 'designgurus.homepage.click');
                    }}>
                    Learn efficiently&nbsp;&nbsp;→
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FAANGTechLeadsSection() {
  return (
    <div
      className={clsx('padding-vert--lg')}
      style={{backgroundColor: 'rgb(244, 63, 94)'}}>
      <div className="container">
        <div className="row">
          <div className="col col--8 col--offset-2">
            <div className="margin-vert--lg text--center">
              <div>
                <h2 className={styles.sectionSponsorTitle}>
                  <strong>
                    Craft the perfect resume for FAANG with FAANG Tech Leads'
                    high quality Software Engineer resume templates and samples.
                  </strong>
                </h2>
                <div className="margin-vert--lg">
                  <a
                    className="button button--secondary button--lg"
                    href="https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2"
                    rel="noopener"
                    target="_blank"
                    onClick={() => {
                      window.gtag('event', 'faangtechleads.homepage.click');
                    }}>
                    Improve your resume now &nbsp;&nbsp;→
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function AlgoMonsterSection() {
  return (
    <div
      className={clsx('padding-vert--lg')}
      style={{backgroundImage: 'linear-gradient(270deg, #3e1792, #6a45b9)'}}>
      <div className="container">
        <div className="row">
          <div className="col col--8 col--offset-2">
            <div className="margin-vert--lg text--center">
              <div>
                <h2 className={styles.sectionSponsorTitle}>
                  <strong>
                    Developed by Google engineers, AlgoMonster is the fastest
                    way to get a software engineering job. Join today for a 70%
                    discount!
                  </strong>
                </h2>
                <div className="margin-vert--lg">
                  <a
                    className="button button--secondary button--lg"
                    href="https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack="
                    rel="noopener"
                    target="_blank"
                    onClick={() => {
                      window.gtag('event', 'algomonster.homepage.click');
                    }}>
                    Study with a plan&nbsp;&nbsp;→
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function TweetsSection() {
  return (
    <div className={clsx('padding-vert--xl', styles.sectionAlt)}>
      <div className="container">
        <h2
          className={clsx(
            'margin-bottom--lg',
            'text--center',
            styles.sectionTitle,
          )}>
          Over 500,000 people have benefitted from this handbook!
        </h2>
        <div className={clsx('row', styles.tweetsSection)}>
          <div className="col col--4">
            <Tweet
              url="https://twitter.com/Insharamin/status/1412978510788915205"
              handle="Insharamin"
              name="Insha"
              date="Jul 8, 2021"
              avatar="https://pbs.twimg.com/profile_images/1513932354552619009/w5MTxjG2_400x400.jpg"
              content={
                <>
                  1️⃣ Tech Interview Handbook
                  <br />
                  <br />
                  This repository has practical content that covers all phases
                  of a technical interview, from applying for a job to passing
                  the interviews to offer negotiation. 📎
                </>
              }
            />
            <Tweet
              url="https://twitter.com/Justyna_Adam/status/1186166253830004736"
              handle="Justyna_Adam"
              name="Justyna_Adamczyk"
              date="Oct 21, 2019"
              avatar="https://pbs.twimg.com/profile_images/1328613502571978753/bTkdJhPt_400x400.jpg"
              content={
                <>
                  Another excellent tech interview handbook! If you need to
                  prepare yourself for a tech interview or you're an interviewer
                  and need additional inspiration. Happy Monday! #techinterviews
                </>
              }
            />
            <Tweet
              url="https://twitter.com/umaar/status/913425809108606976"
              handle="umaar"
              name="Umar Hansa"
              date="Sep 28, 2017"
              avatar="https://pbs.twimg.com/profile_images/1305935669705965568/vS_bpIuu_400x400.jpg"
              content={
                <>
                  Tech Interview Handbook 💻 - Content to help you ace your next
                  technical interview. Lots of front-end content here ✅
                </>
              }
            />
          </div>
          <div className="col col--4">
            <Tweet
              url="https://twitter.com/MSFTImagine/status/1502675788335886344"
              handle="MSFTImagine"
              name="Microsoft Imagine Cup"
              date="Mar 13, 2022"
              avatar="https://pbs.twimg.com/profile_images/1268173752745046016/nW2kPbvp_400x400.png"
              content={
                <>
                  Ready to rock your #Coding interviews? Follow along as
                  @yangshunz shares tips on how to land your dream job from
                  personal experience.
                </>
              }
            />
            <Tweet
              url="https://twitter.com/palashv2/status/1452981345899085833"
              handle="palashv2"
              name="Palash"
              date="Oct 26, 2021"
              avatar="https://pbs.twimg.com/profile_images/1435103134842454016/DfF093MF_400x400.jpg"
              content={
                <>
                  5. Tech Interview Handbook
                  <br />
                  <br />
                  Here's free and curated technical interview preparation
                  materials for busy engineers. Besides the usual algorithm
                  questions, other awesome stuff includes How to prepare for
                  coding interviews, Interview Cheatsheet, and more.
                </>
              }
            />
            <Tweet
              url="https://twitter.com/ravinwashere/status/1328381097277681665"
              handle="ravinwashere"
              name="Ravin"
              date="Nov 17, 2020"
              avatar="https://pbs.twimg.com/profile_images/1314872679195799552/80_xRIEF_400x400.jpg"
              content={
                <>
                  Preparing for a job interview?
                  <br />
                  <br />
                  The tech interview handbook contains carefully curated to help
                  you ace your next technical interview.
                  <br />
                  <br />
                  And it's free.
                </>
              }
            />
          </div>
          <div className="col col--4">
            <Tweet
              url="https://twitter.com/khalalw/status/1469496702365159431"
              handle="khalalw"
              name="Khalal Walker"
              date="Dec 11, 2021"
              avatar="https://pbs.twimg.com/profile_images/1479884864543285255/pcE_Nl12_400x400.jpg"
              content={
                <>
                  Lastly, the Tech Interview Handbook. This is a pretty solid
                  comprehensive resource from your initial introduction, to
                  resumes, system design, coding, etc. Points to other solid
                  resources that can be a great help.
                </>
              }
            />
            <Tweet
              url="https://twitter.com/Vinaystwt/status/1437062973554507777"
              handle="Vinaystwt"
              name="Vinay Sharma"
              date="Sep 12, 2021"
              avatar="https://pbs.twimg.com/profile_images/1413766958281990145/--os1eLq_400x400.jpg"
              content={
                <>
                  🔹Tech Interview Handbook: Another useful resource that covers
                  information about technical interviews. It covers the job
                  applications, the interview process and the post-interview
                </>
              }
            />
            <Tweet
              url="https://twitter.com/sitepointdotcom/status/1164121717243023360"
              handle="sitepointdotcom"
              name="SitePoint"
              date="Aug 21, 2019"
              avatar="https://pbs.twimg.com/profile_images/1425900902783668228/eJF_2-Ds_400x400.jpg"
              content={
                <>
                  The Tech Interview Handbook provides carefully curated content
                  to help you ace your next technical interview.
                </>
              }
            />
            <Tweet
              url="https://twitter.com/rwenderlich/status/1166336060533727232"
              handle="rwenderlich"
              name="raywenderlich.com"
              date="Aug 27, 2019"
              avatar="https://pbs.twimg.com/profile_images/1501959146568101895/gAeUOeXe_400x400.png"
              content={<>Nice open source tech interview handbook</>}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

function SuccessStory({name, quote, thumbnail, title}) {
  return (
    <div className="card margin-vert--lg">
      <div className="card__body">
        <p className={styles.quote}>"{quote}"</p>
      </div>
      <div className="card__header">
        <div className="avatar">
          <img alt={name} className="avatar__photo" src={thumbnail} />
          <div className="avatar__intro">
            <div className="avatar__name">{name}</div>
            <small className="avatar__subtitle">{title}</small>
          </div>
        </div>
      </div>
    </div>
  );
}

function SuccessStoriesSection() {
  const storiesColumns = [[], []];
  successStories.forEach((tweet, i) => storiesColumns[i % 2].push(tweet));

  return (
    <div className={clsx('padding-vert--xl', styles.sectionAlt)}>
      <div className="container">
        <div className="row">
          <div className="col col--6 col--offset-3">
            <h2 className="text--center margin-bottom--lg">
              <span className="badge badge--primary">Success stories</span>
            </h2>
            <h3
              className={clsx(
                'margin-vert--lg',
                'text--center',
                styles.sectionTitle,
              )}>
              Countless engineers have gotten a job at FAANG with this free
              handbook
            </h3>
          </div>
        </div>
        <div className={clsx('row', styles.tweetsSection)}>
          <div className="col col--offset-2 col--4">
            {storiesColumns[0].map((user) => (
              <SuccessStory key={user.name} {...user} />
            ))}
          </div>
          <div className="col col--4">
            {storiesColumns[1].map((user) => (
              <SuccessStory key={user.name} {...user} />
            ))}
          </div>
        </div>
        <p className="margin-vert--lg text--center">
          Would you like to contribute a success story?{' '}
          <a
            href="https://github.com/yangshun/tech-interview-handbook/edit/master/website/src/data/successStories.js"
            rel="noopener"
            target="_blank">
            Open a Pull Request here
          </a>
          !
        </p>
      </div>
    </div>
  );
}

function SponsorshipSection() {
  return (
    <div className={clsx('padding-vert--xl')}>
      <div className="container">
        <div className="row">
          <div className="col col--8 col--offset-2">
            <h2 className="text--center margin-bottom--lg">
              <span className="badge badge--primary">Advertise with us</span>
            </h2>
            <h3
              className={clsx(
                'margin-vert--lg',
                'text--center',
                styles.sectionTitle,
              )}>
              Interested in advertising on Tech Interview Handbook?
            </h3>
            <p className={clsx(styles.sectionTagline, 'text--center')}>
              Leverage on more than 200,000 monthly page views from 40,000 to
              50,000 unique software engineers.
            </p>
            <p className={clsx(styles.sectionTagline, 'text--center')}>
              Sponsors can choose any or all of the following positions to
              advertise with us:
            </p>
            <div className={styles.sectionTagline}>
              <div className="row">
                <div className="col col--5 col--offset-1">
                  <ul className={styles.sponsorshipList}>
                    <li>✅ Top banner of every page</li>
                    <li>✅ Homepage</li>
                    <li>✅ Sidebar of every page</li>
                  </ul>
                </div>
                <div className="col col--5">
                  <ul className={styles.sponsorshipList}>
                    <li>✅ Navigation menu</li>
                    <li>✅ Bottom of every page</li>
                  </ul>
                </div>
              </div>
            </div>
            <div className="margin-top--lg text--center">
              <a
                className="button button--primary button--lg margin-right--md"
                href="mailto:contact@techinterviewhandbook.org"
                rel="noopener"
                target="_blank">
                Advertise with us!
              </a>
              <Link
                className="button button--secondary button--lg"
                to="/advertise">
                Find out more
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function PreFooterSection() {
  return (
    <div className={clsx('padding-vert--xl', styles.sectionAlt)}>
      <div className="container">
        <div className="row">
          <div className="col col--4">
            <h2>Take the next step</h2>
          </div>
          <div className="col col--8">
            <p className={clsx(styles.sectionTagline)}>
              It's free! Start improving your interview game today and get the
              job at the company of your dreams.
            </p>
            <Link
              className={clsx('button button--primary button--lg')}
              to="/software-engineering-interview-guide/">
              Start reading now&nbsp;&nbsp;→
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;