// Produktseite des Bots: was er kann, wie er aussieht, wo es weitergeht.
// Bewusst ohne „Einladen"-Button — der Bot ist auf einen Server ausgelegt.
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { apiGet } from '../api.js';
import { useT } from '../i18n.jsx';
import { Accent } from '../components/Accent.jsx';
import {
    IconDevlog, IconLevel, IconRoles, IconServer, IconSupport, IconGiveaway,
    IconBirthday, IconShield, IconMagic, IconArrowRight, IconBot,
} from '../icons.jsx';

const HIGHLIGHTS = [
    [IconDevlog, 'bot.hl.devlogs'],
    [IconServer, 'bot.hl.monitor'],
    [IconLevel, 'bot.hl.level'],
    [IconRoles, 'bot.hl.roles'],
    [IconSupport, 'bot.hl.support'],
    [IconShield, 'bot.hl.mod'],
    [IconGiveaway, 'bot.hl.giveaway'],
    [IconBirthday, 'bot.hl.birthday'],
    [IconMagic, 'bot.hl.welcome'],
];

export default function BotLanding() {
    const { t } = useT();
    const [status, setStatus] = useState(null);
    const [hub, setHub] = useState(null);
    const [featureCount, setFeatureCount] = useState(null);

    useEffect(() => {
        // Nur verlinken, wenn der Hub wirklich woanders liegt
        apiGet('/api/legal').then((d) => setHub(d.split ? d.hubUrl : null)).catch(() => {});
        apiGet('/api/serverstats').then(setStatus).catch(() => {});
        // Zahl kommt aus dem Modul-Register, damit sie nicht veraltet
        apiGet('/api/features').then((d) => setFeatureCount(d.features.length)).catch(() => {});
        window.scrollTo(0, 0);
    }, []);

    return (
        <>
            <section className="hero hero-bot">
                <div className="hero-text">
                    <div className="page-tag dot">{t('bot.tag')}</div>
                    <h1 className="hero-title">
                        {t('bot.title1')}<br />
                        <Accent text={t('bot.title2')} outline />
                    </h1>
                    <p className="hero-sub">{t('bot.subtitle')}</p>
                    <div className="home-cta">
                        <Link className="btn btn-save with-icon" to="/features">
                            {t('bot.allFeatures')} <IconArrowRight size={15} />
                        </Link>
                        <Link className="btn btn-ghost with-icon" to="/commands">
                            <IconBot /> {t('bot.viewCommands')}
                        </Link>
                    </div>
                </div>

                {/* Karte mit Logo, Zustand und den vier Kennzahlen. Der versetzte
                    Rahmen liegt als eigenes Element dahinter — als Pseudo-Element
                    am Panel würde ihn dessen Abschrägung wegschneiden. */}
                <div className="hero-card">
                    <span className="hero-frame" aria-hidden="true" />
                    <div className="hero-panel">
                        <div className="hero-lockup">
                            <img src="/brand/lockup.png" alt="D4RKST3R" />
                        </div>
                        {/* Diese Seite liefert der Bot selbst aus — wenn sie
                            ankommt, läuft er. Antwortzeit und Erreichbarkeit
                            stehen bisher nur im Panel, nicht öffentlich. */}
                        <div className="hero-state">
                            <span className="hero-dot" />
                            {t('bot.online')}
                        </div>
                        <div className="hero-stats">
                            <div className="hero-stat">
                                <span className="hero-stat-n">{featureCount ?? '—'}</span>
                                <span className="hero-stat-label">{t('bot.statFeatures')}</span>
                            </div>
                            <div className="hero-stat">
                                <span className="hero-stat-n">18</span>
                                <span className="hero-stat-label">{t('bot.statCommands')}</span>
                            </div>
                            <div className="hero-stat">
                                <span className="hero-stat-n">300+</span>
                                <span className="hero-stat-label">{t('bot.statGames')}</span>
                            </div>
                            <div className="hero-stat">
                                <span className="hero-stat-n">0 €</span>
                                <span className="hero-stat-label">{t('bot.statCost')}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="content">
                <h2 className="settings-title">
                    {t('bot.whatItDoes')}
                    {featureCount && <span className="section-meta">{t('bot.modulesMeta', featureCount)}</span>}
                </h2>
                <div className="home-tiles">
                    {HIGHLIGHTS.map(([Icon, key]) => (
                        <div className="card home-tile" key={key}>
                            <span className="home-tile-icon"><Icon size={18} /></span>
                            <span className="home-tile-title">{t(key)}</span>
                            <span className="home-tile-desc">{t(`${key}.text`)}</span>
                        </div>
                    ))}
                </div>

                <div className="info-panels">
                    <div className="info-panel">
                        <span className="info-panel-tag">{t('bot.forDevs')}</span>
                        <h3 className="info-panel-title">{t('bot.dev.api')}</h3>
                        <p>{t('bot.dev.api.text')}</p>
                    </div>
                    <div className="info-panel warm">
                        <span className="info-panel-tag">{t('bot.hosting')}</span>
                        <h3 className="info-panel-title">{t('bot.dev.host')}</h3>
                        <p>{t('bot.dev.host.text')}</p>
                    </div>
                </div>

                {hub && (
                    <p className="footnote">
                        {status?.members
                            ? t('bot.runsForWith', status.members)
                            : t('bot.runsFor')} —
                        {' '}<a href={hub}>{t('bot.toHub')}</a>.
                    </p>
                )}
            </section>
        </>
    );
}