import type { ReactNode } from "react"; import Image from "next/image"; import { ArrowRight, X, Check, Factory, Link2, Zap, LayoutGrid, Factory as FactoryIcon, Package as PackageIcon, ShoppingCart as CartIcon, Truck as TruckIcon, IndianRupee as RupeeIcon, Clock as ClockIcon, Users as UsersIcon, TrendingUp as TrendIcon, type LucideIcon, } from "lucide-react"; import { SectionTitle, SectionHeader, PrimaryCta, GhostCta } from "./ui"; import { cn } from "@/lib/cn"; /* ---------- Value strip overlapping the hero ---------- */ const STRIP_ICONS: LucideIcon[] = [Factory, Link2, Zap, LayoutGrid]; export function ValueStrip({ items }: { items: { title: string; text: string }[] }) { return (
{items.map((it, i) => { const Icon = STRIP_ICONS[i % STRIP_ICONS.length]; return (
); })}
); } /* ---------- Page hero (navy, reference style) ---------- */ export function PageHero({ eyebrow, title, accent, para, para2, crumbs, primary, secondary, checks, mock, overlay, compact, pill = "default", accentColor = "brand", id, }: { eyebrow: string; title: string; accent?: string; para: string; para2?: string; crumbs?: { label: string; href?: string }[]; primary: { label: string; href: string }; secondary?: { label: string; href: string }; checks?: string[]; mock?: ReactNode; overlay?: ReactNode; compact?: boolean; pill?: "default" | "amber" | "blue"; accentColor?: "brand" | "amber"; id?: string; }) { return (
{crumbs && ( )} {pill === "amber" ? ( ) : pill === "blue" ? ( ) : ( )}

{title}{" "} {accent && ( {accent} )}

{para}

{/* {para2 && (

{para2}

)} */}
{primary.label} {secondary && ( {secondary.label} )}
{checks && (
{checks.map((t) => ( {t} ))}
)}
{mock && ( )}
); } /* ---------- Platform stack visual (platform hero, reference style) ---------- */ export function PlatformStack() { return (

INDUSTRY SOLUTIONS

Manufacturing ERP Construction ERP

SHARED MODULES

{["Purchase", "Inventory", "Finance", "HR & Payroll"].map((t) => ( {t} ))}

PLATFORM SERVICES

{["Workflows", "Dashboards", "Access & audit", "Integrations"].map((t) => ( {t} ))}

DEPLOYMENT

{["Cloud", "On-premise", "Web & mobile"].map((t) => ( {t} ))}
); } /* ---------- Split intro + capabilities card ---------- */ export function SplitIntro({ label, title, paras, cardLabel, columns, tone = "amber", }: { label: string; title: string; paras: string[]; cardLabel: string; columns: string[][]; tone?: "amber" | "blue"; }) { const blue = tone === "blue"; return (
{label}

{title}

{paras.map((p, i) => (

{p}

))}

{cardLabel}

{columns.map((col, ci) => (
    {col.map((item) => (
    • ))}
))}
); } /* ---------- Dashboard strip (navy band + tiles) ---------- */ const DASH_TILES = [ { icon: FactoryIcon, label: "Production" }, { icon: PackageIcon, label: "Inventory" }, { icon: CartIcon, label: "Purchase" }, { icon: TruckIcon, label: "Sales" }, { icon: RupeeIcon, label: "Finance" }, { icon: ClockIcon, label: "HR" }, { icon: UsersIcon, label: "Customers" }, ]; export function DashStrip({ label, title, para, }: { label: string; title: string; para: string; }) { return (
{label}

{title}

{para}

{DASH_TILES.map((t) => (
))}
); } /* ---------- Challenge → solution table ---------- */ export function SolvesTable({ eyebrow, title, intro, rows, head = ["Manufacturing challenge", "MxERP solution"], headStyle = "navy", strong, tone = "blue", action, }: { eyebrow: string; title: string; intro: string; rows: { challenge: string; solution: string }[]; head?: [string, string]; headStyle?: "navy" | "mono"; strong?: "left" | "right"; tone?: "blue" | "amber"; action?: { label: string; href: string }; }) { const emphasis = strong ?? (headStyle === "navy" ? "right" : "left"); return (
{action && ( {action.label} )}
{headStyle === "navy" ? ( ) : ( )} {rows.map((r, i) => ( ))}
{head[0]} {head[1]}
{head[0]} {head[1]}
{r.challenge} {r.solution}
); } /* ---------- Challenge cards + blue CTA tile (reference format) ---------- */ export function ChallengeCards({ eyebrow, title, intro, items, cta, }: { eyebrow: string; title: string; intro: string; items: { icon: LucideIcon; title: string; text: string }[]; cta: { title: string; label: string; href: string }; }) { return (

{intro}

{items.map((it) => (

{it.title}

{it.text}

))}

{cta.title}

{cta.label}
); } /* ---------- Dashboard views (navy band + cards + chips) ---------- */ export function DashViews({ eyebrow, title, intro, cards, chips, closing, closingPara, }: { eyebrow: string; title: string; intro: string; cards: { icon: LucideIcon; title: string; points: string[] }[]; chips: string[]; closing: string; closingPara: string; }) { return (

{eyebrow}

{title}

{intro}

{cards.map((c) => (

{c.title}

    {c.points.map((p) => (
    • ))}
))}

{closing}

{closingPara}

{chips.map((chip) => ( {chip} ))}
); } /* ---------- Icon cards with split header ---------- */ export function IconCardsWithIcons({ eyebrow, title, intro, items, }: { eyebrow: string; title: string; intro: string; items: { icon: LucideIcon; title: string; text: string }[]; }) { return (

{intro}

{items.map((it) => (

{it.title}

{it.text}

))}
); } /* ---------- Duo rich cards on navy ---------- */ export function DuoCards({ cards, }: { cards: { eyebrow: string; title: string; text: string; checks: string[]; cols?: 1 | 2; }[]; }) { return (
{cards.map((c) => (

{c.eyebrow}

{c.title}

{c.text}

    {c.checks.map((chk) => (
    • ))}
))}
); } /* ---------- Split copy + workflow steps card ---------- */ export function SplitSteps({ eyebrow, title, intro, checks, cardLabel, steps, }: { eyebrow: string; title: string; intro: string; checks: string[]; cardLabel: string; steps: string[]; }) { return (
    {checks.map((c) => (
    • ))}

{cardLabel}

    {steps.map((s, i) => { const last = i === steps.length - 1; return (
  1. {s}
    {!last && (
    2. ); })}
); } /* ---------- EPC band (navy, letter cards + lifecycle rail) ---------- */ export function EpcBand({ eyebrow, title, intro, cards, railTitle, railLabel, steps, }: { eyebrow: string; title: string; intro: string; cards: { mark: string; amber?: boolean; title: string; text: string }[]; railTitle: string; railLabel: string; steps: string[]; }) { return (

{eyebrow}

{title}

{intro}

{cards.map((c) => (

{c.title}

{c.text}

))}

{railTitle}

{railLabel}
    {steps.map((s, i) => { const last = i === steps.length - 1; return (
  1. {i < steps.length - 1 && (
    2. ); })}
); } /* ---------- Problem → solution rows ---------- */ export function Challenges({ eyebrow, title, intro, items, }: { eyebrow: string; title: string; intro?: string; items: { problem: string; problemDesc?: string; solution: string; solutionDesc?: string }[]; }) { return (
{items.map((it) => (

{it.problem}

{it.problemDesc && (

{it.problemDesc}

)}
))}
); } /* ---------- Steps flow (flexible wrap) ---------- */ export function StepsFlow({ kicker, title, intro, groups, tone = "blue", }: { kicker: string; title: string; intro?: string; groups: { label: string; sub: string; steps: string[]; accent: "blue" | "amber" }[]; tone?: "blue" | "amber"; }) { return (
{groups.map((g) => (

{g.sub} {g.label}

    {g.steps.map((s, i) => (
  1. {/* vertical connector (mobile) */} {i < g.steps.length - 1 && (
    2. ))}
))}
); } /* ---------- Before / After (reference format) ---------- */ export function BeforeAfter({ eyebrow, title, intro, before, after, }: { eyebrow: string; title: string; intro?: string; before: { stages: { stage: string; oldWay: string }[]; result: string }; after: { steps: string[]; result: string }; }) { return (

Before MxERP

DISCONNECTED
{before.stages.map((s, i) => (
{s.stage}
))}
Result: {before.result}

With MxERP

CONNECTED
{after.steps.map((s, i) => (
{s}
))}
Result: {after.result}
); } /* ---------- Industry icon grid (split header) ---------- */ export function IndustryGrid({ eyebrow, title, intro, items, }: { eyebrow: string; title: string; intro: string; items: { icon: LucideIcon; label: string }[]; }) { return (
{items.map((it) => (
{it.label}
))}
); } /* ---------- Benefits grid ---------- */ /* ---------- Trio detail cards (icon + kicker + checks) ---------- */ export function TrioDetail({ eyebrow, title, intro, items, }: { eyebrow: string; title: string; intro?: string; items: { icon: LucideIcon; kicker: string; title: string; text: string; checks: string[] }[]; }) { return (
{items.map((it) => (

{it.kicker}

{it.title}

{it.text}

    {it.checks.map((c) => (
    • ))}
))}
); } /* ---------- Numbered step cards (5-col grid, dark last) ---------- */ export function StepCards({ eyebrow, title, intro, steps, }: { eyebrow: string; title: string; intro: string; steps: { title: string; text: string }[]; }) { return (
{steps.map((s, i) => { const last = i === steps.length - 1; return (

{s.title}

{s.text}

); })}
); } export function Benefits({ eyebrow, title, intro, items, split = false, icons, tone = "blue", }: { eyebrow?: string; title: string; intro?: string; items: { title: string; text: string }[]; split?: boolean; icons?: LucideIcon[]; tone?: "blue" | "amber"; }) { return (
{split ? (
{intro && (

{intro}

)}
) : ( )}
{items.map((it, i) => { const Icon = icons?.[i % icons.length]; return (
{Icon ? ( ) : ( )}

{it.title}

{it.text}

); })}
); } /* ---------- FAQ (native accordion, no JS) ---------- */ export function Faq({ title, items }: { title: string; items: { q: string; a: string }[] }) { return (
{title}
{items.map((f) => (
{f.q}

{f.a}

))}
); } /* ---------- Comparison table (two industry solutions) ---------- */ export function CompareTable({ eyebrow, title, mfg, con, }: { eyebrow: string; title: string; mfg: { icon: LucideIcon; title: string; rows: string[]; cta: string; href: string }; con: { icon: LucideIcon; title: string; rows: string[]; cta: string; href: string }; }) { return (
{/* Manufacturing column — header, rows and CTA stay together on mobile */}

{mfg.title}

{mfg.rows.map((r, i) => (

{r}

))}
{/* Construction column */}

{con.title}

{con.rows.map((r, i) => (

{r}

))}
); } /* ---------- Reporting split + monitor panel ---------- */ export function ReportingSplit({ eyebrow, title, intro, chips, panelTitle, steps, }: { eyebrow: string; title: string; intro: string; chips: string[]; panelTitle: string; steps: { title: string; sub: string }[]; }) { return (
{chips.map((c) => ( {c} ))}

{panelTitle}

{steps.map((s, i) => { const last = i === steps.length - 1; return (
{s.title} {s.sub}
); })}
); } /* ---------- Trusted-by logo marquee ---------- */ export function TrustBar({ label, logos, }: { label: string; logos: { src: string; name: string }[]; }) { const row = (hidden: boolean) => (
{logos.map((logo) => (
{hidden
))}
); return (

{label}

{row(false)} {row(true)}
); } /* ---------- Dual industry CTA ---------- */ export function DualIndustry({ title, intro, cards, }: { title: string; intro?: string; cards: { tag: string; title: string; text: string; cta: string; href: string }[]; }) { return (

{title}

{intro &&

{intro}

}
{cards.map((c) => (
{c.tag}

{c.title}

{c.text}

{c.cta}
))}
); }