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 Native = {
    name: string;
    category: string;
    tagline: string;
    description: string;
    icon: string;
};

type DataSource = { name: string; tagline: string; icon: string };

type RoadmapItem = { name: string; tagline: string };

type Props = {
    shell: ShellContent;
    brand: string;
    canRegister?: boolean;
    native: Native[];
    data_sources: DataSource[];
    roadmap: RoadmapItem[];
};

function code(name: string): string {
    return (
        name
            .split(/\s+/)
            .slice(0, 2)
            .map((p) => p[0])
            .join('')
            .toUpperCase()
            .slice(0, 3) || 'IN'
    );
}

export default function PrismIntegrations({
    shell,
    brand,
    canRegister = false,
    native,
    data_sources,
    roadmap,
}: Props) {
    return (
        <PrismLayout
            brand={brand}
            navItems={shell.nav_items}
            footer={shell.footer}
            canRegister={canRegister}
            title={`Integrations — ${brand}`}
            description={`Plug ${brand} into the tools your team already uses — Notion, Google Docs, Slack, Stripe, webhooks, and more.`}
        >
            <section className="hero" data-screen-label="INT hero">
                <div className="wrap">
                    <h1>
                        Plug {brand} into the{' '}
                        <span className="ital">tools you already use</span>.
                    </h1>
                    <p className="hero-sub">
                        Native sync where it matters, signed webhooks everywhere
                        else. Bring your knowledge in. Push leads out. Capture
                        human escalations without leaving Slack.
                    </p>
                </div>
            </section>

            <section
                className="sec"
                style={{ paddingTop: 0 }}
                data-screen-label="INT native"
            >
                <div className="wrap">
                    <div className="sec-hd">
                        <div>
                            <span className="eyebrow">Native integrations</span>
                            <h2>Ship-ready connectors, no glue code.</h2>
                        </div>
                    </div>
                    <div className="features">
                        {native.map((item) => (
                            <article className="feat" key={item.name}>
                                <div className="ic">
                                    <span
                                        style={{
                                            fontSize: 12,
                                            fontWeight: 700,
                                        }}
                                    >
                                        {code(item.name)}
                                    </span>
                                </div>
                                <h4>{item.name}</h4>
                                <p>
                                    <strong style={{ color: 'var(--fg)' }}>
                                        {item.tagline}
                                    </strong>
                                    <br />
                                    {item.description}
                                </p>
                                <div className="tag">
                                    {item.category.toUpperCase()} · LIVE
                                </div>
                            </article>
                        ))}
                    </div>
                </div>
            </section>

            <section
                className="sec"
                style={{ paddingTop: 0 }}
                data-screen-label="INT sources"
            >
                <div className="wrap">
                    <div className="sec-hd">
                        <div>
                            <span className="eyebrow">Knowledge in</span>
                            <h2>
                                Five ways to <span className="ital">feed</span>{' '}
                                the agent.
                            </h2>
                        </div>
                    </div>
                    <div className="tune-grid">
                        <div className="tune-left">
                            <h4>
                                Mix and match — most teams start with a{' '}
                                <span className="ital">sitemap crawl</span>,
                                paste a few FAQs, then enable auto-index for the
                                long tail.
                            </h4>
                            <p>
                                Every source type ships with idempotent ingest,
                                dedup, and automatic re-crawl on a schedule you
                                control.
                            </p>
                        </div>
                        <div className="tune-right">
                            <div className="settings">
                                <div className="settings-hd">
                                    <h5>SOURCE TYPES</h5>
                                    <span className="badge">/ ingest</span>
                                </div>
                                {data_sources.map((src) => (
                                    <div
                                        className="settings-row"
                                        key={src.name}
                                    >
                                        <div>
                                            <div className="lbl">
                                                {src.name}
                                            </div>
                                            <div className="hint">
                                                {src.tagline}
                                            </div>
                                        </div>
                                        <div
                                            className="field"
                                            style={{
                                                fontFamily:
                                                    'ui-monospace, Menlo, monospace',
                                            }}
                                        >
                                            {code(src.name)}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section
                className="sec"
                style={{ paddingTop: 0 }}
                data-screen-label="INT roadmap"
            >
                <div className="wrap">
                    <div className="sec-hd">
                        <div>
                            <span className="eyebrow">On the roadmap</span>
                            <h2>Coming soon.</h2>
                        </div>
                        <p
                            style={{
                                color: 'var(--muted)',
                                fontSize: 14.5,
                                maxWidth: 36 + 'ch',
                            }}
                        >
                            Until these ship natively, the outgoing webhook + a
                            Zapier catch-hook covers every CRM in your stack.
                        </p>
                    </div>
                    <div className="uc-grid">
                        {roadmap.map((item) => (
                            <article className="uc" key={item.name}>
                                <div className="uc-ic">
                                    <span
                                        style={{
                                            fontSize: 11,
                                            fontWeight: 700,
                                        }}
                                    >
                                        {code(item.name)}
                                    </span>
                                </div>
                                <h3>{item.name}</h3>
                                <p>{item.tagline}</p>
                            </article>
                        ))}
                    </div>
                </div>
            </section>

            <section className="wrap" data-screen-label="INT CTA">
                <div className="final">
                    <span className="eyebrow">Ready?</span>
                    <h2>
                        Ready to <span className="ital">plug it in?</span>
                    </h2>
                    <p>
                        Free to start. Connect Notion, Slack, and your first
                        webhook in under 5 minutes.
                    </p>
                    <div className="final-actions">
                        <Link href="/register" className="btn btn-primary">
                            Get started free
                        </Link>
                        <a
                            href="/documentation/integrations"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="btn btn-ghost"
                        >
                            Read integration docs
                        </a>
                    </div>
                </div>
            </section>
        </PrismLayout>
    );
}