import { Link } from '@inertiajs/react';

import PrismLayout from './_layout';

type ContentLink = { label: string; href: string };

type ShellContent = {
    nav_items: ContentLink[];
    footer: {
        brand_description: string;
        socials: ContentLink[];
        groups: Array<{ title: string; links: ContentLink[] }>;
        legal_title: string;
        legal_links: ContentLink[];
        copyright: string;
    };
};

type Step = {
    number: string;
    title: string;
    duration: string;
    description: string;
    sub_points: string[];
};

type LatencyRow = { phase: string; budget: string };

type Props = {
    shell: ShellContent;
    brand: string;
    canRegister?: boolean;
    steps: Step[];
    latency: LatencyRow[];
};

export default function PrismHowItWorks({
    shell,
    brand,
    canRegister = false,
    steps,
    latency,
}: Props) {
    return (
        <PrismLayout
            brand={brand}
            navItems={shell.nav_items}
            footer={shell.footer}
            canRegister={canRegister}
            title={`How it works — ${brand}`}
            description={`How the ${brand} sales AI widget turns your website into a 24/7 sales rep — from setup to first conversation in under 5 minutes.`}
        >
            <section className="hero" data-screen-label="HIW hero">
                <div className="wrap">
                    <h1>
                        From URL to a live agent in{' '}
                        <span className="ital">under 5 minutes</span>.
                    </h1>
                    <p className="hero-sub">
                        {brand} reads your website, builds an AI agent grounded in your
                        own content, and embeds it on any page with one line of HTML.
                        Here's exactly what happens.
                    </p>
                </div>
            </section>

            <section className="sec" style={{ paddingTop: 0 }} data-screen-label="HIW steps">
                <div className="wrap">
                    <div className="sec-hd-center">
                        <span className="eyebrow">From paste to live</span>
                        <h2>
                            Ship a working assistant in{' '}
                            <span className="ital">three</span> steps.
                        </h2>
                        <p className="lede">
                            Most teams go live before lunch — no engineering required.
                        </p>
                    </div>

                    <div className="steps-grid">
                        {steps.map((step, idx) => (
                            <article className="step" key={step.title}>
                                <span className="step-n">
                                    <span className="step-num">{idx + 1}</span>
                                    {step.number} · {step.duration}
                                </span>
                                <h3>{step.title}</h3>
                                <p>{step.description}</p>
                                {step.sub_points.length > 0 ? (
                                    <ul
                                        style={{
                                            listStyle: 'none',
                                            padding: 0,
                                            margin: 0,
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: 6,
                                            fontSize: 13,
                                            color: 'var(--muted)',
                                        }}
                                    >
                                        {step.sub_points.map((point) => (
                                            <li
                                                key={point}
                                                style={{
                                                    display: 'flex',
                                                    gap: 8,
                                                    alignItems: 'flex-start',
                                                    lineHeight: 1.5,
                                                }}
                                            >
                                                <span
                                                    aria-hidden="true"
                                                    style={{
                                                        width: 14,
                                                        height: 14,
                                                        borderRadius: 4,
                                                        background: 'var(--grad-soft)',
                                                        flex: '0 0 auto',
                                                        marginTop: 3,
                                                    }}
                                                />
                                                <span>{point}</span>
                                            </li>
                                        ))}
                                    </ul>
                                ) : null}
                            </article>
                        ))}
                    </div>
                </div>
            </section>

            <section className="sec" style={{ paddingTop: 0 }} data-screen-label="HIW latency">
                <div className="wrap">
                    <div className="sec-hd">
                        <div>
                            <span className="eyebrow">Hot path contract</span>
                            <h2>
                                1 second to <span className="ital">first token</span>.
                                Every time.
                            </h2>
                        </div>
                    </div>

                    <div className="tune-grid">
                        <div className="tune-left">
                            <h4>
                                The visitor-message → first-token path has a hard p95{' '}
                                <span className="ital">budget</span>.
                            </h4>
                            <p>
                                No DB writes, no synchronous webhooks, no retries.
                                Persistence and analytics are dispatched async after the
                                stream completes. OpenTelemetry spans wrap every phase, so
                                when the budget breaks, the span heatmap points right at
                                the offender.
                            </p>
                        </div>
                        <div className="tune-right">
                            <div className="settings">
                                <div className="settings-hd">
                                    <h5>P95 LATENCY BUDGET</h5>
                                    <span className="badge">/ hot path</span>
                                </div>
                                {latency.map((row, idx) => (
                                    <div className="settings-row" key={row.phase}>
                                        <div>
                                            <div className="lbl">{row.phase}</div>
                                            <div className="hint">{`Phase ${idx + 1}`}</div>
                                        </div>
                                        <div
                                            className="field"
                                            style={{ fontFamily: 'ui-monospace, Menlo, monospace' }}
                                        >
                                            {row.budget}
                                        </div>
                                    </div>
                                ))}
                                <div className="settings-row" style={{ borderTop: '2px solid var(--fg)' }}>
                                    <div>
                                        <div className="lbl">Total to first token</div>
                                        <div className="hint">P95 BUDGET</div>
                                    </div>
                                    <div
                                        className="field"
                                        style={{
                                            fontWeight: 600,
                                            fontFamily: 'ui-monospace, Menlo, monospace',
                                        }}
                                    >
                                        ~ 865 ms
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="wrap" data-screen-label="HIW CTA">
                <div className="final">
                    <span className="eyebrow">Start now</span>
                    <h2>
                        Try it on your <span className="ital">own site</span>.
                    </h2>
                    <p>Free to start. No card required. Live in 5 minutes.</p>
                    <div className="final-actions">
                        <Link href="/register" className="btn btn-primary">
                            Start free
                        </Link>
                        <Link href="/pricing" className="btn btn-ghost">
                            See pricing
                        </Link>
                    </div>
                </div>
            </section>
        </PrismLayout>
    );
}