"use client";

import { useMemo, useRef } from "react";
import {
  Smartphone,
  Check,
  Phone,
  Globe,
  ArrowLeft,
  Signal,
  Sparkles,
  CreditCard,
  Info,
  CircleDollarSign,
  TriangleAlert,
  Calendar,
  ArrowRightLeft,
  ArrowRight,
  Users,
} from "lucide-react";
import { Skeleton } from "@/components/atoms/loading-skeleton";
import { Button } from "@/components/atoms/button";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import type { SimCatalogProduct } from "@customer-portal/domain/services";
import { ServicesBackLink } from "@/features/services/components/base/ServicesBackLink";
import { ServicesHero } from "@/features/services/components/base/ServicesHero";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";
import { CollapsibleSection } from "@/features/services/components/base/CollapsibleSection";
import { ServiceFAQ, type FAQItem } from "@/features/services/components/base/ServiceFAQ";
import { DeviceCompatibility } from "./DeviceCompatibility";
import {
  ServiceHighlights,
  type HighlightFeature,
} from "@/features/services/components/base/ServiceHighlights";
import { SimHowItWorksSection } from "@/features/services/components/sim/SimHowItWorksSection";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/shared/utils";
import { motionVariants } from "@/components/atoms";

export type SimPlansTab = "data-voice" | "data-only" | "voice-only";

interface PlansByType {
  DataOnly: SimCatalogProduct[];
  DataSmsVoice: SimCatalogProduct[];
  VoiceOnly: SimCatalogProduct[];
}

const simFeatures: HighlightFeature[] = [
  {
    icon: <CreditCard className="h-6 w-6" />,
    title: "Foreign Cards Accepted",
    description: "Use your overseas credit card. No Japanese bank account needed",
    highlight: "Easy payment",
  },
  {
    icon: <Signal className="h-6 w-6" />,
    title: "Japan's Best Network",
    description: "NTT Docomo coverage reaches 99.9% of Japan's population",
    highlight: "Nationwide",
  },
  {
    icon: <CircleDollarSign className="h-6 w-6" />,
    title: "First Month Free",
    description: "Try risk-free. Your first month's basic fee is waived",
    highlight: "Great value",
  },
  {
    icon: <Calendar className="h-6 w-6" />,
    title: "Flexible Terms",
    description: "No multi-year contracts. Stay as long as you need",
    highlight: "No lock-in",
  },
  {
    icon: <ArrowRightLeft className="h-6 w-6" />,
    title: "Keep Your Number",
    description: "Switching from another carrier? Bring your Japanese number with you",
    highlight: "Easy transfer",
  },
  {
    icon: <Smartphone className="h-6 w-6" />,
    title: "Free Plan Changes",
    description: "Switch data plans anytime for the next billing cycle",
    highlight: "Flexibility",
  },
];

const SIM_TABS = [
  {
    key: "data-voice" as const,
    icon: Phone,
    label: "Data + Voice",
    shortLabel: "All-in",
    planTypeKey: "DataSmsVoice" as const,
  },
  {
    key: "data-only" as const,
    icon: Globe,
    label: "Data Only",
    shortLabel: "Data",
    planTypeKey: "DataOnly" as const,
  },
  {
    key: "voice-only" as const,
    icon: Check,
    label: "Voice Only",
    shortLabel: "Voice",
    planTypeKey: "VoiceOnly" as const,
  },
];

const SIM_FAQ_ITEMS: FAQItem[] = [
  {
    question: "What is the service contract period?",
    answer:
      "The minimum service requirement period is activation month + 3 billing months. After this period, the service will switch to a monthly service and you will be able to cancel at the end of each month.",
  },
  {
    question: "I've changed my phone and the SIM card is not working on the new device.",
    answer:
      "Whenever the SIM card is used with a new device, the APN profile would need to be installed on said device. Please refer to the APN Setup Guide in the Documents section to check how the profile can be installed.",
  },
  {
    question: "Are international calling features available?",
    answer: (
      <>
        Enter &quot;+&quot; or &quot;010&quot;, &quot;recipient&apos;s country code&quot;, and
        &quot;recipient&apos;s phone number (regular phone number/mobile phone number)&quot; → Make
        a call.
        <br />
        <br />
        If the recipient&apos;s phone number begins with a 0, enter it without the first 0 (except
        in some countries and regions).
        <br />
        International calling rate is on the following Docomo&apos;s website:{" "}
        <a
          href="https://www.docomo.ne.jp/english/service/world/roaming/charges/kaigai/"
          target="_blank"
          rel="noopener noreferrer"
          className="text-primary hover:underline"
        >
          Docomo International Calling Rates
        </a>
      </>
    ),
  },
  {
    question: "How do I cancel the service?",
    answer:
      "To cancel, please log into the SonixNet SIM Management Website and send us a cancellation request before the 25th to cancel your account at the end of the month. For example, cancellation requests will need to be sent in by May 25th, in order to cancel at the end of May.",
  },
];

function SimPlanCardCompact({
  plan,
  isFamily,
  onSelect,
}: {
  plan: SimCatalogProduct;
  isFamily?: boolean;
  onSelect: (sku: string) => void;
}) {
  const displayPrice = plan.monthlyPrice ?? plan.unitPrice ?? plan.oneTimePrice ?? 0;

  return (
    <div
      className={cn(
        "group relative rounded-xl overflow-hidden transition-all duration-200",
        "hover:-translate-y-0.5 hover:shadow-lg",
        isFamily
          ? "border border-success/30 bg-gradient-to-br from-emerald-50/60 to-card dark:from-emerald-950/20 dark:to-card hover:border-success"
          : "border border-border bg-gradient-to-br from-sky-50/40 to-card dark:from-sky-950/15 dark:to-card hover:border-primary/50"
      )}
    >
      <div className="p-5">
        {isFamily && (
          <div className="flex items-center gap-1.5 mb-3">
            <Users className="w-3.5 h-3.5 text-success" />
            <span className="text-[10px] font-semibold text-success uppercase tracking-wider">
              Family Discount
            </span>
          </div>
        )}

        {/* Data size - hero element */}
        <div className="flex items-center gap-2.5 mb-4">
          <div
            className={cn(
              "w-10 h-10 rounded-xl flex items-center justify-center",
              isFamily ? "bg-success/10" : "bg-primary/8"
            )}
          >
            <Signal className={cn("w-5 h-5", isFamily ? "text-success" : "text-primary")} />
          </div>
          <span className="text-2xl font-bold text-foreground tracking-tight">
            {plan.simDataSize}
          </span>
        </div>

        {/* Price - prominent */}
        <div className="mb-1">
          <div className="flex items-baseline gap-0.5">
            <span className="text-xl font-bold text-foreground">
              ¥{displayPrice.toLocaleString()}
            </span>
            <span className="text-xs text-muted-foreground">/mo</span>
          </div>
          {isFamily && (
            <div className="text-[10px] text-success font-medium mt-0.5">Discounted price</div>
          )}
        </div>

        {/* Plan name */}
        <p className="text-xs text-muted-foreground mb-4 line-clamp-2 min-h-[2rem]">{plan.name}</p>

        {/* CTA - filled button */}
        <Button
          className={cn("w-full", isFamily && "bg-success hover:bg-success/90 text-white")}
          variant="default"
          size="sm"
          onClick={() => onSelect(plan.sku)}
          rightIcon={<ArrowRight className="w-3.5 h-3.5" />}
        >
          Select Plan
        </Button>
      </div>
    </div>
  );
}

function SimPlansLoadingSkeleton({ servicesBasePath }: { servicesBasePath: string }) {
  return (
    <div className="max-w-5xl mx-auto px-4 pb-16 pt-6">
      <ServicesBackLink href={servicesBasePath} label="Back to Services" />
      <div className="text-center mb-10 pt-6">
        <Skeleton className="h-8 w-72 mx-auto mb-3" />
        <Skeleton className="h-5 w-96 max-w-full mx-auto" />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="bg-card rounded-xl border border-border p-4">
            <div className="flex items-center gap-2 mb-4">
              <Skeleton className="h-9 w-9 rounded-lg" />
              <Skeleton className="h-5 w-14" />
            </div>
            <Skeleton className="h-7 w-28 mb-3" />
            <Skeleton className="h-4 w-full mb-2" />
            <Skeleton className="h-4 w-3/4 mb-4" />
            <Skeleton className="h-9 w-full rounded-md" />
          </div>
        ))}
      </div>
    </div>
  );
}

function SimPlansErrorState({
  servicesBasePath,
  error,
}: {
  servicesBasePath: string;
  error: unknown;
}) {
  const errorMessage = error instanceof Error ? error.message : "An unexpected error occurred";
  return (
    <div className="max-w-5xl mx-auto px-4 pb-16 pt-6">
      <ServicesBackLink href={servicesBasePath} label="Back to Services" />
      <div className="rounded-xl bg-destructive/10 border border-destructive/20 p-8 text-center mt-6">
        <div className="text-destructive font-medium text-lg mb-2">Failed to load SIM plans</div>
        <div className="text-destructive/80 text-sm mb-6">{errorMessage}</div>
        <Button as="a" href={servicesBasePath} leftIcon={<ArrowLeft className="w-4 h-4" />}>
          Back to Services
        </Button>
      </div>
    </div>
  );
}

function SimTabSwitcher({
  activeTab,
  onTabChange,
  plansByType,
}: {
  activeTab: SimPlansTab;
  onTabChange: (tab: SimPlansTab) => void;
  plansByType: PlansByType;
}) {
  return (
    <div className="flex justify-center">
      <div className="inline-flex rounded-lg bg-muted/60 p-0.5 border border-border/60">
        {SIM_TABS.map(tab => (
          <button
            key={tab.key}
            type="button"
            onClick={() => onTabChange(tab.key)}
            className={cn(
              "flex items-center gap-1.5 px-4 py-2 rounded-md text-sm font-medium transition-all",
              activeTab === tab.key
                ? "bg-card text-foreground shadow-sm"
                : "text-muted-foreground hover:text-foreground"
            )}
          >
            <tab.icon className="h-3.5 w-3.5" />
            <span className="hidden sm:inline">{tab.label}</span>
            <span className="sm:hidden">{tab.shortLabel}</span>
            <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-primary/8 text-primary font-semibold">
              {plansByType[tab.planTypeKey].length}
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

const cardVariants = motionVariants.fadeUp;

function SimPlansGrid({
  regularPlans,
  familyPlans,
  activeTab,
  slideDirection,
  variant,
  hasExistingSim,
  onSelectPlan,
}: {
  regularPlans: SimCatalogProduct[];
  familyPlans: SimCatalogProduct[];
  activeTab: SimPlansTab;
  slideDirection: "left" | "right";
  variant: "public" | "account";
  hasExistingSim: boolean;
  onSelectPlan: (sku: string) => void;
}) {
  if (regularPlans.length === 0 && familyPlans.length === 0) {
    return (
      <div id="plans" className="min-h-[280px] overflow-hidden">
        <div className="text-center py-12 text-muted-foreground text-sm">
          No plans available in this category.
        </div>
      </div>
    );
  }

  return (
    <div id="plans" className="min-h-[280px] overflow-hidden">
      <AnimatePresence mode="wait">
        <motion.div
          key={activeTab}
          className="space-y-8"
          initial="hidden"
          animate="visible"
          exit="exit"
          variants={{
            hidden: { opacity: 0 },
            visible: {
              opacity: 1,
              transition: { staggerChildren: 0.06 },
            },
            exit: {
              opacity: 0,
              x: slideDirection === "left" ? -24 : 24,
              transition: { duration: 0.2 },
            },
          }}
        >
          {regularPlans.length > 0 && (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {regularPlans.map(plan => (
                <motion.div key={plan.id} variants={cardVariants}>
                  <SimPlanCardCompact plan={plan} onSelect={onSelectPlan} />
                </motion.div>
              ))}
            </div>
          )}

          {variant === "account" && hasExistingSim && familyPlans.length > 0 && (
            <div>
              <div className="flex items-center gap-2 mb-3">
                <Users className="h-4 w-4 text-success" />
                <h3 className="text-sm font-semibold text-foreground">Family Discount Plans</h3>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                {familyPlans.map(plan => (
                  <motion.div key={plan.id} variants={cardVariants}>
                    <SimPlanCardCompact plan={plan} isFamily onSelect={onSelectPlan} />
                  </motion.div>
                ))}
              </div>
            </div>
          )}
        </motion.div>
      </AnimatePresence>
    </div>
  );
}

function SimCallingRatesSection() {
  return (
    <CollapsibleSection title="Calling & SMS Rates" icon={Phone}>
      <div className="space-y-5 pt-4">
        <div>
          <h4 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
            <span className="w-5 h-3 rounded-sm bg-[#BC002D] relative overflow-hidden flex items-center justify-center">
              <span className="w-2 h-2 rounded-full bg-white" />
            </span>
            Domestic (Japan)
          </h4>
          <div className="grid grid-cols-2 gap-3">
            <div className="bg-muted/30 rounded-lg p-3 border border-border/60">
              <div className="text-xs text-muted-foreground mb-1">Voice Calls</div>
              <div className="text-lg font-bold text-foreground">
                ¥10<span className="text-xs font-normal text-muted-foreground">/30 sec</span>
              </div>
            </div>
            <div className="bg-muted/30 rounded-lg p-3 border border-border/60">
              <div className="text-xs text-muted-foreground mb-1">SMS</div>
              <div className="text-lg font-bold text-foreground">
                ¥3<span className="text-xs font-normal text-muted-foreground">/message</span>
              </div>
            </div>
          </div>
          <p className="text-[11px] text-muted-foreground mt-2">
            Incoming calls and SMS are free. Pay-per-use charges billed 5-6 weeks after usage.
          </p>
        </div>

        <div className="p-3 bg-success/5 border border-success/15 rounded-lg">
          <div className="flex items-start gap-2.5">
            <Phone className="w-4 h-4 text-success mt-0.5" />
            <div>
              <h4 className="text-sm font-medium text-foreground">Unlimited Domestic Calling</h4>
              <p className="text-xs text-muted-foreground">
                Add unlimited domestic calls for{" "}
                <span className="font-semibold text-success">¥3,000/month</span> (available at
                checkout)
              </p>
            </div>
          </div>
        </div>

        <div className="text-xs text-muted-foreground">
          <p>
            International calling rates vary by country (¥31-148/30 sec). See{" "}
            <a
              href="https://www.docomo.ne.jp/service/world/worldcall/call/"
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:underline"
            >
              NTT Docomo&apos;s website
            </a>{" "}
            for full details.
          </p>
        </div>
      </div>
    </CollapsibleSection>
  );
}

function SimFeesSection() {
  return (
    <CollapsibleSection title="Fees & Discounts" icon={CircleDollarSign}>
      <div className="space-y-5 pt-4">
        <div>
          <h4 className="text-xs font-medium text-foreground mb-2.5">One-time Fees</h4>
          <div className="space-y-2">
            <div className="flex items-center justify-between py-1.5 border-b border-border/60">
              <span className="text-xs text-muted-foreground">Activation Fee</span>
              <span className="text-sm font-medium text-foreground">¥1,500</span>
            </div>
            <div className="flex items-center justify-between py-1.5 border-b border-border/60">
              <span className="text-xs text-muted-foreground">SIM Replacement (lost/damaged)</span>
              <span className="text-sm font-medium text-foreground">¥1,500</span>
            </div>
            <div className="flex items-center justify-between py-1.5">
              <span className="text-xs text-muted-foreground">eSIM Re-download</span>
              <span className="text-sm font-medium text-foreground">¥1,500</span>
            </div>
          </div>
        </div>

        <div className="p-3 bg-success/5 border border-success/15 rounded-lg">
          <h4 className="text-sm font-medium text-foreground mb-1">Family Discount</h4>
          <p className="text-xs text-muted-foreground">
            <span className="font-semibold text-success">¥300/month off</span> per additional Voice
            SIM on your account
          </p>
        </div>

        <p className="text-[11px] text-muted-foreground">All prices exclude 10% consumption tax.</p>
      </div>
    </CollapsibleSection>
  );
}

function SimImportantNotices() {
  return (
    <div>
      <h4 className="text-xs font-medium text-foreground mb-2.5 flex items-center gap-1.5">
        <TriangleAlert className="w-3.5 h-3.5 text-warning" />
        Important Notices
      </h4>
      <ul className="space-y-1.5 text-muted-foreground">
        <li className="flex items-start gap-2 text-xs">
          <span className="text-foreground/60 mt-0.5">&#8226;</span>
          <span>
            ID verification with official documents (name, date of birth, address, photo) is
            required during checkout.
          </span>
        </li>
        <li className="flex items-start gap-2 text-xs">
          <span className="text-foreground/60 mt-0.5">&#8226;</span>
          <span>A compatible unlocked device is required. Check compatibility on our website.</span>
        </li>
        <li className="flex items-start gap-2 text-xs">
          <span className="text-foreground/60 mt-0.5">&#8226;</span>
          <span>
            Service may not be available in areas with weak signal. See{" "}
            <a
              href="https://www.nttdocomo.co.jp/English/support/area/index.html"
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:underline"
            >
              NTT Docomo coverage map
            </a>
            .
          </span>
        </li>
        <li className="flex items-start gap-2 text-xs">
          <span className="text-foreground/60 mt-0.5">&#8226;</span>
          <span>
            SIM is activated as 4G by default. 5G can be requested via your account portal.
          </span>
        </li>
        <li className="flex items-start gap-2 text-xs">
          <span className="text-foreground/60 mt-0.5">&#8226;</span>
          <span>
            International data roaming is not available. Voice/SMS roaming can be enabled upon
            request (¥50,000/month limit).
          </span>
        </li>
      </ul>
    </div>
  );
}

function SimContractTerms() {
  return (
    <>
      <div>
        <h4 className="text-xs font-medium text-foreground mb-2.5">Contract Terms</h4>
        <ul className="space-y-1.5 text-muted-foreground">
          <li className="flex items-start gap-2 text-xs">
            <span className="text-foreground/60 mt-0.5">&#8226;</span>
            <span>
              <strong className="text-foreground">Minimum contract:</strong> 3 full billing months.
              First month (sign-up to end of month) is free and doesn&apos;t count.
            </span>
          </li>
          <li className="flex items-start gap-2 text-xs">
            <span className="text-foreground/60 mt-0.5">&#8226;</span>
            <span>
              <strong className="text-foreground">Billing cycle:</strong> 1st to end of month.
              Regular billing starts the 1st of the following month after sign-up.
            </span>
          </li>
          <li className="flex items-start gap-2 text-xs">
            <span className="text-foreground/60 mt-0.5">&#8226;</span>
            <span>
              <strong className="text-foreground">Cancellation:</strong> Can be requested after 3rd
              month via cancellation form. Monthly fee is incurred in full for cancellation month.
            </span>
          </li>
          <li className="flex items-start gap-2 text-xs">
            <span className="text-foreground/60 mt-0.5">&#8226;</span>
            <span>
              <strong className="text-foreground">SIM return:</strong> SIM card must be returned
              after service termination.
            </span>
          </li>
        </ul>
      </div>

      <div>
        <h4 className="text-xs font-medium text-foreground mb-2.5">Additional Options</h4>
        <ul className="space-y-1.5 text-muted-foreground">
          <li className="flex items-start gap-2 text-xs">
            <span className="text-foreground/60 mt-0.5">&#8226;</span>
            <span>Call waiting and voice mail available as separate paid options.</span>
          </li>
          <li className="flex items-start gap-2 text-xs">
            <span className="text-foreground/60 mt-0.5">&#8226;</span>
            <span>Data plan changes are free and take effect next billing month.</span>
          </li>
          <li className="flex items-start gap-2 text-xs">
            <span className="text-foreground/60 mt-0.5">&#8226;</span>
            <span>Voice plan changes require new SIM issuance and standard policies apply.</span>
          </li>
        </ul>
      </div>
    </>
  );
}

function SimTermsSection() {
  return (
    <CollapsibleSection title="Important Information & Terms" icon={Info}>
      <div className="space-y-5 pt-4 text-sm">
        <SimImportantNotices />
        <SimContractTerms />
        <div className="p-3 bg-muted/30 rounded-lg">
          <p className="text-[11px] text-muted-foreground">
            Payment is by credit card only. Data service is not suitable for activities requiring
            continuous large data transfers. See full Terms of Service for complete details.
          </p>
        </div>
      </div>
    </CollapsibleSection>
  );
}

function groupPlansByType(simPlans: SimCatalogProduct[]): PlansByType {
  return simPlans.reduce<PlansByType>(
    (acc, plan) => {
      const planType = plan.simPlanType || "DataOnly";
      if (planType === "DataOnly") acc.DataOnly.push(plan);
      else if (planType === "VoiceOnly") acc.VoiceOnly.push(plan);
      else acc.DataSmsVoice.push(plan);
      return acc;
    },
    { DataOnly: [], DataSmsVoice: [], VoiceOnly: [] }
  );
}

function getPlansForTab(plansByType: PlansByType, activeTab: SimPlansTab) {
  const tabPlanMap: Record<SimPlansTab, SimCatalogProduct[]> = {
    "data-voice": plansByType.DataSmsVoice,
    "data-only": plansByType.DataOnly,
    "voice-only": plansByType.VoiceOnly,
  };
  const tabPlans = tabPlanMap[activeTab];
  return {
    regularPlans: tabPlans.filter(p => !p.simHasFamilyDiscount),
    familyPlans: tabPlans.filter(p => p.simHasFamilyDiscount),
  };
}

export function SimPlansContent({
  variant,
  plans,
  isLoading,
  error,
  activeTab,
  onTabChange,
  onSelectPlan,
}: {
  variant: "public" | "account";
  plans: SimCatalogProduct[];
  isLoading: boolean;
  error: unknown;
  activeTab: SimPlansTab;
  onTabChange: (tab: SimPlansTab) => void;
  onSelectPlan: (sku: string) => void;
}) {
  const servicesBasePath = useServicesBasePath();
  const prevTabRef = useRef(activeTab);
  const slideDirection = useRef<"left" | "right">("left");

  if (prevTabRef.current !== activeTab) {
    const tabKeys = SIM_TABS.map(t => t.key);
    slideDirection.current =
      tabKeys.indexOf(activeTab) > tabKeys.indexOf(prevTabRef.current) ? "left" : "right";
    prevTabRef.current = activeTab;
  }

  const simPlans: SimCatalogProduct[] = useMemo(() => plans ?? [], [plans]);
  const hasExistingSim = useMemo(() => simPlans.some(p => p.simHasFamilyDiscount), [simPlans]);

  const plansByType = useMemo(() => groupPlansByType(simPlans), [simPlans]);
  const { regularPlans, familyPlans } = useMemo(
    () => getPlansForTab(plansByType, activeTab),
    [plansByType, activeTab]
  );

  if (isLoading) return <SimPlansLoadingSkeleton servicesBasePath={servicesBasePath} />;
  if (error) return <SimPlansErrorState servicesBasePath={servicesBasePath} error={error} />;

  return (
    <div className="max-w-5xl mx-auto py-6 pb-16 space-y-8">
      <ServicesBackLink href={servicesBasePath} label="Back to Services" className="mb-0" />

      <ServicesHero
        title="SIM Cards for Foreigners in Japan"
        description="No hanko, no complicated Japanese forms. Get a SIM card with your foreign credit card and English support. eSIM for instant delivery or physical SIM shipped to your door."
        eyebrow={
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/8 border border-primary/15">
            <Sparkles className="w-3.5 h-3.5 text-primary" />
            <span className="text-xs font-medium text-primary">Powered by NTT DOCOMO</span>
          </div>
        }
      />

      {variant === "account" && hasExistingSim && (
        <AlertBanner variant="success" title="Family Discount Available">
          <p className="text-sm">
            You already have a SIM subscription. Discounted pricing is automatically shown for
            additional lines.
          </p>
        </AlertBanner>
      )}

      <ServiceHighlights features={simFeatures} />

      <SimTabSwitcher activeTab={activeTab} onTabChange={onTabChange} plansByType={plansByType} />

      <SimPlansGrid
        regularPlans={regularPlans}
        familyPlans={familyPlans}
        activeTab={activeTab}
        slideDirection={slideDirection.current}
        variant={variant}
        hasExistingSim={hasExistingSim}
        onSelectPlan={onSelectPlan}
      />

      <DeviceCompatibility />
      <SimHowItWorksSection />

      <div className="space-y-3">
        <SimCallingRatesSection />
        <SimFeesSection />
        <SimTermsSection />
      </div>

      <ServiceFAQ items={SIM_FAQ_ITEMS} />

      <div className="text-center text-xs text-muted-foreground">
        <p>
          All prices exclude 10% consumption tax.{" "}
          <a href="#" className="text-primary hover:underline">
            View full Terms of Service
          </a>
        </p>
      </div>
    </div>
  );
}

export default SimPlansContent;
