import type {ReactNode} from 'react';
import Layout from '@theme/Layout';
import Heading from '@theme/Heading';

const CONTACT_EMAIL = 'support@guardianproject.info';
const MAILING_LIST = '/contact';
const BOOT_IMAGES = '/docs/update-butter';
const REPO = 'https://guardianproject.dev/butter';
const DOCS = '/docs';

function Hero() {
  return (
    <header className="butter-hero">
      <div className="container">
        <img
          className="hero-logo"
          src="/img/butter-logo-feature-large.svg"
          alt="Butter App Feature Logo"
        />
        <Heading as="h1" className="hero-title">
          Introducing Butter Box
        </Heading>
        <p className="hero-subtitle">
          No Internet? No electricity? No problem. You can make the{' '}
          <a href="/docs/">Butter app store</a> available anywhere with
          Butter Box.
        </p>
      </div>
    </header>
  );
}

export default function Home(): ReactNode {
  return (
    <Layout
      title="Introducing Butter Box"
      description="Life without internet made smoother. Get access to tools that help.">
      <Hero />
      <main className="butter-content">
        <div className="container">
          <div className="device-image">
            <img
              src="/img/butterhome.jpg"
              alt="A Butter Box: A Raspberry Pi Zero W 2 plugged into a battery and solar panel."
            />
            <p className="caption">
              An app store, encrypted chat, and more, all available over WiFi
              from an off-the-grid Raspberry Pi.
            </p>
          </div>

          <section className="section">
            <Heading as="h2">How does it work?</Heading>
            <img
              src="/img/plugged-in-to-solar.jpg"
              alt="A Butter Box: A Raspberry Pi Zero W 2 plugged into a battery and solar panel."
            />
            <p className="content-text">
              Butter Box broadcasts its own WiFi network. Once you join, you
              can install Butter, get apps, join a public chatroom, or make
              your own private one to share with friends. Butter Box works
              even when there&apos;s no Internet. Just stop by the box to
              download more apps or check in on your chatrooms. Everything is
              stored right on the Butter Box.
            </p>
            <a className="btn-main" target="_blank" rel="noreferrer" href={DOCS}>
              Learn More
            </a>
          </section>

          <section className="section">
            <Heading as="h2">Get your own Butter Box</Heading>
            <p className="content-text">
              We make &amp; ship Butter Boxes to partners around the world.
              Reach out to us if you serve a community that could benefit.
            </p>
            <a className="btn-main" href={`mailto:${CONTACT_EMAIL}`}>
              Email us
            </a>
          </section>

          <section className="section">
            <Heading as="h2">Make your own Butter Box</Heading>
            <p className="content-text">
              You can make your own Butter Box by installing a pre-made image
              on a Raspberry Pi or even an old PC. Just download the image and burn it onto a
              MicroSD card or USB drive using the same RPi or Disk Imager you&apos;d use to install
              other distros.
            </p>
            <a
              className="btn-main"
              target="_blank"
              rel="noreferrer"
              href={BOOT_IMAGES}>
              Download boot images
            </a>
            <p className="content-text" style={{marginTop: '1.5rem'}}>
              Or, customize your Butter Box following the instructions in our
              open source repository.
            </p>
            <a
              className="btn-main"
              target="_blank"
              rel="noreferrer"
              href={`${REPO}/-/blob/main/docs/en/README.md`}>
              Source &amp; Documentation
            </a>
          </section>
        </div>
      </main>
    </Layout>
  );
}