import Image from "next/image";

const services = [
  {
    title: "Internet Connectivity",
    description:
      "Business internet access with resilient routing, clear service boundaries, and engineering-led deployment.",
  },
  {
    title: "Managed Network Services",
    description:
      "Operational support for routing, switching, firewalls, and production network infrastructure.",
  },
  {
    title: "Network Consulting",
    description:
      "Architecture, troubleshooting, and design support for organisations and service providers.",
  },
];

export default function HomePage() {
  return (
    <main id="top">
      <header className="site-header">
        <div className="container header-inner">
          <a href="#top" className="brand-link" aria-label="Go to top">
            <Image
              src="/branding/novarix-wordmark-colour.png"
              alt="Novarix Networks"
              width={2048}
              height={430}
              priority
              className="brand-image brand-image-light"
            />
            <Image
              src="/branding/novarix-wordmark-white.png"
              alt="Novarix Networks"
              width={2048}
              height={430}
              priority
              className="brand-image brand-image-dark"
            />
          </a>

          <nav className="nav">
            <a href="#services">Services</a>
            <a href="#direction">Direction</a>
            <a href="#contact">Contact</a>
          </nav>
        </div>
      </header>

      <section className="hero">
        <div className="container">
          <div className="hero-copy">
            <p className="eyebrow">Connectivity • Managed Services • Network Engineering</p>
            <h1>Network infrastructure services built for reliability and growth.</h1>
            <p className="hero-text">
              Novarix Networks provides internet connectivity, managed network
              services, and engineering expertise for organisations that need
              dependable infrastructure and clear technical ownership.
            </p>

            <div className="hero-actions">
              <a href="#contact" className="button button-primary">
                Contact
              </a>
              <a href="#services" className="button button-secondary">
                Services
              </a>
            </div>
          </div>
        </div>
      </section>

      <section id="services" className="section section-border">
        <div className="container">
          <div className="section-heading">
            <h2>Services</h2>
            <p>
              Focus the first version of the business on what can be delivered
              credibly now.
            </p>
          </div>

          <div className="card-grid">
            {services.map((service) => (
              <article key={service.title} className="card">
                <h3>{service.title}</h3>
                <p>{service.description}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section id="direction" className="section section-border">
        <div className="container narrow">
          <div className="section-heading">
            <h2>Platform Direction</h2>
            <p>
              The platform is designed to expand beyond connectivity and managed
              services toward deeper interconnection capabilities, including
              exchange participation and edge infrastructure where commercially
              justified.
            </p>
          </div>

          <div className="direction-list">
            <div className="direction-item">
              <span className="direction-phase">Phase 1</span>
              <h3>Connectivity, support, consulting</h3>
              <p>Lead with services that are operationally clear and saleable immediately.</p>
            </div>

            <div className="direction-item">
              <span className="direction-phase">Phase 2</span>
              <h3>Interconnect and peering</h3>
              <p>Add exchange participation and partner interconnection as the footprint matures.</p>
            </div>

            <div className="direction-item">
              <span className="direction-phase">Phase 3</span>
              <h3>Edge infrastructure</h3>
              <p>Introduce selective CDN edge or regional platform capability only where demand supports it.</p>
            </div>
          </div>
        </div>
      </section>

      <section id="contact" className="section section-border">
        <div className="container narrow">
          <div className="section-heading">
            <h2>Contact</h2>
            <p>
              For enquiries regarding connectivity, managed network support, or
              consulting services:
            </p>
          </div>

          <a className="contact-link" href="mailto:hello@novarix.network">
            hello@novarix.network
          </a>
        </div>
      </section>

      <footer className="footer section-border">
        <div className="container footer-inner">
          <span>© {new Date().getFullYear()} Novarix Networks</span>
        </div>
      </footer>
    </main>
  );
}