import Head from "next/head";
import Image from "next/image";
import ContactGrid from "../../components/ContactGrid";
import "./Omoss.css";

export default function About() {
  return (
    <>
      <Head>
        <title>Om oss – Nordic Storium</title>
        <meta
          name="description"
          content="Nordic Storium säljer kvalitetsmöbler och kontorsinredning till oslagbara priser. Vi köper in partier från konkursbon och företag."
        />
        <link rel="canonical" href="https://www.bbsmobler.se/om-oss" />
      </Head>

      <div className="container mx-auto px-4 py-12 about-container">
        <div className="max-w-4xl mx-auto about-content">
          <h1 className="text-4xl font-bold mb-8 text-center section-title">Om Nordic Storium</h1>

          <div className="flex flex-col md:flex-row gap-8 mb-16 items-center">
            <div className="flex-1 space-y-4 text-lg leading-relaxed text-content">
              <p>
                <strong>Välkommen till Nordic Storium!</strong> Vi öppnade dörrarna i början av 2026 med en tydlig vision: att erbjuda högkvalitativa möbler till priser som alla har råd med.
              </p>
              <p>
                Vår affärsidé är lika enkel som den är smart. Vi specialiserar oss på att förvärva stora partier av kontorsmöbler, stolar och inredning från företag som har avvecklats, flyttat eller gått i konkurs. Detta gör att vi kan sälja produkter av absolut högsta kvalitet – ofta kända designmärken – till en bråkdel av nypriset.
              </p>
              <p>
                Oavsett om du söker ergonomiska kontorsstolar, snygga konferensbord eller en bekväm soffa till loungen, så har vi något för dig. Och det bästa av allt? Vi erbjuder <strong>fri leverans</strong> om du befinner dig i närheten av Stockholm!
              </p>
            </div>

            <div className="flex-1 space-y-4 md:space-y-6 w-full max-w-md mx-auto md:max-w-none">
              <div className="relative h-48 md:h-64 w-[85%] md:w-full rounded-2xl overflow-hidden shadow-xl border-4 border-white/20 transform hover:scale-[1.02] transition-transform duration-300">
                <Image
                  src="/artifacts/omoss1.png"
                  alt="Kontorsmöbler lager"
                  fill
                  className="object-cover"
                />
              </div>
              <div className="relative h-40 md:h-64 w-[75%] md:w-full rounded-2xl overflow-hidden shadow-xl border-4 border-white/20 transform hover:scale-[1.02] transition-transform duration-300 ml-auto md:ml-8 -mt-6 md:-mt-12 z-10">
                <Image
                  src="/artifacts/omoss2.png"
                  alt="Ergonomiska stolar (Kinnarps)"
                  fill
                  className="object-cover"
                />
              </div>
            </div>
          </div>

          <div className="p-8 rounded-2xl mb-12 border border-[var(--border-color)] bg-[var(--card-bg)] shadow-lg">
            <h2 className="text-2xl font-bold mb-4 text-[var(--accent-color)]">Varför handla av oss?</h2>
            <ul className="space-y-3 text-content">
              <li className="flex items-start gap-3">
                <svg className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                <span><strong>Hållbart val:</strong> Att återanvända kvalitetsmöbler är en vinst för både plånboken och miljön.</span>
              </li>
              <li className="flex items-start gap-3">
                <svg className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                <span><strong>Otroliga priser:</strong> Spara upp till 70-80% jämfört med att köpa nytt.</span>
              </li>
              <li className="flex items-start gap-3">
                <svg className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                <span><strong>Snabb leverans:</strong> Vi har det mesta på lager och kan leverera omgående.</span>
              </li>
              <li className="flex items-start gap-3">
                <svg className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                <span><strong>Personlig service:</strong> Vi hjälper dig hitta rätt lösning för ditt kontor eller hem.</span>
              </li>
            </ul>
          </div>

        </div>
      </div>

      <ContactGrid />
    </>
  );
}