'use client'

import { AnimateIn, LeafletLogo, OffprintLogo, PcktBlogLogo } from '@/app/components'
import { scrollToElement } from '@/app/lib/scroll'
import { ArrowRightIcon } from 'lucide-react'

export function HeroSection() {
    return (
        <section className="flex flex-col gap-20 @container/hero">
            <AnimateIn
                as="h1"
                className="font-display font-semibold text-4xl sm:text-5xl leading-none tracking-tight text-base-content"
            >
                One schema. <br />
                Every platform.
            </AnimateIn>

            <div className="flex flex-col gap-12">
                <div className="flex flex-col gap-4">
                    <AnimateIn as="p" delay={ 0.1 } className="text-lg sm:text-2xl leading-snug tracking-tight text-muted">
                        <span className="font-medium text-base-content">Standard.site</span>{ ' ' }
                        provides shared lexicons for long-form publishing on AT Protocol. Making
                        content easier to discover, index, and move across the ATmosphere.
                    </AnimateIn>
                    <AnimateIn delay={ 0.2 }>
                        <a
                            href="#definitions"
                            onClick={ (e) => {
                                e.preventDefault()
                                scrollToElement('#definitions')
                            } }
                            className="group font-medium text-lg sm:text-2xl leading-snug tracking-tight text-base-content hover:underline"
                        >
                            To start, view the definitions <ArrowRightIcon className="transform transition-all md:group-hover:translate-x-2 size-4 sm:size-6 inline"/>
                        </a>
                    </AnimateIn>
                    <AnimateIn delay={ 0.25 }>
                        <a
                            href="/docs"
                            className="group font-medium text-base sm:text-lg leading-snug tracking-tight text-muted hover:text-base-content hover:underline"
                        >
                            Skip to docs <ArrowRightIcon className="transform transition-all md:group-hover:translate-x-2 size-3.5 sm:size-4 inline"/>
                        </a>
                    </AnimateIn>
                </div>

                <div className="flex flex-col gap-4">
                    <AnimateIn as="p" delay={ 0.3 } className="text-sm sm:text-base leading-snug tracking-tight text-muted-content">
                        Already implemented by multiple platforms:
                    </AnimateIn>

                    <AnimateIn delay={ 0.4 } className="@lg/hero:grid-cols-3 grid grid-cols-2 gap-1 rounded-2xl border border-border bg-base-200 p-1">
                        <a href="https://leaflet.pub/?utm_source=standard.site" target="_blank" className="group flex flex-1 items-center justify-center rounded-xl border border-border bg-card p-2 h-20 @lg/hero:h-24">
                            <LeafletLogo className="h-6 lg:h-8 w-auto text-muted transform md:group-hover:scale-105 md:group-hover:text-base-content transition-all" />
                        </a>
                        <a href="https://pckt.blog/?utm_source=standard.site" target="_blank" className="group flex flex-1 items-center justify-center rounded-xl border border-border bg-card p-2 h-20 @lg/hero:h-24">
                            <PcktBlogLogo className="h-6 lg:h-8 w-auto text-muted transform md:group-hover:scale-105 md:group-hover:text-base-content transition-all" />
                        </a>
                        <a href="https://offprint.app/?utm_source=standard.site" target="_blank" className="group flex flex-1 items-center justify-center rounded-xl border border-border bg-card p-2 h-20 @lg/hero:h-24">
                            <OffprintLogo className="h-6 lg:h-8 w-auto text-muted transform md:group-hover:scale-105 md:group-hover:text-base-content transition-all" />
                        </a>
                        <div className="@lg/hero:hidden flex flex-1 items-center justify-center p-2 h-20 @lg/hero:h-24 text-sm text-muted-content">
                            More soon...
                        </div>
                    </AnimateIn>
                </div>
            </div>
        </section>
    )
}
