'use client'

import { PRINCIPLES } from '@/app/data/content'
import { AnimateIn } from '@/app/components'

export function IntroductionSection() {
    return (
        <section id="introduction" className="flex flex-col gap-8 @container/intro">
            <AnimateIn
                as="h2"
                viewportDelay={ 0.5 }
                className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content"
            >
                Introduction
            </AnimateIn>

            <AnimateIn delay={ 0.1 } viewportDelay={ 0.6 } className="text-base sm:text-xl leading-snug tracking-tight text-muted">
                <p className="mb-4">
                    <span className="font-medium text-base-content">Standard.site</span>{ ' ' }
                    began as a conversation between developers building long-form platforms on AT Protocol.
                    Each had working implementations. Each had defined similar schemas.
                    Coordination was the missing piece.
                </p>
                <p>Four principles guide the project:</p>
            </AnimateIn>

            <div className="grid @xl/intro:grid-cols-2 gap-1 rounded-2xl border border-border bg-base-200 p-1">
                { PRINCIPLES.map((principle, index) => (
                    <AnimateIn
                        key={ principle.title }
                        delay={ 0.2 + index * 0.1 }
                        viewportDelay={ 0.7 + index * 0.1 }
                        className="flex flex-col gap-6 rounded-xl border border-border bg-card p-4"
                    >
                        <span className="font-mono font-medium text-base leading-tight tracking-tight text-muted-content">
                            { String(index + 1).padStart(2, '0') }.
                        </span>
                        <div className="flex flex-col gap-2">
                            <h3 className="font-display font-semibold text-xl sm:text-[1.35rem] leading-tight tracking-tight text-base-content">
                                { principle.title }
                            </h3>
                            <p className="text-base leading-snug tracking-tight text-muted">
                                { principle.description }
                            </p>
                        </div>
                    </AnimateIn>
                )) }
            </div>

            <AnimateIn as="p" delay={ 0.6 } viewportDelay={ 1.1 } className="text-base sm:text-xl leading-snug tracking-tight text-muted">
                The lexicons focus on metadata: what a publication is, what a document
                contains, and where it lives. Content format is left to each platform.
                The standard grows when builders identify shared needs and align on
                solutions.
            </AnimateIn>
        </section>
    )
}