import { useState } from 'react'; import { Link } from '@inertiajs/react'; import LandingLayout from '@/Layouts/LandingLayout'; import SeoHead from '@/Components/SeoHead'; import { BrandMark } from '@/Components/BrandIcons'; import { useTranslation } from 'react-i18next'; // ─── Icon map ───────────────────────────────────────────────────────────────── function FeatureIcon({ name, className = 'h-6 w-6' }) { const icons = { 'cpu': ( ), 'message-square': ( ), 'bar-chart-2': ( ), 'users': ( ), 'share-2': ( ), 'shield-check': ( ), 'zap': ( ), 'star': ( ), 'layout': ( ), 'arrow-right': ( ), 'globe': ( ), 'trending-up': ( ), 'check-circle': ( ), 'server': ( ), }; return icons[name] || icons['zap']; } // ─── Channel Icon map ────────────────────────────────────────────────────────── function ChannelIcon({ name, className = 'h-6 w-6' }) { const icons = { 'whatsapp': ( ), 'messenger': ( ), 'instagram': ( ), 'sms': ( ), 'email': ( ), }; return icons[name] || icons['email']; } const CHANNEL_STYLES = { 'whatsapp': { bg: 'bg-[#25D366]/12', text: 'text-[#25D366]' }, 'messenger': { bg: 'bg-[#0084FF]/12', text: 'text-[#0084FF]' }, 'instagram': { bg: 'bg-[#E1306C]/12', text: 'text-[#E1306C]' }, 'sms': { bg: 'bg-[#5a8b38]/15', text: 'text-[#467235] dark:text-[#5a8b38]' }, 'email': { bg: 'bg-[#F59E0B]/12', text: 'text-[#F59E0B]' }, }; // ─── Section Badge ───────────────────────────────────────────────────────────── function Badge({ text }) { if (!text) return null; return ( {text} ); } // ─── Hero Section ───────────────────────────────────────────────────────────── function HeroSection({ landing, canLogin, canRegister, auth }) { const { t } = useTranslation(); const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('hero_enabled') !== '1') return null; return (
{/* Background grid */}
{s('hero_badge') && (
)}

{s('hero_title')}

{s('hero_subtitle')}

{auth?.user ? ( {t('welcome.goToDashboard')} ) : ( <> {canRegister && s('hero_cta_primary') && ( {s('hero_cta_primary')} )} {s('hero_cta_secondary') && ( {s('hero_cta_secondary')} )} )}
{/* Trust badges */} {(() => { const badges = [1, 2, 3].map((i) => s(`hero_trust_${i}`)).filter(Boolean); if (!badges.length) return null; return (
{badges.map((badge, idx) => ( {badge} ))}
); })()}
); } // ─── Trusted By Section ─────────────────────────────────────────────────────── function TrustedBySection({ landing }) { const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('stats_enabled') !== '1') return null; const brands = [1, 2, 3, 4, 5, 6].map((i) => s(`stats_${i}_label`)).filter(Boolean); if (!brands.length) return null; const heading = s('stats_heading', 'Trusted by thousands of businesses across the world'); return (
{heading && (

{heading}

)}
{brands.map((brand, idx) => ( {brand} ))}
); } // ─── Problem / Solution Section ─────────────────────────────────────────────── function ProblemSolutionSection({ landing }) { const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('problems_enabled') !== '1') return null; const problems = [1, 2, 3, 4].map((i) => s(`problem_${i}`)).filter(Boolean); const solutions = [1, 2, 3, 4].map((i) => s(`solution_${i}`)).filter(Boolean); const problemTitle = s('problems_title', 'The Problem'); const solutionTitle = s('solution_title', 'The Solution'); const solutionDesc = s('solution_desc', ''); if (!problems.length && !solutions.length) return null; return (
{/* Problem */}

{problemTitle}

    {problems.map((item, idx) => (
  • {item}
    • ))}
{/* Solution */}

{solutionTitle}

{solutionDesc && (

{solutionDesc}

)}
    {solutions.map((item, idx) => (
  • {item}
    • ))}
); } // ─── Features Section ───────────────────────────────────────────────────────── function FeaturesSection({ landing }) { const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('features_enabled') !== '1') return null; const features = [1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => ({ icon: s(`feature_${i}_icon`, 'zap'), title: s(`feature_${i}_title`), desc: s(`feature_${i}_desc`), })).filter((f) => f.title); return (

{s('features_title')}

{s('features_subtitle') && (

{s('features_subtitle')}

)}
{features.map((feat, idx) => (
{/* Soft glow that fades in on hover */}

{feat.title}

{feat.desc}

))}
); } // ─── How It Works Section ───────────────────────────────────────────────────── function HowItWorksSection({ landing, canRegister }) { const { t } = useTranslation(); const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('howitworks_enabled') !== '1') return null; const steps = [1, 2, 3].map((i) => ({ title: s(`step_${i}_title`), desc: s(`step_${i}_desc`), })).filter((st) => st.title); return (

{s('howitworks_title')}

{s('howitworks_subtitle') && (

{s('howitworks_subtitle')}

)}
{steps.map((step, idx) => (
{idx + 1}

{step.title}

{step.desc}

))}
{canRegister && (
{t('welcome.get_started_free')}
)}
); } // ─── Pricing Section ────────────────────────────────────────────────────────── function PricingSection({ plans }) { const { t } = useTranslation(); const [yearly, setYearly] = useState(false); if (!plans || !plans.length) return null; return (

{t('pricing.simple_transparent')}

{t('pricing.choose_plan_anytime')}

{plans.map((plan) => { const price = yearly ? plan.price_yearly : plan.price_monthly; return (
{plan.is_featured && (
{t('welcome.most_popular')}
)}

{plan.name}

{plan.description && (

{plan.description}

)}
{price === 0 ? t('welcome.free') : `$${parseFloat(price).toFixed(0)}`} {price > 0 && ( {yearly ? t('welcome.per_year') : t('welcome.per_month')} )} {plan.trial_days > 0 && (

{t('pricing.trial_days', { days: plan.trial_days })}

)}
{plan.features && plan.features.length > 0 && (
    {plan.features.map((feat, fi) => (
  • {feat}
    • ))}
)} {plan.is_featured ? t('welcome.get_started_plan') : t('welcome.upgrade')}
); })}
); } // ─── Why Section ────────────────────────────────────────────────────────────── function WhySection({ landing }) { const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('why_enabled') !== '1') return null; const items = [1, 2, 3, 4, 5, 6].map((i) => ({ icon: s(`why_${i}_icon`, 'zap'), title: s(`why_${i}_title`), desc: s(`why_${i}_desc`), })).filter((f) => f.title); if (!items.length) return null; return (

{s('why_title')}

{s('why_subtitle') && (

{s('why_subtitle')}

)}
{items.map((item, idx) => (

{item.title}

{item.desc}

))}
); } // ─── Testimonials Section ───────────────────────────────────────────────────── function StarRating() { return (
{[...Array(5)].map((_, i) => ( ))}
); } function TestimonialsSection({ landing }) { const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('testimonials_enabled') !== '1') return null; const testimonials = [1, 2, 3, 4, 5, 6].map((i) => ({ name: s(`testimonial_${i}_name`), role: s(`testimonial_${i}_role`), text: s(`testimonial_${i}_text`), avatar: s(`testimonial_${i}_avatar`), })).filter((t) => t.name && t.text); if (!testimonials.length) return null; return (

{s('testimonials_title')}

{s('testimonials_subtitle') && (

{s('testimonials_subtitle')}

)}
{testimonials.map((t, idx) => (
“{t.text}”
{t.avatar ? ( {t.name} ) : (
{t.name.charAt(0)}
)}

{t.name}

{t.role}

))}
); } // ─── FAQ Section ────────────────────────────────────────────────────────────── function FaqSection({ landing }) { const s = (key, def = '') => landing[`landing.${key}`] ?? def; const [open, setOpen] = useState(null); if (s('faq_enabled') !== '1') return null; const faqs = [1, 2, 3, 4, 5].map((i) => ({ q: s(`faq_${i}_q`), a: s(`faq_${i}_a`), })).filter((f) => f.q && f.a); if (!faqs.length) return null; return (

{s('faq_title')}

{s('faq_subtitle') && (

{s('faq_subtitle')}

)}
{faqs.map((faq, idx) => (
{open === idx && (

{faq.a}

)}
))}
); } // ─── CTA Section ────────────────────────────────────────────────────────────── function CtaSection({ landing, canRegister }) { const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('cta_enabled') !== '1') return null; return (
{/* Grid overlay */}

{s('cta_title')}

{s('cta_subtitle')}

{canRegister && s('cta_primary') && ( {s('cta_primary')} )} {s('cta_secondary') && ( {s('cta_secondary')} )}
); } // ─── Metrics Section (numbers band) ─────────────────────────────────────────── function MetricsSection({ landing }) { const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('metrics_enabled') !== '1') return null; const metrics = [1, 2, 3, 4].map((i) => ({ value: s(`metric_${i}_value`), label: s(`metric_${i}_label`), })).filter((m) => m.value); if (!metrics.length) return null; return (
{metrics.map((m, idx) => (

{m.value}

{m.label}

))}
); } // ─── Channels Section ───────────────────────────────────────────────────────── function ChannelsSection({ landing }) { const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('channels_enabled') !== '1') return null; const channels = [1, 2, 3, 4, 5].map((i) => ({ key: s(`channel_${i}_key`, 'email'), title: s(`channel_${i}_title`), desc: s(`channel_${i}_desc`), })).filter((c) => c.title); if (!channels.length) return null; return (

{s('channels_title')}

{s('channels_subtitle') && (

{s('channels_subtitle')}

)}
{channels.map((c, idx) => { const style = CHANNEL_STYLES[c.key] || CHANNEL_STYLES['email']; return (

{c.title}

{c.desc}

); })}
); } // ─── Integrations Strip Section ─────────────────────────────────────────────── function IntegrationsStripSection({ landing }) { const { t } = useTranslation(); const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('integrations_strip_enabled') !== '1') return null; // Pull the integration names from the integrations-page settings to show a strip. const names = [1, 2, 3, 4, 5, 6] .flatMap((i) => (s(`intcat_${i}_items`) || '').split('\n')) .map((n) => n.trim()) .filter(Boolean) .slice(0, 12); return (

{s('integrations_strip_title')}

{s('integrations_strip_subtitle') && (

{s('integrations_strip_subtitle')}

)} {names.length > 0 && (
{names.map((name, idx) => ( {name} ))}
)}
{t('welcome.view_all_integrations', { defaultValue: 'View all integrations' })}
); } // ─── Security Section ───────────────────────────────────────────────────────── function SecuritySection({ landing }) { const s = (key, def = '') => landing[`landing.${key}`] ?? def; if (s('security_enabled') !== '1') return null; const items = [1, 2, 3, 4].map((i) => ({ icon: s(`security_${i}_icon`, 'shield-check'), title: s(`security_${i}_title`), desc: s(`security_${i}_desc`), })).filter((it) => it.title); if (!items.length) return null; return (

{s('security_title')}

{s('security_subtitle') && (

{s('security_subtitle')}

)}
{items.map((item, idx) => (

{item.title}

{item.desc}

))}
); } // ─── Page ───────────────────────────────────────────────────────────────────── export default function Welcome({ auth, canLogin, canRegister, landing = {}, plans = [] }) { const appName = import.meta.env.VITE_APP_NAME || 'WhatsMine'; const s = (key, def = '') => landing[`landing.${key}`] ?? def; const metaTitle = s('seo_title') || s('hero_title') || appName; const metaDesc = s('seo_description') || s('hero_subtitle') || ''; const origin = typeof window !== 'undefined' ? window.location.origin : ''; // ── JSON-LD structured data ──────────────────────────────────────────────── const faqs = [1, 2, 3, 4, 5] .map((i) => ({ q: s(`faq_${i}_q`), a: s(`faq_${i}_a`) })) .filter((f) => f.q && f.a); const jsonLd = [ { '@context': 'https://schema.org', '@type': 'Organization', name: appName, url: origin || undefined, logo: origin ? `${origin}/favicon.ico` : undefined, description: metaDesc, }, { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: appName, applicationCategory: 'BusinessApplication', operatingSystem: 'Web', description: metaDesc, offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' }, aggregateRating: { '@type': 'AggregateRating', ratingValue: '4.9', ratingCount: '1280' }, }, ]; if (faqs.length) { jsonLd.push({ '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faqs.map((f) => ({ '@type': 'Question', name: f.q, acceptedAnswer: { '@type': 'Answer', text: f.a }, })), }); } return ( ); }