1import { Separator } from "@/components/ui/separator";
2import { X } from "lucide-react";
3
4export default function RemoteTeamsComparison() {
5  return (
6    <section className="py-32">
7      <div className="container mx-auto">
8        <div className="flex flex-col gap-6 text-center md:gap-12">
9          <h2 className="l:text-7xl text-4xl font-medium md:text-5xl">
10            <span className="text-muted-foreground">How Customer Support </span>
11            <br /> Has Evolved
12          </h2>
13          <p className="text-lg max-w-lg mx-auto">
14            Traditional ticketing systems create friction.{" "}
15            <br className="hidden md:block" /> Modern support platforms build relationships.
16          </p>
17        </div>
18
19        <div className="mt-20 grid gap-12 lg:grid-cols-2 lg:gap-0">
20          {/* Old Way */}
21          <div className="bg-muted/50 rounded-3xl p-6 lg:rounded-r-none lg:p-12">
22            <h3 className="text-2xl font-medium">Traditional Ticketing</h3>
23            <ul className="mt-9 space-y-3">
24              <div className="flex items-center gap-2">
25                <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
26                <li className="text-sm">Email-only interface with slow response times.</li>
27              </div>
28              <Separator />
29
30              <div className="flex items-center gap-2">
31                <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
32                <li className="text-sm">Ticket numbers instead of customer names.</li>
33              </div>
34              <Separator />
35
36              <div className="flex items-center gap-2">
37                <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
38                <li className="text-sm">No context about customer history or previous issues.</li>
39              </div>
40              <Separator />
41
42              <div className="flex items-center gap-2">
43                <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
44                <li className="text-sm">Agents work in silos with no collaboration.</li>
45              </div>
46              <Separator />
47
48              <div className="flex items-center gap-2">
49                <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
50                <li className="text-sm">Manual tagging and routing of every request.</li>
51              </div>
52              <Separator />
53
54              <div className="flex items-center gap-2">
55                <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
56                <li className="text-sm">Limited to business hours, customers wait overnight.</li>
57              </div>
58              <Separator />
59
60              <div className="flex items-center gap-2">
61                <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
62                <li className="text-sm">Metrics focus on tickets closed, not satisfaction.</li>
63              </div>
64              <Separator />
65
66              <div className="flex items-center gap-2">
67                <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
68                <li className="text-sm">Disconnected from product and sales data.</li>
69              </div>
70            </ul>
71          </div>
72
73          {/* New Way */}
74          <div className="rounded-3xl border border-y p-6 lg:rounded-l-none lg:border-l-0 lg:p-12">
75            <h3 className="text-2xl font-medium">Modern Support Platforms</h3>
76            <ul className="mt-9 space-y-3">
77              <li className="flex items-center gap-2 text-sm">
78                <span className="text-lg">💬</span>
79                Omnichannel support across email, chat, social, and phone.
80              </li>
81              <Separator />
82
83              <li className="flex items-center gap-2 text-sm">
84                <span className="text-lg">👤</span>
85                Customer profiles with full interaction history.
86              </li>
87              <Separator />
88
89              <li className="flex items-center gap-2 text-sm">
90                <span className="text-lg">🤖</span>
91                AI-powered context and suggested responses.
92              </li>
93              <Separator />
94
95              <li className="flex items-center gap-2 text-sm">
96                <span className="text-lg">🤝</span>
97                Team collaboration with internal notes and handoffs.
98              </li>
99              <Separator />
100
101              <li className="flex items-center gap-2 text-sm">
102                <span className="text-lg">⚡</span>
103                Smart automation and intelligent routing.
104              </li>
105              <Separator />
106
107              <li className="flex items-center gap-2 text-sm">
108                <span className="text-lg">📚</span>
109                24/7 self-service knowledge base and help center.
110              </li>
111              <Separator />
112
113              <li className="flex items-center gap-2 text-sm">
114                <span className="text-lg">📊</span>
115                Success metrics and real-time CSAT tracking.
116              </li>
117              <Separator />
118
119              <li className="flex items-center gap-2 text-sm">
120                <span className="text-lg">🔗</span>
121                Unified platform with CRM and product data.
122              </li>
123            </ul>
124          </div>
125        </div>
126      </div>
127    </section>
128  );
129}
130