'use client';

import React from 'react';

import Link from "next/link";
import Image from "next/image";
import { useTranslations } from '../../hooks/useTranslations';

export default function Home() {
    const { t } = useTranslations();
    return (
        <div className="min-h-screen pt-20">
            {/* Hero Section */}
            <section
                className="relative py-36 px-4 sm:px-6 lg:px-8 hero-bg-mobile-home hero-bg-desktop-home"
            >
                {/* Content Box */}
                <div className="relative z-10 max-w-4xl mx-auto">
                    <div className="bg-white rounded-2xl p-8 shadow-2xl hover:shadow-3xl transition-all duration-200" style={{ backgroundColor: 'rgba(255, 255, 255, 0.9125)' }}>
                        <div className="text-left">
                            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-6" style={{ color: '#0B2545' }}>
                                {t('home.hero.title')}
                            </h1>
                            <p className="text-lg sm:text-xl mb-6 max-w-4xl leading-relaxed" style={{ color: '#13315C' }}>
                                {t('home.hero.description')}<br />
                                {t('home.hero.description2')}<br />
                                {t('home.hero.description3')}
                            </p>
                            <p className="text-lg sm:text-xl font-bold mb-10 max-w-4xl" style={{ color: '#134074' }}>
                                {t('home.hero.value')}
                            </p>
                            <div className="flex flex-col sm:flex-row gap-4 justify-center">
                                <Link
                                    href="/sv/services"
                                    className="text-white hover:opacity-90 font-semibold py-3 px-8 rounded-full transition-colors duration-200 shadow-lg"
                                    style={{ backgroundColor: '#134074' }}
                                >
                                    {t('home.hero.cta1')}
                                </Link>
                                <Link
                                    href="/sv/contact"
                                    className="border-2 hover:text-white font-semibold py-3 px-8 rounded-full transition-colors duration-200"
                                    style={{ borderColor: '#134074', color: '#134074' }}
                                    onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { (e.target as HTMLElement).style.backgroundColor = '#134074'; (e.target as HTMLElement).style.color = '#EEF4ED'; }}
                                    onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { (e.target as HTMLElement).style.backgroundColor = 'transparent'; (e.target as HTMLElement).style.color = '#134074'; }}
                                >
                                    {t('home.hero.cta2')}
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Company Intro */}
            <section className="py-8 px-4 sm:px-6 lg:px-8 bg-orange-25">
                <div className="max-w-4xl mx-auto space-y-6 text-slate-600 text-lg sm:text-xl">
                    <p>
                        Siren & Tuomala Taloushallintopalvelut Oy grundades när Stefan Hörhammer, ägare till Tilitoimisto Hörhammer Oy, gick i pension. De unga anställda i företaget som förvärvat yrkeskunskap och expertis inom området, beslutade att fortsätta sin verksamhet i ett nytt företag. På så sätt fortsätter Siren & Tuomala Taloushallintopalvelut Oy traditionerna och verksamheten hos respekterad Tilitoimisto Hörhammer Oy, som grundades 1948. De viktigaste värdena för företaget är kundnöjdhet, utmärkt expertis och professionalism inom området samt ömsesidigt förtroende i kundrelationer.
                    </p>
                    <p>
                        Vi erbjuder alla ekonomiförvaltningstjänster och skräddarsyr dem efter dina behov. Förutom ditt företags bokföring och finansiella rapporter omfattar våra tjänster även andra ekonomiförvaltningstjänster såsom månadsrapportering, officiella anmälningar, lönehantering, skatterådgivning och lösning av skatteproblem. Vi erbjuder tjänster på finska, svenska och engelska.
                        <br />
                        <Link href="/sv/services" className="text-blue-600 hover:text-blue-700 font-medium underline underline-offset-4">Läs mera</Link>
                    </p>
                    <p>
                        Våra kunder inkluderar finska aktiebolag, personbolag, föreningar, stiftelser och utländska dotterbolag från en mängd olika branscher. Vi använder Procountors elektroniska bokföringsprogram och är en Procountor Gold-partner, vilket innebär att vi har stark expertis inom det aktuella systemet och det används flitigt av våra kunder. Vårt företags partners har avlagt EBR-examen, som är högt respekterad i branschen, vilket vittnar om deras professionalism och uthållighet. Vår bokföringsbyrå är också en bokföringsbyråpartner till Suomen Taloushallintoliitto ry.
                    </p>
                </div>
            </section>

            {/* Logos Section */}
            <section className="py-12 px-4 sm:px-6 lg:px-8 bg-orange-25">
                <div className="max-w-4xl mx-auto">
                    <div className="bg-white p-8 rounded-2xl shadow-lg" style={{ border: '2px solid #E2E8F0' }}>
                        <div className="flex flex-col sm:flex-row items-center justify-center gap-8 sm:gap-12">
                            <Image
                                src="/legacy/TAL-Tlit-Kumppani-Black-RGB.png"
                                alt="Taloushallintoliiton tilitoimistokumppani"
                                width={364}
                                height={116}
                                className="h-28 w-auto"
                                unoptimized
                            />
                            <Image
                                src="/legacy/procountor_kultapartneri_finago.jpg"
                                alt="Procountor Kulta-tason partneri"
                                width={240}
                                height={80}
                                className="h-20 w-auto"
                                unoptimized
                            />
                            <Image
                                src="/legacy/KK_jasenlogo.png"
                                alt="KK jäsenlogo"
                                width={200}
                                height={64}
                                className="h-16 w-auto"
                                unoptimized
                            />
                        </div>
                    </div>
                </div>
            </section>

            {/* Services Overview */}
            <section className="py-20 px-4 sm:px-6 lg:px-8 bg-orange-25">
                <div className="max-w-7xl mx-auto">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl sm:text-4xl font-bold text-slate-700 mb-4">
                            {t('home.services.title')}
                        </h2>
                        <p className="text-xl text-slate-600 max-w-2xl mx-auto">
                            {t('home.services.description')}
                        </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {/* Bokföring och bokslut */}
                        <div className="bg-white p-8 rounded-2xl ring-1 ring-blue-200 hover:ring-blue-300 transition-all duration-200 flex flex-col justify-between h-full shadow-lg hover:shadow-xl">
                            <div>
                                <h3 className="text-xl font-semibold text-slate-700 mb-4">{t('home.services.accounting.title')}</h3>
                                <p className="text-slate-600">
                                    {t('home.services.accounting.description')}
                                </p>
                            </div>
                            <Link href="/sv/services/accounting" className="text-blue-400 hover:text-blue-500 font-medium mt-4">
                                {t('home.services.cta')} →
                            </Link>
                        </div>

                        {/* Löneberäkning */}
                        <div className="bg-white p-8 rounded-2xl ring-1 ring-pink-200 hover:ring-pink-300 transition-all duration-200 flex flex-col justify-between h-full shadow-lg hover:shadow-xl">
                            <div>
                                <h3 className="text-xl font-semibold text-slate-700 mb-4">{t('home.services.payroll.title')}</h3>
                                <p className="text-slate-600">
                                    {t('home.services.payroll.description')}
                                </p>
                            </div>
                            <Link href="/sv/services/payroll" className="text-pink-400 hover:text-pink-500 font-medium mt-4">
                                {t('home.services.cta')} →
                            </Link>
                        </div>

                        {/* Beskattning och andra experttjänster */}
                        <div className="bg-white p-8 rounded-2xl ring-1 ring-green-200 hover:ring-green-300 transition-all duration-200 flex flex-col justify-between h-full shadow-lg hover:shadow-xl">
                            <div>
                                <h3 className="text-xl font-semibold text-slate-700 mb-4">{t('home.services.taxation.title')}</h3>
                                <p className="text-slate-600">
                                    {t('home.services.taxation.description')}
                                </p>
                            </div>
                            <Link href="/sv/services/taxation" className="text-green-400 hover:text-green-500 font-medium mt-4">
                                {t('home.services.cta')} →
                            </Link>
                        </div>
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section className="py-20 px-4 sm:px-6 lg:px-8 bg-orange-25">
                <div className="max-w-4xl mx-auto">
                    <div className="rounded-2xl p-8 shadow-2xl" style={{ backgroundColor: 'rgba(241, 245, 249, 0.95)', border: '2px solid #134074' }}>
                        <div className="text-center">
                            <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold mb-8" style={{ color: '#134074' }}>
                                {t('home.finalcta.title')}
                            </h2>
                            <div className="flex flex-col sm:flex-row gap-4 justify-center">
                                <Link
                                    href="/sv/contact"
                                    className="text-white hover:opacity-90 font-semibold py-3 px-8 rounded-full transition-colors duration-200 shadow-lg"
                                    style={{ backgroundColor: '#134074' }}
                                >
                                    {t('home.finalcta.button1')}
                                </Link>
                                <Link
                                    href="/sv/services"
                                    className="border-2 font-semibold py-3 px-8 rounded-full transition-colors duration-200"
                                    style={{ borderColor: '#134074', color: '#134074' }}
                                    onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { (e.target as HTMLElement).style.backgroundColor = '#134074'; (e.target as HTMLElement).style.color = '#EEF4ED'; }}
                                    onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { (e.target as HTMLElement).style.backgroundColor = 'transparent'; (e.target as HTMLElement).style.color = '#134074'; }}
                                >
                                    {t('home.finalcta.button2')}
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}