// pricing-table.jsx — Pricing table primitives + Packages replacement
// Overrides window.Packages (loads after sections.jsx).
// No lucide-react, no cva, no @radix-ui — all inline.
// ─── Helpers ──────────────────────────────────────────────────────────────────
const cn = (...args) => args.filter(Boolean).join(' ');
// ─── Inline SVG icons ─────────────────────────────────────────────────────────
const IconCheck = () => (
);
const IconMinus = () => (
);
const IconShield = ({ size = 12 }) => (
);
const IconUsers = ({ size = 12 }) => (
);
const IconRocket = ({ size = 12 }) => (
);
// ─── Badge ────────────────────────────────────────────────────────────────────
const Badge = ({ children, className = '', variant = 'secondary' }) => (
{children}
);
// ─── Button ───────────────────────────────────────────────────────────────────
const PricingButton = ({ children, variant = 'default', className = '', href, onClick, size = 'lg' }) => {
const base = cn('pricing-btn', `pricing-btn-${variant}`, `pricing-btn-${size}`, className);
return href
? {children}
: ;
};
// ─── Primitives ───────────────────────────────────────────────────────────────
const PricingTable = ({ className, children }) => (
);
const PricingTableHeader = ({ children }) => {children};
const PricingTableBody = ({ className, children }) => (
{children}
);
const PricingTableRow = ({ children, className }) => (
{children}
);
const PricingTableHead = ({ children, className }) => (
{children} |
);
const PricingTableCell = ({ children, className }) => (
{children === true ? :
children === false ? :
children}
|
);
const PricingTablePlan = ({
name, badge, price, compareAt,
icon: Icon, children, className, featured,
}) => (
{Icon && }
{name}
{badge}
{price}
{compareAt && {compareAt}}
{children}
);
// ─── Feature data (Jawwad Automation) ────────────────────────────────────────
const FEATURES = [
{ label: 'Automation workflows', values: ['1', '3–5', 'Unlimited'] },
{ label: 'Timeline', values: ['5–7 days', '2–3 weeks', '4–8 weeks'] },
{ label: 'Tool connections', values: ['Up to 3', 'Up to 10', 'Unlimited'] },
{ label: 'AI integration', values: [false, true, true] },
{ label: 'CRM / email / sheet sync', values: [false, true, true] },
{ label: 'Custom API / webhooks', values: [false, false, true] },
{ label: 'Backend logic / database', values: [false, false, true] },
{ label: 'Internal dashboard / tool', values: [false, false, true] },
{ label: 'Error handling + monitoring', values: [true, true, true] },
{ label: 'Documentation', values: [true, true, true] },
{ label: 'Handover walkthrough', values: ['1 session', '2 sessions', 'Unlimited'] },
{ label: 'Revisions', values: ['1 round', '2 rounds', 'Unlimited'] },
{ label: 'Support after handover', values: ['7 days', '30 days', '90 days'] },
{ label: 'Workflow audit + mapping', values: [false, true, true] },
{ label: 'Priority delivery', values: [false, false, true] },
];
// ─── Packages — overrides the card version from sections.jsx ─────────────────
const Packages = () => {
const scrollToContact = (size) => {
const el = document.getElementById('contact');
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
if (size) {
setTimeout(() => {
const radio = document.querySelector(`input[name="size"][value="${size}"]`);
if (radio && !radio.checked) radio.click();
}, 600);
}
};
return (
Three ways to work together.
Pick the size of the bite — every engagement ends with a working system you own.
{/* ── Plan headers ── */}
|
{ e.preventDefault(); scrollToContact('starter'); }}>
Get started →
|
{ e.preventDefault(); scrollToContact('workflow'); }}>
Get started →
|
{ e.preventDefault(); scrollToContact('custom'); }}>
Get started →
|
{/* ── Feature rows ── */}
{FEATURES.map((f, i) => (
{f.label}
{f.values.map((v, j) => (
{v}
))}
))}
);
};
// Export primitives + override Packages
window.PricingTable = PricingTable;
window.PricingTableHeader = PricingTableHeader;
window.PricingTableBody = PricingTableBody;
window.PricingTableRow = PricingTableRow;
window.PricingTableHead = PricingTableHead;
window.PricingTableCell = PricingTableCell;
window.PricingTablePlan = PricingTablePlan;
window.Packages = Packages; // overrides sections.jsx export