import PageHeader from "@/components/PageHeader";
import agendaIcon from "../../images/icons/agenda-icon.svg";
import directMessageIcon from "../../images/icons/direct-msg-icon.svg";
import longRightArrowIcon from "../../images/icons/long-right-arrow.svg";
import matchDiscoveryIcon from "../../images/icons/match-disccovery-icon.svg";
import meetingSchedulerIcon from "../../images/icons/meeting-scheduler-icon.svg";
import openLinkIcon from "../../images/icons/open-link.svg";
import whitePersonIcon from "../../images/icons/white-person-icon.svg";

interface PartneringFeature {
    description: string;
    icon: string;
    id: number;
    title: string;
}

interface PrepWebinar {
    id: number;
    title: string;
    url: string;
}

const features: PartneringFeature[] = [
    {
        icon: whitePersonIcon,
        id: 1,
        title: "Profile Building",
        description:
            "Enhance your personal and company profiles with pitch decks, executive summaries, videos, and clearly defined areas of interest.",
    },
    {
        icon: matchDiscoveryIcon,
        id: 2,
        title: "Match Discovery",
        description:
            "Discover, filter, and connect with attendees by type, company stage, investor stage, or market vertical.",
    },
    {
        icon: meetingSchedulerIcon,
        id: 3,
        title: "Meeting Scheduler",
        description:
            "Arrange 1-on-1 or group meetings in advance, with designated spaces reserved onsite.",
    },
    {
        icon: agendaIcon,
        id: 4,
        title: "Personalized Agenda",
        description: "Keep your meetings and event commitments organized.",
    },
    {
        icon: directMessageIcon,
        id: 5,
        title: "Direct Messaging",
        description:
            "Communicate seamlessly with other attendees before, during, and after the event.",
    },
];

const prepWebinars: PrepWebinar[] = [
    {
        id: 1,
        title: "Win More Meetings - Innovator Prep Workshop",
        url: "#innovator-prep",
    },
    {
        id: 2,
        title: "Find Better Deals - Investor Prep Workshop",
        url: "#investor-prep",
    },
];

const PartneringAppPage = () => {
    return (
        <article className="portal-card from-lsi-page partnering-app-page">
            <PageHeader
                eyebrowParent="From LSI"
                eyebrowCurrent="LSI Partnering App"
                title="LSI partnering app"
                description="Your gateway to connecting with medtech's top executives - build your profile, find matches, and schedule meetings."
            />

            <section className="partnering-hero text-white">
                <p className="partnering-hero__eyebrow mb-3">
                    Partnering is now open
                </p>
                <h2 className="mb-3">
                    Your gateway to connecting with medtech's top executives.
                </h2>
                <p className="mb-4">
                    Build your profile, find the right matches, and schedule
                    meetings to maximize opportunities before, during, and after
                    the event.
                </p>
                <a
                    className="partnering-hero__cta btn btn-light rounded-pill px-4 d-inline-flex align-items-center gap-2"
                    href="#open-partnering-app"
                >
                    <span>Open Partnering App</span>
                    <img src={longRightArrowIcon} alt="" aria-hidden="true" />
                </a>
            </section>

            <section className="from-lsi-panel mt-4">
                <h2 className="from-lsi-section-title">Key features</h2>
                <p className="from-lsi-section-subtitle mb-0">
                    What you can do inside the LSI Partnering App
                </p>

                <div className="from-lsi-divider" />

                <div className="row g-4">
                    {features.map((feature) => (
                        <div
                            className="col-12 col-md-6 col-xl-4"
                            key={feature.id}
                        >
                            <article className="partnering-feature h-100">
                                <span
                                    className="partnering-feature__icon d-inline-flex align-items-center justify-content-center mb-3"
                                    aria-hidden="true"
                                >
                                    <img src={feature.icon} alt="" />
                                </span>
                                <h3>{feature.title}</h3>
                                <p className="mb-0">{feature.description}</p>
                            </article>
                        </div>
                    ))}
                </div>
            </section>

            <section className="from-lsi-panel mt-4">
                <h2 className="from-lsi-section-title">Logging in</h2>
                <p className="from-lsi-section-subtitle mb-0">
                    Access details and support
                </p>

                <div className="from-lsi-divider" />

                <div className="d-flex flex-column gap-4">
                    <label className="form-field d-block">
                        <span>Login email</span>
                        <input
                            className="form-control"
                            readOnly
                            value="daren@acmemedical.com"
                        />
                    </label>

                    <div className="partnering-info">
                        <h3>Credentials sent</h3>
                        <p>
                            February 14, 2026 &middot; Check spam if not
                            received
                        </p>
                    </div>

                    <label className="form-field d-block">
                        <span>Support</span>
                        <input
                            className="form-control"
                            readOnly
                            value="partnering@lsisummit.com"
                        />
                    </label>

                    <div className="partnering-info">
                        <h3>Prep webinars</h3>
                        <div className="d-flex flex-column gap-3">
                            {prepWebinars.map((webinar) => (
                                <a
                                    className="partnering-info__link d-inline-flex align-items-center gap-2"
                                    href={webinar.url}
                                    key={webinar.id}
                                >
                                    <span>{webinar.title}</span>
                                    <img
                                        src={openLinkIcon}
                                        alt=""
                                        aria-hidden="true"
                                    />
                                </a>
                            ))}
                        </div>
                    </div>
                </div>
            </section>
        </article>
    );
};

export default PartneringAppPage;