import { SITE } from "@/lib/site";

import CtaBand from "@/components/CtaBand";
import Icon from "@/components/Icon";
import Reveal from "@/components/Reveal";

export default function ContactPage() {
  return (
    <>
      <section className="relative flex min-h-[55dvh] items-center overflow-hidden pt-24">
        <div className="absolute inset-0 -z-10 bg-gradient-to-b from-white via-white to-surface" />
        <div className="container-gv w-full pb-12 pt-8">
          <Reveal>
            <p className="eyebrow">Contact</p>
          </Reveal>
          <Reveal delay={0.08}>
            <h1 className="mt-6 max-w-2xl font-display text-4xl font-bold leading-[1.05] tracking-tight text-ink sm:text-5xl lg:text-6xl">
              {"Let's work together for a greener tomorrow!"}
            </h1>
          </Reveal>
          <Reveal delay={0.16}>
            <p className="mt-6 max-w-xl text-base leading-relaxed text-ink-soft sm:text-lg">
              For UPS power protection, solar, biomass and battery storage
              enquiries, reach out to our team.
            </p>
          </Reveal>
        </div>
      </section>

      <section className="section pt-8 lg:pt-10">
        <div className="container-gv grid gap-10 lg:grid-cols-12">
          {/* Head office card */}
          <div className="lg:col-span-8 lg:col-start-3">
            <Reveal>
              <div className="rounded-card border border-line bg-paper p-7 sm:p-8">
                <h2 className="font-display text-xl font-semibold tracking-tight text-ink">
                  Head Office
                </h2>
                <address className="mt-4 not-italic text-sm leading-relaxed text-ink-soft">
                  {SITE.address}
                </address>
                <ul className="mt-8 space-y-5">
                  <li className="flex items-start gap-3">
                    <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-card bg-sky text-accent">
                      <Icon name="phone" size={18} className="ph" />
                    </span>
                    <span className="text-sm leading-relaxed text-ink">
                      <span className="block text-xs font-bold uppercase tracking-[0.18em] text-ink-soft">
                        Tel
                      </span>
                      <a
                        href={SITE.telHref}
                        className="mt-1 inline-block font-semibold text-accent underline-offset-2 hover:underline"
                      >
                        {SITE.tel}
                      </a>
                    </span>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-card bg-sky text-accent">
                      <Icon name="phone" size={18} className="ph" />
                    </span>
                    <span className="text-sm leading-relaxed text-ink">
                      <span className="block text-xs font-bold uppercase tracking-[0.18em] text-ink-soft">
                        Fax
                      </span>
                      <span className="mt-1 inline-block">{SITE.fax}</span>
                    </span>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-card bg-sky text-accent">
                      <Icon name="envelope" size={18} className="ph" />
                    </span>
                    <span className="text-sm leading-relaxed text-ink">
                      <span className="block text-xs font-bold uppercase tracking-[0.18em] text-ink-soft">
                        Email
                      </span>
                      <a
                        href={SITE.emailHref}
                        className="mt-1 inline-block font-semibold text-accent underline-offset-2 hover:underline"
                      >
                        {SITE.email}
                      </a>
                    </span>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-card bg-sky text-accent">
                      <Icon name="envelope" size={18} className="ph" />
                    </span>
                    <span className="text-sm leading-relaxed text-ink">
                      <span className="block text-xs font-bold uppercase tracking-[0.18em] text-ink-soft">
                        Website
                      </span>
                      <a
                        href={SITE.websiteHref}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="mt-1 inline-block font-semibold text-accent underline-offset-2 hover:underline"
                      >
                        {SITE.website}
                      </a>
                    </span>
                  </li>
                </ul>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Buttonless band: the contact page's CTA button would self-link to /contact */}
      <CtaBand withCta={false} />
    </>
  );
}