import React, { useState, useMemo } from 'react';
import { TrendingUp, Users, DollarSign, Percent, ArrowRight } from 'lucide-react';

const App = () => {
// State for inputs
const [attendees, setAttendees] = useState(300);
const [convRate, setConvRate] = useState(5);
const [avgSale, setAvgSale] = useState(500);

// Constants
const COST_PER_ATTENDEE = 0.30;

// Memoized Calculations
const calculations = useMemo(() => {
const cost = attendees * COST_PER_ATTENDEE;
const customers = Math.floor(attendees * (convRate / 100));
const grossRevenue = customers * avgSale;
const netProfit = grossRevenue - cost;
const roi = cost > 0 ? (grossRevenue / cost).toFixed(1) : 0;

return {
cost,
customers,
grossRevenue,
netProfit,
roi
};
}, [attendees, convRate, avgSale]);

// Formatting helpers
const formatCurrency = (val) =>
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(val);

const formatPreciseCurrency = (val) =>
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(val);

const formatShort = (n) => {
if (n >= 1000000) return `$${(n / 1000000).toFixed(1)}M`;
if (n >= 1000) return `$${(n / 1000).toFixed(1)}K`;
return `$${Math.round(n)}`;
};

return (

);
};

export default App;