import { Head, Link, usePage } from '@inertiajs/react';
import { useEffect, useRef } from 'react';

import SiteHeader from '@/components/site-header';
import { LangProvider } from '@/lib/lang';
import { type Category, type SharedData } from '@/types';

// ─── Brand Primitives ─────────────────────────────────────────────────────────

function DiamondGlyph({ size = 16, stroke = 'currentColor', className = '' }: { size?: number; stroke?: string; className?: string }) {
    return (
        <svg width={size} height={size} viewBox="0 0 48 48" fill="none" className={className}>
            <path d="M24 3L45 24L24 45L3 24Z" stroke={stroke} strokeWidth="1.5" />
            <path d="M24 10.5L37.5 24L24 37.5L10.5 24Z" stroke={stroke} strokeWidth="1" />
        </svg>
    );
}

// ─── Reveal on Scroll ─────────────────────────────────────────────────────────

function useReveal() {
    const ref = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const el = ref.current;
        if (!el) return;
        const io = new IntersectionObserver(
            (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add('is-in')),
            { threshold: 0.12 },
        );
        io.observe(el);
        return () => io.disconnect();
    }, []);
    return ref;
}

function Reveal({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) {
    const ref = useReveal();
    return (
        <div ref={ref} className={`reveal ${className}`} style={{ transitionDelay: `${delay}ms` }}>
            {children}
        </div>
    );
}

// ─── Section Eyebrow ──────────────────────────────────────────────────────────

function SectionEyebrow({ children, tone = 'gold' }: { children: React.ReactNode; tone?: 'gold' | 'ivory' }) {
    return (
        <div
            className="eyebrow mb-5 flex items-center gap-3"
            style={{ color: tone === 'ivory' ? 'rgba(251,247,239,0.6)' : 'var(--brand-gold-dim, var(--brand-gold))' }}
        >
            <DiamondGlyph size={10} stroke="var(--brand-gold)" />
            {children}
        </div>
    );
}

// ─── Image Placeholder ────────────────────────────────────────────────────────

function Placeholder({ label, dark = false, ratio = '4/5', className = '' }: { label: string; dark?: boolean; ratio?: string; className?: string }) {
    return (
        <div
            className={`relative w-full overflow-hidden ${dark ? 'ph-stripe-dark' : 'ph-stripe'} ${className}`}
            style={{ aspectRatio: ratio }}
        >
            <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
                <DiamondGlyph size={28} stroke={dark ? 'rgba(184,137,63,0.4)' : 'rgba(184,137,63,0.35)'} />
                <span
                    className="eyebrow px-4 text-center leading-relaxed"
                    style={{ color: dark ? 'rgba(229,221,204,0.4)' : 'rgba(111,107,98,0.7)', fontSize: '9px' }}
                >
                    {label}
                </span>
            </div>
        </div>
    );
}

// ─── 1. About Hero ────────────────────────────────────────────────────────────

function AboutHero() {
    return (
        <section className="relative overflow-hidden border-b ornament-bg" style={{ backgroundColor: 'var(--brand-ivory)', borderColor: 'var(--brand-line)' }}>
            <div className="pointer-events-none absolute -right-20 -top-20 hidden opacity-20 lg:block">
                <DiamondGlyph size={420} stroke="var(--brand-gold)" />
            </div>

            <div className="relative mx-auto max-w-[1500px] px-5 pb-20 pt-10 lg:pb-28 lg:pt-14 lg:px-10">
                <nav className="eyebrow mb-8 flex items-center gap-2" style={{ color: 'var(--brand-muted)' }}>
                    <Link href="/" className="transition hover:text-gold" style={{ color: 'inherit' }}>Home</Link>
                    <span className="opacity-50">/</span>
                    <span style={{ color: 'var(--brand-ink)' }}>About Us</span>
                </nav>

                <div className="grid items-end gap-10 lg:grid-cols-12 lg:gap-14">
                    <div className="lg:col-span-7">
                        <Reveal>
                            <div className="eyebrow mb-6 flex items-center gap-3" style={{ color: 'var(--brand-gold-dim, var(--brand-gold))' }}>
                                <DiamondGlyph size={12} stroke="var(--brand-gold)" /> Our Story · Est. 2019
                            </div>
                            <h1
                                className="font-display leading-[0.96] tracking-[-0.015em]"
                                style={{ fontSize: 'clamp(48px,8vw,112px)', color: 'var(--brand-ink)' }}
                            >
                                Where modesty<br />
                                meets{' '}
                                <span className="italic" style={{ color: 'var(--brand-gold)' }}>
                                    modern elegance.
                                </span>
                            </h1>
                            <p className="mt-7 max-w-[520px] text-[17px] leading-[1.75]" style={{ color: 'var(--brand-muted)' }}>
                                We create timeless modest wear designed for comfort, dignity, faith,
                                and everyday confidence — crafted with care, worn quietly across the world.
                            </p>
                            <div className="mt-10 flex flex-col gap-3 sm:flex-row">
                                <Link
                                    href="/products"
                                    className="inline-flex items-center justify-center px-8 py-4 text-[12px] uppercase tracking-[0.18em] font-medium text-white transition hover:opacity-90 eyebrow"
                                    style={{ backgroundColor: 'var(--brand-slate)' }}
                                >
                                    Explore Our Collection
                                </Link>
                                <a
                                    href="#story"
                                    className="inline-flex items-center justify-center border px-8 py-4 text-[12px] uppercase tracking-[0.18em] transition hover:text-gold eyebrow"
                                    style={{ borderColor: 'rgba(31,42,48,0.2)', color: 'var(--brand-ink)' }}
                                >
                                    Read Our Story ↓
                                </a>
                            </div>
                        </Reveal>
                    </div>

                    <div className="lg:col-span-5">
                        <Reveal delay={150}>
                            <div className="relative">
                                <div className="absolute -left-6 -top-6 hidden lg:block">
                                    <span className="font-script inline-block rotate-[-6deg] text-[44px]" style={{ color: 'var(--brand-gold)' }}>
                                        since '19
                                    </span>
                                </div>
                                <Placeholder label="atelier · founders" dark ratio="4/5" className="frame-slate" />
                                <div
                                    className="absolute -bottom-8 -right-6 hidden border p-5 shadow-[0_30px_50px_-30px_rgba(43,54,64,.4)] md:block"
                                    style={{ backgroundColor: 'var(--brand-cream)', borderColor: 'var(--brand-line)', width: 230 }}
                                >
                                    <DiamondGlyph size={18} stroke="var(--brand-gold)" />
                                    <div className="font-display mt-3 text-[22px] italic leading-tight" style={{ color: 'var(--brand-ink)' }}>
                                        "Husnul wari"
                                    </div>
                                    <p className="mt-2 text-[12.5px] leading-relaxed" style={{ color: 'var(--brand-muted)' }}>
                                        The beauty of guardianship — caring for what we wear, and how we wear it.
                                    </p>
                                </div>
                            </div>
                        </Reveal>
                    </div>
                </div>

                <div className="mt-20 grid grid-cols-2 gap-y-10 border-t pt-10 lg:mt-28 lg:grid-cols-4" style={{ borderColor: 'var(--brand-line)' }}>
                    {[
                        { n: '2019', l: 'Founded in Dhaka' },
                        { n: '86+', l: 'Pieces in collection' },
                        { n: '14', l: 'Expert artisans' },
                        { n: '38', l: 'Countries shipped' },
                    ].map((it, i) => (
                        <Reveal key={i} delay={i * 80}>
                            <div>
                                <div className="font-display leading-none" style={{ fontSize: 'clamp(40px,4vw,56px)', color: 'var(--brand-ink)' }}>
                                    {it.n}
                                </div>
                                <div className="eyebrow mt-3" style={{ color: 'var(--brand-muted)' }}>{it.l}</div>
                            </div>
                        </Reveal>
                    ))}
                </div>
            </div>
        </section>
    );
}

// ─── 2. Our Story ─────────────────────────────────────────────────────────────

function OurStory({ content }: { content: string }) {
    return (
        <section id="story" style={{ backgroundColor: 'var(--brand-cream)' }}>
            <div className="mx-auto max-w-[1500px] grid items-center gap-10 px-5 py-24 lg:grid-cols-12 lg:gap-16 lg:px-10 lg:py-32">
                <div className="order-2 lg:order-1 lg:col-span-6">
                    <Reveal>
                        <div className="grid grid-cols-12 gap-3 lg:gap-4">
                            <div className="col-span-8">
                                <Placeholder label="story / cutting room" ratio="4/5" />
                            </div>
                            <div className="col-span-4 mt-12 flex flex-col gap-3 lg:gap-4">
                                <Placeholder label="craft / hands" ratio="1/1" />
                                <Placeholder label="craft / fabric" dark ratio="3/4" />
                            </div>
                        </div>
                    </Reveal>
                </div>

                <div className="order-1 lg:order-2 lg:col-span-6 lg:pl-6">
                    <Reveal>
                        <SectionEyebrow>Our Story</SectionEyebrow>
                        <h2
                            className="font-display leading-[1.02]"
                            style={{ fontSize: 'clamp(38px,5vw,68px)', color: 'var(--brand-ink)' }}
                        >
                            Founded with one quiet<br />
                            <span className="italic" style={{ color: 'var(--brand-gold)' }}>purpose.</span>
                        </h2>
                        <div className="mt-8 max-w-[560px] space-y-5 text-[16px] leading-[1.85]" style={{ color: 'var(--brand-muted)' }}>
                            {content ? (
                                content.split('\n').filter(Boolean).map((p, i) => <p key={i}>{p}</p>)
                            ) : (
                                <>
                                    <p>
                                        Our brand was created with a simple purpose: to make modest fashion
                                        feel <span style={{ color: 'var(--brand-ink)' }}>refined, comfortable, and meaningful.</span>{' '}
                                        We believe clothing should reflect confidence, dignity, and identity
                                        without compromising on quality or style.
                                    </p>
                                    <p>
                                        Every piece is designed with care, combining faith-conscious values
                                        with modern tailoring, breathable fabrics, and timeless colours. From
                                        everyday wear to special occasions, our collections are made for
                                        people who value modesty, elegance, and comfort.
                                    </p>
                                </>
                            )}
                        </div>
                        <div className="mt-10 border-l-2 pl-6" style={{ borderColor: 'var(--brand-gold)' }}>
                            <div className="font-display text-[24px] italic leading-snug" style={{ color: 'rgba(26,31,35,0.9)' }}>
                                "We don't chase trends — we refine cuts that wear well through morning prayer, work, and evening gathering alike."
                            </div>
                            <div className="eyebrow mt-4" style={{ color: 'var(--brand-muted)' }}>— Creative Director, Husnulwari</div>
                        </div>
                    </Reveal>
                </div>
            </div>
        </section>
    );
}

// ─── 3. Mission & Vision ──────────────────────────────────────────────────────

function MissionVision() {
    const items = [
        { eyebrow: 'Mission', title: 'Considered modest wear for daily life.', body: 'To provide high-quality modest wear that brings together comfort, elegance, and faith-conscious design for everyday life.', icon: 'moon', timeLabel: 'Today', num: '01' },
        { eyebrow: 'Vision', title: 'A trusted house of modest fashion.', body: 'To become a trusted modest fashion brand known for timeless design, refined quality, and meaningful style.', icon: 'compass', timeLabel: 'Tomorrow', num: '02' },
    ];
    return (
        <section className="border-y" style={{ backgroundColor: 'var(--brand-ivory)', borderColor: 'var(--brand-line)' }}>
            <div className="mx-auto max-w-[1500px] px-5 py-24 lg:px-10 lg:py-28">
                <Reveal>
                    <div className="mb-16 text-center">
                        <SectionEyebrow>Mission & Vision</SectionEyebrow>
                        <h2 className="font-display mx-auto leading-[1.05]" style={{ fontSize: 'clamp(36px,4.5vw,58px)', color: 'var(--brand-ink)', maxWidth: 760 }}>
                            Two compass points<br /><span className="italic">guiding every collection.</span>
                        </h2>
                    </div>
                </Reveal>
                <div className="grid gap-6 md:grid-cols-2 lg:gap-8">
                    {items.map((it, i) => (
                        <Reveal key={it.eyebrow} delay={i * 100}>
                            <div className="relative h-full border p-10 card-lift lg:p-14" style={{ backgroundColor: 'var(--brand-cream)', borderColor: 'var(--brand-line)' }}>
                                <div className="pointer-events-none absolute right-6 top-6 opacity-20">
                                    <DiamondGlyph size={72} stroke="var(--brand-gold)" />
                                </div>
                                <div className="mb-8 flex h-14 w-14 items-center justify-center rounded-full border" style={{ borderColor: 'rgba(184,137,63,0.4)' }}>
                                    {it.icon === 'moon' ? (
                                        <svg width="26" height="26" viewBox="0 0 24 24" stroke="var(--brand-gold)" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round">
                                            <path d="M19 14A8 8 0 1110 5a6 6 0 009 9z" />
                                        </svg>
                                    ) : (
                                        <svg width="26" height="26" viewBox="0 0 24 24" stroke="var(--brand-gold)" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round">
                                            <circle cx="12" cy="12" r="9" /><path d="M12 3v3M12 18v3M3 12h3M18 12h3" />
                                            <path d="M14 10l-2 4-4 2 2-4 4-2z" fill="var(--brand-gold)" stroke="none" opacity=".85" />
                                        </svg>
                                    )}
                                </div>
                                <div className="eyebrow mb-4" style={{ color: 'var(--brand-gold-dim, var(--brand-gold))' }}>{it.eyebrow}</div>
                                <h3 className="font-display mb-6 leading-[1.05]" style={{ fontSize: 'clamp(28px,2.5vw,40px)', color: 'var(--brand-ink)', maxWidth: 420 }}>{it.title}</h3>
                                <p className="max-w-[460px] text-[15.5px] leading-[1.85]" style={{ color: 'var(--brand-muted)' }}>{it.body}</p>
                                <div className="hairline mt-10" />
                                <div className="mt-6 flex items-center justify-between">
                                    <span className="eyebrow" style={{ color: 'var(--brand-muted)' }}>{it.timeLabel}</span>
                                    <span className="font-mono text-[11px]" style={{ color: 'var(--brand-gold-dim, var(--brand-gold))' }}>{it.num}</span>
                                </div>
                            </div>
                        </Reveal>
                    ))}
                </div>
            </div>
        </section>
    );
}

// ─── 4. Our Values ────────────────────────────────────────────────────────────

const VALUES_DATA = [
    { n: '01', t: 'Modesty',   s: 'Designs that respect faith, dignity, and personal identity.',               icon: 'veil' },
    { n: '02', t: 'Quality',   s: 'Carefully selected fabrics, refined stitching, and durable finishing.',     icon: 'weave' },
    { n: '03', t: 'Comfort',   s: 'Pieces made for real everyday movement and long wear.',                     icon: 'leaf' },
    { n: '04', t: 'Elegance',  s: 'Minimal, timeless designs that feel premium without being excessive.',      icon: 'diamond' },
    { n: '05', t: 'Trust',     s: 'A shopping experience built on honesty, clarity, and customer care.',       icon: 'handshake' },
    { n: '06', t: 'Community', s: 'A brand created for people who value modesty, confidence, and belonging.',  icon: 'circle' },
];

function ValueIcon({ name }: { name: string }) {
    const s = { stroke: 'var(--brand-gold)', strokeWidth: 1.2, fill: 'none', strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
    if (name === 'veil') return <svg width="22" height="22" viewBox="0 0 24 24" {...s}><path d="M12 3a7 7 0 00-7 7v3a4 4 0 004 4h6a4 4 0 004-4v-3a7 7 0 00-7-7z" /><path d="M9 13v3M15 13v3" /></svg>;
    if (name === 'weave') return <svg width="22" height="22" viewBox="0 0 24 24" {...s}><path d="M3 7c3 0 3 3 6 3s3-3 6-3 3 3 6 3M3 14c3 0 3 3 6 3s3-3 6-3 3 3 6 3" /></svg>;
    if (name === 'leaf') return <svg width="22" height="22" viewBox="0 0 24 24" {...s}><path d="M20 4c0 9-7 16-16 16C4 11 11 4 20 4z" /><path d="M4 20L14 10" /></svg>;
    if (name === 'diamond') return <DiamondGlyph size={22} stroke="var(--brand-gold)" />;
    if (name === 'handshake') return <svg width="22" height="22" viewBox="0 0 24 24" {...s}><path d="M3 13l4-4 3 1 3-3 3 2 5-1v6l-5 4-4-2-3 2-3-1-3-4z" /><path d="M10 10l3 3" /></svg>;
    return <svg width="22" height="22" viewBox="0 0 24 24" {...s}><circle cx="9" cy="10" r="3" /><circle cx="15" cy="14" r="3" /><path d="M3 20c0-3 3-5 6-5s6 2 6 5M12 7c0-2 2-4 4-4" /></svg>;
}

function OurValues() {
    return (
        <section style={{ backgroundColor: 'var(--brand-cream)' }}>
            <div className="mx-auto max-w-[1500px] px-5 py-24 lg:px-10 lg:py-32">
                <Reveal>
                    <div className="mb-16 flex flex-wrap items-end justify-between gap-6">
                        <div>
                            <SectionEyebrow>Our Values</SectionEyebrow>
                            <h2 className="font-display leading-[1.02]" style={{ fontSize: 'clamp(38px,5vw,68px)', color: 'var(--brand-ink)', maxWidth: 680 }}>
                                Six quiet principles,<br />
                                <span className="italic" style={{ color: 'var(--brand-gold)' }}>stitched into every piece.</span>
                            </h2>
                        </div>
                        <p className="max-w-[280px] text-[14px] leading-relaxed" style={{ color: 'var(--brand-muted)' }}>
                            These aren't slogans — they're the working notes pinned above our cutting tables.
                        </p>
                    </div>
                </Reveal>

                <div className="grid grid-cols-1 border-l border-t sm:grid-cols-2 lg:grid-cols-3" style={{ borderColor: 'var(--brand-line)' }}>
                    {VALUES_DATA.map((v, i) => (
                        <Reveal key={v.t} delay={(i % 3) * 80}>
                            <div
                                className="group relative h-full border-b border-r p-10 transition lg:p-12"
                                style={{ borderColor: 'var(--brand-line)', backgroundColor: 'var(--brand-cream)' }}
                                onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = 'var(--brand-ivory)')}
                                onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'var(--brand-cream)')}
                            >
                                <div className="mb-8 flex items-start justify-between">
                                    <div className="flex h-12 w-12 items-center justify-center rounded-full border transition" style={{ borderColor: 'var(--brand-line)' }}>
                                        <ValueIcon name={v.icon} />
                                    </div>
                                    <span className="font-mono text-[11px]" style={{ color: 'var(--brand-gold-dim, var(--brand-gold))' }}>{v.n}</span>
                                </div>
                                <h3 className="font-display mb-4 text-[32px] leading-tight" style={{ color: 'var(--brand-ink)' }}>{v.t}</h3>
                                <p className="pr-2 text-[14.5px] leading-[1.8]" style={{ color: 'var(--brand-muted)' }}>{v.s}</p>
                                <div className="absolute bottom-6 right-6 opacity-0 transition-opacity group-hover:opacity-100">
                                    <DiamondGlyph size={14} stroke="var(--brand-gold)" />
                                </div>
                            </div>
                        </Reveal>
                    ))}
                </div>
            </div>
        </section>
    );
}

// ─── 5. Craftsmanship ─────────────────────────────────────────────────────────

const CRAFT_STEPS = [
    { n: '01', t: 'Fabric selection',      s: 'We select high-thread cottons, viscose blends, and breathable weaves — chosen for how they feel and how they age.' },
    { n: '02', t: 'Modest fit',            s: 'Patterns are drafted to drape without clinging, with considered length, sleeve, and neckline at every size.' },
    { n: '03', t: 'Comfortable tailoring', s: 'Underarm gussets, reinforced shoulders, breathable linings — built for prayer, work, and travel.' },
    { n: '04', t: 'Colour considered',     s: 'Restrained, faith-aware palettes — onyx, ivory, sage, navy, brass — chosen to feel calm season after season.' },
    { n: '05', t: 'Fine finishing',        s: 'Hand-finished hems, French seams, mother-of-pearl buttons. Quiet details that hold up to a hundred wears.' },
    { n: '06', t: 'Practical details',     s: 'Pockets where you need them. Hidden snaps under buttons. Side vents that let the fabric breathe.' },
];

function Craftsmanship() {
    return (
        <section className="relative overflow-hidden" style={{ backgroundColor: 'var(--brand-slate)' }}>
            <div className="pointer-events-none absolute inset-0 ph-stripe-dark opacity-25" />
            <div className="pointer-events-none absolute -right-10 -top-10 opacity-10"><DiamondGlyph size={320} stroke="var(--brand-gold)" /></div>
            <div className="pointer-events-none absolute -bottom-20 -left-10 opacity-10"><DiamondGlyph size={280} stroke="var(--brand-gold)" /></div>

            <div className="relative mx-auto max-w-[1500px] px-5 py-24 lg:px-10 lg:py-32">
                <div className="mb-20 grid items-end gap-10 lg:grid-cols-12">
                    <div className="lg:col-span-7">
                        <Reveal>
                            <SectionEyebrow tone="ivory">The Atelier Process</SectionEyebrow>
                            <h2 className="font-display leading-[1] tracking-[-0.01em]" style={{ fontSize: 'clamp(40px,5.5vw,80px)', color: '#FBF7EF' }}>
                                Designed with care,<br />
                                <span className="italic" style={{ color: 'var(--brand-gold)' }}>made for everyday confidence.</span>
                            </h2>
                        </Reveal>
                    </div>
                    <div className="lg:col-span-5">
                        <Reveal delay={120}>
                            <p className="max-w-[440px] text-[16px] leading-[1.85]" style={{ color: 'rgba(251,247,239,0.7)' }}>
                                From the first fabric choice to the final stitch, every detail is considered.
                                Clean silhouettes, comfortable fits, and refined finishing so each piece feels
                                effortless to wear and elegant to style.
                            </p>
                        </Reveal>
                    </div>
                </div>

                <Reveal>
                    <div className="mb-20 grid grid-cols-12 gap-4 lg:gap-5">
                        <div className="col-span-12 lg:col-span-6"><Placeholder label="craft · pattern cutting" dark ratio="16/10" /></div>
                        <div className="col-span-6 lg:col-span-3"><Placeholder label="craft · stitch detail" dark ratio="3/4" /></div>
                        <div className="col-span-6 lg:col-span-3"><Placeholder label="craft · pressing" dark ratio="3/4" /></div>
                    </div>
                </Reveal>

                <div className="grid gap-x-10 gap-y-12 md:grid-cols-2 lg:grid-cols-3">
                    {CRAFT_STEPS.map((st, i) => (
                        <Reveal key={st.n} delay={(i % 3) * 90}>
                            <div className="border-t pt-6" style={{ borderColor: 'rgba(251,247,239,0.15)' }}>
                                <div className="mb-3 flex items-baseline gap-4">
                                    <span className="font-mono text-[11px]" style={{ color: 'var(--brand-gold)' }}>{st.n}</span>
                                    <DiamondGlyph size={9} stroke="var(--brand-gold)" />
                                </div>
                                <h3 className="font-display mb-3 text-[28px] leading-tight" style={{ color: '#FBF7EF' }}>{st.t}</h3>
                                <p className="text-[14.5px] leading-[1.8]" style={{ color: 'rgba(251,247,239,0.65)' }}>{st.s}</p>
                            </div>
                        </Reveal>
                    ))}
                </div>
            </div>
        </section>
    );
}

// ─── 6. Why Choose Us ─────────────────────────────────────────────────────────

function TrustIcon({ name }: { name: string }) {
    const s = { stroke: 'var(--brand-gold)', strokeWidth: 1.2, fill: 'none', strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
    if (name === 'design') return <svg width="22" height="22" viewBox="0 0 24 24" {...s}><path d="M12 3l8 4-1 11-7 3-7-3L4 7z" /><path d="M12 3v18M4 7l8 4 8-4" /></svg>;
    if (name === 'fabric') return <svg width="22" height="22" viewBox="0 0 24 24" {...s}><path d="M3 8c3 0 3 3 6 3s3-3 6-3 3 3 6 3M3 14c3 0 3 3 6 3s3-3 6-3 3 3 6 3" /></svg>;
    if (name === 'ruler') return <svg width="22" height="22" viewBox="0 0 24 24" {...s}><path d="M3 14l11-11 7 7-11 11z" /><path d="M7 12l2 2M10 9l2 2M13 6l2 2" /></svg>;
    return <svg width="22" height="22" viewBox="0 0 24 24" {...s}><path d="M3 7l9-4 9 4v10l-9 4-9-4z" /><path d="M3 7l9 4 9-4M12 11v10" /></svg>;
}

const TRUST_ITEMS = [
    { t: 'Premium Modest Design', s: 'Elegant clothing created with modesty and comfort in mind.',            icon: 'design', label: 'Design' },
    { t: 'Quality Fabric',        s: 'Soft, breathable, and durable materials selected for everyday wear.',   icon: 'fabric', label: 'Fabric' },
    { t: 'Refined Fit',           s: 'Tailored silhouettes that feel comfortable and look polished.',         icon: 'ruler',  label: 'Fit' },
    { t: 'Reliable Service',      s: 'Clear communication, careful packaging, and customer-focused support.', icon: 'box',    label: 'Service' },
];

function WhyChooseUs() {
    return (
        <section style={{ backgroundColor: 'var(--brand-cream)' }}>
            <div className="mx-auto max-w-[1500px] px-5 py-24 lg:px-10 lg:py-32">
                <Reveal>
                    <div className="mb-16 text-center">
                        <SectionEyebrow>Why customers choose us</SectionEyebrow>
                        <h2 className="font-display mx-auto leading-[1.02]" style={{ fontSize: 'clamp(38px,5vw,68px)', color: 'var(--brand-ink)', maxWidth: 680 }}>
                            Four quiet reasons we hear<br />
                            <span className="italic" style={{ color: 'var(--brand-gold)' }}>over and over again.</span>
                        </h2>
                    </div>
                </Reveal>

                <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4 lg:gap-6">
                    {TRUST_ITEMS.map((it, i) => (
                        <Reveal key={it.t} delay={i * 80}>
                            <div
                                className="group relative h-full border p-8 card-lift transition lg:p-10"
                                style={{ backgroundColor: 'var(--brand-ivory)', borderColor: 'var(--brand-line)' }}
                                onMouseEnter={(e) => (e.currentTarget.style.borderColor = 'var(--brand-gold)')}
                                onMouseLeave={(e) => (e.currentTarget.style.borderColor = 'var(--brand-line)')}
                            >
                                <div className="mb-8 flex h-12 w-12 items-center justify-center rounded-full border transition" style={{ backgroundColor: 'var(--brand-cream)', borderColor: 'var(--brand-line)' }}>
                                    <TrustIcon name={it.icon} />
                                </div>
                                <h3 className="font-display mb-3 text-[26px] leading-tight" style={{ color: 'var(--brand-ink)' }}>{it.t}</h3>
                                <p className="text-[14px] leading-[1.8]" style={{ color: 'var(--brand-muted)' }}>{it.s}</p>
                                <div className="hairline mt-8" />
                                <div className="eyebrow mt-5 flex items-center gap-2" style={{ color: 'var(--brand-gold-dim, var(--brand-gold))' }}>
                                    <DiamondGlyph size={9} stroke="var(--brand-gold)" />
                                    0{i + 1} · {it.label}
                                </div>
                            </div>
                        </Reveal>
                    ))}
                </div>
            </div>
        </section>
    );
}

// ─── 7. Founder Message ───────────────────────────────────────────────────────

function FounderMessage() {
    return (
        <section className="border-y" style={{ backgroundColor: 'var(--brand-ivory)', borderColor: 'var(--brand-line)' }}>
            <div className="mx-auto max-w-[1500px] grid items-center gap-10 px-5 py-24 lg:grid-cols-12 lg:gap-16 lg:px-10 lg:py-32">
                <div className="lg:col-span-5">
                    <Reveal>
                        <div className="relative">
                            <Placeholder label="founder · portrait" ratio="4/5" />
                            <div className="absolute -bottom-6 left-6 p-5 lg:left-auto lg:-right-6" style={{ backgroundColor: 'var(--brand-slate)', color: '#FBF7EF', maxWidth: 260 }}>
                                <div className="eyebrow mb-2" style={{ color: 'var(--brand-gold)' }}>Founder & Creative Director</div>
                                <div className="font-display text-[28px] leading-tight">The Founders</div>
                                <div className="mt-1 text-[12px]" style={{ color: 'rgba(251,247,239,0.6)' }}>Dhaka · Banani Atelier</div>
                            </div>
                        </div>
                    </Reveal>
                </div>

                <div className="lg:col-span-7 lg:pl-8">
                    <Reveal delay={120}>
                        <SectionEyebrow>A message from our brand</SectionEyebrow>
                        <div className="font-display mb-2 text-[64px] leading-none" style={{ color: 'rgba(184,137,63,0.3)' }}>"</div>
                        <h2 className="font-display mb-8 leading-[1.1]" style={{ fontSize: 'clamp(34px,4.5vw,56px)', color: 'var(--brand-ink)', maxWidth: 640 }}>
                            This brand is built on the belief that modest clothing can be{' '}
                            <span className="italic" style={{ color: 'var(--brand-gold)' }}>beautiful, comfortable, and deeply meaningful.</span>
                        </h2>
                        <p className="max-w-[600px] text-[16px] leading-[1.9]" style={{ color: 'var(--brand-muted)' }}>
                            Our aim is to create pieces that make you feel confident, respected,
                            and ready for every occasion — whether you're stepping into Jummah,
                            meeting a friend for coffee, or breaking fast with family. Every
                            stitch we approve, every fabric we cut, is a small promise kept.
                        </p>

                        <div className="mt-10 flex items-center gap-6">
                            <div>
                                <div className="font-script text-[44px] leading-none" style={{ color: 'var(--brand-gold)' }}>
                                    Husnulwari
                                </div>
                                <div className="eyebrow mt-1" style={{ color: 'var(--brand-muted)' }}>Founder · Husnulwari Atelier</div>
                            </div>
                            <div className="hidden h-12 w-px sm:block" style={{ backgroundColor: 'var(--brand-line)' }} />
                            <div className="hidden sm:block">
                                <DiamondGlyph size={26} stroke="var(--brand-gold)" />
                            </div>
                        </div>
                    </Reveal>
                </div>
            </div>
        </section>
    );
}

// ─── 8. Our Promise ───────────────────────────────────────────────────────────

const PROMISES = [
    { n: 'I',   t: 'Thoughtful design',             s: 'Every silhouette begins on paper, not on trend boards. We refine until it feels right.' },
    { n: 'II',  t: 'Honest service',                s: 'Clear sizing, fair pricing, careful packing. No surprises — only the ones inside the box.' },
    { n: 'III', t: 'Continuous quality improvement', s: 'Each season we revisit fabrics, fits, and finishes. The next collection is always better than the last.' },
];

function OurPromise() {
    return (
        <section className="relative overflow-hidden" style={{ backgroundColor: 'var(--brand-ink)' }}>
            <div className="pointer-events-none absolute inset-0 ph-stripe-dark opacity-20" />
            <div className="pointer-events-none absolute left-1/2 top-10 -translate-x-1/2 opacity-10">
                <DiamondGlyph size={460} stroke="var(--brand-gold)" />
            </div>
            <div className="relative mx-auto max-w-[1500px] px-5 py-24 lg:px-10 lg:py-32">
                <Reveal>
                    <div className="mb-16 text-center">
                        <SectionEyebrow tone="ivory">Our Promise</SectionEyebrow>
                        <h2 className="font-display mx-auto leading-[1] tracking-[-0.01em]" style={{ fontSize: 'clamp(44px,6vw,88px)', color: '#FBF7EF', maxWidth: 860 }}>
                            Three commitments we sign<br />
                            <span className="italic" style={{ color: 'var(--brand-gold)' }}>into every order.</span>
                        </h2>
                        <p className="mx-auto mt-8 max-w-[620px] text-[16px] leading-[1.85]" style={{ color: 'rgba(251,247,239,0.7)' }}>
                            We promise to design modest wear with care, serve customers with honesty,
                            and keep improving every collection with quality, comfort, and elegance at the centre.
                        </p>
                    </div>
                </Reveal>

                <div className="mx-auto grid max-w-[1100px] gap-10 md:grid-cols-3 lg:gap-14">
                    {PROMISES.map((it, i) => (
                        <Reveal key={it.n} delay={i * 120}>
                            <div className="relative text-center">
                                <div className="font-display mb-5 text-[72px] italic leading-none" style={{ color: 'var(--brand-gold)' }}>{it.n}</div>
                                <div className="hairline mb-6 opacity-30" />
                                <h3 className="font-display mb-4 text-[26px] leading-tight" style={{ color: '#FBF7EF' }}>{it.t}</h3>
                                <p className="mx-auto max-w-[280px] text-[14.5px] leading-[1.8]" style={{ color: 'rgba(251,247,239,0.65)' }}>{it.s}</p>
                            </div>
                        </Reveal>
                    ))}
                </div>

                <Reveal delay={300}>
                    <div className="mt-20 flex flex-col items-center gap-4 text-center">
                        <DiamondGlyph size={32} stroke="var(--brand-gold)" />
                        <div className="eyebrow" style={{ color: 'rgba(251,247,239,0.7)' }}>Sealed by the Husnulwari atelier · est. 2019</div>
                    </div>
                </Reveal>
            </div>
        </section>
    );
}

// ─── 9. Lifestyle Gallery ─────────────────────────────────────────────────────

const LIFESTYLE = [
    { t: 'Everyday Wear',     c: 'For the school run, the commute, the quiet afternoon.',                      tag: 'Daily',       dark: false },
    { t: 'Jummah Wear',       c: 'Pieces that move from prayer hall to gathering with grace.',                  tag: 'Friday',      dark: true },
    { t: 'Eid Collection',    c: 'Soft golds, deep slates, and considered embroidery.',                        tag: 'Celebration', dark: true },
    { t: 'Family Gatherings', c: "Refined enough for guests, comfortable enough for the cousins' table.",      tag: 'Together',    dark: false },
];

function LifestyleGallery() {
    return (
        <section style={{ backgroundColor: 'var(--brand-cream)' }}>
            <div className="mx-auto max-w-[1500px] px-5 py-24 lg:px-10 lg:py-32">
                <Reveal>
                    <div className="mb-14 flex flex-wrap items-end justify-between gap-6">
                        <div>
                            <SectionEyebrow>Lifestyle</SectionEyebrow>
                            <h2 className="font-display leading-[1]" style={{ fontSize: 'clamp(40px,5vw,72px)', color: 'var(--brand-ink)', maxWidth: 680 }}>
                                Modest style for<br />
                                <span className="italic" style={{ color: 'var(--brand-gold)' }}>every moment.</span>
                            </h2>
                        </div>
                        <Link href="/products" className="eyebrow flex items-center gap-2 transition hover:text-gold" style={{ color: 'var(--brand-gold-dim, var(--brand-gold))' }}>
                            Shop the wardrobe
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.4" /></svg>
                        </Link>
                    </div>
                </Reveal>

                <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 lg:gap-6">
                    {LIFESTYLE.map((it, i) => (
                        <Reveal key={it.t} delay={i * 80}>
                            <Link href="/products" className="group block card-lift">
                                <div className="relative overflow-hidden">
                                    <Placeholder label={`lifestyle · ${it.t.toLowerCase()}`} dark={it.dark} ratio="4/5" />
                                    <div className="absolute left-4 top-4">
                                        <span className="eyebrow px-3 py-1.5" style={{ backgroundColor: 'rgba(246,241,231,0.85)' }}>{it.tag}</span>
                                    </div>
                                    <div
                                        className="absolute bottom-4 right-4 flex h-9 w-9 items-center justify-center rounded-full transition group-hover:text-white"
                                        style={{ backgroundColor: 'rgba(246,241,231,0.85)', color: 'var(--brand-slate)' }}
                                        onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = 'var(--brand-gold)')}
                                        onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'rgba(246,241,231,0.85)')}
                                    >
                                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                                            <path d="M3 11L11 3M5 3h6v6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                                        </svg>
                                    </div>
                                </div>
                                <div className="pt-5">
                                    <div className="font-display text-[24px] leading-tight" style={{ color: 'var(--brand-ink)' }}>{it.t}</div>
                                    <p className="mt-2 text-[13px] leading-relaxed" style={{ color: 'var(--brand-muted)' }}>{it.c}</p>
                                </div>
                            </Link>
                        </Reveal>
                    ))}
                </div>
            </div>
        </section>
    );
}

// ─── 10. Final CTA ────────────────────────────────────────────────────────────

function FinalCTA() {
    return (
        <section className="relative overflow-hidden border-y ornament-bg" style={{ backgroundColor: 'var(--brand-ivory)', borderColor: 'var(--brand-line)' }}>
            <div className="pointer-events-none absolute -left-12 top-12 hidden opacity-15 lg:block">
                <DiamondGlyph size={220} stroke="var(--brand-gold)" />
            </div>
            <div className="pointer-events-none absolute -bottom-16 -right-16 hidden opacity-10 lg:block">
                <DiamondGlyph size={280} stroke="var(--brand-gold)" />
            </div>

            <div className="relative mx-auto max-w-[1100px] px-5 py-24 text-center lg:px-10 lg:py-32">
                <Reveal>
                    <SectionEyebrow>Begin your wardrobe</SectionEyebrow>
                    <h2 className="font-display leading-[1] tracking-[-0.01em]" style={{ fontSize: 'clamp(44px,6.5vw,96px)', color: 'var(--brand-ink)' }}>
                        Discover modest wear<br />
                        <span className="italic" style={{ color: 'var(--brand-gold)' }}>made with meaning.</span>
                    </h2>
                    <p className="mx-auto mt-7 max-w-[560px] text-[16px] leading-[1.85]" style={{ color: 'var(--brand-muted)' }}>
                        Explore our latest collection and find timeless pieces designed for comfort, confidence, and refined style.
                    </p>
                    <div className="mt-10 flex flex-col justify-center gap-3 sm:flex-row">
                        <Link href="/products" className="inline-flex items-center justify-center px-8 py-4 text-[12px] uppercase tracking-[0.18em] font-medium text-white transition hover:opacity-90 eyebrow" style={{ backgroundColor: 'var(--brand-slate)' }}>
                            Shop New Arrivals
                        </Link>
                        <Link href="/products" className="inline-flex items-center justify-center border px-8 py-4 text-[12px] uppercase tracking-[0.18em] transition hover:text-gold eyebrow" style={{ borderColor: 'rgba(31,42,48,0.25)', color: 'var(--brand-ink)' }}>
                            View All Collections →
                        </Link>
                    </div>
                    <div className="eyebrow mt-12 flex items-center justify-center gap-3" style={{ color: 'var(--brand-muted)' }}>
                        <DiamondGlyph size={10} stroke="var(--brand-gold)" />
                        Free delivery on selected orders · 14-day returns · Quality guaranteed
                    </div>
                </Reveal>
            </div>
        </section>
    );
}

// ─── Footer ───────────────────────────────────────────────────────────────────

function PageFooter() {
    const { siteSettings } = usePage<SharedData>().props;
    const s = siteSettings;
    const siteName = s?.site_name ?? 'Kapor Bikreta';
    const logoPath = s?.logo_path;
    const footerDesc = s?.footer_desc ?? '';
    const copyright = (s?.copyright ?? '© {year} All rights reserved.').replace('{year}', String(new Date().getFullYear()));
    const showAbout = s?.show_about ?? true;
    const showBlog = s?.show_blog ?? true;
    const phone = s?.phone ?? '';

    return (
        <footer className="ph-stripe-dark py-14">
            <div className="mx-auto max-w-[1500px] px-5 lg:px-10">
                <div className="grid gap-10 md:grid-cols-4">
                    <div className="md:col-span-2">
                        <Link href="/" className="mb-4 inline-block">
                            {logoPath ? (
                                <img src={`/storage/${logoPath}`} alt={siteName} className="h-9 w-auto brightness-0 invert" />
                            ) : (
                                <span className="font-display text-xl font-medium text-white">{siteName}</span>
                            )}
                        </Link>
                        <p className="mb-5 max-w-xs text-sm leading-relaxed" style={{ color: 'rgba(229,221,204,0.5)' }}>
                            {footerDesc || 'Premium fashion, delivered across Bangladesh with care.'}
                        </p>
                    </div>
                    <div>
                        <p className="eyebrow mb-5 text-white">Quick Links</p>
                        <ul className="space-y-3">
                            {[
                                { href: '/', label: 'Home' },
                                { href: '/products', label: 'All Products' },
                                { href: '/cart', label: 'Cart' },
                                ...(showAbout ? [{ href: '/about', label: 'About Us' }] : []),
                                ...(showBlog ? [{ href: '/blog', label: 'Blog' }] : []),
                            ].map((l) => (
                                <li key={l.href}>
                                    <Link href={l.href} className="link-gold text-sm transition" style={{ color: 'rgba(229,221,204,0.5)' }}>{l.label}</Link>
                                </li>
                            ))}
                        </ul>
                    </div>
                    <div>
                        <p className="eyebrow mb-5 text-white">Contact</p>
                        {phone && <p className="mb-2 text-sm" style={{ color: 'rgba(229,221,204,0.5)' }}>{phone}</p>}
                        <p className="text-sm" style={{ color: 'rgba(229,221,204,0.5)' }}>Mon – Sat: 10am – 8pm</p>
                    </div>
                </div>
                <div className="mt-12 border-t pt-6 text-center" style={{ borderColor: 'rgba(229,221,204,0.1)' }}>
                    <p className="eyebrow" style={{ color: 'rgba(229,221,204,0.3)' }}>{copyright}</p>
                </div>
            </div>
        </footer>
    );
}

// ─── Page ─────────────────────────────────────────────────────────────────────

interface Props {
    content: string;
    site_name: string;
    phone: string;
    categories?: Category[];
}

function AboutInner({ content, categories = [] }: Props) {
    const { siteSettings } = usePage<SharedData>().props;
    const siteName = siteSettings?.site_name ?? 'Kapor Bikreta';
    const showAnnouncement = siteSettings?.show_announcement ?? true;
    const announcementText = siteSettings?.announcement_bar ?? '';

    return (
        <div style={{ fontFamily: "'Outfit', 'Instrument Sans', sans-serif", backgroundColor: 'var(--brand-cream)' }}>
            <Head title={`About Us — ${siteName}`} />

            {showAnnouncement && announcementText && (
                <div className="ph-stripe-dark overflow-hidden py-2.5">
                    <div className="marquee-track">
                        {[...Array(8)].map((_, i) => (
                            <span key={i} className="eyebrow flex items-center px-8" style={{ color: 'rgba(229,221,204,0.55)' }}>
                                <span className="mr-3 text-xs" style={{ color: 'var(--brand-gold)' }}>♦</span>
                                {announcementText}
                            </span>
                        ))}
                    </div>
                </div>
            )}

            <SiteHeader activePage="about" />
            <AboutHero />
            <OurStory content={content} />
            <MissionVision />
            <OurValues />
            <Craftsmanship />
            <WhyChooseUs />
            <FounderMessage />
            <OurPromise />
            <LifestyleGallery />
            <FinalCTA />
            <PageFooter />
        </div>
    );
}

export default function AboutIndex(props: Props) {
    return (
        <LangProvider>
            <AboutInner {...props} />
        </LangProvider>
    );
}