import React, { useState, useRef } from 'react';
import type { Locale, Game, LangCode } from './i18n';
import { SubscribeBand, type NewsCategory } from './Subscribe';

interface GameCardProps {
    g: Game;
    art: string;
    motion: boolean;
    delay: number;
}

function GameCard({ g, art, motion, delay }: GameCardProps) {
    const ref = useRef<HTMLElement | null>(null);
    const onMove = (e: React.MouseEvent) => {
        if (!motion) return;
        const el = ref.current;
        if (!el) return;
        const r = el.getBoundingClientRect();
        const px = (e.clientX - r.left) / r.width - 0.5;
        const py = (e.clientY - r.top) / r.height - 0.5;
        el.style.transform = `perspective(900px) rotateY(${px * 7}deg) rotateX(${-py * 7}deg) translateY(-6px)`;
    };
    const reset = () => {
        if (ref.current) ref.current.style.transform = '';
    };
    return (
        <article ref={ref} className={'game-card reveal d' + delay} onMouseMove={onMove} onMouseLeave={reset}>
            <div className="game-art">
                <div className={'game-status ' + (g.statusType === 'out' ? 'out' : g.statusType === 'dev' ? 'dev' : '')}>{g.status}</div>
                {g.img ? (
                    <img className="game-img" src={g.img} alt={g.name + ' key art'} loading="lazy" draggable={false} />
                ) : (
                    <div className="ph" style={{ ['--c1' as string]: g.c1, ['--c2' as string]: g.c2 } as React.CSSProperties}>
                        <span>
                            {art} · {g.name.toUpperCase()}
                        </span>
                    </div>
                )}
            </div>
            <div className="game-body">
                <h3>{g.name}</h3>
                <div className="game-meta">
                    <span className="tag">{g.genre}</span>
                    <span className="tag">{g.platform}</span>
                </div>
                <p className="game-desc">{g.desc}</p>
            </div>
        </article>
    );
}

export function Games({ t, motion }: { t: Locale; motion: boolean }) {
    return (
        <section className="games section-pad" id="games">
            <div className="wrap">
                <div className="section-head">
                    <div className="lead">
                        <span className="kicker on-night reveal">{t.games.kicker}</span>
                        <h2 className="section-title reveal d1">{t.games.title}</h2>
                    </div>
                    <p className="reveal d2">{t.games.sub}</p>
                </div>
                <div className="games-grid">
                    {t.games.list.map((g, i) => (
                        <GameCard key={g.name} g={g} art={t.games.art} motion={motion} delay={(i % 2) + 1} />
                    ))}
                </div>
            </div>
        </section>
    );
}

export function Services({ t }: { t: Locale }) {
    return (
        <section className="section-pad" id="services">
            <div className="wrap">
                <div className="section-head">
                    <div className="lead">
                        <span className="kicker reveal">{t.services.kicker}</span>
                        <h2 className="section-title reveal d1">{t.services.title}</h2>
                    </div>
                    <p className="reveal d2">{t.services.sub}</p>
                </div>
                <div className="svc-grid reveal d1">
                    {t.services.list.map((s) => (
                        <div className="svc" key={s.num}>
                            <div className="svc-num">{s.num}</div>
                            <h3>{s.name}</h3>
                            <p>{s.desc}</p>
                            <div className="svc-tags">
                                {s.tags.map((tg) => (
                                    <span className="t" key={tg}>{tg}</span>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}

export function Process({ t }: { t: Locale }) {
    return (
        <section className="process section-pad" id="process">
            <div className="wrap">
                <div className="section-head">
                    <div className="lead">
                        <span className="kicker reveal">{t.process.kicker}</span>
                        <h2 className="section-title reveal d1">{t.process.title}</h2>
                    </div>
                </div>
                <div className="steps">
                    {t.process.steps.map((s, i) => (
                        <div className={'step reveal d' + (i + 1)} key={s.num}>
                            <div className="num">{s.num}</div>
                            <h3>{s.name}</h3>
                            <p>{s.desc}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}

export function ContactCTA({ t }: { t: Locale }) {
    const [sel, setSel] = useState<number | null>(null);
    const subject = sel != null ? `Project enquiry: ${t.cta.chips[sel]}` : 'Project enquiry';
    return (
        <section className="section-pad" id="contact">
            <div className="wrap">
                <div className="cta-band reveal">
                    <div className="cta-glow" />
                    <div style={{ position: 'relative', zIndex: 2 }}>
                        <span className="kicker on-night" style={{ color: 'var(--gold)' }}>
                            {t.cta.kicker}
                        </span>
                        <h2 style={{ marginTop: 16 }}>{t.cta.title}</h2>
                        <p>{t.cta.sub}</p>
                        <div className="cta-chips">
                            {t.cta.chips.map((c, i) => (
                                <button className={'cta-chip' + (sel === i ? ' sel' : '')} key={c} onClick={() => setSel(i)}>
                                    {c}
                                </button>
                            ))}
                        </div>
                        <div className="cta-actions">
                            <a
                                className="btn btn-primary"
                                href={`mailto:info@flameowlstudio.com?subject=${encodeURIComponent(subject)}`}
                            >
                                {t.cta.email} <span className="arrow">→</span>
                            </a>
                            <a className="btn btn-ghost on-night" href="https://wa.me/85298564104" target="_blank" rel="noreferrer">
                                {t.cta.whatsapp}
                            </a>
                        </div>
                        <div className="cta-contact">
                            {t.cta.contact.map((c) => (
                                <div className="item" key={c.l}>
                                    <div className="l">{c.l}</div>
                                    <div className="v">{c.v}</div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

export function Clients({ t }: { t: Locale }) {
    return (
        <section className="section-pad clients" id="clients">
            <div className="wrap">
                <div className="section-head">
                    <div className="lead">
                        <span className="kicker reveal">{t.clients.kicker}</span>
                        <h2 className="section-title reveal d1">{t.clients.title}</h2>
                    </div>
                    <p className="reveal d2">{t.clients.sub}</p>
                </div>
                <div className="clients-grid">
                    {t.clients.list.map((c, i) => (
                        <a className={'client-card reveal d' + ((i % 3) + 1)} key={c.name} href={c.url} target="_blank" rel="noreferrer">
                            <div className={'client-shot' + (c.fit === 'contain' ? ' contain' : '')}>
                                {c.img ? (
                                    <img className="client-img" src={c.img} alt={c.name + ' preview'} loading="lazy" draggable={false} />
                                ) : (
                                    <span className="ph-label">{t.clients.shot}</span>
                                )}
                                <span className="client-type">{c.type}</span>
                            </div>
                            <div className="client-body">
                                <div className="client-meta">
                                    <strong>{c.name}</strong>
                                    <span>{c.sector}</span>
                                </div>
                                <p>{c.desc}</p>
                                <span className="client-link">
                                    {c.linkText} <span className="client-arrow">↗</span>
                                </span>
                            </div>
                        </a>
                    ))}
                </div>
            </div>
        </section>
    );
}

export function Studio({ t }: { t: Locale }) {
    const s = t.studio;
    return (
        <section className="section-pad" id="studio">
            <div className="wrap studio-grid">
                <div className="studio-copy">
                    <span className="kicker reveal">{s.kicker}</span>
                    <h2 className="section-title reveal d1">{s.title}</h2>
                    <p className="studio-lead reveal d2">{s.lead}</p>
                    <p className="studio-body reveal d2">{s.body}</p>
                    <div className="studio-points reveal d3">
                        {s.points.map((p) => (
                            <div className="sp" key={p.k}>
                                <div className="k">{p.k}</div>
                                <div className="v">{p.v}</div>
                            </div>
                        ))}
                    </div>
                    <a className="btn btn-primary reveal d3" href="#contact">
                        {s.cta} <span className="arrow">→</span>
                    </a>
                </div>
                <div className="studio-photos reveal d2">
                    {s.shots.map((sh, i) => (
                        <figure className={'ph ph' + (i + 1)} key={i}>
                            <img src={sh.img} alt={sh.label} loading="lazy" draggable={false} />
                            <figcaption>
                                <span className="cap-tag">{s.shotsLabel}</span>
                                {sh.label}
                            </figcaption>
                        </figure>
                    ))}
                </div>
            </div>
        </section>
    );
}

export function Footer({ t, lang, categories }: { t: Locale; lang: LangCode; categories: NewsCategory[] }) {
    return (
        <footer className="footer">
            <div className="wrap">
                <SubscribeBand t={t} lang={lang} categories={categories} />
                <div className="footer-bottom">
                    <span>{t.footer.rights}</span>
                </div>
            </div>
        </footer>
    );
}