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

import Translate, {translate} from '@docusaurus/Translate';

const CONTACT_US = '/contact';
const BOOT_IMAGES = '/docs/build-a-box';
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">
          <Translate id="home.title">Introducing Butter Box</Translate>
        </Heading>
        <p className="hero-subtitle">
          <Translate id="home.subtitle1">Life without internet made smoother.</Translate><br/>
	  <Translate id="home.subtitle2">Get access to tools that help.</Translate>
        </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">
              <Translate id="home.whatisbutterbox">An app store, encrypted chat, and more, all available over WiFi from an off-the-grid Raspberry Pi.</Translate>
            </p>
          </div>

          <section className="section">
            <Heading as="h2"><Translate id="home.section1.title">How does it work?</Translate></Heading>
            <p className="content-text">
              <Translate id="home.section1.description">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.</Translate>
            </p>
            <img
              src="/img/docs/20250815_142828.jpg"
              alt="A Butter Box: A Raspberry Pi Zero W 2 plugged into a battery and solar panel."
            />
            <a className="btn-main" href={DOCS}>
              <Translate id="home.learnmore">Learn More</Translate>
            </a>
          </section>

          <section className="section">
            <Heading as="h2"><Translate id="home.getbutter.title">Get your own Butter Box</Translate></Heading>
            <p className="content-text">
              <Translate id="home.getbutter.description">We help make &amp; ship Butter Boxes to partners around the world.
              Reach out to us if you serve a community that could benefit.</Translate>
            </p>
            <a className="btn-main" href={`${CONTACT_US}`}>
             <Translate id="home.getintouch">Get in Touch</Translate> 
            </a>
          </section>

          <section className="section">
            <Heading as="h2"><Translate id="home.makebutter.title">Make your own Butter Box</Translate></Heading>
            <p className="content-text">
              <Translate id="home.makebutter.description">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.</Translate>
            </p>
            <a
              className="btn-main"
              href={BOOT_IMAGES}>
		<Translate id="home.learnhow">Learn How!</Translate>
            </a>
            <p className="content-text" style={{marginTop: '1.5rem'}}>
              <Translate id="home.getcode.title">Or, customize your Butter Box following the instructions in our
              open source repository.</Translate>
            </p>
            <a
              className="btn-main"
              href={`${REPO}`}>
              <Translate id="home.getsource.button">Source &amp; Documentation</Translate>
            </a>
          </section>
        </div>
      </main>
    </Layout>
  );
}