import { faTrophy } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import corner4 from 'assets/img/illustrations/corner-4.png';
import corner7 from 'assets/img/illustrations/corner-7.png';
import Background from 'components/common/Background';
import FalconCardHeader from 'components/common/FalconCardHeader';
import FalconEditor from 'components/common/FalconEditor';
import SubtleBadge from 'components/common/SubtleBadge';
import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';

const serveCode = `npm run preview`;

const GettingStarted = () => (
  <>
    <Row className="g-3 mb-3">
      <Col lg={12} xxl={6}>
        <Card className="mb-3 h-100">
          <Background
            image={corner4}
            className="bg-card"
            style={{
              borderTopRightRadius: '0.375rem',
              borderBottomRightRadius: '0.375rem'
            }}
          />
          <Card.Body className="position-relative pe-7 pe-xxl-8">
            <h3>Getting Started</h3>
            <p className="mb-0">
              Welcome to the ReactJS version of the{' '}
              <a
                href="https://themewagon.com/themes/falcon/"
                target="_blank"
                rel="noopener noreferrer"
              >
                original Falcon theme{' '}
              </a>
              . This doc will guide you to understand how{' '}
              <strong>Falcon-React</strong> theme is organized, basics of how to
              customize, and how to compile from the source code if you want.
            </p>
          </Card.Body>
        </Card>
      </Col>
      <Col lg={12} xxl={6}>
        <Card className="mb-3 border border-warning h-100">
          <Background
            image={corner7}
            className="bg-card"
            style={{
              borderTopRightRadius: '0.375rem',
              borderBottomRightRadius: '0.375rem'
            }}
          />
          <Card.Body className="pb-0 position-relative">
            <SubtleBadge
              bg="warning"
              className="fs-10 py-2 opacity-85 fw-medium"
            >
              <FontAwesomeIcon
                className="me-2 fs-11 fw-medium"
                icon={faTrophy}
              />
              Hire us!
            </SubtleBadge>
            <h3 className="mt-3 text-warning">Need a hand?</h3>
            <p className="mb-0">
              We are one of the leading UI/UX design, front-end & backend
              development consultancy company and are available for hire.
            </p>
          </Card.Body>
          <Card.Footer className="position-relative pt-0">
            <span className="fw-semibold">Give us a nudge at </span>
            <a href="mailto:support@themewagon.com">support@themewagon.com</a>
          </Card.Footer>
        </Card>
      </Col>
    </Row>

    <Card className="mb-3">
      <FalconCardHeader title="Running in Local environment" />
      <Card.Body>
        <p>
          This project is scaffolded using{' '}
          <a
            href="https://vite.dev/guide/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Vite
          </a>
          .
        </p>
        <ol className="mb-0 ps-x1">
          <li>
            Install{' '}
            <a
              href="https://nodejs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Node.js
            </a>{' '}
            if you do not already have it installed on your machine.
          </li>
          <li>Open the “falcon-react” directory with your cmd or terminal</li>
          <li>
            Run <code>npm i</code>
            <br />
            This command will download all the necessary dependencies for falcon
            in the <code>node_modules</code> directory.
          </li>
          <li>
            Run <code>npm run dev</code>. A local web server will start at{' '}
            <code>http://localhost:3000</code>
          </li>
        </ol>
      </Card.Body>
    </Card>
    <Card className="mb-3">
      <FalconCardHeader title="Creating a Production Build" />
      <Card.Body>
        <p>
          After you done your customization, when you are ready to build, Edit{' '}
          <code>homapage</code> in your <code>package.json</code> file to change
          asset files relative paths. For more information visit{' '}
          <a
            href="https://vite.dev/guide/static-deploy.html"
            target="_blank"
            rel="noreferrer"
          >
            Vite Doc.
          </a>{' '}
          Then Run <code>npm run build</code> command in your project directory
          to make the Production build.
        </p>
        <p>
          This will create an optimized production build by compiling, merging
          and minifying all the source files as necessary and will put them in
          the <code>dist/</code> folder.
        </p>
        <p>
          To run the production build locally at
          <code> http://localhost:4173 </code> run the following commands:
        </p>
        <FalconEditor code={serveCode} language="bash" hidePreview />
      </Card.Body>
    </Card>

    <Card className="mb-3">
      <FalconCardHeader title="Contents" />
      <Card.Body>
        <p className="mb-0">
          Inside the zip-file you'll find the following directories and files.
          Both compiled and minified distrubution files, as well as the source
          files are included in the package.
        </p>
        <code>
          <pre>
            {`
theme/
  ├── .env
  ├── .eslintignore
  ├── .eslintrc.js
  ├── .gitignore
  ├── .prettierrc.js
  ├── compile-scss.js
  ├── index.html
  ├── jsconfig.json
  ├── package-lock.json
  ├── package.json
  ├── README.md
  ├── vite.config.js
  ├── public/
  │   ├── css/
  │   ├── favicon.ico
  │   └── manifest.json
  └── src/
      ├── assets/
      │   ├── img/
      │   ├── json/
      │   ├── scss/
      │   └── video/
      ├── components/
      ├── data/
      ├── helpers/
      ├── hooks/
      ├── layouts/
      ├── providers/
      ├── reducers/
      ├── routes/
      ├── widgets/
      ├── App.js
      ├── config.js
      ├── index.js
`}
          </pre>
        </code>
      </Card.Body>
    </Card>
  </>
);

export default GettingStarted;
