import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useParams, Link } from 'react-router-dom';
import { getSolution } from '../data/solutions';
import { SolutionIcon } from '../components/SolutionIcon';
import { LoginBox } from '../components/LoginBox';
import { FeatureGrid } from '../components/FeatureGrid';
import { StepGuide } from '../components/StepGuide';
import { MobileScreenList } from '../components/MobileScreenList';
export const SolutionDetailPage = () => {
    const { slug } = useParams();
    const solution = slug ? getSolution(slug) : undefined;
    if (!solution) {
        return (_jsx("main", { className: "section", children: _jsxs("div", { className: "container", children: [_jsx("h1", { className: "section-title", children: "\uC194\uB8E8\uC158\uC744 \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" }), _jsx(Link, { to: "/catalog", className: "btn-primary", style: { marginTop: 16, display: 'inline-block' }, children: "\uC804\uCCB4 \uC194\uB8E8\uC158\uC73C\uB85C" })] }) }));
    }
    const { name, tagline, color, status, category, access, features, steps, mobileScreens } = solution;
    const soon = status === 'soon';
    return (_jsxs("main", { className: "detail", children: [_jsx("section", { className: "detail-header", style: { background: `radial-gradient(900px 360px at 18% -20%, ${color}33, transparent 70%)` }, children: _jsxs("div", { className: "container", children: [_jsx(Link, { to: "/catalog", className: "detail-back", children: "\u2190 \uC804\uCCB4 \uC194\uB8E8\uC158" }), _jsxs("div", { className: "detail-header-row", children: [_jsx("span", { className: "detail-icon", style: { color, background: `${color}1a`, borderColor: `${color}40` }, children: _jsx(SolutionIcon, { slug: solution.slug, size: 44, color: color }) }), _jsxs("div", { children: [_jsxs("div", { className: "detail-title-row", children: [_jsx("h1", { className: "detail-title", children: name }), status === 'live' ? (_jsx("span", { className: "badge badge-live", children: "LIVE" })) : (_jsx("span", { className: "badge badge-soon", children: "SOON" }))] }), _jsx("p", { className: "detail-tagline", children: tagline }), _jsx("span", { className: "detail-cat", children: category })] })] })] }) }), _jsxs("div", { className: "container detail-body", children: [_jsx("section", { className: "detail-section", children: _jsx(LoginBox, { access: access, color: color, soon: soon }) }), _jsxs("section", { className: "detail-section", children: [_jsx("h2", { className: "section-title", children: "\uC8FC\uC694 \uAE30\uB2A5" }), _jsxs("p", { className: "section-sub", children: [name, "\uC758 \uD575\uC2EC \uAE30\uB2A5\uC785\uB2C8\uB2E4."] }), _jsx(FeatureGrid, { features: features, color: color })] }), _jsxs("section", { className: "detail-section", children: [_jsx("h2", { className: "section-title", children: "\uB2E8\uACC4\uBCC4 \uC2DC\uC5F0 \uAC00\uC774\uB4DC" }), _jsx("p", { className: "section-sub", children: "\uC544\uB798 \uC21C\uC11C\uB300\uB85C \uB530\uB77C \uD558\uBA74 \uC8FC\uC694 \uAE30\uB2A5\uC744 \uD655\uC778\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." }), _jsx(StepGuide, { steps: steps, color: color })] }), _jsxs("section", { className: "detail-section", children: [_jsx("h2", { className: "section-title", children: "\uBAA8\uBC14\uC77C \uC571 \uD654\uBA74" }), _jsx("p", { className: "section-sub", children: "\uD604\uC7A5\u00B7\uAD00\uB9AC\uC790\u00B7\uC0AC\uC6A9\uC790\uC6A9 \uBAA8\uBC14\uC77C \uD654\uBA74 \uAD6C\uC131\uC785\uB2C8\uB2E4." }), _jsx(MobileScreenList, { screens: mobileScreens, color: color })] })] })] }));
};
export default SolutionDetailPage;