1import{j as e,L as ut,U as $t,T as gt,r as S,O as At,l as Ge,Q as Dt,V as It,W as zt,y as $e,Y as Ae,$ as Lt,M as Et,z as fe,n as Ye,a0 as Ht,a1 as Mt,e as st,a2 as ze,K as De,a3 as bt,a4 as qe,a5 as vt,a6 as Ft,X as ke,a7 as Xe,u as rt,E as Le,a8 as Rt,a9 as Pt,aa as Qe,J as Ot,ab as Vt,ac as Wt,ad as _t,Z as Ze,k as Kt,ae as _,af as ft,ag as Z,ah as J,ai as U,aj as Je,ak as Ut,al as Se,x as Gt,b as Yt,G as Ct,v as qt,am as Xt,R as Qt,P as Zt,an as Jt,ao as Ie,ap as es,a as ts,I as ss}from"./index-DY1lplPh.js";import{S as rs}from"./ServiceAd-uSQRy6l-.js";import{C as ee}from"./CartesianGrid-B98ayS9b.js";import{B as oe}from"./BarChart-CUY_ZYqd.js";import{B as ae,C as Ce}from"./Bar-BGLfhsyG.js";import{L as jt}from"./LineChart-DZUtOB3h.js";import{L as os,P as je,a as ye}from"./PieChart-C2vezSqm.js";import{S as yt,a as et}from"./ScatterChart-BnFHvP0H.js";import{L as as,l as ns}from"./llm-BxUP9Nox.js";import"./PolarChart-DbJkgNVA.js";const is=()=>e.jsx(rs,{name:"Dynamic Views",title:"Show each visitor",accent:"the version that fits.",lede:"Dynamic Views adapts your site content to each visitor's source and behavior, and keeps the best-performing version in front of each group.",points:["Content variations","Visitor segments","Automatic optimization"],video:{src:"/media/command-center/dynamic-views-ad",label:"How Dynamic Views splits visitors between two versions of a page and moves everyone to the one that converts",caption:"Two heroes on one page. The first hundred visitors are split evenly and every impression and conversion is counted. From then on it is a running contest: both versions are re-scored after every impression, and whichever holds the higher conversion rate is the one shown. Each segment runs its own contest."},features:[{icon:ut,title:"Content variations",body:"Write more than one headline, call to action, image or message and test them against each other."},{icon:$t,title:"Visitor segments",body:"Define segments by referral source, UTM parameters or behavior, so a Google Ads visitor and an email subscriber can see different content."},{icon:gt,title:"Automatic optimization",body:"The highest-performing variation is shown to each segment, with performance and conversions tracked by segment."}],steps:[{title:"Create variations",body:"Design versions of your content, from headlines to calls to action and images."},{title:"Set up segments",body:"Choose who sees what: referral source, UTM parameters or behavior."},{title:"Analyze and optimize",body:"The best performer is shown to each segment automatically."}],closing:{title:"Ready to stop showing everyone the same page?",body:"We can turn on Dynamic Views for this account and set up the first segments with you."}}),we={badgeText:"PICA Award Winner ⢠Premium Vehicle Wraps",badgeTextColor:"#fca5a5",badgeBgColor:"#dc26261a",badgeBorderColor:"#E4002B",mainHeadline:"Vehicle Wraps:",mainHeadlineColor:"#ffffff",subHeadline:"High Impact.",subHeadlineColor:"#ffffff",accentHeadline:"Low Cost.",accentHeadlineColor:"#E4002B",description:"One investment gets your business years of local advertising. A single vehicle wrap can last up to 10 years and generate up to 100,000 impressions per day.",descriptionColor:"#d1d5db",primaryButtonText:"Get FREE Quote",primaryButtonBgColor:"#E4002B",primaryButtonTextColor:"#ffffff",primaryButtonLink:"/contact",secondaryButtonText:"View Wraps",secondaryButtonBgColor:"transparent",secondaryButtonTextColor:"#ffffff",secondaryButtonBorderColor:"#ffffff",secondaryButtonLink:"/sign-wrap-installation",phoneNumber:"(252) 355-5588",phoneNumberColor:"#ffffff",callToActionHeader:"Speak with an Expert",callToActionHeaderColor:"rgba(255,255,255,0.9)",callToActionText:"Get instant answers about your vehicle wrap project and pricing",callToActionTextColor:"rgba(255,255,255,0.9)",callToActionBgColor:"#E4002B",callToActionButtonBgColor:"#ffffff",callToActionButtonTextColor:"#E4002B",businessHours:`Mon-Thurs: 7:30AM-5:30PM 2Fri: 7:30AM-12PM`,brandColor:"#E4002B",backgroundColor:"#1f2937",backgroundImage:"https://morganprinters.com/wp-content/uploads/2025/06/1LM0688-scaled.jpg",stat1Number:"1000+",stat1NumberColor:"#E4002B",stat1Label:"Vehicles Transformed",stat1LabelColor:"#9ca3af",stat2Number:"65+",stat2NumberColor:"#E4002B",stat2Label:"Years Experience",stat2LabelColor:"#9ca3af"},ot={badgeText:"Christmas Deadline Approaching",badgeTextColor:"#1f2937",badgeBgColor:"#ffffffe6",badgeBorderColor:"#ffffff",mainHeadline:"Christmas Memories",mainHeadlineColor:"#ffffff",subHeadline:"Made to Last",subHeadlineColor:"#ffffff",description:"Those little hands won't stay little for long. Capture this Christmas magic with personalized handprint keepsakes that your family will treasure forever.",descriptionColor:"#ffffff",feature1Text:"Perfect Christmas Gifts",feature2Text:"Handcrafted with Love",feature3Text:"Custom Made & Delivered",deadlineTitle:"Order by October 24th for Christmas Delivery",deadlineText:"Don't wait until it's too late! Our artisans need time to handcraft your precious keepsakes. Order now to ensure your family's Christmas memories arrive in time for the holidays.",deadlineBo
2xBgColor:"#fffffff2",deadlineBoxTextColor:"#1f2937",deadlineTitleColor:"#1f2937",deadlineTextColor:"#374151",primaryButtonText:"ORDER CHRISTMAS KEEPSAKES",primaryButtonBgColor:"#ffffff",primaryButtonTextColor:"#1f2937",primaryButtonLink:"/pages/christmass-favorites",secondaryButtonText:"VIEW CHRISTMAS COLLECTION",secondaryButtonBgColor:"#ffffff1a",secondaryButtonTextColor:"#ffffff",secondaryButtonBorderColor:"#ffffff",secondaryButtonLink:"/pages/christmass-favorites",footerText1:"FREE SHIPPING over $100",footerText2:"Handcrafted by skilled artisans ⢠Perfect for grandparents & family",footerTextColor:"#ffffff",backgroundColor:"#000000",backgroundImage:"https://cdn.shopify.com/s/files/1/0598/8329/0778/files/Christmas_DV.jpg?v=1757510241",overlayColor:"#000000",overlayOpacity:"0.5"},at={badgeText:"Limited Time: Christmas Orders",badgeTextColor:"#1f2937",badgeBgColor:"#ffffff",badgeBorderColor:"#ffffff",statusDotColor:"#b9d2d0",mainHeadline:"Handprint",mainHeadlineColor:"#ffffff",subHeadline:"Christmas",subHeadlineColor:"#ffffffe6",accentHeadline:"Magic",accentHeadlineColor:"#ffffff",description:"Create lasting Christmas memories with custom handprint keepsakes. Each piece is lovingly handcrafted to capture this precious moment in time.",descriptionColor:"#ffffff",featureCard1Title:"Custom Made",featureCard1Text:"Personalized for your family",featureCard2Title:"Shop Early, Stress Less",featureCard2Text:"Get it in time for Christmas",featureCardBgColor:"#ffffff1a",featureCardBorderColor:"#ffffff33",featureCardTextColor:"#ffffff",urgencyTitle:"October 24th Deadline",urgencyText:"Order today to guarantee Christmas delivery. Our artisans are standing by to create your family's treasured keepsakes.",urgencyBoxBgColor:"#ffffff",urgencyBoxTextColor:"#1f2937",urgencyBorderColor:"#b9d2d0",urgencyTextColor:"#374151",primaryButtonText:"START YOUR ORDER",primaryButtonBgColor:"#ffffff",primaryButtonTextColor:"#1f2937",primaryButtonLink:"/pages/christmass-favorites",secondaryButtonText:"Browse Favorites",secondaryButtonBgColor:"#ffffff1a",secondaryButtonTextColor:"#ffffff",secondaryButtonBorderColor:"#84bbb8",secondaryButtonLink:"/pages/christmass-favorites",trust1Text:"Free Shipping $100+",trust2Text:"Handcrafted Quality",trust3Text:"Family Owned",trustDotColor:"#b9d2d0",trustTextColor:"#ffffff",backgroundColor:"#000000",backgroundImage:"https://cdn.shopify.com/s/files/1/0598/8329/0778/files/Christmas3_DV2.jpg?v=1757512225",overlayColor:"#000000",overlayOpacity:"0.45"},nt={badgeText:"Limited Offer ⢠Act Now",badgeTextColor:"#ffffff",badgeBgColor:"#6366f11a",badgeBorderColor:"#818cf8",mainHeadline:"Grow Your Brand",mainHeadlineColor:"#ffffff",subHeadline:"With Confidence.",subHeadlineColor:"#c7d2fe",description:"Unlock powerful tools that help you reach more customers, drive conversions, and scale your business â all in one place.",descriptionColor:"#cbd5e1",primaryButtonText:"Get Started Free",primaryButtonBgColor:"#6366f1",primaryButtonTextColor:"#ffffff",primaryButtonLink:"/get-started",secondaryButtonText:"See How It Works",secondaryButtonBgColor:"transparent",secondaryButtonTextColor:"#c7d2fe",secondaryButtonBorderColor:"#818cf8",secondaryButtonLink:"/demo",feature1Text:"No Credit Card Required",feature2Text:"Setup in 5 Minutes",feature3Text:"Cancel Anytime",featureDotColor:"#818cf8",featureTextColor:"#94a3b8",stat1Number:"10K+",stat1NumberColor:"#818cf8",stat1Label:"Happy Customers",stat1LabelColor:"#64748b",stat2Number:"4.9â
",stat2NumberColor:"#818cf8",stat2Label:"Average Rating",stat2LabelColor:"#64748b",stat3Number:"99%",stat3NumberColor:"#818cf8",stat3Label:"Uptime",stat3LabelColor:"#64748b",gradientFrom:"#4f46e5",gradientVia:"#6366f1",gradientTo:"#0f172a",backgroundColor:"#0f172a",backgroundImage:""},it={badgeText:"ð¥ Most Popular Choice",badgeTextColor:"#f97316",badgeBgColor:"#f973161a",badgeBorderColor:"#fb923c",mainHeadline:"The Smarter Way",mainHeadlineColor:"#1e293b",subHeadline:"To Reach Your Audience",subHeadlineColor:"#f97316",description:"Join thousands of businesses using our platform to create high-converting campaigns that actually deliver results.",descriptionColor:"#64748b",primaryButtonText:"Start Your Free Trial",primaryButtonBgColor:"#f97316",primaryButtonTextColor:"#ffffff",primaryButtonLink:"/trial",secondaryButtonText:"Watch Demo",secondaryButtonBgColor:"#ffffff",secondaryButtonTextColor:"#1e293b",secondaryButtonBorderColor:"#e2e8f0",secondaryButtonLink:"/demo",testimonialText:'"This platform doubled our
2conversion rate in just 30 days. Absolutely game-changing."',testimonialAuthor:"Sarah K., Marketing Director",testimonialTextColor:"#475569",testimonialAuthorColor:"#f97316",testimonialBgColor:"#fff7ed",testimonialBorderColor:"#fed7aa",feature1Title:"Easy Setup",feature1Text:"Launch campaigns in minutes",feature2Title:"Smart Analytics",feature2Text:"Data-driven insights that matter",feature3Title:"Proven Results",feature3Text:"Average 3x ROI for our clients",featureCardBgColor:"#ffffff",featureCardBorderColor:"#f1f5f9",featureCardTitleColor:"#1e293b",featureCardTextColor:"#64748b",featureIconColor:"#f97316",backgroundColor:"#fafafa",backgroundImage:"",accentColor:"#f97316"},wt=t=>{switch(t){case"high-impact":case"moving-marketing":return we;case"christmas-memories":return ot;case"christmas-magic":return at;case"gradient-surge":return nt;case"clean-convert":return it;default:return we}},ve=t=>{switch(t){case"high-impact":return"High Impact";case"moving-marketing":return"Moving Marketing";case"christmas-memories":return"Christmas Memories";case"christmas-magic":return"Christmas Magic";case"gradient-surge":return"Gradient Surge";case"clean-convert":return"Clean Convert";default:return"Unknown Template"}},lt=(t,s)=>t==="high-impact"?`<style> 3.dv-hi-hero-container { min-height: 90vh; width: 100%; display: flex; flex-wrap: wrap; } 4.dv-hi-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; width: 100%; } 5.dv-hi-hero { background: linear-gradient(135deg, ${s.backgroundColor} 0%, #374151 100%); color: white; padding: 2rem 0; min-height: 700px; display: flex; align-items: center; margin: 0; width: 100%; position: relative; overflow: hidden; } 6.dv-hi-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('${s.backgroundImage}'); background-size: cover; background-position: center; opacity: 0.1; z-index: 1; } 7.dv-hi-hero > .dv-hi-container { position: relative; z-index: 2; } 8.dv-hi-hero-content { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; text-align: center; } 9.dv-hi-hero-left { display: flex; flex-direction: column; align-items: center; } 10.dv-hi-hero-right { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-height: auto; height: auto; } 11.dv-hi-badge { display: inline-block; background: ${s.badgeBgColor}; border: 1px solid ${s.badgeBorderColor}; color: ${s.badgeTextColor}; padding: 0.5rem 1rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; margin-bottom: 1.5rem; text-transform: ; letter-spacing: 0.5px; } 12.dv-hi-hero h1 { font-size: 2.5rem; font-weight: 900; margin-bottom: 1.5rem; line-height: 1.1; letter-spacing: -0.025em; } 13.dv-hi-highlight { color: ${s.accentHeadlineColor}; position: relative; } 14.dv-hi-highlight::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: ${s.accentHeadlineColor}; } 15.dv-hi-hero p { font-size: 1.1rem; color: ${s.descriptionColor}; margin-bottom: 2rem; line-height: 1.6; max-width: 600px; } 16.dv-hi-button-group { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; width: 100%; max-width: 300px; } 17.dv-hi-btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; font-weight: 600; text-decoration: none !important; transition: all 0.2s; cursor: pointer; border: none; font-size: 1rem; border-radius: 0; text-transform: none; letter-spacing: 0; position: relative; overflow: hidden; width: 100%; } 18.dv-hi-btn-primary { background: ${s.primaryButtonBgColor}; color: ${s.primaryButtonTextColor}; border: 2px solid ${s.primaryButtonBgColor}; } 19.dv-hi-btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #000; transition: left 0.3s; z-index: -1; } 20.dv-hi-btn-primary:hover::before { left: 0; } 21.dv-hi-btn-primary:hover { color: white; text-decoration: none; } 22.dv-hi-btn-outline { border: 2px solid ${s.secondaryButtonBorderColor}; color: ${s.secondaryButtonTextColor}; background: ${s.secondaryButtonBgColor}; } 23.dv-hi-btn-outline::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #f9fafb; transition: left 0.3s; z-index: -1; }
24.dv-hi-btn-outline:hover::before { left: 0; } 25.dv-hi-btn-outline:hover { color: #1f2937; text-decoration: none; } 26.dv-hi-trust-indicators { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1.5rem 0; border-top: 1px solid #374151; width: 100%; max-width: 400px; } 27.dv-hi-trust-item { text-align: center; padding: 1rem; background: rgba(255, 255, 255, 0.02); border-left: 3px solid ${s.brandColor}; } 28.dv-hi-trust-number { font-size: 1.75rem; font-weight: 900; color: white; display: block; line-height: 1; } 29.dv-hi-trust-label { font-size: 0.75rem; color: #9ca3af; margin-top: 0.5rem; text-transform: ; letter-spacing: 0.5px; } 30.dv-hi-call-cta { background: linear-gradient(135deg, ${s.callToActionBgColor}, #b91c1c); padding: 2rem 1.5rem; border-radius: 1rem; text-align: center; border: 3px solid rgba(255, 255, 255, 0.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; width: 100%; max-width: 400px; } 31.dv-hi-call-cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); animation: dv-hi-shine 3s infinite; } 32@keyframes dv-hi-shine { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } 33.dv-hi-call-header { font-size: 1rem; font-weight: 700; color: ${s.callToActionHeaderColor}; margin-bottom: 1rem; text-transform: ; letter-spacing: 1px; } 34.dv-hi-phone-number { font-size: 2rem; font-weight: 900; color: ${s.phoneNumberColor}; margin-bottom: 1rem; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } 35.dv-hi-call-subtext { font-size: 0.9rem; color: ${s.callToActionTextColor}; margin-bottom: 1.5rem; line-height: 1.4; } 36.dv-hi-call-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: ${s.callToActionButtonBgColor}; color: ${s.callToActionButtonTextColor}; padding: 0.875rem 1.5rem; border-radius: 0.5rem; font-weight: 700; text-decoration: none !important; transition: all 0.3s; text-transform: ; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); font-size: 0.9rem; } 37.dv-hi-call-button:hover { background: #f9fafb; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } 38.dv-hi-phone-icon { width: 18px; height: 18px; fill: currentColor; } 39.dv-hi-hours { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); } 40@media (max-width: 480px) { 41 .dv-hi-container { padding: 0 0.75rem; } 42 .dv-hi-hero { padding: 1.5rem 0; min-height: auto; } 43 .dv-hi-hero h1 { font-size: 2rem; margin-bottom: 1rem; } 44 .dv-hi-hero p { font-size: 1rem; margin-bottom: 1.5rem; } 45 .dv-hi-badge { font-size: 0.7rem; padding: 0.4rem 0.8rem; margin-bottom: 1rem; } 46 .dv-hi-call-cta { padding: 1.5rem 1rem; } 47 .dv-hi-phone-number { font-size: 1.75rem; letter-spacing: 0.5px; } 48 .dv-hi-call-header { font-size: 0.9rem; } 49 .dv-hi-call-subtext { font-size: 0.85rem; } 50 .dv-hi-call-button { padding: 0.75rem 1.25rem; font-size: 0.85rem; } 51 .dv-hi-trust-indicators { gap: 0.75rem; padding: 1rem 0; } 52 .dv-hi-trust-item { padding: 0.75rem; } 53 .dv-hi-trust-number { font-size: 1.5rem; } 54 .dv-hi-trust-label { font-size: 0.7rem; } 55} 56@media (min-width: 640px) { 57 .dv-hi-button-group { flex-direction: column; max-width: none; } 58 .dv-hi-btn { width: auto; } 59 .dv-hi-hero-content { gap: 3rem; } 60 .dv-hi-call-cta { padding: 2.5rem 2rem; } 61 .dv-hi-phone-number { font-size: 2.25rem; letter-spacing: 1.5px; } 62 .dv-hi-call-header { font-size: 1.125rem; } 63 .dv-hi-call-subtext { font-size: 1rem; margin-bottom: 2rem; } 64 .dv-hi-call-button { padding: 1rem 2rem; font-size: 1rem; } 65 .dv-hi-trust-indicators { gap: 1.5rem; } 66} 67@media (min-width: 768px) { 68 .dv-hi-button-group { flex-direction: row; max-width: none; } 69 .dv-hi-hero { padding: 4rem 0; min-height: 700px; } 70 .dv-hi-hero-content { grid-template-columns: 1.2fr 0.8fr; text-align: left; align-items: stretch; } 71 .dv-hi-hero-left { align-items: flex-start; } 72 .dv-hi-hero-right { min-height: 500px; height: 100%; } 73 .dv-hi-hero h1 { font-size: 3.5rem; } 74 .dv-hi-hero p { font-size: 1.15rem; margin-bottom: 3rem; } 75 .dv-hi-button-group { margin-bottom: 3rem; } 76 .dv-hi-badge { font-size: 0.875rem; margin-bottom: 2rem; } 77 .dv-hi-call-cta { padding: 3rem 2rem; } 78 .dv-hi-phone-number { font-size: 2.5rem; letter-spacing: 2px; } 79 .dv-hi-trust-indicators { gap: 2rem; padding: 2rem 0; max-width: none; } 80 .dv-hi-trust-item { text-align: left; padding: 1rem; } 81 .dv-hi-trust-number { font-size: 2rem; } 82 .dv-hi-trust-label { font-size: 0.875rem; } 83} 84@media (min-width: 1024px) { 85 .dv-hi-hero { padding: 4rem 0; } 86 .dv-hi-hero h1 { font-size: 4rem; } 87 .dv-hi-hero p { font-size: 1.25rem; } 88} 89</style> 90<section class="dv-hi-hero-container"> 91 <section class="dv-hi-hero"> 92 <div class="dv-hi-container"> 93 <div class="dv-hi-hero-content"> 94 <div class="dv-hi-hero-left"> 95 <div class="dv-hi-badge">${s.badgeText}</div> 96 <h1><span style="color: ${s.mainHeadlineColor};">${s.mainHeadline}</span><br><span style="color: ${s.subHeadlineColor};">${s.subHeadline}</span><br><span class="dv-hi-highlight">${s.accentHeadline}</span></h1> 97 <p>${s.description}</p> 98 <div class="dv-hi-button-group"> 99 <a href="${s.primaryButtonLink}"${s.primaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="dv-hi-btn dv-hi-btn-primary">${s.primaryButtonText}</a> 100 <a href="${s.secondaryButtonLink}"${s.secondaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="dv-hi-btn dv-hi-btn-outline">${s.secondaryButtonText}</a> 101 </div> 102 <div class="dv-hi-trust-indicators"> 103 <div class="dv-hi-trust-item">
104 <span class="dv-hi-trust-number" style="color: ${s.stat1NumberColor};">${s.stat1Number}</span> 105 <span class="dv-hi-trust-label" style="color: ${s.stat1LabelColor};">${s.stat1Label}</span> 106 </div> 107 <div class="dv-hi-trust-item"> 108 <span class="dv-hi-trust-number" style="color: ${s.stat2NumberColor};">${s.stat2Number}</span> 109 <span class="dv-hi-trust-label" style="color: ${s.stat2LabelColor};">${s.stat2Label}</span> 110 </div> 111 </div> 112 </div> 113 <div class="dv-hi-hero-right"> 114 <div class="dv-hi-call-cta"> 115 <div class="dv-hi-call-header">${s.callToActionHeader}</div> 116 <div class="dv-hi-phone-number">${s.phoneNumber}</div> 117 <div class="dv-hi-call-subtext">${s.callToActionText}</div> 118 <a${s.ctaButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} href="tel:${s.phoneNumber.replace(/\D/g,"")}" class="dv-hi-call-button"> 119 <svg class="dv-hi-phone-icon" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg> 120 CALL NOW 121 </a> 122 <div class="dv-hi-hours">
122${s.businessHours?s.businessHours.replace(/\\n/g,"<br>"):""}</div> 123 </div> 124 </div> 125 </div> 126 </div> 127 </section> 128</section>`:t==="moving-marketing"?`<style> 129.dv-mm-hero-container { width: 100%; display: flex; flex-wrap: wrap; } 130.dv-mm-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; width: 100%; } 131.dv-mm-hero { background: linear-gradient(135deg, ${s.backgroundColor} 0%, #374151 100%); color: white; padding: 2rem 0; min-height: 700px; display: flex; align-items: center; margin: 0; width: 100%; position: relative; overflow: hidden; } 132.dv-mm-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('${s.backgroundImage}'); background-size: cover; background-position: center; opacity: 0.1; z-index: 1; } 133.dv-mm-hero > .dv-mm-container { position: relative; z-index: 2; } 134.dv-mm-content { text-align: center; } 135.dv-mm-badge { display: inline-block; background: ${s.badgeBgColor}; border: 1px solid ${s.badgeBorderColor}; border-radius: 25px; color: ${s.badgeTextColor}; font-size: 0.75rem; font-weight: 600; padding: 0.5rem 1.5rem; margin-bottom: 2rem; } 136.dv-mm-hero h1 { font-size: 2.5rem; font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; } 137.dv-mm-hero p.dv-mm-desc { font-size: 1.1rem; color: ${s.descriptionColor}; margin-bottom: 2rem; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.6; } 138.dv-mm-button-group { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; margin-bottom: 3rem; width: 100%; } 139.dv-mm-btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; font-weight: 700; text-decoration: none !important; transition: all 0.2s; cursor: pointer; border: none; font-size: 1rem; border-radius: 6px; position: relative; overflow: hidden; min-width: 200px; } 140.dv-mm-btn-primary { background: ${s.primaryButtonBgColor}; color: ${s.primaryButtonTextColor}; } 141.dv-mm-btn-primary:hover { color: ${s.primaryButtonTextColor}; } 142.dv-mm-btn-outline { border: 2px solid ${s.secondaryButtonBorderColor}; background: ${s.secondaryButtonBgColor}; color: ${s.secondaryButtonTextColor}; } 143.dv-mm-btn-outline:hover { color: ${s.secondaryButtonTextColor}; } 144.dv-mm-call-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); color: ${s.callToActionButtonTextColor}; } 145.dv-mm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto; } 146.dv-mm-stat { text-align: center; } 147.dv-mm-stat-number { font-size: 2.5rem; font-weight: 900; margin-bottom: 0.5rem; } 148.dv-mm-stat-label { font-size: 0.875rem; text-transform: ; letter-spacing: 0.05em; } 149.dv-mm-call-cta { background: linear-gradient(135deg, ${s.callToActionBgColor}, #b91c1c); padding: 2rem 1.5rem; border-radius: 1rem; text-align: center; border: 3px solid rgba(255, 255, 255, 0.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; max-width: 500px; margin: 0 auto; } 150.dv-mm-call-cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); animation: dv-mm-shine 3s infinite; } 151@keyframes dv-mm-shine { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } 152.dv-mm-call-header { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; text-transform: ; color: ${s.callToActionHeaderColor}; letter-spacing: 0.05em; } 153.dv-mm-phone-number { font-size: 2rem; font-weight: 900; margin-bottom: 1rem; color: ${s.phoneNumberColor}; } 154.dv-mm-call-subtext { font-size: 0.9rem; color: ${s.callToActionTextColor}; margin-bottom: 1.5rem; } 155.dv-mm-call-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: ${s.callToActionButtonBgColor}; color: ${s.callToActionButtonTextColor}; padding: 1rem 2rem; border-radius: 8px; font-weight: 700; font-size: 1rem; text-decoration: none !important; transition: all 0.3s; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } 156 157@media (max-width: 480px) { 158 .dv-mm-container { padding: 0 0.75rem; } 159 .dv-mm-hero { padding: 1.5rem 0; min-height: auto; } 160 .dv-mm-hero h1 { font-size: 2rem; } 161 .dv-mm-hero p.dv-mm-desc { font-size: 1rem; } 162 .dv-mm-call-cta { padding: 1.5rem 1rem; } 163 .dv-mm-phone-number { font-size: 1.75rem; } 164 .dv-mm-stat-number { font-size: 2rem; } 165} 166@media (min-width: 640px) { 167 .dv-mm-button-group { flex-direction: row; } 168 .dv-mm-btn { width: auto; } 169 .dv-mm-call-cta { padding: 2.5rem 2rem; } 170 .dv-mm-phone-number { font-size: 2.25rem; } 171} 172@media (min-width: 768px) { 173 .dv-mm-hero { padding: 4rem 0; min-height: 700px; } 174 .dv-mm-hero h1 { font-size: 4rem; } 175 .dv-mm-hero p.dv-mm-desc { font-size: 1.15rem; margin-bottom: 3rem; } 176 .dv-mm-button-group { margin-bottom: 3rem; } 177 .dv-mm-badge { font-size: 0.875rem; } 178 .dv-mm-call-cta { padding: 3rem 2rem; } 179 .dv-mm-phone-number { font-size: 2.5rem; } 180 .dv-mm-stat-number { font-size: 3rem; } 181} 182@media (min-width: 1024px) { 183 .dv-mm-hero h1 { font-size: 4rem; } 184 .dv-mm-hero p.dv-mm-desc { font-size: 1.25rem; } 185} 186</style> 187<section class="dv-mm-hero-container"> 188 <section class="dv-mm-hero"> 189 <div class="dv-mm-container"> 190 <div class="dv-mm-content"> 191 <div class="dv-mm-badge">${s.badgeText}</div> 192 <h1><span style="color: ${s.mainHeadlineColor};">${s.mainHeadline}</span><br><span style="color: ${s.subHeadlineColor};">${s.subHeadline}</span></h1> 193 <p class="dv-mm-desc">${s.description}</p> 194 <div class="dv-mm-button-group"> 195 <a href="${s.primaryButtonLink}"${s.primaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="dv-mm-btn dv-mm-btn-primary">${s.primaryButtonText}</a> 196 <a href="${s.secondaryButtonLink}"${s.secondaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="dv-mm-btn dv-mm-btn-outline">${s.secondaryButtonText}</a> 197 </div> 198 <div class="dv-mm-stats"> 199 <div class="dv-mm-stat"> 200 <div class="dv-mm-stat-number" style="color: ${s.stat1NumberColor};">${s.stat1Number}</div> 201 <div class="dv-mm-stat-label" style="color: ${s.stat1LabelColor};">${s.stat1Label}</div> 202 </div> 203 <div class="dv-mm-stat"> 204 <div class="dv-mm-stat-number" style="color: ${s.stat2NumberColor};">${s.stat2Number}</div> 205 <div class="dv-mm-stat-label" style="color: ${s.stat2LabelColor};">${s.stat2Label}</div> 206 </div> 207 </div> 208 <div class="dv-mm-call-cta"> 209 <div class="dv-mm-call-header">${s.callToActionHeader}</div> 210 <div class="dv-mm-phone-number">${s.phoneNumber}</div> 211 <p class="dv-mm-call-subtext">${s.callToActionText}</p> 212 <a${s.ctaButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} href="tel:${s.phoneNumber.replace(/\D/g,"")}" class="dv-mm-call-button">CALL NOW</a> 213 </div> 214 </div> 215 </div> 216 </section> 217</section>`:t==="christmas-memories"?`<style> 218* { margin: 0; padding: 0; box-sizing: border-box; } 219.christmas-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: url('${s.backgroundImage}'); background-size: cover; background-position: center; padding: 2rem 1rem; width: 100%; } 220.christmas-overlay { position: absolute; inset: 0; background-color: ${s.overlayColor}; opacity: ${s.overlayOpacity}; z-index: 1; } 221.christmas-content { position: relative; z-index: 10; max-width: 64rem; margin: 0 auto; text-align: center; color: white; width: 100%; } 222.christmas-badge { display: inline-flex; align-items: center; gap: 0.5rem; background-color: ${s.badgeBgColor}; color: ${s.badgeTextColor}; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; margin-bottom: 1.5rem; } 223.christmas-title { font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.1; } 224.christmas-description { font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.8; max-width: 40rem; margin-left: auto; margin-right: auto; color: ${s.descriptionColor}; } 225.christmas-features { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 2rem; font-size: 1rem; color: ${s.footerTextColor}; }
226.christmas-deadline-box { background-color: ${s.deadlineBoxBgColor}; color: ${s.deadlineBoxTextColor}; border-radius: 0; padding: 1.25rem; margin-bottom: 1.5rem; max-width: 43rem; margin-left: auto; margin-right: auto; } 227.christmas-deadline-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: ${s.deadlineTitleColor}; } 228.christmas-deadline-text { color: ${s.deadlineTextColor}; line-height: 1.6; font-size: 0.9rem; } 229.christmas-buttons { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; margin-bottom: 2rem; } 230.christmas-btn { padding: 1rem 2rem; font-size: 1rem; font-weight: 500; border-radius: 0.125rem; text-decoration: none; cursor: pointer; border: none; display: inline-block; min-width: 250px; width: 100%; max-width: 320px; text-align: center; } 231.christmas-btn-primary { background-color: ${s.primaryButtonBgColor}; color: ${s.primaryButtonTextColor}; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } 232.christmas-btn-secondary { border: 2px solid ${s.secondaryButtonBorderColor}; color: ${s.secondaryButtonTextColor}; background-color: ${s.secondaryButtonBgColor}; } 233.christmas-footer-info { margin-top: 2rem; font-size: 0.8rem; color: ${s.footerTextColor}; } 234.christmas-footer-info p { margin-bottom: 0.5rem; } 235.highlight { font-weight: 600; } 236@media (min-width: 640px) { 237 .christmas-hero { padding: 3rem 1.5rem; } 238 .christmas-title { font-size: 3rem; } 239 .christmas-description { font-size: 1.125rem; } 240 .christmas-features { flex-direction: row; gap: 2rem; font-size: 1.125rem; } 241 .christmas-buttons { flex-direction: row; } 242 .christmas-btn { width: auto; min-width: 280px; } 243 .christmas-badge { font-size: 0.875rem; padding: 0.75rem 1.5rem; } 244} 245@media (min-width: 768px) { 246 .christmas-title { font-size: 4rem; margin-bottom: 1.5rem; } 247 .christmas-description { font-size: 1.25rem; margin-bottom: 2rem; } 248 .christmas-deadline-box { padding: 1.5rem; } 249 .christmas-deadline-title { font-size: 1.25rem; } 250 .christmas-deadline-text { font-size: 1rem; } 251 .christmas-buttons { margin-bottom: 3rem; } 252 .christmas-footer-info { font-size: 0.875rem; margin-top: 3rem; } 253} 254</style> 255<section class="christmas-hero"> 256 <div class="christmas-overlay"></div> 257 <div class="christmas-content"> 258 <div class="christmas-badge"><span>${s.badgeText}</span></div> 259 <h1 class="christmas-title"><span style="color: ${s.mainHeadlineColor};">${s.mainHeadline}</span><br><span style="color: ${s.subHeadlineColor};">${s.subHeadline}</span></h1> 260 <p class="christmas-description">${s.description}</p> 261 <div class="christmas-features"> 262 <span>${s.feature1Text}</span> 263 <span>${s.feature2Text}</span> 264 <span>${s.feature3Text}</span> 265 </div> 266 <div class="christmas-deadline-box"> 267 <h3 class="christmas-deadline-title">${s.deadlineTitle}</h3> 268 <p class="christmas-deadline-text">${s.deadlineText}</p> 269 </div> 270 <div class="christmas-buttons"> 271 <a href="${s.primaryButtonLink}"${s.primaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="christmas-btn christmas-btn-primary">${s.primaryButtonText}</a> 272 <a href="${s.secondaryButtonLink}"${s.secondaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="christmas-btn christmas-btn-secondary">${s.secondaryButtonText}</a> 273 </div> 274 <div class="christmas-footer-info"> 275 <p><span class="highlight">${s.footerText1}</span></p> 276 <p>${s.footerText2}</p> 277 </div> 278 </div> 279</section>`:t==="christmas-magic"?`<style> 280* { margin: 0; padding: 0; box-sizing: border-box; } 281.christmas-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 2rem 1rem; width: 100%; } 282.christmas-bg { position: absolute; inset: 0; background-image: url('${s.backgroundImage}'); background-size: cover; background-position: center; } 283.christmas-overlay { position: absolute; inset: 0; background: ${s.overlayColor}; opacity: ${s.overlayOpacity}; z-index: 1; } 284.christmas-content-container { position: relative; z-index: 10; max-width: 1280px; margin: 0 auto; width: 100%; } 285.christmas-content { max-width: 100%; color: white; } 286.christmas-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: ${s.badgeBgColor}; color: ${s.badgeTextColor}; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; margin-bottom: 1.5rem; } 287.status-dot { width: 8px; height: 8px; background: ${s.statusDotColor}; border-radius: 50%; } 288.christmas-title { font-size: 2.25rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.1; } 289.christmas-subtitle { font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.5; max-width: 576px; color: ${s.descriptionColor}; } 290.features-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; max-width: 520px; } 291.feature-card { background: ${s.featureCardBgColor}; backdrop-filter: blur(10px); border-radius: 0; padding: 1rem; border: 1px solid ${s.featureCardBorderColor}; color: ${s.featureCardTextColor}; } 292.feature-card h4 { font-weight: 600; margin-bottom: 0.25rem; } 293.feature-card p { font-size: 0.875rem; opacity: 0.9; } 294.urgency-box { background: ${s.urgencyBoxBgColor}; color: ${s.urgencyBoxTextColor}; border-radius: 0; padding: 1.25rem; margin-bottom: 1.5rem; max-width: 520px; border-left: 4px solid ${s.urgencyBorderColor}; } 295.urgency-box h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; } 296.urgency-box p { color: ${s.urgencyTextColor}; font-size: 0.85rem; line-height: 1.5; } 297.christmas-buttons { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } 298.christmas-btn { padding: 1rem 2rem; font-size: 1rem; font-weight: 500; border-radius: 0.125rem; text-decoration: none; cursor: pointer; border: none; display: inline-block; text-align: center; } 299.christmas-btn-primary { background: ${s.primaryButtonBgColor}; color: ${s.primaryButtonTextColor}; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } 300.christmas-btn-outline { border: 2px solid ${s.secondaryButtonBorderColor}; color: ${s.secondaryButtonTextColor}; background: ${s.secondaryButtonBgColor}; backdrop-filter: blur(10px); } 301.trust-indicators { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 0.8rem; color: ${s.trustTextColor}; } 302.trust-item { display: flex; align-items: center; gap: 0.5rem; } 303.trust-dot { width: 8px; height: 8px; background: ${s.trustDotColor}; border-radius: 50%; } 304@media (min-width: 480px) { 305 .features-grid { grid-template-columns: 1fr 1fr; } 306 .christmas-buttons { flex-direction: row; } 307 .christmas-content { max-width: 520px; } 308} 309@media (min-width: 640px) { 310 .christmas-hero { padding: 3rem 1.5rem; } 311 .christmas-title { font-size: 3rem; } 312 .christmas-subtitle { font-size: 1.125rem; } 313 .christmas-badge { font-size: 0.875rem; } 314 .trust-indicators { gap: 1.5rem; font-size: 0.875rem; } 315} 316@media (min-width: 768px) { 317 .christmas-content { max-width: 512px; } 318 .christmas-title { font-size: 3.5rem; } 319 .christmas-subtitle { font-size: 1.125rem; margin-bottom: 2rem; } 320 .features-grid { margin-bottom: 2rem; } 321 .urgency-box { padding: 1.5rem; } 322 .urgency-box h3 { font-size: 1.125rem; } 323 .urgency-box p { font-size: 0.875rem; } 324 .christmas-buttons { margin-bottom: 2rem; } 325} 326</style> 327<section class="christmas-hero"> 328 <div class="christmas-bg"></div> 329 <div class="christmas-overlay"></div> 330 <div class="christmas-content-container"> 331 <div class="christmas-content"> 332 <div class="christmas-badge"> 333 <div class="status-dot"></div>
334 <span>${s.badgeText}</span> 335 </div> 336 <h1 class="christmas-title"> 337 <span style="color: ${s.mainHeadlineColor};">${s.mainHeadline}</span><br> 338 <span style="color: ${s.subHeadlineColor};">${s.subHeadline}</span><br> 339 <span style="color: ${s.accentHeadlineColor};">${s.accentHeadline}</span> 340 </h1> 341 <p class="christmas-subtitle">${s.description}</p> 342 <div class="features-grid"> 343 <div class="feature-card"> 344 <h4>${s.featureCard1Title}</h4> 345 <p>${s.featureCard1Text}</p> 346 </div> 347 <div class="feature-card"> 348 <h4>${s.featureCard2Title}</h4> 349 <p>${s.featureCard2Text}</p> 350 </div> 351 </div> 352 <div class="urgency-box"> 353 <h3>${s.urgencyTitle}</h3> 354 <p>${s.urgencyText}</p> 355 </div> 356 <div class="christmas-buttons"> 357 <a href="${s.primaryButtonLink}"${s.primaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="christmas-btn christmas-btn-primary">${s.primaryButtonText}</a> 358 <a href="${s.secondaryButtonLink}"${s.secondaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="christmas-btn christmas-btn-outline">${s.secondaryButtonText}</a> 359 </div> 360 <div class="trust-indicators"> 361 <span class="trust-item"><span class="trust-dot"></span>${s.trust1Text}</span> 362 <span class="trust-item"><span class="trust-dot"></span>${s.trust2Text}</span> 363 <span class="trust-item"><span class="trust-dot"></span>${s.trust3Text}</span> 364 </div> 365 </div> 366 </div> 367</section>`:t==="gradient-surge"?`<style> 368.dv-gs-hero { position: relative; min-height: 600px; overflow: hidden; display: flex; align-items: center; padding: 2rem 1rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; width: 100%; } 369.dv-gs-bg { position: absolute; inset: 0; background: linear-gradient(135deg, ${s.gradientFrom} 0%, ${s.gradientVia} 40%, ${s.gradientTo} 100%); z-index: 0; } 370.dv-gs-pattern { position: absolute; inset: 0; z-index: 1; opacity: 0.08; background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.2) 1px, transparent 1px); background-size: 40px 40px; } 371.dv-gs-content { position: relative; z-index: 10; max-width: 1100px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } 372.dv-gs-left { } 373.dv-gs-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: ${s.badgeBgColor}; border: 1px solid ${s.badgeBorderColor}; border-radius: 9999px; color: ${s.badgeTextColor}; font-size: 0.75rem; font-weight: 600; padding: 0.5rem 1.25rem; margin-bottom: 1.5rem; } 374.dv-gs-title { font-size: 2.25rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.25rem; } 375.dv-gs-desc { font-size: 1rem; color: ${s.descriptionColor}; margin-bottom: 1.5rem; line-height: 1.7; max-width: 520px; } 376.dv-gs-btns { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } 377.dv-gs-btn-primary { background: ${s.primaryButtonBgColor}; color: ${s.primaryButtonTextColor}; padding: 0.875rem 2rem; font-weight: 700; font-size: 1rem; border: none; cursor: pointer; text-decoration: none; display: inline-block; border-radius: 10px; box-shadow: 0 4px 20px rgba(99,102,241,0.4); text-align: center; } 378.dv-gs-btn-secondary { border: 2px solid ${s.secondaryButtonBorderColor}; background: ${s.secondaryButtonBgColor}; color: ${s.secondaryButtonTextColor}; padding: 0.875rem 2rem; font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none; display: inline-block; border-radius: 10px; text-align: center; } 379.dv-gs-features { display: flex; gap: 1rem; flex-wrap: wrap; } 380.dv-gs-feature { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: ${s.featureTextColor}; } 381.dv-gs-feature-dot { width: 6px; height: 6px; border-radius: 50%; background: ${s.featureDotColor}; } 382.dv-gs-right { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } 383.dv-gs-stat { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 1.25rem; text-align: center; } 384.dv-gs-stat-num { font-size: 1.75rem; font-weight: 800; margin-bottom: 0.25rem; } 385.dv-gs-stat-label { font-size: 0.7rem; text-transform: ; letter-spacing: 0.05em; } 386@media (min-width: 640px) { 387 .dv-gs-btns { flex-direction: row; }
388 .dv-gs-title { font-size: 2.75rem; } 389 .dv-gs-desc { font-size: 1.125rem; } 390 .dv-gs-badge { font-size: 0.813rem; } 391 .dv-gs-hero { padding: 3rem 1.5rem; } 392} 393@media (min-width: 768px) { 394 .dv-gs-content { grid-template-columns: 1fr 1fr; gap: 4rem; } 395 .dv-gs-title { font-size: 3.25rem; } 396 .dv-gs-stat-num { font-size: 2rem; } 397 .dv-gs-stat-label { font-size: 0.75rem; } 398 .dv-gs-stat { padding: 1.5rem; } 399 .dv-gs-features { gap: 1.5rem; } 400 .dv-gs-btns { margin-bottom: 2rem; } 401 .dv-gs-desc { margin-bottom: 2rem; } 402} 403</style> 404<section class="dv-gs-hero"> 405 <div class="dv-gs-bg"></div> 406 <div class="dv-gs-pattern"></div> 407 <div class="dv-gs-content"> 408 <div class="dv-gs-left"> 409 <div class="dv-gs-badge">${s.badgeText}</div> 410 <h1 class="dv-gs-title"> 411 <span style="color: ${s.mainHeadlineColor};">${s.mainHeadline}</span><br> 412 <span style="color: ${s.subHeadlineColor};">${s.subHeadline}</span> 413 </h1> 414 <p class="dv-gs-desc">${s.description}</p> 415 <div class="dv-gs-btns"> 416 <a href="${s.primaryButtonLink}"${s.primaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="dv-gs-btn-primary">${s.primaryButtonText}</a> 417 <a href="${s.secondaryButtonLink}"${s.secondaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="dv-gs-btn-secondary">${s.secondaryButtonText}</a> 418 </div> 419 <div class="dv-gs-features"> 420 <span class="dv-gs-feature"><span class="dv-gs-feature-dot"></span>${s.feature1Text}</span> 421 <span class="dv-gs-feature"><span class="dv-gs-feature-dot"></span>${s.feature2Text}</span> 422 <span class="dv-gs-feature"><span class="dv-gs-feature-dot"></span>${s.feature3Text}</span> 423 </div> 424 </div> 425 <div class="dv-gs-right"> 426 <div class="dv-gs-stat"> 427 <div class="dv-gs-stat-num" style="color: ${s.stat1NumberColor};">${s.stat1Number}</div> 428 <div class="dv-gs-stat-label" style="color: ${s.stat1LabelColor};">${s.stat1Label}</div> 429 </div> 430 <div class="dv-gs-stat"> 431 <div class="dv-gs-stat-num" style="color: ${s.stat2NumberColor};">${s.stat2Number}</div> 432 <div class="dv-gs-stat-label" style="color: ${s.stat2LabelColor};">${s.stat2Label}</div> 433 </div> 434 <div class="dv-gs-stat"> 435 <div class="dv-gs-stat-num" style="color: ${s.stat3NumberColor};">${s.stat3Number}</div> 436 <div class="dv-gs-stat-label" style="color: ${s.stat3LabelColor};">${s.stat3Label}</div> 437 </div> 438 </div> 439 </div> 440</section>`:t==="clean-convert"?`<style> 441.dv-cc-hero { position: relative; min-height: 600px; overflow: hidden; padding: 2rem 1rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: ${s.backgroundColor}; width: 100%; } 442.dv-cc-container { max-width: 1100px; margin: 0 auto; width: 100%; } 443.dv-cc-top { text-align: center; margin-bottom: 2rem; } 444.dv-cc-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: ${s.badgeBgColor}; border: 1px solid ${s.badgeBorderColor}; border-radius: 9999px; color: ${s.badgeTextColor}; font-size: 0.75rem; font-weight: 600; padding: 0.5rem 1.25rem; margin-bottom: 1.5rem; } 445.dv-cc-title { font-size: 2.25rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.25rem; } 446.dv-cc-desc { font-size: 1rem; color: ${s.descriptionColor}; margin-bottom: 1.5rem; line-height: 1.7; max-width: 600px; margin-left: auto; margin-right: auto; } 447.dv-cc-btns { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; margin-bottom: 2rem; } 448.dv-cc-btn-primary { background: ${s.primaryButtonBgColor}; color: ${s.primaryButtonTextColor}; padding: 1rem 2.5rem; font-weight: 700; font-size: 1rem; border: none; cursor: pointer; text-decoration: none; display: inline-block; border-radius: 12px; box-shadow: 0 4px 16px rgba(249,115,22,0.3); text-align: center; } 449.dv-cc-btn-secondary { border: 2px solid ${s.secondaryButtonBorderColor}; background: ${s.secondaryButtonBgColor}; color: ${s.secondaryButtonTextColor}; padding: 1rem 2.5rem; font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none; display: inline-block; border-radius: 12px; text-align: center; } 450.dv-cc-features { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; } 451.dv-cc-feature { background: ${s.featureCardBgColor}; border: 1px solid ${s.featureCardBorderColor}; border-radius: 16px; padding: 1.5rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } 452.dv-cc-feature-icon { width: 48px; height: 48px; border-radius: 12px; background: ${s.badgeBgColor}; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } 453.dv-cc-feature-icon svg { width: 24px; height: 24px; color: ${s.featureIconColor}; } 454.dv-cc-feature h4 { font-size: 1rem; font-weight: 700; color: ${s.featureCardTitleColor}; margin-bottom: 0.5rem; } 455.dv-cc-feature p { font-size: 0.875rem; color: ${s.featureCardTextColor}; line-height: 1.5; } 456.dv-cc-testimonial { background: ${s.testimonialBgColor}; border: 1px solid ${s.testimonialBorderColor}; border-radius: 16px; padding: 1.5rem; max-width: 700px; margin: 0 auto; text-align: center; } 457.dv-cc-testimonial-text { font-size: 1rem; font-style: italic; color: ${s.testimonialTextColor}; margin-bottom: 1rem; line-height: 1.6; } 458.dv-cc-testimonial-author { font-size: 0.875rem; font-weight: 600; color: ${s.testimonialAuthorColor}; } 459@media (min-width: 640px) { 460 .dv-cc-hero { padding: 3rem 1.5rem; } 461 .dv-cc-btns { flex-direction: row; }
462 .dv-cc-title { font-size: 2.75rem; } 463 .dv-cc-desc { font-size: 1.125rem; } 464 .dv-cc-features { grid-template-columns: repeat(2, 1fr); } 465 .dv-cc-badge { font-size: 0.875rem; } 466 .dv-cc-feature { padding: 2rem; } 467 .dv-cc-testimonial { padding: 2rem; } 468 .dv-cc-btn-primary, .dv-cc-btn-secondary { font-size: 1.125rem; } 469} 470@media (min-width: 768px) { 471 .dv-cc-hero { padding: 4rem 1.5rem; } 472 .dv-cc-top { margin-bottom: 3rem; } 473 .dv-cc-title { font-size: 3.5rem; } 474 .dv-cc-desc { font-size: 1.25rem; margin-bottom: 2rem; } 475 .dv-cc-btns { margin-bottom: 2.5rem; } 476 .dv-cc-features { grid-template-columns: repeat(3, 1fr); margin-bottom: 3rem; } 477 .dv-cc-feature h4 { font-size: 1.125rem; } 478 .dv-cc-testimonial-text { font-size: 1.125rem; } 479} 480</style> 481<section class="dv-cc-hero"> 482 <div class="dv-cc-container"> 483 <div class="dv-cc-top"> 484 <div class="dv-cc-badge">${s.badgeText}</div> 485 <h1 class="dv-cc-title"> 486 <span style="color: ${s.mainHeadlineColor};">${s.mainHeadline}</span><br> 487 <span style="color: ${s.subHeadlineColor};">${s.subHeadline}</span> 488 </h1> 489 <p class="dv-cc-desc">${s.description}</p> 490 <div class="dv-cc-btns"> 491 <a href="${s.primaryButtonLink}"${s.primaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="dv-cc-btn-primary">${s.primaryButtonText}</a> 492 <a href="${s.secondaryButtonLink}"${s.secondaryButtonIsConversion?` id="${s.conversionIdentifier||""}"`:""} class="dv-cc-btn-secondary">${s.secondaryButtonText}</a> 493 </div> 494 </div> 495 <div class="dv-cc-features"> 496 <div class="dv-cc-feature"> 497 <div class="dv-cc-feature-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div> 498 <h4>${s.feature1Title}</h4> 499 <p>${s.feature1Text}</p> 500 </div> 501 <div class="dv-cc-feature"> 502 <div class="dv-cc-feature-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div> 503 <h4>${s.feature2Title}</h4> 504 <p>${s.feature2Text}</p> 505 </div> 506 <div class="dv-cc-feature"> 507 <div class="dv-cc-feature-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div> 508 <h4>${s.feature3Title}</h4> 509 <p>${s.feature3Text}</p> 510 </div> 511 </div> 512 <div class="dv-cc-testimonial"> 513 <p class="dv-cc-testimonial-text">${s.testimonialText}</p> 514 <p class="dv-cc-testimonial-author">â ${s.testimonialAuthor}</p> 515 </div> 516 </div> 517</section>`:"",Ee=({config:t})=>e.jsxs("div",{style:{background:t.backgroundColor,minHeight:"600px",padding:"3rem",position:"relative",overflow:"hidden",fontSize:"14px"},children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundImage:`url('${t.backgroundImage}')`,backgroundSize:"cover",backgroundPosition:"center",opacity:.1,zIndex:1}}),e.jsxs("div",{style:{position:"relative",zIndex:2,color:"white"},children:[e.jsx("div",{style:{display:"inline-block",background:t.badgeBgColor,border:`1px solid ${t.badgeBorderColor}`,borderRadius:"4px",color:t.badgeTextColor,fontSize:"11px",fontWeight:600,padding:"5px 10px",marginBottom:"16px"},children:t.badgeText}),e.jsxs("h1",{style:{fontSize:"40px",fontWeight:900,lineHeight:1.1,marginBottom:"12px"},children:[e.jsx("span",{style:{color:t.mainHeadlineColor},children:t.mainHeadline}),e.jsx("br",{}),e.jsx("span",{style:{color:t.subHeadlineColor},children:t.subHeadline}),e.jsx("br",{}),e.jsx("span",{style:{color:t.accentHeadlineColor},children:t.accentHeadline})]}),e.jsx("p",{style:{fontSize:"12px",color:t.descriptionColor,marginBottom:"16
517px",lineHeight:1.5,maxWidth:"450px"},children:t.description}),e.jsxs("div",{style:{display:"flex",gap:"10px",marginBottom:"20px",flexWrap:"wrap"},children:[e.jsx("button",{style:{background:t.primaryButtonBgColor,color:t.primaryButtonTextColor,padding:"10px 20px",fontWeight:600,fontSize:"12px",border:"none",cursor:"pointer",borderRadius:"4px"},children:t.primaryButtonText}),e.jsx("button",{style:{border:`2px solid ${t.secondaryButtonBorderColor}`,background:t.secondaryButtonBgColor,color:t.secondaryButtonTextColor,padding:"10px 20px",fontWeight:600,fontSize:"12px",cursor:"pointer",borderRadius:"4px"},children:t.secondaryButtonText})]}),e.jsxs("div",{style:{background:t.callToActionBgColor,padding:"16px",borderRadius:"8px",maxWidth:"280px"},children:[e.jsx("div",{style:{fontSize:"11px",fontWeight:600,marginBottom:"6px",color:t.callToActionHeaderColor},children:t.callToActionHeader}),e.jsx("div",{style:{fontSize:"26px",fontWeight:900,marginBottom:"8px",color:t.phoneNumberColor},children:t.phoneNumber}),e.jsx("div",{style:{fontSize:"11px",color:t.callToActionTextColor,marginBottom:"10px"},children:t.callToActionText}),e.jsx("button",{style:{background:t.callToActionButtonBgColor,color:t.callToActionButtonTextColor,padding:"8px 16px",borderRadius:"4px",fontWeight:700,fontSize:"11px",border:"none",cursor:"pointer"},children:"CALL NOW"})]})]})]}),He=({config:t})=>e.jsxs("div",{style:{background:t.backgroundColor,minHeight:"600px",padding:"3rem",position:"relative",overflow:"hidden",fontSize:"14px",textAlign:"center"},children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundImage:`url('${t.backgroundImage}')`,backgroundSize:"cover",backgroundPosition:"center",opacity:.1,zIndex:1}}),e.jsxs("div",{style:{position:"relative",zIndex:2,color:"white"},children:[e.jsx("div",{style:{display:"inline-block",background:t.badgeBgColor,border:`1px solid ${t.badgeBorderColor}`,borderRadius:"25px",color:t.badgeTextColor,fontSize:"11px",fontWeight:600,padding:"5px 15px",marginBottom:"20px"},children:t.badgeText}),e.jsxs("h1",{style:{fontSize:"36px",fontWeight:900,lineHeight:1.1,marginBottom:"14px"},children:[e.jsx("span",{style:{color:t.mainHeadlineColor},children:t.mainHeadline}),e.jsx("br",{}),e.jsx("span",{style:{color:t.subHeadlineColor},children:t.subHeadline})]}),e.jsx("p",{style:{fontSize:"12px",color:t.descriptionColor,marginBottom:"20px",lineHeight:1.5,maxWidth:"550px",margin:"0 auto 20px"},children:t.description}),e.jsxs("div",{style:{display:"flex",gap:"10px",justifyContent:"center",marginBottom:"24px",flexWrap:"wrap"},children:[e.jsx("button",{style:{background:t.primaryButtonBgColor,color:t.primaryButtonTextColor,padding:"12px 24px",fontWeight:700,fontSize:"12px",border:"none",cursor:"pointer",borderRadius:"4px"},children:t.primaryButtonText}),e.jsx("button",{style:{border:`2px solid ${t.secondaryButtonBorderColor}`,background:t.secondaryButtonBgColor,color:t.secondaryButtonTextColor,padding:"12px 24px",fontWeight:700,fontSize:"12px",cursor:"pointer",borderRadius:"4px"},children:t.secondaryButtonText})]}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:"14px",marginBottom:"24px",maxWidth:"450px",margin:"0 auto 24px"},children:[e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx("div",{style:{fontSize:"26px",fontWeight:900,color:t.stat1NumberColor,marginBottom:"5px"},children:t.stat1Number}),e.jsx("div",{style:{fontSize:"10px",color:t.stat1LabelColor,textTransform:""},children:t.stat1Label})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx("div",{style:{fontSize:"26px",fontWeight:900,color:t.stat2NumberColor,marginBottom:"5px"},children:t.stat2Number}),e.jsx("div",{style:{fontSize:"10px",color:t.stat2LabelColor,textTransform:""},children:t.stat2Label})]})]}),e.jsxs("div",{style:{background:t.callToActionBgColor,padding:"20px",borderRadius:"12px",maxWidth:"350px",margin:"0 auto"},children:[e.jsx("div",{style:{fontSize:"10px",fontWeight:600,marginBottom:"5px",textTransform:"",color:t.callToActionHeaderColor},children:t.callToActionHeader}),e.jsx("div",{style:{fontSize:"26px",fontWeight:900,marginBottom:"10px",color:t.phoneNumberColor},children:t.phoneNumber}),e.jsx("p",{style:{fontSize:"11px",color:t.callToActionTextColor,marginBottom:"14px"},children:t.callToActionText}),e.jsx("button",{style:{background:t.callToActionButtonBgColor,color:t.callToActionButtonTextColor,padding:"10px 20px",borderRadius:"6px",fontWeight:700,fontSize:"11px",border:"none",cursor:"pointer"},children:"CALL NOW"})]})]})]}),Me=({config:t})=>e.jsxs("div",{style:{position:"relative",minHeight:"600px",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",backgroundImage:`url('${t.backgroundImage}')`,backgroundSize:"cover",backgroundPosition:"center",padding:"3rem 1.5rem",fontSize:"14px"},children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:t.overlayColor,opacity:t.overlayOpacity,zIndex:1}}),e.jsxs("div",{style:{position:"relative",zIndex:10,maxWidth:"900px",textAlign:"center",color:"white"},children:[e.jsx("div",{style:{display:"inline-flex",alignItems:"center",gap:"0.5rem",background:t.badgeBgColor,color:t.badgeTextColor,padding:"8px 16px",borderRadius:"9999px",fontSize:"11px",fontWeight:500,marginBottom:"20px"},children:t.badgeText}),e.jsxs("h1",{style:{fontSize:"42px",fontWeight:700,marginBottom:"16
517px",lineHeight:1.1},children:[e.jsx("span",{style:{color:t.mainHeadlineColor},children:t.mainHeadline}),e.jsx("br",{}),e.jsx("span",{style:{color:t.subHeadlineColor},children:t.subHeadline})]}),e.jsx("p",{style:{fontSize:"13px",marginBottom:"20px",lineHeight:1.8,maxWidth:"550px",margin:"0 auto 20px",color:t.descriptionColor},children:t.description}),e.jsxs("div",{style:{display:"flex",flexWrap:"wrap",alignItems:"center",justifyContent:"center",gap:"1.5rem",marginBottom:"24px",fontSize:"12px",color:t.footerTextColor},children:[e.jsx("span",{children:t.feature1Text}),e.jsx("span",{children:t.feature2Text}),e.jsx("span",{children:t.feature3Text})]}),e.jsxs("div",{style:{background:t.deadlineBoxBgColor,color:t.deadlineBoxTextColor,borderRadius:"0",padding:"18px",marginBottom:"20px",maxWidth:"600px",margin:"0 auto 20px"},children:[e.jsx("h3",{style:{fontSize:"13px",fontWeight:700,marginBottom:"6px",color:t.deadlineTitleColor},children:t.deadlineTitle}),e.jsx("p",{style:{color:t.deadlineTextColor,lineHeight:1.5,fontSize:"11px"},children:t.deadlineText})]}),e.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:"10px",justifyContent:"center",marginBottom:"30px"},children:[e.jsx("button",{style:{background:t.primaryButtonBgColor,color:t.primaryButtonTextColor,padding:"12px 24px",fontSize:"12px",fontWeight:500,borderRadius:"2px",border:"none",cursor:"pointer",minWidth:"220px"},children:t.primaryButtonText}),e.jsx("button",{style:{border:`2px solid ${t.secondaryButtonBorderColor}`,color:t.secondaryButtonTextColor,background:t.secondaryButtonBgColor,padding:"12px 24px",fontSize:"12px",fontWeight:500,borderRadius:"2px",cursor:"pointer",minWidth:"220px"},children:t.secondaryButtonText})]}),e.jsxs("div",{style:{fontSize:"11px",color:t.footerTextColor},children:[e.jsx("p",{style:{marginBottom:"5px"},children:e.jsx("strong",{children:t.footerText1})}),e.jsx("p",{children:t.footerText2})]})]})]}),Fe=({config:t})=>e.jsxs("div",{style:{position:"relative",minHeight:"600px",display:"flex",alignItems:"center",overflow:"hidden",padding:"3rem 1.5rem",fontSize:"14px"},children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundImage:`url('${t.backgroundImage}')`,backgroundSize:"cover",backgroundPosition:"center",zIndex:0}}),e.jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,background:t.overlayColor,opacity:t.overlayOpacity,zIndex:1}}),e.jsxs("div",{style:{position:"relative",zIndex:10,maxWidth:"480px",color:"white"},children:[e.jsxs("div",{style:{display:"inline-flex",alignItems:"center",gap:"0.5rem",background:t.badgeBgColor,color:t.badgeTextColor,padding:"6px 12px",borderRadius:"9999px",fontSize:"11px",fontWeight:500,marginBottom:"16px"},children:[e.jsx("div",{style:{width:"6px",height:"6px",background:t.statusDotColor,borderRadius:"50%"}}),e.jsx("span",{children:t.badgeText})]}),e.jsxs("h1",{style:{fontSize:"32px",fontWeight:700,marginBottom:"16px",lineHeight:1.1},children:[e.jsx("span",{style:{color:t.mainHeadlineColor},children:t.mainHeadline}),e.jsx("br",{}),e.jsx("span",{style:{color:t.subHeadlineColor},children:t.subHeadline}),e.jsx("br",{}),e.jsx("span",{style:{color:t.accentHeadlineColor},children:t.accentHeadline})]}),e.jsx("p",{style:{fontSize:"12px",marginBottom:"18px",lineHeight:1.5,maxWidth:"500px",color:t.descriptionColor},children:t.description}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"10px",marginBottom:"18px",maxWidth:"480px"},children:[e.jsxs("div",{style:{background:t.featureCardBgColor,backdropFilter:"blur(10px)",borderRadius:"0",padding:"12px",border:`1px solid ${t.featureCardBorderColor}`,color:t.featureCardTextColor},children:[e.jsx("h4",{style:{fontWeight:600,marginBottom:"4px",fontSize:"12px"},children:t.featureCard1Title}),e.jsx("p",{style:{fontSize:"10px",opacity:.9},children:t.featureCard1Text})]}),e.jsxs("div",{style:{background:t.featureCardBgColor,backdropFilter:"blur(10px)",borderRadius:"0",padding:"12px",border:`1px solid ${t.featureCardBorderColor}`,color:t.featureCardTextColor},children:[e.jsx("h4",{style:{fontWeight:600,marginBottom:"4px",fontSize:"12px"},children:t.featureCard2Title}
517),e.jsx("p",{style:{fontSize:"10px",opacity:.9},children:t.featureCard2Text})]})]}),e.jsxs("div",{style:{background:t.urgencyBoxBgColor,color:t.urgencyBoxTextColor,borderRadius:"0",padding:"16px",marginBottom:"18px",maxWidth:"480px",borderLeft:`4px solid ${t.urgencyBorderColor}`},children:[e.jsx("h3",{style:{fontSize:"12px",fontWeight:700,marginBottom:"6px"},children:t.urgencyTitle}),e.jsx("p",{style:{color:t.urgencyTextColor,fontSize:"10px",lineHeight:1.5},children:t.urgencyText})]}),e.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:"10px",marginBottom:"18px"},children:[e.jsx("button",{style:{background:t.primaryButtonBgColor,color:t.primaryButtonTextColor,padding:"12px 20px",fontSize:"12px",fontWeight:500,borderRadius:"2px",border:"none",cursor:"pointer"},children:t.primaryButtonText}),e.jsx("button",{style:{border:`2px solid ${t.secondaryButtonBorderColor}`,color:t.secondaryButtonTextColor,background:t.secondaryButtonBgColor,padding:"12px 20px",fontSize:"12px",fontWeight:500,borderRadius:"2px",cursor:"pointer"},children:t.secondaryButtonText})]}),e.jsxs("div",{style:{display:"flex",flexWrap:"wrap",alignItems:"center",gap:"12px",fontSize:"10px",color:t.trustTextColor},children:[e.jsxs("span",{style:{display:"flex",alignItems:"center",gap:"5px"},children:[e.jsx("span",{style:{width:"6px",height:"6px",background:t.trustDotColor,borderRadius:"50%"}}),t.trust1Text]}),e.jsxs("span",{style:{display:"flex",alignItems:"center",gap:"5px"},children:[e.jsx("span",{style:{width:"6px",height:"6px",background:t.trustDotColor,borderRadius:"50%"}}),t.trust2Text]}),e.jsxs("span",{style:{display:"flex",alignItems:"center",gap:"5px"},children:[e.jsx("span",{style:{width:"6px",height:"6px",background:t.trustDotColor,borderRadius:"50%"}}),t.trust3Text]})]})]})]}),Re=({config:t})=>e.jsxs("div",{style:{position:"relative",minHeight:"600px",overflow:"hidden",display:"flex",alignItems:"center",padding:"3rem 1.5rem",fontSize:"14px"},children:[e.jsx("div",{style:{position:"absolute",inset:0,background:`linear-gradient(135deg, ${t.gradientFrom} 0%, ${t.gradientVia} 40%, ${t.gradientTo} 100%)`,zIndex:0}}),e.jsx("div",{style:{position:"absolute",inset:0,zIndex:1,opacity:.08,backgroundImage:"radial-gradient(circle at 25% 25%, rgba(255,255,255,0.2) 1px, transparent 1px)",backgroundSize:"40px 40px"}}),e.jsxs("div",{style:{position:"relative",zIndex:10,maxWidth:"1100px",margin:"0 auto",width:"100%",display:"grid",gridTemplateColumns:"1fr 1fr",gap:"3rem",alignItems:"center"},children:[e.jsxs("div",{children:[e.jsx("div",{style:{display:"inline-flex",alignItems:"center",gap:"0.5rem",background:t.badgeBgColor,border:`1px solid ${t.badgeBorderColor}`,borderRadius:"9999px",color:t.badgeTextColor,fontSize:"11px",fontWeight:600,padding:"5px 14px",marginBottom:"16px"},children:t.badgeText}),e.jsxs("h1",{style:{fontSize:"36px",fontWeight:800,lineHeight:1.1,marginBottom:"14px"},children:[e.jsx("span",{style:{color:t.mainHeadlineColor},children:t.mainHeadline}),e.jsx("br",{}),e.jsx("span",{style:{color:t.subHeadlineColor},children:t.subHeadline})]}),e.jsx("p",{style:{fontSize:"12px",color:t.descriptionColor,marginBottom:"18px",lineHeight:1.6,maxWidth:"450px"},children:t.description}),e.jsxs("div",{style:{display:"flex",gap:"10px",marginBottom:"18px",flexWrap:"wrap"},children:[e.jsx("button",{style:{background:t.primaryButtonBgColor,color:t.primaryButtonTextColor,padding:"10px 20px",fontWeight:700,fontSize:"12px",border:"none",cursor:"pointer",borderRadius:"8px",boxShadow:"0 4px 16px rgba(99,102,241,0.3)"},children:t.primaryButtonText}),e.jsx("button",{style:{border:`2px solid ${t.secondaryButtonBorderColor}`,background:t.secondaryButtonBgColor||"transparent",color:t.secondaryButtonTextColor,padding:"10px 20px",fontWeight:600,fontSize:"12px",cursor:"pointer",borderRadius:"8px"},children:t.secondaryButtonText})]}),e.jsx("div",{style:{display:"flex",gap:"14px",flexWrap:"wrap"},children:[t.feature1Text,t.feature2Text,t.feature3Text].map((s,r)=>e.jsxs("span",{style:{display:"flex",alignItems:"center",gap:"5px",fontSize:"10px",color:t.featureTextColor}
517,children:[e.jsx("span",{style:{width:"5px",height:"5px",borderRadius:"50%",background:t.featureDotColor}}),s]},r))})]}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"8px"},children:[{num:t.stat1Number,numColor:t.stat1NumberColor,label:t.stat1Label,labelColor:t.stat1LabelColor},{num:t.stat2Number,numColor:t.stat2NumberColor,label:t.stat2Label,labelColor:t.stat2LabelColor},{num:t.stat3Number,numColor:t.stat3NumberColor,label:t.stat3Label,labelColor:t.stat3LabelColor}].map((s,r)=>e.jsxs("div",{style:{background:"rgba(255,255,255,0.06)",backdropFilter:"blur(12px)",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"12px",padding:"14px",textAlign:"center"},children:[e.jsx("div",{style:{fontSize:"20px",fontWeight:800,color:s.numColor,marginBottom:"3px"},children:s.num}),e.jsx("div",{style:{fontSize:"8px",textTransform:"",letterSpacing:"0.05em",color:s.labelColor},children:s.label})]},r))})]})]}),Pe=({config:t})=>e.jsx("div",{style:{position:"relative",minHeight:"600px",overflow:"hidden",padding:"3rem 1.5rem",fontSize:"14px",background:t.backgroundColor},children:e.jsxs("div",{style:{maxWidth:"900px",margin:"0 auto"},children:[e.jsxs("div",{style:{textAlign:"center",marginBottom:"2.5rem"},children:[e.jsx("div",{style:{display:"inline-flex",alignItems:"center",gap:"0.5rem",background:t.badgeBgColor,border:`1px solid ${t.badgeBorderColor}`,borderRadius:"9999px",color:t.badgeTextColor,fontSize:"11px",fontWeight:600,padding:"5px 14px",marginBottom:"16px"},children:t.badgeText}),e.jsxs("h1",{style:{fontSize:"36px",fontWeight:800,lineHeight:1.1,marginBottom:"14px"},children:[e.jsx("span",{style:{color:t.mainHeadlineColor},children:t.mainHeadline}),e.jsx("br",{}),e.jsx("span",{style:{color:t.subHeadlineColor},children:t.subHeadline})]}),e.jsx("p",{style:{fontSize:"12px",color:t.descriptionColor,marginBottom:"18px",lineHeight:1.6,maxWidth:"480px",margin:"0 auto 18px"},children:t.description}),e.jsxs("div",{style:{display:"flex",gap:"10px",justifyContent:"center",marginBottom:"20px",flexWrap:"wrap"},children:[e.jsx("button",{style:{background:t.primaryButtonBgColor,color:t.primaryButtonTextColor,padding:"10px 24px",fontWeight:700,fontSize:"12px",border:"none",cursor:"pointer",borderRadius:"10px",boxShadow:"0 4px 12px rgba(249,115,22,0.25)"},children:t.primaryButtonText}),e.jsx("button",{style:{border:`2px solid ${t.secondaryButtonBorderColor}`,background:t.secondaryButtonBgColor,color:t.secondaryButtonTextColor,padding:"10px 24px",fontWeight:600,fontSize:"12px",cursor:"pointer",borderRadius:"10px"},children:t.secondaryButtonText})]})]}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"12px",marginBottom:"2rem"},children:[{title:t.feature1Title,text:t.feature1Text},{title:t.feature2Title,text:t.feature2Text},{title:t.feature3Title,text:t.feature3Text}].map((s,r)=>e.jsxs("div",{style:{background:t.featureCardBgColor,border:`1px solid ${t.featureCardBorderColor}`,borderRadius:"12px",padding:"18px",textAlign:"center"},children:[e.jsx("h4",{style:{fontSize:"12px",fontWeight:700,color:t.featureCardTitleColor,marginBottom:"5px"},children:s.title}),e.jsx("p",{style:{fontSize:"10px",color:t.featureCardTextColor,lineHeight:1.4},children:s.text})]},r))}),e.jsxs("div",{style:{background:t.testimonialBgColor,border:`1px solid ${t.testimonialBorderColor}`,borderRadius:"12px",padding:"18px",textAlign:"center"},children:[e.jsx("p",{style:{fontSize:"11px",fontStyle:"italic",color:t.testimonialTextColor,marginBottom:"8px",lineHeight:1.5},children:t.testimonialText}),e.jsxs("p",{style:{fontSize:"10px",fontWeight:600,color:t.testimonialAuthorColor},children:["â ",t.testimonialAuthor]})]})]})}),ls=({open:t})=>e.jsx(st,{className:`w-4 h-4 transition-transform duration-200 ${t?"rotate-180":""}`}),re=({title:t,icon:s,children:r,defaultOpen:n=!1})=>{const[m,p]=S.useState(n);return e.jsxs("div",{className:"rounded-md border border-white/10 bg-[#1C1C1C]/30 overflow-hidden",children:[e.jsxs("button",{onClick:()=>p(!m),className:"w-full flex items-center justify-between px-5 py-3.5 hover:bg-[#242424] transition-colors",children:[e.jsxs("div",{className:"flex items-center gap-2.5",children:[e.jsx("span",{className:"text-white/65",children:s}),e.jsx("span",{className:"text-sm font-semibold text-paper",children:t})]}),e.jsx(ls,{open:m})]}),m&&e.jsx("div",{className:"px-5 pb-5 pt-1 space-y-4 border-t border-white/10",children:r})]})},O=({children:t,sub:s})=>e.jsx("label",{className:`block ${s?"text-xs font-medium text-white/65 mb-1.5":"text-sm font-medium text-paper mb-2"}`,children:t}),K=({value:t,onChange:s,placeholder:r,multiline:n,rows:m=3})=>{const p="w-full bg-[#1C1C1C]/60 border border-white/10 rounded-lg px-3.5 py-2.5 text-sm text-paper placeholder-white/40 focus:outline-none focus:border-signal focus:ring-1 focus:ring-signal/30 transition-all";return n?e.jsx("textarea",{value:t,onChange:s,rows:m,placeholder:r,className:`${p} resize-none`}):e.jsx("input",{type:"text",value:t,onChange:s,placeholder:r,className:p})},L=({label:t,value:s,onChange:r})=>e.jsxs("div",{children:[e.jsx(O,{sub:!0,children:t}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("div",{className:"relative shrink-0",children:[e.jsx("input",{type:"color",value:s,onChange:r,className:"absolute inset-0 opacity-0 cursor-pointer w-full h-full"}),e.jsx("div",{className:"w-8 h-8 rounded-lg border border-white/10 shadow-inner cursor-pointer",style:{backgroundColor:s}})]}),e.jsx("input",{type:"text",value:s,onChange:r,className:"flex-1 bg-[#1C1C1C]/60 border border-white/10 rounded-lg px-2.5 py-1.5 text-xs text-paper font-mono focus:outline-none focus:border-signal transition-colors"})]})]}),Oe=({checked:t,onChange:s,label:r="Set as conversion"})=>e.jsxs("div",{onClick:s,className:"flex items-center gap-2 mt-3
517cursor-pointer group select-none",children:[e.jsx("div",{className:`w-4 h-4 rounded border flex items-center justify-center transition-all ${t?"bg-[#3FA86B] border-[#3FA86B]":"border-white/10 bg-[#1C1C1C]/60 group-hover:border-white/10"}`,children:t&&e.jsx(Ge,{className:"w-3 h-3 text-paper"})}),e.jsx("span",{className:`text-xs font-medium transition-colors ${t?"text-[#3FA86B]":"text-white/65 group-hover:text-paper"}`,children:r}),t&&e.jsx("span",{className:"text-[10px] text-[#3FA86B]/70 font-mono",children:"â conversion trigger"})]}),Nt=({variation:t,template:s,conversionIdentifier:r,onUpdate:n,onClose:m,onCancel:p})=>{const[f,w]=S.useState(!1),[h,B]=S.useState("interactive"),[c,l]=S.useState(""),[a,u]=S.useState(!1),g=S.useMemo(()=>lt(s,{...t.templateConfig,conversionIdentifier:r}),[s,t.templateConfig,r]);S.useEffect(()=>{h==="html"&&!a&&(l(g),u(!0))},[h,g,a]),S.useEffect(()=>{h==="interactive"&&u(!1)},[h]);const x=(o,d)=>{n({templateConfig:{...t.templateConfig,[o]:d}})},y=()=>{h==="html"&&a&&n({customHtml:c}),m()},i={"high-impact":Ee,"moving-marketing":He,"christmas-memories":Me,"christmas-magic":Fe,"gradient-surge":Re,"clean-convert":Pe}[s];return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"fixed inset-0 bg-black/90 z-[9999] overflow-hidden flex items-center justify-center p-4",children:e.jsxs("div",{className:"bg-[#1C1C1C] backdrop-blur-xl border border-white/10 rounded-lg shadow-2xl w-full max-w-[95vw] max-h-[92vh] h-[92vh] flex flex-col overflow-hidden",children:[e.jsxs("div",{className:"bg-[#1C1C1C] backdrop-blur-md border-b border-white/10 px-6 py-3 flex items-center justify-between flex-shrink-0",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-2 h-2 rounded-full bg-signal animate-pulse"}),e.jsx("input",{type:"text",value:t.name,onChange:o=>n({name:o.target.value}),className:"bg-transparent border-b border-transparent hover:border-white/10 focus:border-signal px-1 py-1 text-paper text-base font-semibold focus:outline-none transition-colors",placeholder:"Variation name"}),e.jsx("span",{className:"text-white/65 text-xs",children:"|"}),e.jsx("span",{className:"text-xs text-white/65 font-medium",children:ve(s)})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("button",{onClick:()=>w(!0),className:"text-xs text-white/65 hover:text-paper transition-colors flex items-center gap-1.5 px-3 py-2 rounded-lg hover:bg-[#242424] border border-transparent hover:border-white/10",children:[e.jsx(At,{className:"w-3.5 h-3.5"}),"Preview"]}),e.jsx("button",{onClick:p||m,className:"text-xs text-white/65 hover:text-paper transition-colors px-4 py-2 rounded-lg border border-white/10 hover:bg-[#242424]",children:"Cancel"}),e.jsxs("button",{onClick:y,className:"text-xs text-paper font-medium px-4 py-2 bg-signal hover:bg-signal/80 rounded-lg transition-colors flex items-center gap-1.5",children:[e.jsx(Ge,{className:"w-3.5 h-3.5"}),"Save & Close"]})]})]}),e.jsx("div",{className:"flex-shrink-0 border-b border-white/10 bg-[#1C1C1C]/60 px-6",children:e.jsxs("div",{className:"flex gap-0",children:[e.jsx("button",{onClick:()=>B("interactive"),className:`px-4 py-2.5 text-xs font-semibold transition-all border-b-2 ${h==="interactive"?"text-paper border-signal":"text-white/65 border-transparent hover:text-paper"}`,children:"Interactive Editor"}),e.jsx("button",{onClick:()=>B("html"),className:`px-4 py-2.5 text-xs font-semibold transition-all border-b-2 ${h==="html"?"text-paper border-signal":"text-white/65 border-transparent hover:text-paper"}`,children:"HTML Editor"})]})}),e.jsx("div",{className:"flex-1 overflow-hidden flex",children:h==="interactive"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"flex-1 bg-[#1C1C1C] overflow-y-auto",children:e.jsxs("div",{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx("div",{className:"w-1.5 h-1.5 rounded-full bg-[#3FA86B]"}),e.jsx("span",{className:"text-[10px] font-semibold text-white/65",children:"Live Preview"})]}),e.jsx("div",{className:"w-full rounded-md overflow-hidden shadow-2xl shadow-black/50 border border-white/10 ring-1 ring-white/10",children:i&&e.jsx(i,{config:t.templateConfig})})]})}),e.jsx("div",{className:"w-[380px] bg-[#1C1C1C] border-l border-white/10 overflow-y-auto flex-shrink-0",children:e.jsxs("div",{className:"p-5 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx(Dt,{className:"w-4 h-4 text-white/65"}),e.jsx("span",{className:"text-[10px] font-semibold text-white/65",children:"Configuration"})]}),e.jsxs(re,{title:"Badge",defaultOpen:!0,icon:e.jsx(It,{className:"w-4 h-4"}),children:[e.jsxs("div",{children:[e.jsx(O,{children:"Badge Text"}),e.jsx(K,{value:t.templateConfig.badgeText,onChange:o=>x("badgeText",o.target.value)})]}),e.jsxs("div",{className:"grid grid-cols-3 gap-3",children:[e.jsx(L,{label:"Text",value:t.templateConfig.badgeTextColor,onChange:o=>x("badgeTextColor",o.target.value)}
517),e.jsx(L,{label:"Background",value:t.templateConfig.badgeBgColor,onChange:o=>x("badgeBgColor",o.target.value)}),e.jsx(L,{label:"Border",value:t.templateConfig.badgeBorderColor,onChange:o=>x("badgeBorderColor",o.target.value)})]})]}),e.jsxs(re,{title:"Headlines",defaultOpen:!0,icon:e.jsx(zt,{className:"w-4 h-4"}),children:[e.jsxs("div",{children:[e.jsx(O,{children:"Main Headline"}),e.jsx(K,{value:t.templateConfig.mainHeadline,onChange:o=>x("mainHeadline",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Color",value:t.templateConfig.mainHeadlineColor,onChange:o=>x("mainHeadlineColor",o.target.value)})})]}),e.jsxs("div",{children:[e.jsx(O,{children:"Sub Headline"}),e.jsx(K,{value:t.templateConfig.subHeadline,onChange:o=>x("subHeadline",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Color",value:t.templateConfig.subHeadlineColor,onChange:o=>x("subHeadlineColor",o.target.value)})})]}),s==="high-impact"&&e.jsxs("div",{children:[e.jsx(O,{children:"Accent Headline"}),e.jsx(K,{value:t.templateConfig.accentHeadline,onChange:o=>x("accentHeadline",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Color",value:t.templateConfig.accentHeadlineColor,onChange:o=>x("accentHeadlineColor",o.target.value)})})]})]}),e.jsx(re,{title:"Description",icon:e.jsx($e,{className:"w-4 h-4"}),children:e.jsxs("div",{children:[e.jsx(O,{children:"Description Text"}),e.jsx(K,{multiline:!0,value:t.templateConfig.description,onChange:o=>x("description",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Color",value:t.templateConfig.descriptionColor,onChange:o=>x("descriptionColor",o.target.value)})})]})}),e.jsxs(re,{title:"Primary Button",icon:e.jsx(Ae,{className:"w-4 h-4"}),children:[e.jsxs("div",{children:[e.jsx(O,{children:"Button Text"}),e.jsx(K,{value:t.templateConfig.primaryButtonText,onChange:o=>x("primaryButtonText",o.target.value)})]}),e.jsxs("div",{children:[e.jsx(O,{children:"Button Link URL"}),e.jsx(K,{value:t.templateConfig.primaryButtonLink||"",onChange:o=>x("primaryButtonLink",o.target.value),placeholder:"/contact or https://..."})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(L,{label:"Background",value:t.templateConfig.primaryButtonBgColor,onChange:o=>x("primaryButtonBgColor",o.target.value)}),e.jsx(L,{label:"Text",value:t.templateConfig.primaryButtonTextColor,onChange:o=>x("primaryButtonTextColor",o.target.value)})]}),e.jsx(Oe,{checked:!!t.templateConfig.primaryButtonIsConversion,onChange:()=>x("primaryButtonIsConversion",!t.templateConfig.primaryButtonIsConversion)})]}),e.jsxs(re,{title:"Secondary Button",icon:e.jsx(Lt,{className:"w-4 h-4"}),children:[e.jsxs("div",{children:[e.jsx(O,{children:"Button Text"}),e.jsx(K,{value:t.templateConfig.secondaryButtonText,onChange:o=>x("secondaryButtonText",o.target.value)})]}),e.jsxs("div",{children:[e.jsx(O,{children:"Button Link URL"}),e.jsx(K,{value:t.templateConfig.secondaryButtonLink||"",onChange:o=>x("secondaryButtonLink",o.target.value),placeholder:"/gallery or https://..."})]}),e.jsxs("div",{className:"grid grid-cols-3 gap-3",children:[e.jsxs("div",{children:[e.jsx(O,{sub:!0,children:"Backgroun
517d"}),e.jsx("input",{type:"text",value:t.templateConfig.secondaryButtonBgColor,onChange:o=>x("secondaryButtonBgColor",o.target.value),className:"w-full bg-[#1C1C1C]/60 border border-white/10 rounded-lg px-2.5 py-1.5 text-xs text-paper font-mono focus:outline-none focus:border-signal transition-colors",placeholder:"transparent"})]}),e.jsx(L,{label:"Text",value:t.templateConfig.secondaryButtonTextColor,onChange:o=>x("secondaryButtonTextColor",o.target.value)}),e.jsx(L,{label:"Border",value:t.templateConfig.secondaryButtonBorderColor,onChange:o=>x("secondaryButtonBorderColor",o.target.value)})]}),e.jsx(Oe,{checked:!!t.templateConfig.secondaryButtonIsConversion,onChange:()=>x("secondaryButtonIsConversion",!t.templateConfig.secondaryButtonIsConversion)})]}),t.templateConfig.callToActionBgColor&&e.jsxs(re,{title:"Call To Action",icon:e.jsx(Et,{className:"w-4 h-4"}),children:[e.jsx(L,{label:"CTA Background",value:t.templateConfig.callToActionBgColor,onChange:o=>x("callToActionBgColor",o.target.value)}),e.jsxs("div",{children:[e.jsx(O,{children:"CTA Header"}
517),e.jsx(K,{value:t.templateConfig.callToActionHeader,onChange:o=>x("callToActionHeader",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Header Color",value:t.templateConfig.callToActionHeaderColor,onChange:o=>x("callToActionHeaderColor",o.target.value)})})]}),e.jsxs("div",{children:[e.jsx(O,{children:"Phone Number"}),e.jsx(K,{value:t.templateConfig.phoneNumber,onChange:o=>x("phoneNumber",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Phone Color",value:t.templateConfig.phoneNumberColor,onChange:o=>x("phoneNumberColor",o.target.value)})})]}),e.jsxs("div",{children:[e.jsx(O,{children:"CTA Text"}),e.jsx(K,{multiline:!0,rows:2,value:t.templateConfig.callToActionText,onChange:o=>x("callToActionText",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Text Color",value:t.templateConfig.callToActionTextColor,onChange:o=>x("callToActionTextColor",o.target.value)})})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(L,{label:"Button BG",value:t.templateConfig.callToActionButtonBgColor,onChange:o=>x("callToActionButtonBgColor",o.target.value)}),e.jsx(L,{label:"Button Text",value:t.templateConfig.callToActionButtonTextColor,onChange:o=>x("callToActionButtonTextColor",o.target.value)})]}),e.jsx(Oe,{checked:!!t.templateConfig.ctaButtonIsConversion,onChange:()=>x("ctaButtonIsConversion",!t.templateConfig.ctaButtonIsConversion),label:"Set as conversion (Call Now)"})]}),s==="moving-marketing"&&e.jsxs(re,{title:"Statistics",icon:e.jsx(fe,{className:"w-4 h-4"}),children:[e.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[e.jsxs("div",{children:[e.jsx(O,{children:"Stat 1 Number"}),e.jsx(K,{value:t.templateConfig.stat1Number,onChange:o=>x("stat1Number",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Number Color",value:t.templateConfig.stat1NumberColor,onChange:o=>x("stat1NumberColor",o.target.value)})})]}),e.jsxs("div",{children:[e.jsx(O,{children:"Stat 1 Label"}),e.jsx(K,{value:t.templateConfig.stat1Label,onChange:o=>x("stat1Label",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Label Color",value:t.templateConfig.stat1LabelColor,onChange:o=>x("stat1LabelColor",o.target.value)})})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[e.jsxs("div",{children:[e.jsx(O,{children:"Stat 2 Number"}),e.jsx(K,{value:t.templateConfig.stat2Number,onChange:o=>x("stat2Number",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Number Color",value:t.templateConfig.stat2NumberColor,onChange:o=>x("stat2NumberColor",o.target.value)})})]}),e.jsxs("div",{children:[e.jsx(O,{children:"Stat 2 Label"}),e.jsx(K,{value:t.templateConfig.stat2Label,onChange:o=>x("stat2Label",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Label Color",value:t.templateConfig.stat2LabelColor,onChange:o=>x("stat2LabelColor",o.target.value)})})]})]})]}),s==="gradient-surge"&&e.jsxs(e.Fragment,{children:[e.jsx(re,{title:"Statistics",icon:e.jsx(fe,{className:"w-4 h-4"}),children:[1,2,3].map(o=>e.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[e.jsxs("div",{children:[e.jsxs(O,{children:["Stat ",o," Number"]}),e.jsx(K,{value:t.templateConfig[`stat${o}Number`],onChange:d=>x(`stat${o}Number`,d.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Color",value:t.templateConfig[`stat${o}NumberColor`],onChange:d=>x(`stat${o}NumberColor`,d.target.value)})})]}),e.jsxs("div",{children:[e.jsxs(O,{children:["Stat ",o," Label"]}),e.jsx(K,{value:t.templateConfig[`stat${o}Label`],onChange:d=>x(`stat${o}Label`,d.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Color",value:t.templateConfig[`stat${o}LabelColor`],onChange:d=>x(`stat${o}LabelColor`,d.target.value)})})]})]},o))}),e.jsxs(re,{title:"Features",icon:e.jsx(Ge,{className:"w-4 h-4"}),children:[[1,2,3].map(o=>e.jsxs("div",{children:[e.jsxs(O,{children:["Feature ",o]}),e.jsx(K,{value:t.templateConfig[`feature${o}Text`],onChange:d=>x(`feature${o}Text`,d.target.value)})]},o)),e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(L,{label:"Dot Color",value:t.templateConfig.featureDotColor,onChange:o=>x("featureDotColor",o.target.value)}),e.jsx(L,{label:"Text Color",value:t.templateConfig.featureTextColor,onChange:o=>x("featureTextColor",o.target.value)})]})]}),e.jsx(re,{title:"Gradient",icon:e.jsx(Ye,{className:"w-4 h-4"}),children:e.jsxs("div",{className:"grid grid-cols-3 gap-3",children:[e.jsx(L,{label:"From",value:t.templateConfig.gradientFrom,onChange:o=>x("gradientFrom",o.target.value)}),e.jsx(L,{label:"Via",value:t.templateConfig.gradientVia,onChange:o=>x("gradientVia",o.target.value)}),e.jsx(L,{label:"To",value:t.templateConfig.gradientTo,onChange:o=>x("gradientTo",o.target.value)})]})})]}),s==="clean-convert"&&e.jsxs(e.Fragment,{children:[e.jsxs(re,{title:"Feature Cards",icon:e.jsx(ut,{className:"w-4 h-4"}),children:[[1,2,3].map(o=>e.jsxs("div",{className:"space-y-2",children:[e.jsxs(O,{children:["Card ",o," Title"]}),e.jsx(K,{value:t.templateConfig[`feature${o}Title`],onChange:d=>x(`feature${o}Title`,d.target.value)}),e.jsxs(O,{sub:!0,children:["Card ",o," Text"]}),e.jsx(K,{value:t.templateConfig[`feature${o}Text`],onChange:d=>x(`feature${o}Text`,d.target.value)})]},o)),e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(L,{label:"Card BG",value:t.templateConfig.featureCardBgColor,onChange:o=>x("featureCardBgColor",o.target.value)}),e.jsx(L,{label:"Card Border",value:t.templateConfig.featureCardBorderColor,onChange:o=>x("featureCardBorderColor",o.target.value)})]}),e.jsxs("div",{className:"grid grid-cols-3 gap-3",children:[e.jsx(L,{label:"Title",value:t.templateConfig.featureCardTitleColor,onChange:o=>x("featureCardTitleColor",o.target.value)}),e.jsx(L,{label:"Text",value:t.templateConfig.featureCardTextColor,onChange:o=>x("featureCardTextColor",o.target.value)}),e.jsx(L,{label:"Icon",value:t.templateConfig.featureIconColor,onChange:o=>x("featureIconColor",o.target.value)})]})]}),e.jsxs(re,{title:"Testimonial",icon:e.jsx(Ht,{className:"w-4 h-4"}),children:[e.jsxs("div",{children:[e.jsx(O,{children:"Quote"}),e.jsx(K,{multiline:!0,value:t.templateConfig.testimonialText,onChange:o=>x("testimonialText",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Text Color",value:t.templateConfig.testimonialTextColor,onChange:o=>x("testimonialTextColor",o.target.value)})})]}),e.jsxs("div",{children:[e.jsx(O,{children:"Author"}),e.jsx(K,{value:t.templateConfig.testimonialAuthor,onChange:o=>x("testimonialAuthor",o.target.value)}),e.jsx("div",{className:"mt-2",children:e.jsx(L,{label:"Author Color",value:t.templateConfig.testimonialAuthorColor,onChange:o=>x("testimonialAuthorColor",o.target.value)})})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(L,{label:"BG",value:t.templateConfig.testimonialBgColor,onChange:o=>x("testimonialBgColor",o.target.value)}),e.jsx(L,{label:"Border",value:t.templateConfig.testimonialBorderColor,onChange:o=>x("testimonialBorderColor",o.target.value)})]})]})]}
517),e.jsxs(re,{title:"Brand & Background",icon:e.jsx(Ye,{className:"w-4 h-4"}),children:[e.jsxs("div",{children:[e.jsx(O,{children:"Brand Color"}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"relative shrink-0",children:[e.jsx("input",{type:"color",value:t.templateConfig.brandColor,onChange:o=>x("brandColor",o.target.value),className:"absolute inset-0 opacity-0 cursor-pointer w-full h-full"}),e.jsx("div",{className:"w-10 h-10 rounded-md border-2 border-white/10 shadow-lg cursor-pointer",style:{backgroundColor:t.templateConfig.brandColor}})]}),e.jsx("input",{type:"text",value:t.templateConfig.brandColor,onChange:o=>x("brandColor",o.target.value),className:"flex-1 bg-[#1C1C1C]/60 border border-white/10 rounded-lg px-3 py-2 text-sm text-paper font-mono focus:outline-none focus:border-signal transition-colors"})]})]}),e.jsx(L,{label:"Background Color",value:t.templateConfig.backgroundColor,onChange:o=>x("backgroundColor",o.target.value)}),e.jsxs("div",{children:[e.jsx(O,{children:"Backgroun
517d Image URL"}),e.jsx(K,{value:t.templateConfig.backgroundImage,onChange:o=>x("backgroundImage",o.target.value),placeholder:"https://example.com/image.jpg"})]})]})]})})]}):e.jsxs("div",{className:"flex-1 flex flex-col overflow-hidden",children:[e.jsxs("div",{className:"flex items-center justify-between px-6 py-3 border-b border-white/10 flex-shrink-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(Mt,{className:"w-4 h-4 text-white/65"}),e.jsx("span",{className:"text-[10px] font-semibold text-white/65",children:"HTML Source"})]}),e.jsx("div",{className:"flex items-center gap-2",children:e.jsx("button",{onClick:()=>l(g),className:"text-[10px] text-white/65 hover:text-paper transition-colors px-2.5 py-1.5 rounded border border-white/10 hover:bg-[#242424]",children:"Reset to Generated"})})]}),e.jsxs("div",{className:"flex-1 flex overflow-hidden",children:[e.jsx("div",{className:"flex-1 overflow-hidden",children:e.jsx("textarea",{value:c,onChange:o=>l(o.target.value),spellCheck:!1,className:"w-full h-full bg-[#1C1C1C] text-paper font-mono text-xs leading-relaxed p-6 resize-none focus:outline-none border-none selection:bg-signal/30",style:{tabSize:2}})}),e.jsxs("div",{className:"w-[45%] border-l border-white/10 bg-[#fff] overflow-y-auto flex-shrink-0",children:[e.jsx("div",{className:"sticky top-0 z-10 bg-[#1C1C1C] backdrop-blur-md border-b border-white/10 px-4 py-2",children:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-1.5 h-1.5 rounded-full bg-[#3FA86B]"}),e.jsx("span",{className:"text-[10px] font-semibold text-white/65",children:"Preview"})]})}),e.jsx("div",{dangerouslySetInnerHTML:{__html:c}})]})]})]})})]})}),f&&e.jsxs("div",{className:"fixed inset-0 bg-black z-[10000] overflow-auto",children:[e.jsxs("div",{className:"sticky top-0 z-10 bg-[#1C1C1C] backdrop-blur-md border-b border-white/10 px-6 py-3 flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-1.5 h-1.5 rounded-full bg-[#3FA86B]"}),e.jsx("span",{className:"text-sm text-paper font-medium",children:t.name})]}),e.jsx("button",{onClick:()=>w(!1),className:"text-xs text-white/65 hover:text-paper transition-colors px-4 py-2 rounded-lg border border-white/10 hover:bg-[#242424]",children:"Close Preview"})]}),e.jsx("div",{className:"w-full",children:i&&e.jsx(i,{config:t.templateConfig})})]})]})},ds=({onSelect:t,onClose:s})=>{const r=[{id:"high-impact",name:"High Impact Layout",description:"Bold two-column layout with prominent CTA"},{id:"moving-marketing",name:"Moving Marketing",description:"Modern centered design with statistics"},{id:"christmas-memories",name:"Christmas Memories",description:"Centered Christmas hero with deadline urgency"},{id:"christmas-magic",name:"Christmas Magic",description:"Left-aligned Christmas design with feature cards"},{id:"gradient-surge",name:"Gradient Surge",description:"Bold gradient hero with split layout and stats"},{id:"clean-convert",name:"Clean Convert",description:"Light, conversion-focused hero with testimonials"}];return e.jsx("div",{className:"fixed inset-0 bg-black/70 flex items-center justify-center z-[9999] p-4",children:e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto",children:[e.jsxs("div",{className:"p-6 border-b border-white/10 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"text-2xl font-bold text-paper mb-2",children:"Choose a Template"}),e.jsx("p",{className:"text-white/65",children:"Select a template for your content variation"})]}),e.jsx("button",{onClick:s,className:"text-white/65 hover:text-paper transition-colors",children:e.jsx(ke,{className:"w-6 h-6"})})]}),e.jsx("div",{className:"p-6",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:r.map(n=>e.jsxs("button",{onClick:()=>t(n.id),className:"group bg-[#1C1C1C] border border-white/10 rounded-lg p-6 text-left hover:border-signal transition-all hover:shadow-lg hover:shadow-signal/10",children:[e.jsx("div",{className:"bg-[#1C1C1C] rounded-lg mb-4 border border-white/10 group-hover:border-signal/50 transition-colors overflow-hidden relative",style:{height:"180px"},children:e.jsxs("div",{style:{transform:"scale(0.3)",transformOrigin:"top left",width:"333%",height:"333%"}
517,children:[n.id==="high-impact"&&e.jsx(Ee,{config:we}),n.id==="moving-marketing"&&e.jsx(He,{config:we}),n.id==="christmas-memories"&&e.jsx(Me,{config:ot}),n.id==="christmas-magic"&&e.jsx(Fe,{config:at}),n.id==="gradient-surge"&&e.jsx(Re,{config:nt}),n.id==="clean-convert"&&e.jsx(Pe,{config:it})]})}),e.jsx("h3",{className:"text-lg font-semibold text-paper mb-2 group-hover:text-signal transition-colors",children:n.name}),e.jsx("p",{className:"text-sm text-white/65",children:n.description})]},n.id))})})]})})},cs=({user:t,activeClient:s,onSave:r})=>{const{addDynamicView:n,activeProject:m}=ze(),[p,f]=S.useState({name:"",segmentType:"Google Search",segmentKeyParameters:"",impressionsBeforeAction:100,conversionIdentifier:"conversionTrigger",rootIdentifier:"uxdRoot"}),[w,h]=S.useState([]),[B,c]=S.useState(null),[l,a]=S.useState(!1),[u,g]=S.useState(!1),x=d=>{const v={_id:Array.from({length:24},()=>Math.floor(Math.random()*16).toString(16)).join(""),name:`Variation ${w.length+1}`,template:d,templateConfig:{...wt(d)},content:"",impressions:0,conversions:0,impressionDate:[],conversionDate:[],rawData:{}};h([...w,v]),c(v._id),a(!1)},y=(d,v)=>{h(w.map(C=>C._id===d?{...C,...v}:C))},k=d=>{h(w.filter(v=>v._id!==d)),B===d&&c(null)},i=async d=>{if(d.preventDefault(),w.length===0){alert("Please add at least one content variation");return}if(!p.name||!p.rootIdentifier||!p.segmentKeyParameters){alert("Please fill in all required fields");return}g(!0);const v=w.map($=>({name:$.name,content:$.customHtml||lt($.template,{...$.templateConfig,conversionIdentifier:p.conversionIdentifier}),templateId:$.template,templateName:ve($.template),templateConfig:{...$.templateConfig},customHtml:$.customHtml||void 0,impressions:0,conversions:0,impressionDate:[],conversionDate:[],rawData:$.rawData||{}})),C={company_id:t._id,client_id:s._id,projectName:p.name,dynamicViews:[{name:p.name,segmentType:p.segmentType,rootIdentifier:p.rootIdentifier,segmentKeyParameters:p.segmentKeyParameters,impressionsBeforeAction:p.impressionsBeforeAction,conversionIdentifier:p.conversionIdentifier,contentVariations:v,currentImpressions:0,conversionTrigger:p.conversionIdentifier}]};try{console.log(C),console.log(m);let $=await n({data:{...C.dynamicViews[0],projectId:m==null?void 0:m._id,projectName:m==null?void 0:m.projectName}});console.log($),$!=null&&$.msg?Ft.success($==null?void 0:$.msg,{duration:4e3,icon:"ð¥"}):(h([]),c(null))}catch($){console.error("Error saving dynamic view:",$),alert("Failed to save dynamic view. Please try again.")}finally{g(!1)}},o=w.find(d=>d._id===B);return e.jsxs(e.Fragment,{children:[e.jsxs("form",{onSubmit:i,className:"space-y-6",children:[e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg p-6",children:[e.jsx("h3",{className:"text-xl font-semibold text-paper mb-6",children:"Create New Dynamic View"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"View Name *"}),e.jsx("input",{type:"text",value:p.name,onChange:d=>f({...p,name:d.target.value}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper placeholder-white/40 focus:outline-none focus:border-signal transition-colors",placeholder:"e.g., Vehicle Wraps Campaign",required:!0})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"Segment Type *"}),e.jsxs("select",{value:p.segmentType,onChange:d=>f({...p,segmentType:d.target.value}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper focus:outline-none focus:border-signal transition-colors",required:!0,children:[e.jsx("option",{value:"Google Search",children:"Google Search"}),e.jsx("option",{value:"Facebook",children:"Facebook"}),e.jsx("option",{value:"Email",children:"Email"}),e.jsx("option",{value:"Other",children:"Other"})]})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"Root Identifier *"}
517),e.jsx("input",{type:"text",value:p.rootIdentifier,onChange:d=>f({...p,rootIdentifier:d.target.value}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper placeholder-white/40 focus:outline-none focus:border-signal transition-colors",placeholder:"e.g., #dynamic-content-root",required:!0}),e.jsx("p",{className:"text-white/65 text-xs mt-1",children:"CSS selector where dynamic content will be injected"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"Segment Key Parameters *"}),e.jsx("input",{type:"text",value:p.segmentKeyParameters,onChange:d=>f({...p,segmentKeyParameters:d.target.value}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper placeholder-white/40 focus:outline-none focus:border-signal transition-colors",placeholder:"e.g., utm_campaign=vehicle-wraps",required:!0}),e.jsx("p",{className:"text-white/65 text-xs mt-1",children:"URL parameters to identify this segment"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"Impressions Before Action *"}),e.jsx("input",{type:"number",value:p.impressionsBeforeAction,onChange:d=>f({...p,impressionsBeforeAction:parseInt(d.target.value)}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper focus:outline-none focus:border-signal transition-colors",min:"1",required:!0}),e.jsx("p",{className:"text-white/65 text-xs mt-1",children:"Number of impressions before switching variations"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"Conversion Identifier *"}),e.jsx("input",{type:"text",value:p.conversionIdentifier,onChange:d=>f({...p,conversionIdentifier:d.target.value}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper placeholder-white/40 focus:outline-none focus:border-signal transition-colors",placeholder:"e.g., .conversion-button",required:!0}),e.jsx("p",{className:"text-white/65 text-xs mt-1",children:"CSS selector for conversion tracking"})]})]})]}),e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg p-6",children:[e.jsxs("div",{className:"flex items-center justify-between mb-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-paper mb-2",children:"Content Variations"}),e.jsx("p",{className:"text-white/65 text-sm",children:"Add at least one content variation for A/B testing"})]}),e.jsxs("button",{type:"button",onClick:()=>a(!0),className:"bg-signal hover:bg-signal/80 text-paper font-medium py-2 px-4 rounded-lg transition-colors flex items-center gap-2",children:[e.jsx(De,{className:"w-5 h-5"}),"Add Content Variation"]})]}),w.length===0?e.jsxs("div",{className:"text-center py-12 border-2 border-dashed border-white/10 rounded-lg",children:[e.jsx(De,{className:"w-12 h-12 text-white/65 mx-auto mb-3"}),e.jsx("p",{className:"text-white/65 mb-2",children:"No content variations yet"}),e.jsx("p",{className:"text-white/65 text-sm",children:'Click "Add Content Variation" to create your first variation'})]}):e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3",children:w.map((d,v)=>e.jsxs("div",{className:"border rounded-lg overflow-hidden cursor-pointer transition-all border-white/10 bg-[#1C1C1C]/30 hover:border-white/10",onClick:()=>c(d._id),children:[e.jsx("div",{className:"bg-[#1C1C1C] border-b border-white/10 overflow-hidden relative",style:{height:"120px"},children:e.jsxs("div",{style:{transform:"scale(0.2)",transformOrigin:"top left",width:"500%",height:"500%"},children:[d.template==="high-impact"&&e.jsx(Ee,{config:d.templateConfig}),d.template==="moving-marketing"&&e.jsx(He,{config:d.templateConfig}),d.template==="christmas-memories"&&e.jsx(Me,{config:d.templateConfig}),d.template==="christmas-magic"&&e.jsx(Fe,{config:d.templateConfig}),d.template==="gradient-surge"&&e.jsx(Re,{config:d.templateConfig}),d.template==="clean-convert"&&e.jsx(Pe,{config:d.templateConfig})]})}),e.jsxs("div",{className:"p-4",children:[e.jsxs("div",{className:"flex items-start justify-between mb-2",children:[e.jsxs("div",{className:"flex-1",children:[e.jsx("h4",{className:"text-paper font-medium",children:d.name}),e.jsxs("p",{className:"text-white/65 text-sm",children:["Variation ",v+1," ⢠",ve(d.template)]})]}),e.jsx("button",{type:"button",onClick:C=>{C.stopPropagation(),k(d._id)},className:"text-[#D6604F] hover:text-[#D6604F] transition-colors",children:e.jsx(bt,{className:"w-5 h-5"})})]}),e.jsxs("button",{type:"button",onClick:C=>{C.stopPropagation(),c(d._id)},className:"w-full mt-2 text-xs text-signal hover:text-[#D6604F] flex items-center justify-center gap-1 py-1.5 border border-signal/30 rounded hover:bg-signal/10 transition-colors",children:[e.jsx(qe,{className:"w-3.5 h-3.5"}),"Edit Variation"]})]})]},d._id))})]}),e.jsxs("div",{className:"flex space-x-4",children:[e.jsx("button",{type:"submit",disabled:u||w.length===0,className:"flex-1 px-6 py-3 bg-signal hover:bg-signal/80 rounded-lg text-paper font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed",children:u?"Creating...":"Create Dynamic View"}),e.jsx("button",{type:"button",onClick:()=>{f({name:"",segmentType:"Google Search",segmentKeyParameters:"",impressionsBeforeAction:100,conversionIdentifier:"conversionTrigger",rootIdentifier:""}),h([]),c(null)},className:"px-6 py-3 bg-white/10 hover:bg-white/10 rounded-lg text-paper font-medium transition-colors",children:"Reset"})]}),e.jsx("div",{className:"bg-signal/10 border border-signal/30 rounded-lg p-4",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx(vt,{className:"w-5 h-5 text-signal mt-0.5 mr-3 flex-shrink-0"}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-signal font-medium mb-1",children:"What are Dynamic Views?"}),e.jsx("p",{className:"text-paper text-sm",children:"Dynamic Views allow you to test different c
517ontent variations for specific audience segments. The system will automatically rotate between variations and track performance to help you optimize conversions."})]})]})})]}),l&&e.jsx(ds,{onSelect:x,onClose:()=>a(!1)}),o&&e.jsx(Nt,{variation:o,template:o.template,conversionIdentifier:p.conversionIdentifier||"",onUpdate:d=>y(B,d),onClose:()=>c(null)})]})},ms=({onSelect:t,onClose:s})=>{const r=[{id:"high-impact",name:"High Impact Layout",description:"Bold two-column layout with prominent CTA"},{id:"moving-marketing",name:"Moving Marketing",description:"Modern centered design with statistics"},{id:"christmas-memories",name:"Christmas Memories",description:"Centered Christmas hero with deadline urgency"},{id:"christmas-magic",name:"Christmas Magic",description:"Left-aligned Christmas design with feature cards"},{id:"gradient-surge",name:"Gradient Surge",description:"Bold gradient hero with split layout and stats"},{id:"clean-convert",name:"Clean Convert",description:"Light, conversion-focused hero with testimonials"}];return e.jsx("div",{className:"fixed inset-0 bg-black/70 flex items-center justify-center z-[9999] p-4",children:e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto",children:[e.jsxs("div",{className:"p-6 border-b border-white/10 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"text-2xl font-bold text-paper mb-2",children:"Choose a Template"}),e.jsx("p",{className:"text-white/65",children:"Select a template for your content variation"})]}),e.jsx("button",{onClick:s,className:"text-white/65 hover:text-paper transition-colors",children:e.jsx(ke,{className:"w-6 h-6"})})]}),e.jsx("div",{className:"p-6",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:r.map(n=>e.jsxs("button",{onClick:()=>t(n.id),className:"group bg-[#1C1C1C] border border-white/10 rounded-lg p-6 text-left hover:border-signal transition-all hover:shadow-lg hover:shadow-signal/10",children:[e.jsx("div",{className:"bg-[#1C1C1C] rounded-lg mb-4 border border-white/10 group-hover:border-signal/50 transition-colors overflow-hidden relative",style:{height:"180px"},children:e.jsxs("div",{style:{transform:"scale(0.3)",transformOrigin:"top left",width:"333%",height:"333%"},children:[n.id==="high-impact"&&e.jsx(Ee,{config:we}),n.id==="moving-marketing"&&e.jsx(He,{config:we}),n.id==="christmas-memories"&&e.jsx(Me,{config:ot}),n.id==="christmas-magic"&&e.jsx(Fe,{config:at}),n.id==="gradient-surge"&&e.jsx(Re,{config:nt}),n.id==="clean-convert"&&e.jsx(Pe,{config:it})]})}),e.jsx("h3",{className:"text-lg font-semibold text-paper mb-2 group-hover:text-signal transition-colors",children:n.name}),e.jsx("p",{className:"text-sm text-white/65",children:n.description})]},n.id))})})]})})},xs=({dynamicViews:t,projectAnalyticsDV:s,getSegmentTypeColor:r,formatDate:n,calculateConversionRate:m,onUpdate:p})=>{var q;const[f,w]=S.useState(null),[h,B]=S.useState(null),[c,l]=S.useState(null),a=Xe.useMemo(()=>{const b={};if(!s||s.length===0)return null;const E=s.flatMap(H=>H.action||[]).filter(H=>H.converted),z={};return E.forEach(H=>{var me;const ne=((me=H.rawData)==null?void 0:me.viewId)||H.viewId;ne&&(z[ne]||(z[ne]=new Set),z[ne].add(H.sessionId))}),Object.entries(z).forEach(([H,ne])=>{b[H]=ne.size}),b},[s]),u=b=>a&&b._id?a[b._id]||0:b.conversions||0,g=b=>{var T,E;return a?((T=b.contentVariations)==null?void 0:T.reduce((z,H)=>z+(a[H._id]||0),0))||0:((E=b.contentVariations)==null?void 0:E.reduce((z,H)=>z+(H.conversions||0),0))||0},[x,y]=S.useState(null),[k,i]=S.useState(null),[o,d]=S.useState(null),[v,C]=S.useState(!1),{editDynamicView:$}=ze(),{activeClient:I}=rt(),P=b=>{y(b),i({name:b.name,segmentType:b.segmentType,rootIdentifier:b.rootIdentifier,segmentKeyParameters:b.segmentKeyParameters,impressionsBeforeAction:b.impressionsBeforeAction,conversionIdentifier:b.conversionIdentifier,contentVariations:b.contentVariations.map(T=>({...T,template:T.templateId||T.template||null,templateConfig:T.templateConfig||null}))})},Y=async()=>{if(!k.name||!k.rootIdentifier||!k.segmentKeyParameters){alert("Please fill in all required fields");return}const b=k.contentVariations.map(z=>{const H=z.templateId||z.template;return H&&z.templateConfig?{...z,content:z.customHtml||lt(H,{...z.templateConfig,conversionIdentifier:k.conversionIdentifier}),templateId:H,templateName:ve(H),templateConfig:{...z.templateConfig},customHtml:z.customHtml||void 0}:z}),T={...x,...k,contentVariations:b};p&&await p(T),console.log(T),console.log(I);const E=await $({data:T,dv:t});E!=null&&E.msg||(y(null),i(null),d(null))},M=(b,T)=>{i(E=>({...E,contentVariations:E.contentVariations.map(z=>z._id===b?{...z,...T}:z)}))},G=b=>{i(T=>({...T,contentVariations:T.contentVariations.filter(E=>E._id!==b)})),o===b&&d(null)},j=b=>{const T={_id:Array.from({length:24},()=>Math.floor(Math.random()*16).toString(16)).join(""),name:`Variation ${k.contentVariations.length+1}`,template:b,templateId:b,templateName:ve(b),templateConfig:{...wt(b)},content:"",impressions:0,conversions:0,impressionDate:[],conversionDate:[],rawData:{}};i(E=>({...E,contentVariations:[...E.contentVariations,T]})),d(T._id),C(!1)};S.useEffect(()=>{console.log(t)});const N=(q=k==null?void 0:k.contentVariations)==null?void 0:q.find(b=>b._id===o),D=(N==null?void 0:N.templateId)||(N==null?void 0:N.template);return e.jsxs("div",{className:"space-y-6",children:[e.jsx("div",{className:"space-y-6",children:(t==null?void 0:t.length)>0?t.map(b=>{var de,R,ce;const T=((de=b.contentVariations)==null?void 0:de.reduce((F,se)=>F+(se.impressions||0),0))||0,E=g(b),z=m(E,T),H=((R=b.contentVariations)==null?void 0:R.length)||0,ne=b.impressionsBeforeAction||0,me=f===b._id,pe=[...b.contentVariations||[]].map(F=>{const se=u(F),ie=F.impressions||0,xe=ie>
5170?se/ie:0;return{v:F,conv:se,imp:ie,rate:xe}}).sort((F,se)=>se.rate-F.rate),ue=((ce=pe[0])==null?void 0:ce.rate)>0?pe[0].v._id:null;return e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg overflow-hidden",children:[e.jsx("div",{className:"px-6 py-5 border-b border-white/10 bg-[#1C1C1C]",children:e.jsxs("div",{className:"grid grid-cols-[minmax(0,1fr)_auto] items-start gap-4 sm:flex sm:flex-wrap sm:items-center sm:justify-between",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-2 min-w-0",children:[e.jsx("h3",{className:"truncate text-xl font-semibold text-paper",children:b.name}),e.jsx("span",{className:`shrink-0 px-2.5 py-0.5 rounded-full text-xs border ${r(b.segmentType)}`,children:b.segmentType})]}),e.jsxs("p",{className:"text-white/65 text-xs",children:["Created ",n(b.createAt)," · ",H," variation",H===1?"":"s"]})]}),e.jsxs("div",{className:"flex gap-2 shrink-0",children:[e.jsxs("button",{onClick:()=>P(b),className:"px-4 py-2 bg-signal hover:bg-signal/80 rounded-lg text-paper text-sm transition-colors flex items-center gap-2",children:[e.jsx(qe,{className:"w-4 h-4"}),"Edit"]}),e.jsx("button",{onClick:()=>w(me?null:b._id),className:"px-4 py-2 bg-white/10 hover:bg-white/10 rounded-lg text-paper text-sm transition-colors",children:me?"Hide Config":"View Config"})]})]})}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)]",children:[e.jsxs("div",{className:"p-6 border-b lg:border-b-0 lg:border-r border-white/10 bg-[#1C1C1C] space-y-4",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-white/65 text-xs",children:"Impressions"}),e.jsx("p",{className:"text-paper text-2xl font-semibold",children:T.toLocaleString()})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-white/65 text-xs",children:"Conversions"}),e.jsx("p",{className:"text-paper text-2xl font-semibold",children:E.toLocaleString()})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-white/65 text-xs",children:"Conv. Rate"}),e.jsx("p",{className:"text-signal text-2xl font-semibold",children:z})]}),e.jsxs("div",{className:"pt-3 border-t border-white/10",children:[e.jsx("p",{className:"text-white/65 text-xs",children:"Imp. Before Action"}),e.jsx("p",{className:"text-paper text-sm font-medium mt-0.5",children:ne})]})]}),e.jsx("div",{className:"p-6",children:H===0?e.jsx("div",{className:"text-center py-8 text-white/65 text-sm",children:"No content variations yet"}):e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4",children:pe.map(({v:F,conv:se,imp:ie,rate:xe})=>{var te,le,dt,ct;const Ne=m(se,ie),ge=F._id===ue,A=h===F._id,W=T>0?ie/T*100:0;return e.jsxs("div",{className:`group relative bg-[#1C1C1C]/60 border rounded-lg overflow-hidden transition-all ${ge?"border-signal/60 shadow-lg shadow-signal/5":"border-white/10 hover:border-white/10"}`,children:[ge&&e.jsx("div",{className:"absolute top-2 right-2 z-10 px-2 py-0.5 rounded-full bg-signal text-paper text-[10px] font-semibold",children:"Leader"}),e.jsx("div",{className:"bg-[#1C1C1C] border-b border-white/10 p-3",children:e.jsx("div",{className:"flex items-center gap-2",children:e.jsx("span",{className:"px-2 py-0.5 rounded bg-white/10 text-paper text-[10px]",children:F.templateId||F.templateName?F.templateName||ve(F.templateId):"HTML Only"})})}),e.jsxs("div",{className:"p-4 space-y-3",children:[e.jsx("div",{className:"min-w-0",children:e.jsx("h5",{className:"truncate text-paper font-medium text-sm",children:F.name})}),e.jsxs("div",{className:"grid grid-cols-3 gap-2 text-center",children:[e.jsxs("div",{className:"bg-[#1C1C1C] rounded p-2",children:[e.jsx("p",{className:"text-white/65 text-[10px] ",children:"Imp"}),e.jsx("p",{className:"text-paper text-sm font-semibold",children:ie.toLocaleString()})]}),e.jsxs("div",{className:"bg-[#1C1C1C] rounded p-2",children:[e.jsx("p",{className:"text-white/65 text-[10px] ",children:"Conv"}),e.jsx("p",{className:"text-paper text-sm font-semibold",children:se.toLocaleString()})]}),e.jsxs("div",{className:"bg-[#1C1C1C] rounded p-2",children:[e.jsx("p",{className:"text-white/65 text-[10px] ",children:"Rate"}),e.jsx("p",{className:"text-signal text-sm font-semibold",children:Ne})]})]}),e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center justify-between text-[10px] text-white/65 mb-1",children:[e.jsx("span",{children:"Traffic share"}),e.jsxs("span",{children:[W.toFixed(1),"%"]})]}),e.jsx("div",{className:"h-1.5 bg-[#1C1C1C] rounded-full overflow-hidden",children:e.jsx("div",{className:"h-full bg-signal/70",style:{width:`${Math.min(100,W)}%`}})})]}),(((te=F.impressionDate)==null?void 0:te.length)>0||((le=F.conversionDate)==null?void 0:le.length)>0)&&e.jsxs("div",{className:"grid grid-cols-2 gap-2 text-[10px] pt-2 border-t border-white/10",children:[((dt=F.impressionDate)==null?void 0:dt.length)>0&&e.jsxs("div",{children:[e.jsx("p",{className:"text-white/65",children:"Last impression"}),e.jsx("p",{className:"text-paper",children:n(F.impressionDate[F.impressionDate.length-1])})]}),((ct=F.conversionDate)==null?void 0:ct.length)>0&&e.jsxs("div",{children:[e.jsx("p",{className:"text-white/65",children:"Last conversion"}),e.jsx("p",{className:"text-paper",children:n(F.conversionDate[F.conversionDate.length-1])})]})]}),e.jsxs("div",{className:"flex gap-2 pt-1",children:[e.jsx("button",{onClick:()=>l(F),className:"flex-1 px-2 py-1.5 bg-signal/15 hover:bg-signal/25 border border-signal/30 rounded text-signal text-xs transition-colors",children:"View Preview"}),e.jsx("button",{onClick:()=>B(A?null:F._id),className:"flex-1 px-2 py-1.5 bg-white/10/70 hover:bg-white/10 rounded text-paper text-xs transition-colors",children:A?"Hide HTML":"View HTML"})]}),A&&e.jsx("pre",{className:"bg-[#1C1C1C] border border-white/10 p-3 rounded text-[10px] text-paper overflow-auto max-h-48",children:F.content})]})]},F._id)})})})]}),me&&e.jsxs("div",{className:"px-6 py-5 border-t border-white/10 bg-[#1C1C1C] space-y-3",children:[e.jsx("h4",{className:"text-paper text-sm font-semibold",children:"Configuration"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4 text-sm",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-white/65 text-xs mb-1",children:"Root Identifier"}),e.jsx("code",{className:"text-paper bg-[#1C1C1C] px-2 py-1 rounded text-xs block truncate",children:b.rootIdentifier})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-white/65 text-xs mb-1",children:"Conversion Identifier"}),e.jsx("code",{className:"text-paper bg-[#1C1C1C] px-2 py-1 rounded text-xs block truncate",children:b.conversionIdentifier})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-white/65 text-xs mb-1",children:"Segment Key Parameters"}),e.jsx("code",{className:"text-paper bg-[#1C1C1C] px-2 py-1 rounded text-xs block truncate",children:b.segmentKeyParameters})]})]})]})]},b._id)}):e.jsxs("div",{className:"text-center py-12 bg-[#1C1C1C] border border-white/10 rounded-lg",children:[e.jsx(Le,{className:"w-16 h-16 text-white/65 mx-auto mb-4"}),e.jsx("h3",{className:"text-paper text-lg font-semibold mb-2",children:"No Dynamic Views"}),e.jsx("p",{className:"text-white/65",children:"Create your first dynamic view to get started"})]})}),x&&k&&!N&&e.jsx("div",{className:"fixed inset-0 bg-black/70 flex items-center justify-center z-[9999] p-4",children:e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg max-w-6xl w-full max-h-[90vh] flex flex-col",onClick:b=>b.stopPropagation(),children:[e.jsxs("div",{className:"bg-[#1C1C1C] p-6 border-b border-white/10 flex items-center justify-between flex-shrink-0",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"text-2xl font-bold text-paper mb-1",children:"Edit Dynamic View"}),e.jsx("p",{className:"text-white/65 text-sm",children:"Update view configuration and content variations"})]}),e.jsx("button",{onClick:()=>{y(null),i(null),d(null)},className:"text-white/65 hover:text-paper transition-colors",children:e.jsx(ke,{className:"w-6 h-6"})})]}),e.jsxs("div",{className:"p-6 space-y-6 overflow-y-auto flex-1",children:[e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg p-6",children:[e.jsx("h3",{className:"text-lg font-semibold text-paper mb-4",children:"View Configuration"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"View Name *"}),e.jsx("input",{type:"text",value:k.name,onChange:b=>i({...k,name:b.target.value}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper placeholder-white/40 focus:outline-none focus:border-signal transition-colors",placeholder:"e.g., Vehicle Wraps Campaign"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"Segment Type *"}
517),e.jsxs("select",{value:k.segmentType,onChange:b=>i({...k,segmentType:b.target.value}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper focus:outline-none focus:border-signal transition-colors",children:[e.jsx("option",{value:"Google Search",children:"Google Search"}),e.jsx("option",{value:"Facebook",children:"Facebook"}),e.jsx("option",{value:"Email",children:"Email"}),e.jsx("option",{value:"Other",children:"Other"})]})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"Root Identifier *"}),e.jsx("input",{type:"text",value:k.rootIdentifier,onChange:b=>i({...k,rootIdentifier:b.target.value}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper placeholder-white/40 focus:outline-none focus:border-signal transition-colors",placeholder:"e.g., #dynamic-content-root"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"Segment Key Parameters *"}),e.jsx("input",{type:"text",value:k.segmentKeyParameters,onChange:b=>i({...k,segmentKeyParameters:b.target.value}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper placeholder-white/40 focus:outline-none focus:border-signal transition-colors",placeholder:"e.g., utm_campaign=vehicle-wraps"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"Impressions Before Action *"}),e.jsx("input",{type:"number",value:k.impressionsBeforeAction,onChange:b=>i({...k,impressionsBeforeAction:parseInt(b.target.value)}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper focus:outline-none focus:border-signal transition-colors",min:"1"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-white/65 mb-2",children:"Conversion Identifier *"}),e.jsx("input",{type:"text",value:k.conversionIdentifier,onChange:b=>i({...k,conversionIdentifier:b.target.value}),className:"w-full px-4 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper placeholder-white/40 focus:outline-none focus:border-signal transition-colors",placeholder:"e.g., .conversion-button"})]})]})]}),e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg p-6",children:[e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold text-paper",children:"Content Variations"}),e.jsxs("span",{className:"text-white/65 text-sm",children:[k.contentVariations.length," variation(s)"]})]}),e.jsxs("button",{type:"button",onClick:()=>C(!0),className:"bg-signal hover:bg-signal/80 text-paper font-medium py-2 px-4 rounded-lg transition-colors flex items-center gap-2",children:[e.jsx(De,{className:"w-5 h-5"}),"Add Content Variation"]})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3",children:k.contentVariations.map((b,T)=>{const E=b.templateId||b.template,z=!!(E&&b.templateConfig);return e.jsxs("div",{className:"border rounded-lg overflow-hidden transition-all border-white/10 bg-[#1C1C1C] hover:border-white/10",children:[e.jsx("div",{className:"bg-[#1C1C1C] border-b border-white/10 p-3",children:e.jsx("span",{className:"px-2 py-0.5 rounded bg-white/10 text-paper text-[10px]",children:z?`Template: ${b.templateName||ve(E)}`:"HTML Only"})}),e.jsxs("div",{className:"p-4",children:[e.jsxs("div",{className:"flex items-start justify-between mb-2",children:[e.jsxs("div",{className:"flex-1",children:[e.jsx("h4",{className:"text-paper font-medium text-sm",children:b.name}),e.jsxs("div",{className:"grid grid-cols-3 gap-2 text-xs mt-2",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-white/65",children:"Imp."}),e.jsx("p",{className:"text-paper font-semibold",children:b.impressions||0})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-white/65",children:"Conv."}),e.jsx("p",{className:"text-paper font-semibold",children:u(b)})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-white/65",children:"Rate"}),e.jsx("p",{className:"text-paper font-semibold",children:m(u(b),b.impressions||0)})]})]})]}),e.jsx("button",{onClick:()=>G(b._id),className:"text-[#D6604F] hover:text-[#D6604F] transition-colors ml-2",title:"Delete variation",children:e.jsx(bt,{className:"w-4 h-4"})})]}),z?e.jsxs("button",{type:"button",onClick:()=>d(b._id),className:"w-full mt-2 text-xs text-signal hover:text-[#D6604F] flex items-center justify-center gap-1 py-1.5 border border-signal/30 rounded hover:bg-signal/10 transition-colors",children:[e.jsx(qe,{className:"w-3.5 h-3.5"}),"Edit with Visual Editor"]}):e.jsxs("div",{className:"mt-3",children:[e.jsx("label",{className:"block text-white/65 text-xs mb-1",children:"HTML Content:"}),e.jsx("textarea",{value:b.content,onChange:H=>M(b._id,{content:H.target.value}),className:"w-full px-3 py-2 bg-[#1C1C1C] border border-white/10 rounded-lg text-paper text-xs font-mono focus:outline-none focus:border-signal resize-none transition-colors",rows:"4",placeholder:"Enter HTML content..."})]})]})]},b._id)})})]})]}),e.jsxs("div",{className:"p-6 border-t border-white/10 bg-[#1C1C1C] flex gap-4 flex-shrink-0",children:[e.jsx("button",{onClick:Y,className:"flex-1 px-6 py-3 bg-signal hover:bg-signal/80 rounded-lg text-paper font-medium transition-colors",children:"Save Changes"}),e.jsx("button",{onClick:()=>{y(null),i(null),d(null)},className:"px-6 py-3 bg-white/10 hover:bg-white/10 rounded-lg text-paper font-medium transition-colors",children:"Cancel"})]})]})}),v&&e.jsx(ms,{onSelect:j,onClose:()=>C(!1)}),N&&D&&e.jsx(Nt,{variation:N,template:D,conversionIdentifier:(k==null?void 0:k.conversionIdentifier)||(view==null?void 0:view.conversionIdentifier)||"",onUpdate:b=>M(o,b),onClose:()=>d(null)}),c&&e.jsx("div",{className:"fixed inset-0 bg-black/70 flex items-center justify-center z-[9999] p-4",onClick:()=>l(null),children:e.jsxs("div",{className:"bg-[#fff] rounded-lg max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col",onClick:b=>b.stopPropagation(),children:[e.jsxs("div",{className:"bg-[#1C1C1C] p-4 flex items-center justify-between border-b border-white/10",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-paper font-semibold text-lg",children:c.name}),e.jsx("p",{className:"text-white/65 text-sm",children:"Full Size Preview"})]}),e.jsx("button",{onClick:()=>l(null),className:"text-white/65 hover:text-paper transition-colors",children:e.jsx(ke,{className:"w-6 h-6"})})]}),e.jsx("div",{className:"flex-1 overflow-auto p-6 bg-[#fff]",children:e.jsx("div",{dangerouslySetInnerHTML:{__html:c.content}})})]})})]})},he=["#5B9BD5","#8E7CC3","#3FA86B","#D9A441","#D6604F","#5B9BD5","#ec4899","#84cc16"],ps=15,kt=ps*60*1e3,hs=3e3,Ve=3,us=t=>{const s=new Date,r=new Date(s.getFullYear(),s.getMonth(),s.getDate(),0,0,0,0),n={"1day":r,"3days":new Date(r.getTime()-2*24*60*60*1e3),week:new Date(r.getTime()-6*24*60*60*1e3),month:new Date(r.getTime()-29*24*60*60*1e3),"3month":new Date(r.getTime()-89*24*60*60*1e3),"6month":new Date(r.getTime()-179*24*60*60*1e3),year:new Date(r.getTime()-364*24*60*60*1e3),all:ne
517w Date(0)};return n[t]||n.all},gs=t=>new Date(t).toLocaleDateString("en-US",{month:"short",day:"numeric",hour:"numeric"}),Q=t=>{var m,p;const s=((m=t==null?void 0:t.rawData)==null?void 0:m.actionStart)||((p=t==null?void 0:t.rawData)==null?void 0:p.timestamp),r=s?new Date(s):null;if(r&&!Number.isNaN(r.getTime()))return r;const n=new Date((t==null?void 0:t.actionTime)||0);return Number.isNaN(n.getTime())?new Date(0):n},Bt=(t,s)=>{const r=t instanceof Date?t:new Date(t);return!Number.isNaN(r.getTime())&&r>=s},bs=(t=[],s="all",r="all")=>t.filter(n=>s==="all"||n._id===s).map(n=>({...n,contentVariations:(n.contentVariations||[]).filter(m=>r==="all"||m._id===r)})).filter(n=>n.contentVariations.length>0),vs=(t=[])=>new Set(t.flatMap(s=>(s.contentVariations||[]).map(r=>r._id))),mt=(t=[],s,r)=>t.reduce((n,m)=>n+(m.contentVariations||[]).reduce((p,f)=>{const w=f[s];return Array.isArray(w)?p+w.filter(h=>Bt(h,r)).length:p},0),0),fs=t=>{const s=[...t].sort((c,l)=>Q(c)-Q(l)),r={},n={};s.forEach(c=>{var y,k;const l=c.sessionId,a=Q(c);n[l]||(n[l]=[]);let u=null;const g=n[l];for(const i of g){const o=r[i];if(o&&o.lastEvent&&a-Q(o.lastEvent)<=kt){u=i;break}}u||(u=`${l}_${n[l].length}`,n[l].push(u),r[u]={originalSessionId:l,events:[],firstEvent:null,lastEvent:null,conversions:[],clicks:[],pages:[]});const x=r[u];x.events.push(c),x.firstEvent||(x.firstEvent=c),x.lastEvent=c,c.converted&&x.conversions.push(c),c.actionType==="Click"&&x.clicks.push(c),c.actionType==="Page Load"&&((k=(y=c.rawData)==null?void 0:y.slug)!=null&&k.pathname)&&x.pages.push(c.rawData.slug.pathname)});const m={"0-30s":0,"30-60s":0,"1-2m":0,"2-5m":0,"5-10m":0,"10-15m":0,"15m+":0},p={"0-10s":0,"10-30s":0,"30-60s":0,"1-2m":0,"2-5m":0,"5m+":0},f={};Object.values(r).forEach(c=>{if(c.firstEvent&&c.lastEvent){const a=(Q(c.lastEvent)-Q(c.firstEvent))/1e3;a<=30?m["0-30s"]++:a<=60?m["30-60s"]++:a<=120?m["1-2m"]++:a<=300?m["2-5m"]++:a<=600?m["5-10m"]++:a<=900?m["10-15m"]++:m["15m+"]++}const l=c.events.length;if(f[l]=(f[l]||0)+1,c.conversions.length>0){const a=(Q(c.conversions[0])-Q(c.firstEvent))/1e3;a<=10?p["0-10s"]++:a<=30?p["10-30s"]++:a<=60?p["30-60s"]++:a<=120?p["1-2m"]++:a<=300?p["2-5m"]++:p["5m+"]++}});const w=Object.entries(m).map(([c,l])=>({range:c,sessions:l})),h=Object.entries(p).map(([c,l])=>({range:c,conversions:l})),B=Object.entries(f).map(([c,l])=>({count:parseInt(c),sessions:l,label:`${c} events`})).sort((c,l)=>c.count-l.count);return{sessionDurations:w,timeToFirstConversion:h,eventsPerSession:B,sessions:r}},Cs=t=>{const s={},r={},n={},m={},p={};t.forEach(c=>{var l;if(c.actionType==="Page Load"&&((l=c.rawData)!=null&&l.slug)){const a=c.rawData.slug.pathname||"/";c.rawData.slug.href,s[a]=(s[a]||0)+1,r[c.sessionId]||(r[c.sessionId]=a),n[c.sessionId]=a,p[c.sessionId]||(p[c.sessionId]=[]),p[c.sessionId].push({page:a,time:Q(c)})}}),Object.values(p).forEach(c=>{for(let l=0;l<c.length-1;l++){const a=c[l].page,u=c[l+1].page,g=`${a}|||${u}`;m[g]=(m[g]||0)+1}});const f=Object.entries(s).map(([c,l])=>({page:c,views:l})).sort((c,l)=>l.views-c.views),w=Object.entries(Object.values(r).reduce((c,l)=>(c[l]=(c[l]||0)+1,c),{})).map(([c,l])=>({page:c,count:l})).sort((c,l)=>l.count-c.count),h=Object.entries(Object.values(n).reduce((c,l)=>(c[l]=(c[l]||0)+1,c),{})).map(([c,l])=>({page:c,count:l})).sort((c,l)=>l.count-c.count),B=Object.entries(m).map(([c,l])=>{const[a,u]=c.split("|||");return{from:a,to:u,value:l}}).sort((c,l)=>l.value-c.value).slice(0,15);return{pageViewsData:f,landingPagesData:w,exitPagesData:h,pageFlowData:B}},js=t=>{const s={},r={},n={clicks:0,conversions:new Set},m={"Page Load":{sessions:new Set,label:"Page Loads"},"View Success":{sessions:new Set,label:"View Success"},Click:{sessions:new Set,label:"Clicks"},Conversion:{sessions:new Set,label:"Conversions"}},p=[],f={};t.forEach(a=>{var u,g,x,y,k,i,o,d,v;if(a.actionType==="Page Load"&&m["Page Load"].sessions.add(a.sessionId),a.actionType==="Trace"&&((u=a.rawData)==null?void 0:u.actionType)==="View Success"&&m["View Success"].sessions.add(a.sessionId),a.actionType==="Click"){m.Click.sessions.add(a.sessionId),n.clicks++;const C=((x=(g=a.rawData)==null?void 0:g.element)==null?void 0:x.text)||"Unknown";if(s[C]||(s[C]={clicks:0,conversions:new Set}),s[C].clicks++,a.converted){n.conversions.add(a.sessionId),s[C].conversions.add(a.sessionId),m.Conversion.sessions.add(a.sessionId);const $=((k=(y=a.rawData)==null?void 0:y.slug)==null?void 0:k.pathname)||"/";r[$]||(r[$]=new Set),r[$].add(a.sessionId)}}f[a.sessionId]||(f[a.sessionId]={actions:[],converted:!1}),f[a.sessionId].actions.push({type:a.actionType,page:(o=(i=a.rawData)==null?void 0:i.slug)==null?void 0:o.pathname,element:(v=(d=a.rawData)==null?void 0:d.element)==null?void 0:v.text,time:Q(a)}),a.converted&&(f[a.sessionId].converted=!0)}),Object.values(f).forEach(a=>{if(a.converted&&a.actions.length>0){const g=a.actions.slice(-5).map(y=>y.type==="Click"&&y.element?`Click:${y.element}`:y.type==="Page Load"&&y.page?`Page:${y.page}`:y.type).join(" â "),x=p.find(y=>y.path===g);x?x.count++:p.push({path:g,count:1})}}),p.sort((a,u)=>u.count-a.count);const h=[{step:"Page Load",sessions:m["Page Load"].sessions},{step:"View Success",sessions:m["View Success"].sessions}
517,{step:"Click",sessions:m.Click.sessions},{step:"Conversion",sessions:m.Conversion.sessions}].map((a,u,g)=>{const x=a.sessions.size,y=u>0?g[u-1].sessions.size:x,k=u>0?y-x:0,i=u>0&&y>0?(k/y*100).toFixed(1):0;return{step:m[a.step].label,count:x,dropOff:k,dropOffRate:parseFloat(i)}}),B=Object.entries(s).map(([a,u])=>({cta:a,clicks:u.clicks,conversions:u.conversions.size,rate:u.clicks>0?(u.conversions.size/u.clicks*100).toFixed(2):0})).sort((a,u)=>u.conversions-a.conversions),c=Object.entries(r).map(([a,u])=>({page:a,conversions:u.size})).sort((a,u)=>u.conversions-a.conversions),l={clicks:n.clicks,conversions:n.conversions.size};return{ctaData:B,pageConversionData:c,clickToConversion:l,funnelData:h,conversionPaths:p.slice(0,10)}},ys=t=>{const s={},r={},n={},m=[],p={},f={},w=[];[...t].sort((g,x)=>g.sessionId!==x.sessionId?g.sessionId.localeCompare(x.sessionId):Q(g)-Q(x)).forEach(g=>{var x,y,k,i,o;if(g.actionType==="Click"&&((x=g.rawData)!=null&&x.element)){const d=g.rawData.element,v=d.text||"No Text";s[v]=(s[v]||0)+1;const C=d.id||"No ID";r[C]=(r[C]||0)+1;const $=d.tag||"Unknown";n[$]=(n[$]||0)+1,g.rawData.coordinates&&m.push({x:g.rawData.coordinates.x,y:g.rawData.coordinates.y,converted:g.converted});const I=g._variationId||"unknown";p[I]||(p[I]={variationId:I,variationName:g._variationName||"Unknown Variation",viewName:g._viewName||"",elements:{},clicks:[],totalClicks:0,convertedClicks:0});const P=p[I];P.totalClicks+=1,g.converted&&(P.convertedClicks+=1);const Y=d.text&&d.text.trim()||d.id&&`#${d.id}`||d.tag||"Element",M=`${Y}__${d.tag||""}`;P.elements[M]||(P.elements[M]={label:Y,tag:d.tag||"",count:0,converted:0}),P.elements[M].count+=1,g.converted&&(P.elements[M].converted+=1);const G=(k=(y=g.rawData)==null?void 0:y.client)==null?void 0:k.screenWidth,j=(o=(i=g.rawData)==null?void 0:i.client)==null?void 0:o.screenHeight;g.rawData.coordinates&&G&&j&&P.clicks.push({x:g.rawData.coordinates.x,y:g.rawData.coordinates.y,xPct:Math.max(0,Math.min(100,g.rawData.coordinates.x/G*100)),yPct:Math.max(0,Math.min(100,g.rawData.coordinates.y/j*100)),converted:!!g.converted,label:Y});const N=`${d.text||""}_${d.id||""}_${d.tag||""}`,D=`${g.sessionId}_${N}`;f[D]||(f[D]=[]),f[D].push({time:Q(g),element:d.text||d.id||d.tag,coordinates:g.rawData.coordinates})}}),Object.entries(f).forEach(([g,x])=>{if(x.length>=Ve)for(let y=0;y<=x.length-Ve;y++){const k=x.slice(y,y+Ve),i=k[k.length-1].time-k[0].time;if(i<=hs){w.push({element:k[0].element,clickCount:k.length,timeSpan:i/1e3,session:g.split("_")[0]});break}}});const B=ws(m),c=Object.entries(s).map(([g,x])=>({element:g,count:x})).sort((g,x)=>x.count-g.count).slice(0,10),l=Object.entries(r).map(([g,x])=>({id:g,count:x})).sort((g,x)=>x.count-g.count).slice(0,10),a=Object.entries(n).map(([g,x])=>({type:g,count:x})),u=Object.values(p).map(g=>({...g,topElements:Object.values(g.elements).sort((x,y)=>y.count-x.count).slice(0,8)})).sort((g,x)=>x.totalClicks-g.totalClicks);return{clicksByElementData:c,clicksByIdData:l,clicksByTypeData:a,clickCoordinates:m,heatmapData:B,rageClicks:w,clicksByVariation:u}},ws=(t,s=20)=>{if(t.length===0)return[];const r=Math.max(...t.map(h=>h.x)),n=Math.max(...t.map(h=>h.y)),m=r/s,p=n/s,f=Array(s).fill(0).map(()=>Array(s).fill(0));t.forEach(h=>{const B=Math.min(Math.floor(h.x/m),s-1),c=Math.min(Math.floor(h.y/p),s-1);f[c][B]++});const w=[];for(let h=0;h<s;h++)for(let B=0;B<s;B++)f[h][B]>0&&w.push({x:B,y:h,value:f[h][B]});return w},Ns=t=>{const s=[...t].sort((l,a)=>Q(l)-Q(a)),r={},n={};s.forEach(l=>{const a=l.sessionId,u=Q(l);n[a]||(n[a]=[]);let g=null;const x=n[a];for(const k of x){const i=r[k];if(i&&i.timestamps.length>0){const o=i.timestamps[i.timestamps.length-1];if(u-o<=kt){g=k;break}}}g||(g=`${a}_${n[a].length}`,n[a].push(g),r[g]={events:0,pageLoads:0,clicks:0,conversions:0,timestamps:[],duration:0});const y=r[g];y.events++,y.timestamps.push(u),l.actionType==="Page Load"&&y.pageLoads++,l.actionType==="Click"&&y.clicks++,l.converted&&y.conversions++,y.timestamps.length>1&&(y.duration=(y.timestamps[y.timestamps.length-1]-y.timestamps[0])/1e3)});const m={},p={},f={};Object.values(r).forEach(l=>{const a=l.events;m[a]=(m[a]||0)+1;const u=l.clicks;p[u]=(p[u]||0)+1;const g=l.pageLoads;f[g]=(f[g]||0)+1});const w=Object.entries(m).map(([l,a])=>({count:parseInt(l),sessions:a,label:`${l} events`})).sort((l,a)=>l.count-a.count),h=Object.entries(p).map(([l,a])=>({count:parseInt(l),sessions:a,label:`${l} clicks`})).sort((l,a)=>l.count-a.count),B=Object.entries(f).map(([l,a])=>({count:parseInt(l),sessions:a,label:`${l} loads`})).sort((l,a)=>l.count-a.count),c=ks(Object.values(r));return{eventsPerSessionData:w,clicksPerSessionData:h,pageLoadsPerSessionData:B,behavioralClusters:c}},ks=t=>{const s={"Quick Converters":[],"Active Browsers":[],"Engaged Non-Converters":[],"Bounced Users":[],"Window Shoppers":[]};return t.forEach(r=>{r.conversions>0&&r.clicks<=3?s["Quick Converters"].push(r):r.conversions>0&&r.clicks>3?s["Active Browsers"].push(r):r.conversions===0&&r.events>=5?s["Engaged Non-Converters"].push(r):r.events<=2?s["Bounced Users"].push(r):s["Window Shoppers"].push(r)}),Object.entries(s).map(([r,n])=>({name:r,count:n.length,avgDuration:n.length>0?(n.reduce((m,p)=>m+p.duration,0)/n.length).toFixed(1):0,avgEvents:n.length>0?(n.reduce((m,p)=>
517m+p.events,0)/n.length).toFixed(1):0})).filter(r=>r.count>0)},Bs=t=>{const s={},r={},n={};t.forEach(w=>{var h;if((h=w.rawData)!=null&&h.client){const B=w.rawData.client,c=B.userAgent||"";let l="Unknown";if(c.includes("Chrome")?l="Chrome":c.includes("Firefox")?l="Firefox":c.includes("Safari")?l="Safari":c.includes("Edge")&&(l="Edge"),s[l]=(s[l]||0)+1,B.screenWidth&&B.screenHeight){const a=`${B.screenWidth}x${B.screenHeight}`;r[a]=(r[a]||0)+1}if(B.language){const a=String(B.language).trim();a&&a.length>=2&&(n[a]=(n[a]||0)+1)}}});const m=Object.entries(s).map(([w,h])=>({name:w,value:h})),p=Object.entries(r).map(([w,h])=>({size:w,count:h})).slice(0,10),f=Object.entries(n).map(([w,h])=>({lang:w,count:h}));return f.length===0&&f.push({lang:"Unknown",count:t.length}),console.log("[Analytics] Language data:",f),{browserData:m,screenData:p,languageData:f}},Ts=t=>{const s={};return t.forEach(r=>{const n=Q(r),m=gs(n);s[m]||(s[m]={date:m,sortKey:n instanceof Date?n.getTime():0,isoDate:n instanceof Date&&!Number.isNaN(n.getTime())?n.toISOString():null,pageLoads:0,clicks:0,conversions:new Set,impressions:0,traces:0}),r.actionType==="Page Load"?(s[m].pageLoads++,s[m].impressions++):r.actionType==="Click"?s[m].clicks++:r.actionType==="View Success"?s[m].impressions++:r.actionType==="Trace"&&s[m].traces++,r.converted&&s[m].conversions.add(r.sessionId)}),Object.values(s).sort((r,n)=>r.sortKey-n.sortKey).map(r=>({...r,conversions:r.conversions.size}))},Ss=t=>{const s={};return t.forEach(r=>{if(!r.isoDate)return;const n=new Date(r.isoDate),m=`${n.getFullYear()}-${String(n.getMonth()+1).padStart(2,"0")}`;s[m]||(s[m]={date:n.toLocaleDateString("en-US",{month:"short",year:"numeric"}),sortKey:new Date(n.getFullYear(),n.getMonth(),1).getTime(),pageLoads:0,clicks:0,conversions:0,impressions:0,traces:0}),s[m].pageLoads+=r.pageLoads||0,s[m].clicks+=r.clicks||0,s[m].conversions+=r.conversions||0,s[m].impressions+=r.impressions||0,s[m].traces+=r.traces||0}),Object.values(s).sort((r,n)=>r.sortKey-n.sortKey)},$s=({projectAnalyticsDV:t,dynamicViews:s})=>{var k,i,o,d;const[r,n]=S.useState("all"),[m,p]=S.useState("all"),[f,w]=S.useState("all"),[h,B]=S.useState("overview");console.log(t);const c=S.useMemo(()=>{var ge;if(!t||t.length===0)return null;const v=us(f);console.log("[Analytics] Time filter:",f),console.log("[Analytics] Date threshold:",v.toISOString()),console.log("[Analytics] Current date:",new Date().toISOString());const C=bs(s,r,m),$=vs(C);let I=t;console.log("[Analytics] Starting with items:",I.length),console.log("[Analytics] Selected view:",r),console.log("[Analytics] Selected variation:",m),I=I.filter(A=>$.has(A.contentVariationId)),console.log("[Analytics] After scope filter:",I.length,"items");const P=I.flatMap(A=>A.action||[]);console.log("[Analytics] Actions before time filter:",P.length);const Y={};C.forEach(A=>{(A.contentVariations||[]).forEach(W=>{Y[W._id]={name:W.name||"Unnamed Variation",viewName:A.name||A.title||"View"}})});const M=I.flatMap(A=>{const W=Y[A.contentVariationId]||{};return(A.action||[]).filter(te=>Q(te)>=v).map(te=>({...te,_variationId:A.contentVariationId,_variationName:W.name||"Unknown Variation",_viewName:W.viewName||""}))});console.log("[Analytics] Total actions after time filter:",M.length);const G=mt(C,"impressionDate",v),j=mt(C,"conversionDate",v),N=f==="all"?C.reduce((A,W)=>A+(W.contentVariations||[]).reduce((te,le)=>te+(le.impressions||0),0),0):G,D={};I==null||I.forEach(A=>{var te;const W=A.contentVariationId;D[W]||(D[W]=new Set),(te=A.action)==null||te.forEach(le=>{le.converted&&Q(le)>=v&&D[W].add(le.sessionId)})});const q=A=>{var te;const W=(te=D[A._id])==null?void 0:te.size;return W!=null&&W>0?W:f!=="all"&&Array.isArray(A.conversionDate)?A.conversionDate.filter(le=>Bt(le,v)).length:A.conversions||0},b=C.reduce((A,W)=>A+(W.contentVariations||[]).reduce((te,le)=>te+q(le),0),0),T=f==="all"?b:Math.max(j,b);console.log("[Analytics] Total impressions from variations:",N),console.log("[Analytics] Total conversions (Performance-aligned):",T);const E=fs(M),z=Cs(M),H=js(M),ne=ys(M),me=Ns(M),pe=Bs(M),ue=Ts(M);console.log("========== CONVERSION DEBUG =========="),console.log("[Analytics] Conversions from dynamicViews:",T);const de=new Set(M.filter(A=>A.converted).map(A=>A.sessionId));console.log("[Analytics] Unique converted sessions in actions:",de.size);const R=[...de];console.log("[Analytics] Converted session IDs:",R);const ce=M.filter(A=>A.converted).length;console.log("[Analytics] Total conversion EVENTS (not unique):",ce),de.size!==T&&(console.warn("[Analytics] â ï¸ DISCREPANCY DETECTED!"),console.warn("[Analytics] Expected (from dynamicViews):",T),console.warn("[Analytics] Actual (in actions):",de.size),console.warn("[Analytics] Difference:",de.size-T)),console.log("[Analytics] Funnel conversions (from actions):",(ge=H.funnelData.find(A=>A.step==="Conversions"))==null?void 0:ge.count),console.log("[Analytics] Click-to-conversion (from actions):",H.clickToConversion.conversions);const F=H.ctaData.reduce((A,W)=>A+W.conversions,0);console.log("[Analytics] Sum of CTA conversions:",F);const se=H.pageConversionData.reduce((A,W)=>A+W.conversions,0);console.log("[Analytics] Sum of page conversions:",se);const ie=ue.reduce((A,W)=>A+W.conversions,0);console.log("[Analytics] Sum of timeline conversions:",ie),console.log("=======================================");const xe=N>0?(T/N*100).toFixed(2):"0.00";console.log("[Analytics] Conversion rate:",xe+"%");const Ne={...H,clickToConversion:{...H.clickToConversion,conversions:T},funnelData:H.funnelData.map(A=>A.step==="Conversions"?{...A,count:T}:A)};return{totalActions:M.length,uniqueSessions:Object.keys(E.sessions).length,totalConversions:T,totalImpressions:N,conversionRate:xe,...E,...z,...Ne,...ne,...me,...pe,timelineData:ue}},[t,r,m,f,s]),l=S.useMemo(()=>
517{if(r==="all")return s.flatMap(C=>C.contentVariations||[]);const v=s.find(C=>C._id===r);return(v==null?void 0:v.contentVariations)||[]},[r,s]),a=[{value:"1day",label:"24 Hours"},{value:"3days",label:"3 Days"},{value:"week",label:"1 Week"},{value:"month",label:"1 Month"},{value:"3month",label:"3 Months"},{value:"6month",label:"6 Months"},{value:"year",label:"1 Year"},{value:"all",label:"All Time"}],u=[{id:"overview",label:"Overview",icon:Rt},{id:"session_explorer",label:"Session Explorer",icon:Pt},{id:"sessions",label:"Sessions & Time",icon:Qe},{id:"pages",label:"Pages & Navigation",icon:$e},{id:"conversions",label:"Conversions & Funnels",icon:fe},{id:"clicks",label:"Clicks & Interactions",icon:Ae},{id:"behavior",label:"User Behavior",icon:Ot},{id:"device",label:"Device & Context",icon:Vt},{id:"advanced",label:"Advanced",icon:Wt}];if(!c)return e.jsx("div",{className:"flex items-center justify-center py-20",children:e.jsxs("div",{className:"text-center max-w-sm",children:[e.jsx("div",{className:"inline-flex items-center justify-center w-16 h-16 rounded-lg bg-[#1C1C1C] border border-white/10 mb-4",children:e.jsx(fe,{className:"w-8 h-8 text-white/65"})}),e.jsx("div",{className:"text-paper font-semibold mb-1",children:"No analytics data yet"}),e.jsx("div",{className:"text-white/65 text-sm",children:"Once impressions and events flow in, insights will surface here."})]})});const g=r==="all"?"All Dynamic Views":((k=s.find(v=>v._id===r))==null?void 0:k.name)||"Dynamic View",x=m==="all"?"All Variations":((i=l.find(v=>v._id===m))==null?void 0:i.name)||"Variation",y=((o=u.find(v=>v.id===h))==null?void 0:o.label)||"";return e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"relative overflow-hidden rounded-lg border border-white/10 bg-[#1C1C1C]",children:[e.jsx("div",{className:"absolute inset-0 opacity-40 pointer-events-none",style:{background:"radial-gradient(1200px 200px at 100% 0%, rgba(234,120,23,0.15), transparent 60%), radial-gradient(800px 200px at 0% 100%, rgba(240,156,12,0.10), transparent 60%)"}}),e.jsxs("div",{className:"relative p-6",children:[e.jsxs("div",{className:"flex flex-wrap items-start justify-between gap-4 mb-5",children:[e.jsxs("div",{children:[e.jsx("div",{className:"flex items-center gap-2 text-[10px] font-semibold tracking-[0.2em] text-signal/90 mb-1.5",children:"Advanced Analytics"}),e.jsx("h2",{className:"text-2xl font-bold text-paper leading-tight",children:y}),e.jsxs("p",{className:"text-sm text-white/65 mt-1",children:[e.jsx("span",{className:"text-paper",children:g}),e.jsx("span",{className:"mx-2 text-white/65",children:"â¢"}),e.jsx("span",{className:"text-paper",children:x}),e.jsx("span",{className:"mx-2 text-white/65",children:"â¢"}),e.jsx("span",{className:"text-paper",children:(d=a.find(v=>v.value===f))==null?void 0:d.label})]})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"hidden sm:flex flex-col items-end",children:[e.jsx("span",{className:"text-[10px] text-white/65",children:"Sessions"}),e.jsx("span",{className:"text-lg font-bold text-paper tabular-nums",children:c.uniqueSessions.toLocaleString()})]}),e.jsx("div",{className:"h-8 w-px bg-white/10/70 hidden sm:block"}),e.jsxs("div",{className:"hidden sm:flex flex-col items-end",children:[e.jsx("span",{className:"text-[10px] text-white/65",children:"Conv. Rate"}),e.jsxs("span",{className:"text-lg font-bold text-signal tabular-nums",children:[c.conversionRate,"%"]})]})]})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-3",children:[e.jsx(We,{label:"Time Period",icon:Qe,children:e.jsx("select",{value:f,onChange:v=>w(v.target.value),className:"w-full bg-transparent text-paper text-sm font-medium focus:outline-none cursor-pointer appearance-none pr-6",children:a.map(v=>e.jsx("option",{value:v.value,className:"bg-[#1C1C1C]",children:v.label},v.value))})}),e.jsx(We,{label:"Dynamic View",icon:_t,children:e.jsxs("select",{value:r,onChange:v=>{n(v.target.value),p("all")},className:"w-full bg-transparent text-paper text-sm font-medium focus:outline-none cursor-pointer appearance-none pr-6",children:[e.jsxs("option",{value:"all",className:"bg-[#1C1C1C]",children:["All Views (",s.length,")"]}),s.map(v=>e.jsx("option",{value:v._id,className:"bg-[#1C1C1C]",children:v.name},v._id))]})}),e.jsx(We,{label:"Variation",icon:Ye,children:e.jsxs("select",{value:m,onChange:v=>p(v.target.value),className:"w-full bg-transparent text-paper text-sm font-medium focus:outline-none cursor-pointer appearance-none pr-6 disabled:opacity-50",disabled:l.length===0,children:[e.jsxs("option",{value:"all",className:"bg-[#1C1C1C]",children:["All Variations (",l.length,")"]}),l.map(v=>e.jsx("option",{value:v._id,className:"bg-[#1C1C1C]",children:v.name||"Unnamed Variation"},v._id))]})})]})]})]}),e.jsx("div",{className:"rounded-lg border border-white/10 bg-[#1C1C1C]/60 backdrop-blur p-1.5",children:e.jsx("div",{className:"flex flex-wrap gap-1",children:u.map(v=>{const C=h===v.id;return e.jsxs("button",{onClick:()=>B(v.id),className:`group relative flex items-center gap-2 px-3.5 py-2 rounded-md text-sm font-medium transition-all duration-200 ${C?"text-paper bg-gradient-to-b from-signal to-[#073FA6] shadow-lg shadow-signal/20":"text-white/65 hover:text-paper hover:bg-white/10"}`,children:[e.jsx(v.icon,{className:`w-4 h-4 transition-transform ${C?"":"group-hover:scale-110"}`}),e.jsx("span",{children:v.label})]},v.id)})})}),h==="overview"&&e.jsx(Ds,{analyticsData:c,timeFilter:f}),h==="session_explorer"&&e.jsx(As,{analyticsData:c}),h==="sessions"&&e.jsx(Is,{analyticsData:c}),h==="pages"&&e.jsx(zs,{analyticsData:c}),h==="conversions"&&e.jsx(Ls,{analyticsData:c}),h==="clicks"&&e.jsx(Es,{analyticsData:c}),h==="behavior"&&e.jsx(Hs,{analyticsData:c}),h==="device"&&e.jsx(Ms,{analyticsData:c}),h==="advanced"&&e.jsx(Fs,{analyticsData:c})]})},As=({analyticsData:t})=>{const[s,r]=S.useState(null),[n,m]=S.useState("all"),[p,f]=S.useState("recent"),[w,h]=S.useState(""),B=i=>{var o,d;return(o=i==null?void 0:i.rawData)!=null&&o.actionStart?i.rawData.actionStart:(d=i==null?void 0:i.rawData)!=null&&d.timestamp?new Date(i.rawData.timestamp).getTime():Q(i).getTime()},c=S.useMemo(()=>{let i=Object.entries(t.sessions||{}).map(([o,d])=>{var P,Y,M,G,j,N;const v=d.firstEvent?B(d.firstEvent):0,C=d.lastEvent?B(d.lastEvent):0,$=v&&C?(C-v)/1e3:0,I=[...new Set(d.pages||[])];return{id:o,...d,duration:$,uniquePages:I,eventCount:((P=d.events)==null?void 0:P.length)||0,clickCount:((Y=d.clicks)==null?void 0:Y.length)||0,conversionCount:((M=d.c
517onversions)==null?void 0:M.length)||0,isConverted:((G=d.conversions)==null?void 0:G.length)>0,startTime:d.firstEvent?Q(d.firstEvent):null,referrer:((N=(j=d.firstEvent)==null?void 0:j.rawData)==null?void 0:N.referrer)||""}});if(n==="converted"?i=i.filter(o=>o.isConverted):n==="not_converted"&&(i=i.filter(o=>!o.isConverted)),w){const o=w.toLowerCase();i=i.filter(d=>{var v;return d.id.toLowerCase().includes(o)||d.uniquePages.some(C=>C.toLowerCase().includes(o))||((v=d.clicks)==null?void 0:v.some(C=>{var $;return((($=C.rawData)==null?void 0:$.text)||"").toLowerCase().includes(o)}))})}return i.sort((o,d)=>{switch(p){case"duration":return d.duration-o.duration;case"events":return d.eventCount-o.eventCount;case"conversions":return d.conversionCount-o.conversionCount;default:return new Date(d.startTime||0)-new Date(o.startTime||0)}}),i},[t.sessions,n,p,w]),l=i=>i<60?`${Math.round(i)}s`:i<3600?`${Math.floor(i/60)}m ${Math.round(i%60)}s`:`${Math.floor(i/3600)}h ${Math.floor(i%3600/60)}m`,a=i=>i?new Date(i).toLocaleDateString("en-US",{month:"short",day:"numeric",hour:"numeric",minute:"2-digit"}):"",u=i=>{switch(i){case"Page Load":return{icon:$e,color:"text-[#5B9BD5]"};case"Click":return{icon:Ae,color:"text-[#3FA86B]"};case"View Success":return{icon:Le,color:"text-[#8E7CC3]"};case"Trace":return{icon:Ze,color:"text-[#D9A441]"};default:return{icon:Ct,color:"text-white/65"}}},g=i=>{var o,d;return(o=i.rawData)!=null&&o.actionStart?new Date(i.rawData.actionStart):(d=i.rawData)!=null&&d.timestamp?new Date(i.rawData.timestamp):Q(i)},x=i=>{var o,d,v,C,$,I,P,Y,M,G;if(i.actionType==="Page Load"){const j=((d=(o=i.rawData)==null?void 0:o.slug)==null?void 0:d.pathname)||((C=(v=i.rawData)==null?void 0:v.slug)==null?void 0:C.href)||"Unknown page",N=($=i.rawData)==null?void 0:$.referrer;return N?`Visited ${j} (from ${N})`:`Visited ${j}`}if(i.actionType==="Click"){const j=i.rawData||{},N=j.element||{},D=N.text||N.name||j.text||j.innerText||j.value||N.id||N.tag||"element",q=D.length>80?D.substring(0,80)+"â¦":D,b=N.href||j.href,T=N.tag?`<${N.tag.toLowerCase()}>`:"";let E=`Clicked "${q}"`;return T&&(E+=` ${T}`),b&&(E+=` â ${b}`),E}return i.actionType==="View Success"||i.actionType==="Trace"&&((I=i.rawData)==null?void 0:I.actionType)==="View Success"?`Dynamic view served (${((Y=(P=i.rawData)==null?void 0:P.viewId)==null?void 0:Y.substring(0,8))||"view"}...)`:i.actionType==="Trace"?((M=i.rawData)==null?void 0:M.actionRaw)||((G=i.rawData)==null?void 0:G.actionType)||"Trace event":i.actionType||"Unknown action"},y=c.filter(i=>i.isConverted).length,k=c.length;return e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"grid grid-cols-2 md:grid-cols-4 gap-4",children:[e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg p-4",children:[e.jsx("p",{className:"text-xs text-white/65 mb-1",children:"Total Sessions"}),e.jsx("p",{className:"text-2xl font-bold text-paper",children:Object.keys(t.sessions||{}).length})]}),e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg p-4",children:[e.jsx("p",{className:"text-xs text-white/65 mb-1",children:"Converted"}),e.jsx("p",{className:"text-2xl font-bold text-[#3FA86B]",children:y})]}),e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg p-4",children:[e.jsx("p",{className:"text-xs text-white/65 mb-1",children:"Not Converted"}),e.jsx("p",{className:"text-2xl font-bold text-paper",children:k-y})]}),e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg p-4",children:[e.jsx("p",{className:"text-xs text-white/65 mb-1",children:"Conv. Rate"}),e.jsxs("p",{className:"text-2xl font-bold text-signal",children:[k>0?(y/k*100).toFixed(1):0,"%"]})]})]}),e.jsx("div",{className:"bg-[#1C1C1C] border border-white/10 rounded-lg p-4",children:e.jsxs("div",{className:"flex flex-wrap gap-3 items-center",children:[e.jsx("div",{className:"flex gap-2",children:[{value:"all",label:"All Sessions"},{value:"converted",label:"Converted"},{value:"not_converted",label:"Not Converted"}].map(i=>e.jsx("button",{onClick:()=>m(i.value),className:`px-3 py-1.5 text-xs rounded-lg transition-colors ${n===i.value?"bg-signal text-paper":"bg-[#1C1C1C] text-white/65 hover:text-paper"}`,children:i.label},i.value))}),e.jsxs("select",{value:p,onChange:i=>f(i.target.value),className:"bg-[#1C1C1C] border border-white/10 rounded-lg px-3 py-1.5 text-xs text-paper focus:outline-none focus:ring-1 focus:ring-signal",children:[e.jsx("option",{value:"recent",children:"Most Recent"}),e.jsx("option",{value:"duration",children:"Longest Duration"}),e.jsx("option",{value:"events",children:"Most Events"}),e.jsx("option",{value:"conversions",children:"Most Conversions"})]}),e.jsx("input",{type:"text",placeholder:"Search pages, clicks...",value:w,onChange:i=>h(i.target.value),className:"flex-1 min-w-[200px] bg-[#1C1C1C] border border-white/10 rounded-lg px-3 py-1.5 text-xs text-paper placeholder:text-white/65 focus:outline-none focus:ring-1 focus:ring-signal"}),e.jsxs("span",{className:"text-xs text-white/65",children:[c.length," sessions"]})]})}),e.jsx("div",{className:"space-y-3 max-h-[800px] overflow-y-auto pr-1",children:c.length===0?e.jsx("div",{className:"text-center py-12 text-white/65",children:"No sessions match your filters"}):c.map(i=>{var d,v,C,$;const o=s===i.id;return e.jsxs("div",{className:`bg-[#1C1C1C] border rounded-lg overflow-hidden transition-colors ${i.isConverted?"border-[#3FA86B]/30":"border-white/10"}`,children:[e.jsxs("button",{onClick:()=>r(o?null:i.id),className:"w-full flex items-center gap-4 p-4 text-left hover:bg-[#242424] transition-colors",children:[e.jsx(Ut,{className:`w-4 h-4 text-white/65 transition-transform flex-shrink-0 ${o?"rotate-90":""}`}),e.jsxs("div",{className:"min-w-0 flex-1",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"text-sm font-mono text-paper truncate",children:[((d=i.originalSessionId)==null?void 0:d.substring(0,12))||i.id.substring(0,12),"..."]}),i.isConverted&&e.jsx("span",{className:"px-2 py-0.5 bg-[#3FA86B]/20 text-[#3FA86B] border border-[#3FA86B]/30 rounded text-[10px] font-semibold ",children:"Converted"})]}),e.jsx("p",{className:"text-xs text-white/65 mt-0.5",children:a(i.startTime)})]}),e.jsxs("div",{className:"hidden md:flex items-center gap-6 text-xs text-white/65",children:[e.jsxs("div",{className:"flex items-center gap-1.5",title:"Duration",children:[e.jsx(Qe,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:l(i.duration)})]}),e.jsxs("div",{className:"flex items-center gap-1.5",title:"Pages visited",children:[e.jsx($e,{className:"w-3.5 h-3.5"}),e.jsxs("span",{children:[i.uniquePages.length," pages"]})]}),e.jsxs("div",{className:"flex items-center gap-1.5",title:"Clicks",children:[e.jsx(Ae,{className:"w-3.5 h-3.5"}),e.jsxs("span",{children:[i.clickCount," clicks"]})]}),e.jsxs("div",{className:"flex items-center gap-1.5",title:"Events",children:[e.jsx(Ze,{className:"w-3.5 h-3.5"}),e.jsxs("span",{children:[i.eventCount," events"]})]})]})]}),o&&e.jsxs("div",{className:"border-t border-white/10 p-4",children:[e.jsxs("div",{className:"md:hidden flex flex-wrap gap-3 mb-4 text-xs text-white/65",children:[e.jsxs("span",{children:["â± ",l(i.duration)]}),e.jsxs("span",{children:["ð ",i.uniquePages.length," pages"]}),e.jsxs("span",{children:["ð ",i.clickCount," clicks"]}),e.jsxs("span",{children:["â¡ ",i.eventCount," events"]})]}),i.uniquePages.length>0&&e.jsxs("div",{className:"mb-4",children:[e.jsx("p",{className:"text-xs text-white/65 mb-2",children:"Pages Visited"}),e.jsx("div",{className:"flex flex-wrap gap-1.5",children:i.uniquePages.map((I,P)=>e.jsx("span",{className:"px-2 py-1 bg-[#5B9BD5]/10 text-[#5B9BD5] border border-[#5B9BD5]/20 rounded text-xs font-mono",children:I},P))})]}),((v=i.conversions)==null?void 0:v.length)>0&&e.jsxs("div",{className:"mb-4 p-3 bg-green-900/10 border border-[#3FA86B]/20 rounded-lg",children:[e.jsxs("p",{className:"text-xs text-[#3FA86B] mb-2 font-semibold",children:["ð¯
517Conversion",i.conversions.length>1?"s":""," (",i.conversions.length,")"]}),i.conversions.map((I,P)=>{var Y,M,G,j,N,D;return e.jsxs("div",{className:"text-xs text-paper mb-1",children:[e.jsx("span",{className:"text-[#3FA86B]",children:a(g(I))}),((M=(Y=I.rawData)==null?void 0:Y.element)==null?void 0:M.text)&&e.jsxs("span",{className:"ml-2",children:['â "',I.rawData.element.text,'"']}),!((j=(G=I.rawData)==null?void 0:G.element)!=null&&j.text)&&((N=I.rawData)==null?void 0:N.text)&&e.jsxs("span",{className:"ml-2",children:['â "',I.rawData.text,'"']}),((D=I.rawData)==null?void 0:D.conversionTrigger)&&e.jsxs("span",{className:"ml-2 text-[#3FA86B]",children:["Trigger: ",I.rawData.conversionTrigger]})]},P)})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-xs text-white/65 mb-3",children:"Event Timeline"}),e.jsxs("div",{className:"relative pl-6 space-y-0",children:[(C=i.events)==null?void 0:C.slice(0,50).map((I,P)=>{const{icon:Y,color:M}=u(I.actionType),G=I.converted;return e.jsxs("div",{className:"relative pb-3 last:pb-0",children:[P<i.events.length-1&&P<49&&e.jsx("div",{className:"absolute left-[-14px] top-5 bottom-0 w-px bg-white/10"}),e.jsx("div",{className:`absolute left-[-18px] top-1 w-2 h-2 rounded-full ${G?"bg-[#3FA86B] ring-2 ring-[#3FA86B]/30":"bg-[#1C1C1C]"}`}),e.jsxs("div",{className:`flex items-start gap-2 ${G?"bg-green-900/10 border border-[#3FA86B]/20 rounded p-2 -ml-1":""}`,children:[e.jsx(Y,{className:`w-3.5 h-3.5 mt-0.5 flex-shrink-0 ${M}`}),e.jsxs("div",{className:"min-w-0 flex-1",children:[e.jsxs("p",{className:`text-xs ${G?"text-[#3FA86B] font-semibold":"text-paper"}`,children:[G?"â
CONVERTED â ":"",x(I)]}),e.jsx("p",{className:"text-[10px] text-white/65 mt-0.5",children:a(g(I))})]})]})]},P)}),(($=i.events)==null?void 0:$.length)>50&&e.jsxs("p",{className:"text-xs text-white/65 pt-2 pl-2",children:["... and ",i.events.length-50," more events"]})]})]})]})]},i.id)})})]})},Ds=({analyticsData:t,timeFilter:s})=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",children:[e.jsx(Be,{title:"Total Impressions",value:t.totalImpressions,icon:Le,color:"indigo"}),e.jsx(Be,{title:"Total Actions",value:t.totalActions,icon:Ze,color:"blue"}),e.jsx(Be,{title:"Total Conversions",value:t.totalConversions,icon:Kt,color:"green"}),e.jsx(Be,{title:"Conversion Rate",value:`${t.conversionRate}%`,subtitle:`${t.totalConversions} / ${t.totalImpressions}`,icon:gt,color:"yellow"})]}),e.jsx(V,{title:"Activity Timeline",children:(()=>{const r=[{id:"pageLoads",label:"Page Loads",color:"#8E7CC3"},{id:"clicks",label:"Clicks",color:"#3FA86B"},{id:"conversions",label:"Conversions",color:"#D9A441"},{id:"impressions",label:"Impressions",color:"#5B9BD5"}],n=t.timelineData.map(a=>({...a})),[m,p]=Xe.useState(["pageLoads","conversions"]),[f,w]=Xe.useState("day"),h=a=>{p(u=>u.includes(a)?u.length>1?u.filter(g=>g!==a):u:[...u,a])},B=["3month","6month","year","all"].includes(s),c=B?f:"day",l=c==="month"?Ss(n):n;return e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center justify-between gap-2 mb-3 flex-wrap",children:[e.jsx("div",{className:"flex items-center gap-2 flex-wrap",children:r.filter(a=>a.id!=="impressions"||t.totalImpressions>0).map(a=>e.jsx("button",{onClick:()=>h(a.id),className:`px-2.5 py-1 text-xs rounded-md transition-colors ${m.includes(a.id)?"text-paper border":"text-white/65 hover:text-paper border border-transparent"}`,style:m.includes(a.id)?{backgroundColor:a.color+"22",borderColor:a.color+"55",color:a.color}:{},children:a.label},a.id))}),B&&e.jsxs("div",{className:"inline-flex items-center rounded-md border border-white/10 bg-[#1C1C1C]/60 p-0.5",children:[e.jsx("button",{onClick:()=>w("day"),className:`px-2.5 py-1 text-xs rounded transition-colors ${c==="day"?"bg-signal text-paper":"text-white/65 hover:text-paper"}`,children:"Daily"}),e.jsx("button",{onClick:()=>w("month"),className:`px-2.5 py-1 text-xs rounded transition-colors ${c==="month"?"bg-signal text-paper":"text-white/65 hover:text-paper"}`,children:"Trends (by month)"})]})]}),e.jsx(_,{width:"100%",height:300,children:e.jsxs(ft,{data:l,children:[e.jsx("defs",{children:r.map(a=>e.jsxs("linearGradient",{id:`dvGrad-${a.id}`,x1:"0",y1:"0",x2:"0",y2:"1",children:[e.jsx("stop",{offset:"5%",
517stopColor:a.color,stopOpacity:.3}),e.jsx("stop",{offset:"95%",stopColor:a.color,stopOpacity:0})]},a.id))}),e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"date",stroke:"rgb(var(--paper-muted))",tick:{fontSize:10}}),e.jsx(J,{stroke:"rgb(var(--paper-muted))",domain:[0,"auto"],allowDataOverflow:!1,tick:{fontSize:10}}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",borderRadius:"8px",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}}),r.filter(a=>m.includes(a.id)).map(a=>e.jsx(Je,{type:"monotone",dataKey:a.id,stroke:a.color,fill:`url(#dvGrad-${a.id})`,strokeWidth:2,dot:!1,name:a.label},a.id))]})}),e.jsx("div",{className:"flex items-center justify-center gap-4 mt-2",children:r.filter(a=>m.includes(a.id)).map(a=>e.jsxs("span",{className:"flex items-center gap-1.5 text-xs text-white/65",children:[e.jsx("span",{className:"w-2.5 h-2.5 rounded-full",style:{backgroundColor:a.color}}),a.label]},a.id))})]})})()})]}),Is=({analyticsData:t})=>e.jsxs("div",{className:"space-y-6",children:[e.jsx("div",{className:"bg-blue-900/20 border border-[#5B9BD5]/30 rounded-lg p-4",children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(vt,{className:"w-5 h-5 text-[#5B9BD5] mt-0.5 flex-shrink-0"}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-[#5B9BD5] font-medium text-sm",children:"Session Timeout: 15 Minutes"}),e.jsx("p",{className:"text-paper text-xs mt-1",children:"Sessions are automatically split when events are more than 15 minutes apart. This ensures accurate session tracking and prevents artificially long sessions."})]})]})}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsx(V,{title:"Session Duration Distribution",children:e.jsx(_,{width:"100%",height:250,children:e.jsxs(oe,{data:t.sessionDurations,children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"range",stroke:"rgb(var(--paper-muted))",label:{value:"Duration Range",position:"insideBottom",offset:-5}}),e.jsx(J,{stroke:"rgb(var(--paper-muted))",label:{value:"Sessions",angle:-90,position:"insideLeft"}}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"},content:({payload:s})=>{if(s&&s.length>0){const r=s[0].payload;return e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 p-2 rounded",children:[e.jsx("div",{className:"text-xs text-paper font-semibold",children:r.range}),e.jsxs("div",{className:"text-xs text-paper",children:[r.sessions," Sessions"]})]})}return null}}),e.jsx(ae,{dataKey:"sessions",fill:"#3b82f6"})]})})}),e.jsx(V,{title:"Time to First Conversion",children:e.jsx(_,{width:"100%",height:250,children:e.jsxs(oe,{data:t.timeToFirstConversion,children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"range",stroke:"rgb(var(--paper-muted))",label:{value:"Time Range",position:"insideBottom",offset:-5}}),e.jsx(J,{stroke:"rgb(var(--paper-muted))",label:{value:"Conversions",angle:-90,position:"insideLeft"}}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"},content:({payload:s})=>{if(s&&s.length>0){const r=s[0].payload;return e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 p-2 rounded",children:[e.jsx("div",{className:"text-xs text-paper font-semibold",children:r.range}),e.jsxs("div",{className:"text-xs text-paper",children:[r.conversions," Conversions"]})]})}return null}}),e.jsx(ae,{dataKey:"conversions",fill:"#10b981"})]})})}),e.jsx(V,{title:"Events per Session Distribution",children:e.jsx(_,{width:"100%",height:250,children:e.jsxs(oe,{data:t.eventsPerSessionData.slice(0,20),children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"count",stroke:"rgb(var(--paper-muted))",label:{value:"Number of Events",position:"insideBottom",offset:-5}}),e.jsx(J,{stroke:"rgb(var(--paper-muted))",label:{value:"Sessions",angle:-90,position:"insideLeft"}}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"},content:({payload:s})=>{if(s&&s.length>0){const r=s[0].payload;return e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 p-2 rounded",children:[e.jsxs("div",{className:"text-xs text-paper font-semibold",children:[r.count," Events per Session"]}),e.jsxs("div",{className:"text-xs text-paper",children:[r.sessions," Sessions"]})]})}return null}}),e.jsx(ae,{dataKey:"sessions",fill:"#8b5cf6"})]})})}),e.jsx(V,{title:"Events Over Time",children:e.jsx(_,{width:"100%",height:250,children:e.jsxs(jt,{data:t.timelineData,children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"date",stroke:"rgb(var(--paper-muted))"}),e.jsx(J,{stroke:"rgb(var(--paper-muted))",domain:[0,"auto"],allowDataOverflow:!1}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}}),e.jsx(os,{}),e.jsx(Se,{type:"monotone",dataKey:"pageLoads",stroke:"#8b5cf6",name:"Page Loads",strokeWidth:2}),e.jsx(Se,{type:"monotone",dataKey:"clicks",stroke:"#10b981",name:"Clicks",strokeWidth:2}),e.jsx(Se,{type:"monotone",dataKey:"conversions",stroke:"#f59e0b",name:"Conversions",strokeWidth:2})]})})})]})]}),zs=({analyticsData:t})=>e.jsx("div",{className:"space-y-6",children:e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsx(V,{title:"Page Views by Path",children:e.jsx(_,{width:"100%",height:300,children:e.jsxs(oe,{data:t.pageViewsData,layout:"vertical",children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{type:"number",stroke:"rgb(var(--paper-muted))"}),e.jsx(J,{dataKey:"page",type:"category",stroke:"rgb(var(--paper-muted))",width:100}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}}),e.jsx(ae,{dataKey:"views",fill:"#3b82f6"})]})})}),e.jsx(V,{title:"Top Landing Pages",children:e.jsx(_,{width:"100%",height:300,children:e.jsxs(oe,{data:t.landingPagesData,children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"page",stroke:"rgb(var(--paper-muted))"}),e.jsx(J,{stroke:"rgb(var(--paper-muted))",domain:[0,"auto"],allowDataOverflow:!1}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}}),e.jsx(ae,{dataKey:"count",fill:"#10b981"})]})})}),e.jsx(V,{title:"Top Exit Pages",children:e.jsx(_,{width:"100%",height:300,children:e.jsxs(oe,{data:t.exitPagesData,children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"page",stroke:"rgb(var(--paper-muted))"}),e.jsx(J,{stroke:"rgb(var(--paper-muted))",domain:[0,"auto"],allowDataOverflow:!1}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}}),e.jsx(ae,{dataKey:"count",fill:"#ef4444"})]})})}),e.jsx(V,{title:"Page Transitions Flow",children:e.jsx("div",{className:"space-y-2 max-h-80 overflow-y-auto",children:t.pageFlowData.map((s,r)=>e.jsxs("div",{className:"flex items-center gap-2 p-2 bg-[#1C1C1C] rounded",children:[e.jsx("div",{className:"flex-1 text-sm text-paper truncate",children:s.from}),e.jsx(Gt,{className:"w-4 h-4 text-signal flex-shrink-0"}),e.jsx("div",{className:"flex-1 text-sm text-paper truncate",children:s.to}),e.jsx("div",{className:"px-2 py-1 bg-signal/20 text-signal rounded text-xs font-medium flex-shrink-0",children:s.value})]},r))})})]})}
517),Ls=({analyticsData:t})=>e.jsx("div",{className:"space-y-6",children:e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsx(V,{title:"Conversion Rate by CTA",children:e.jsx("div",{className:"overflow-x-auto",children:e.jsxs("table",{className:"w-full",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-white/10",children:[e.jsx("th",{className:"text-left py-2 px-4 text-white/65 text-sm",children:"CTA"}),e.jsx("th",{className:"text-right py-2 px-4 text-white/65 text-sm",children:"Clicks"}),e.jsx("th",{className:"text-right py-2 px-4 text-white/65 text-sm",children:"Conversions"}),e.jsx("th",{className:"text-right py-2 px-4 text-white/65 text-sm",children:"Rate"})]})}),e.jsx("tbody",{children:t.ctaData.slice(0,10).map((s,r)=>e.jsxs("tr",{className:"border-b border-white/10 hover:bg-[#242424]",children:[e.jsx("td",{className:"py-2 px-4 text-paper text-sm",children:s.cta}),e.jsx("td",{className:"py-2 px-4 text-right text-paper text-sm",children:s.clicks}),e.jsx("td",{className:"py-2 px-4 text-right text-paper text-sm",children:s.conversions}),e.jsx("td",{className:"py-2 px-4 text-right",children:e.jsxs("span",{className:"px-2 py-1 bg-signal/20 text-signal rounded text-xs",children:[s.rate,"%"]})})]},r))})]})})}),e.jsx(V,{title:"Conversions by Page",children:e.jsx(_,{width:"100%",height:300,children:e.jsxs(je,{children:[e.jsx(ye,{data:t.pageConversionData,cx:"50%",cy:"50%",labelLine:!1,label:({page:s,conversions:r})=>`${s}: ${r}`,outerRadius:80,fill:"#8884d8",dataKey:"conversions",children:t.pageConversionData.map((s,r)=>e.jsx(Ce,{fill:he[r%he.length]},`cell-${r}`))}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}})]})})}),e.jsx(V,{title:"Conversion Funnel with Drop-off Analysis",children:e.jsx("div",{className:"space-y-4",children:t.funnelData.map((s,r)=>e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex justify-between items-center",children:[e.jsx("span",{className:"text-paper font-medium",children:s.step}),e.jsx("span",{className:"text-signal font-bold",children:s.count.toLocaleString()})]}),e.jsx("div",{className:"w-full bg-[#1C1C1C] rounded-full h-8 relative overflow-hidden",children:e.jsx("div",{className:"bg-signal h-full rounded-full transition-all duration-500",style:{width:`${r===0?100:s.count/t.funnelData[0].count*100}%`}})}),r>0&&s.dropOff>0&&e.jsxs("div",{className:"text-xs text-[#D6604F]",children:["â Drop-off: ",s.dropOff.toLocaleString()," (",s.dropOffRate,"%)"]})]},r))})}),e.jsx(V,{title:"Top Paths to Conversion",children:e.jsxs("div",{className:"space-y-3 max-h-80 overflow-y-auto",children:[t.conversionPaths.map((s,r)=>e.jsxs("div",{className:"p-3 bg-[#1C1C1C] rounded-lg",children:[e.jsxs("div",{className:"flex justify-between items-start mb-2",children:[e.jsxs("span",{className:"text-xs text-white/65",children:["Path #",r+1]}),e.jsxs("span",{className:"px-2 py-1 bg-[#3FA86B]/20 text-[#3FA86B] rounded text-xs font-medium",children:[s.count," conversions"]})]}),e.jsx("div",{className:"text-sm text-paper font-mono break-all",children:s.path})]},r)),t.conversionPaths.length===0&&e.jsx("div",{className:"text-center py-4 text-white/65 text-sm",children:"No conversion paths recorded yet"})]})})]})}),Es=({analyticsData:t})=>e.jsx("div",{className:"space-y-6",children:e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsx(V,{title:"Clicks by Element Text",children:e.jsx(_,{width:"100%",height:300,children:e.jsxs(oe,{data:t.clicksByElementData,layout:"vertical",children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{type:"number",stroke:"rgb(var(--paper-muted))"}),e.jsx(J,{dataKey:"element",type:"category",stroke:"rgb(var(--paper-muted))",width:120}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}}),e.jsx(ae,{dataKey:"count",fill:"#8b5cf6"})]})})}),e.jsx(V,{title:"Clicks by Element ID",children:e.jsx(_,{width:"100%",height:300,children:e.jsxs(oe,{data:t.clicksByIdData,layout:"vertical",children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{type:"number",stroke:"rgb(var(--paper-muted))"}),e.jsx(J,{dataKey:"id",type:"category",stroke:"rgb(var(--paper-muted))",width:120}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}}),e.jsx(ae,{dataKey:"count",fill:"#10b981"})]})})}),e.jsx(V,{title:"Clicks by Element Type",children:e.jsx(_,{width:"100%",height:250,children:e.jsxs(je,{children:[e.jsx(ye,{data:t.clicksByTypeData,cx:"50%",cy:"50%",labelLine:!1,label:({type:s,count:r})=>`${s}: ${r}`,outerRadius:80,fill:"#8884d8",dataKey:"count",children:t.clicksByTypeData.map((s,r)=>e.jsx(Ce,{fill:he[r%he.length]},`cell-${r}`))}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}})]})})}),e.jsx(V,{title:"Click Position Distribution",children:e.jsx(_,{width:"100%",height:250,children:e.jsxs(yt,{children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"x",stroke:"rgb(var(--paper-muted))",name:"X Position"}),e.jsx(J,{dataKey:"y",stroke:"rgb(var(--paper-muted))",name:"Y Position"}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}}),e.jsx(et,{data:t.clickCoordinates,fill:"#f59e0b"})]})})})]})}
517),Hs=({analyticsData:t})=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-3 gap-6",children:[e.jsx(V,{title:"Events per Session Distribution",children:e.jsx(_,{width:"100%",height:200,children:e.jsxs(oe,{data:t.eventsPerSessionData.slice(0,20),children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"count",stroke:"rgb(var(--paper-muted))",label:{value:"Number of Events",position:"insideBottom",offset:-5}}),e.jsx(J,{stroke:"rgb(var(--paper-muted))",label:{value:"Sessions",angle:-90,position:"insideLeft"}}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"},content:({payload:s})=>{if(s&&s.length>0){const r=s[0].payload;return e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 p-2 rounded",children:[e.jsxs("div",{className:"text-xs text-paper font-semibold",children:[r.count," Events"]}),e.jsxs("div",{className:"text-xs text-paper",children:[r.sessions," Sessions"]})]})}return null}}),e.jsx(ae,{dataKey:"sessions",fill:"#3b82f6"})]})})}),e.jsx(V,{title:"Clicks per Session Distribution",children:e.jsx(_,{width:"100%",height:200,children:e.jsxs(oe,{data:t.clicksPerSessionData.slice(0,20),children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"count",stroke:"rgb(var(--paper-muted))",label:{value:"Number of Clicks",position:"insideBottom",offset:-5}}),e.jsx(J,{stroke:"rgb(var(--paper-muted))",label:{value:"Sessions",angle:-90,position:"insideLeft"}}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"},content:({payload:s})=>{if(s&&s.length>0){const r=s[0].payload;return e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 p-2 rounded",children:[e.jsxs("div",{className:"text-xs text-paper font-semibold",children:[r.count," Clicks"]}),e.jsxs("div",{className:"text-xs text-paper",children:[r.sessions," Sessions"]})]})}return null}}),e.jsx(ae,{dataKey:"sessions",fill:"#10b981"})]})})}),e.jsx(V,{title:"Page Loads per Session Distribution",children:e.jsx(_,{width:"100%",height:200,children:e.jsxs(oe,{data:t.pageLoadsPerSessionData.slice(0,20),children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"count",stroke:"rgb(var(--paper-muted))",label:{value:"Number of Page Loads",position:"insideBottom",offset:-5}}),e.jsx(J,{stroke:"rgb(var(--paper-muted))",label:{value:"Sessions",angle:-90,position:"insideLeft"}}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"},content:({payload:s})=>{if(s&&s.length>0){const r=s[0].payload;return e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 p-2 rounded",children:[e.jsxs("div",{className:"text-xs text-paper font-semibold",children:[r.count," Page Loads"]}),e.jsxs("div",{className:"text-xs text-paper",children:[r.sessions," Sessions"]})]})}return null}}),e.jsx(ae,{dataKey:"sessions",fill:"#8b5cf6"})]})})})]}),e.jsx(V,{title:"User Behavioral Clusters",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:t.behavioralClusters.map((s,r)=>e.jsxs("div",{className:"p-4 bg-[#1C1C1C] rounded-lg border border-white/10",children:[e.jsx("h4",{className:"text-paper font-medium mb-3",children:s.name}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex justify-between",children:[e.jsx("span",{className:"text-white/65 text-sm",children:"Sessions:"}),e.jsx("span",{className:"text-paper font-semibold",children:s.count})]}),e.jsxs("div",{className:"flex justify-between",children:[e.jsx("span",{className:"text-white/65 text-sm",children:"Avg Duration:"}),e.jsxs("span",{className:"text-paper font-semibold",children:[s.avgDuration,"s"]})]}),e.jsxs("div",{className:"flex justify-between",children:[e.jsx("span",{className:"text-white/65 text-sm",children:"Avg Events:"}),e.jsx("span",{className:"text-paper font-semibold",children:s.avgEvents})]})]})]},r))})})]}
517),Ms=({analyticsData:t})=>e.jsx("div",{className:"space-y-6",children:e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-3 gap-6",children:[e.jsx(V,{title:"Browser Distribution",children:e.jsx(_,{width:"100%",height:250,children:e.jsxs(je,{children:[e.jsx(ye,{data:t.browserData,cx:"50%",cy:"50%",labelLine:!1,label:({name:s,value:r})=>`${s}: ${r}`,outerRadius:80,fill:"#8884d8",dataKey:"value",children:t.browserData.map((s,r)=>e.jsx(Ce,{fill:he[r%he.length]},`cell-${r}`))}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}})]})})}),e.jsx(V,{title:"Top Screen Resolutions",children:e.jsx(_,{width:"100%",height:250,children:e.jsxs(oe,{data:t.screenData,layout:"vertical",children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{type:"number",stroke:"rgb(var(--paper-muted))"}),e.jsx(J,{dataKey:"size",type:"category",stroke:"rgb(var(--paper-muted))",width:80}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}}),e.jsx(ae,{dataKey:"count",fill:"#10b981"})]})})}),e.jsx(V,{title:"Language Distribution",children:e.jsx(_,{width:"100%",height:250,children:e.jsxs(je,{children:[e.jsx(ye,{data:t.languageData,cx:"50%",cy:"50%",labelLine:!1,label:({payload:s})=>`${s.lang}: ${s.count}`,outerRadius:80,fill:"#8884d8",dataKey:"count",nameKey:"lang",children:t.languageData.map((s,r)=>e.jsx(Ce,{fill:he[r%he.length]},`cell-${r}`))}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"},formatter:(s,r)=>[s,r]})]})})})]})}),Fs=({analyticsData:t})=>e.jsxs("div",{className:"space-y-6",children:[e.jsx(V,{title:"Click Map by Variation",children:t.clicksByVariation&&t.clicksByVariation.length>0?e.jsxs("div",{className:"space-y-6",children:[e.jsxs("p",{className:"text-xs text-white/65",children:["Each frame represents a variation's viewport. Dots show where visitors clicked â",e.jsx("span",{className:"text-[#3FA86B]",children:" green"})," dots led to a conversion in that session,",e.jsx("span",{className:"text-signal",children:" amber"})," dots did not. Larger dots = more clicks in that spot."]}),e.jsx("div",{className:"grid grid-cols-1 xl:grid-cols-2 gap-4",children:t.clicksByVariation.map(s=>e.jsx(Rs,{variation:s},s.variationId))})]}):e.jsx("div",{className:"bg-[#1C1C1C] p-8 rounded-lg text-center text-white/65 text-sm",children:"No click coordinate data available for the current filters."})}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs(V,{title:"Rage Click Detection",children:[e.jsx("div",{className:"bg-red-900/10 border border-[#D6604F]/30 rounded-lg p-4 mb-4",children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(Yt,{className:"w-5 h-5 text-[#D6604F] mt-0.5 flex-shrink-0"}),e.jsxs("div",{children:[e.jsxs("h4",{className:"text-[#D6604F] font-medium text-sm",children:["Rage Clicks Detected: ",t.rageClicks.length]}),e.jsx("p",{className:"text-paper text-xs mt-1",children:"Rage clicks indicate user frustration - 3+ clicks on the same element within 3 seconds"})]})]})}),e.jsx("div",{className:"space-y-3 max-h-96 overflow-y-auto",children:t.rageClicks.length>0?t.rageClicks.map((s,r)=>e.jsxs("div",{className:"p-3 bg-red-900/10 border border-[#D6604F]/20 rounded-lg",children:[e.jsxs("div",{className:"flex justify-between items-start mb-2",children:[e.jsx("span",{className:"text-sm font-medium text-paper",children:s.element}),e.jsxs("span",{className:"px-2 py-1 bg-[#D6604F]/20 text-[#D6604F] rounded text-xs font-medium",children:[s.clickCount," clicks"]})]}),e.jsxs("div",{className:"text-xs text-white/65",children:["Time span: ",s.timeSpan.toFixed(2),"s | Session: ",s.session.substring(0,8),"..."]})]},r)):e.jsx("div",{className:"text-center py-8 text-white/65",children:"No rage clicks detected - users are happy! ð"})})]}),e.jsx(V,{title:"Click Coordinate Scatter",children:e.jsx(_,{width:"100%",height:400,children:e.jsxs(yt,{children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"x",stroke:"rgb(var(--paper-muted))",name:"X Position",label:{value:"Screen Width",position:"insideBottom",offset:-5}}),e.jsx(J,{dataKey:"y",stroke:"rgb(var(--paper-muted))",name:"Y Position",label:{value:"Screen Height",angle:-90,position:"insideLeft"}}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"},content:({payload:s})=>{if(s&&s.length>0){const r=s[0].payload;return e.jsxs("div",{className:"bg-[#1C1C1C] border border-white/10 p-2 rounded",children:[e.jsxs("div",{className:"text-xs text-paper",children:["Position: (",r.x,", ",r.y,")"]}),e.jsx("div",{className:`text-xs font-medium ${r.converted?"text-[#3FA86B]":"text-white/65"}`,children:r.converted?"Converted â":"Not converted"})]})}return null}}),e.jsx(et,{data:t.clickCoordinates.filter(s=>s.converted),fill:"#10b981",name:"Converted Clicks"}),e.jsx(et,{data:t.clickCoordinates.filter(s=>!s.converted),fill:"#6b7280",name:"Non-converted Clicks"})]})})})]})]}),Rs=({variation:t})=>{const{variationName:s,viewName:r,clicks:n,topElements:m,totalClicks:p,convertedClicks:f}=t,w=Array.isArray(n)?n:[],h=p>0?(f/p*100).toFixed(1):"0.0",B=3,c={};
517w.forEach(u=>{if(!Number.isFinite(u.xPct)||!Number.isFinite(u.yPct))return;const g=Math.round(u.xPct/B)*B,x=Math.round(u.yPct/B)*B,y=`${g}_${x}`;c[y]||(c[y]={xPct:g,yPct:x,total:0,converted:0,labels:{}}),c[y].total+=1,u.converted&&(c[y].converted+=1),c[y].labels[u.label]=(c[y].labels[u.label]||0)+1});const l=Object.values(c),a=l.reduce((u,g)=>Math.max(u,g.total),1);return e.jsxs("div",{className:"rounded-lg border border-white/10 bg-[#1C1C1C] p-4",children:[e.jsxs("div",{className:"flex items-start justify-between gap-3 mb-3",children:[e.jsxs("div",{className:"min-w-0",children:[r&&e.jsx("div",{className:"text-[10px] text-white/65 truncate",children:r}),e.jsx("div",{className:"text-sm font-semibold text-paper truncate",children:s})]}),e.jsxs("div",{className:"flex items-center gap-2 flex-shrink-0",children:[e.jsxs("div",{className:"px-2 py-1 rounded-md bg-[#1C1C1C] border border-white/10 text-xs text-paper",children:[p.toLocaleString()," clicks"]}),e.jsxs("div",{className:"px-2 py-1 rounded-md bg-[#3FA86B]/10 border border-[#3FA86B]/30 text-xs text-[#3FA86B]",children:[h,"% conv"]})]})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-5 gap-4",children:[e.jsxs("div",{className:"lg:col-span-3",children:[e.jsxs("div",{className:"relative w-full rounded-lg border border-white/10/70 bg-[radial-gradient(circle_at_top,_rgba(240,156,12,0.06),_transparent_60%)] overflow-hidden",style:{aspectRatio:"16 / 10"},children:[e.jsx("div",{className:"absolute inset-0 pointer-events-none opacity-40",style:{backgroundImage:"linear-gradient(to right, rgba(148,163,184,0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(148,163,184,0.08) 1px, transparent 1px)",backgroundSize:"10% 10%"}}),e.jsx("div",{className:"absolute left-0 right-0 border-t border-dashed border-white/10/60",style:{to
517p:"55%"},children:e.jsx("span",{className:"absolute -top-4 right-2 text-[9px] text-white/65",children:"approx. fold"})}),l.length===0?e.jsx("div",{className:"absolute inset-0 flex items-center justify-center text-xs text-white/65",children:"No coordinate data for this variation"}):l.map((u,g)=>{var v;const y=8+u.total/a*24,k=u.converted>0,i=k?"rgba(34,197,94,0.55)":"rgba(240,156,12,0.55)",o=k?"rgba(34,197,94,0.9)":"rgba(240,156,12,0.9)",d=(v=Object.entries(u.labels).sort((C,$)=>$[1]-C[1])[0])==null?void 0:v[0];return e.jsx("div",{className:"absolute rounded-full pointer-events-auto transition-transform hover:scale-125",style:{left:`${u.xPct}%`,top:`${u.yPct}%`,width:`${y}px`,height:`${y}px`,transform:"translate(-50%, -50%)",background:i,boxShadow:`0 0 0 1.5px ${o}, 0 0 12px ${i}`},title:`${u.total} click${u.total===1?"":"s"}${u.converted?` · ${u.converted} converted`:""}${d?` · ${d}`:""}`},g)})]}),e.jsxs("div",{className:"flex items-center justify-between mt-2 text-[10px] text-white/65",children:[e.jsx("span",{children:"Top-left of viewport"}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-[#3FA86B]"})," Converted"]}),e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-signal"})," Non-converted"]})]})]})]}),e.jsxs("div",{className:"lg:col-span-2",children:[e.jsx("div",{className:"text-[10px] text-white/65 mb-2",children:"Most clicked elements"}),m&&m.length>0?e.jsx("ul",{className:"space-y-1.5",children:m.map((u,g)=>{const x=p>0?u.count/p*100:0,y=u.count>0?u.converted/u.count*100:0;return e.jsxs("li",{className:"relative rounded-md bg-[#1C1C1C]/60 border border-white/10 px-2.5 py-1.5",children:[e.jsx("div",{className:"absolute inset-y-0 left-0 rounded-md bg-signal/10",style:{width:`${Math.max(4,x)}%`}}),e.jsxs("div",{className:"relative flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"min-w-0 flex items-center gap-2",children:[u.tag&&e.jsx("span",{className:"text-[9px] px-1.5 py-0.5 rounded bg-[#1C1C1C] text-white/65 flex-shrink-0",children:u.tag}),e.jsx("span",{className:"text-xs text-paper truncate",children:u.label})]}),e.jsxs("div",{className:"flex items-center gap-2 flex-shrink-0",children:[e.jsx("span",{className:"text-xs text-paper tabular-nums",children:u.count}),u.converted>0&&e.jsxs("span",{className:"text-[10px] text-[#3FA86B] tabular-nums",children:[y.toFixed(0),"% conv"]})]})]})]},g)})}):e.jsx("div",{className:"text-xs text-white/65",children:"No element data."})]})]})]})},xt={blue:{text:"text-[#5B9BD5]",bg:"bg-[#5B9BD5]/10",ring:"ring-[#5B9BD5]/20",glow:"rgba(59,130,246,0.35)",bar:"from-[#5B9BD5] to-[#5B9BD5]"},purple:{text:"text-[#8E7CC3]",bg:"bg-[#8E7CC3]/10",ring:"ring-[#8E7CC3]/20",glow:"rgba(168,85,247,0.35)",bar:"from-[#8E7CC3] to-[#8E7CC3]"},green:{text:"text-[#3FA86B]",bg:"bg-[#3FA86B]/10",ring:"ring-[#3FA86B]/20",glow:"rgba(34,197,94,0.35)",bar:"from-[#3FA86B] to-[#3FA86B]"},yellow:{text:"text-signal",bg:"bg-signal/10",ring:"ring-signal/25",glow:"rgba(240,156,12,0.4)",bar:"from-signal to-[#D9A441]"},red:{text:"text-[#D6604F]",bg:"bg-[#D6604F]/10",ring:"ring-[#D6604F]/20",glow:"rgba(239,68,68,0.35)",bar:"from-[#D6604F] to-[#D6604F]"},indigo:{text:"text-[#8E7CC3]",bg:"bg-[#8E7CC3]/10",ring:"ring-[#8E7CC3]/20",glow:"rgba(99,102,241,0.35)",bar:"from-[#8E7CC3] to-[#8E7CC3]"}},Ps=t=>typeof t=="number"&&Number.isFinite(t)?t>=1e6?(t/1e6).toFixed(t>=1e7?0:1)+"M":t>=1e4?(t/1e3).toFixed(t>=1e5?0:1)+"k":t.toLocaleString():t,We=({label:t,icon:s,children:r})=>e.jsxs("label",{className:"group relative flex items-center gap-3 bg-[#1C1C1C] hover:bg-[#242424] border border-white/10 hover:border-signal/40 rounded-md px-4 py-3 transition-all cursor-pointer",children:[e.jsx("span",{className:"flex items-center justify-center w-8 h-8 rounded-lg bg-signal/10 text-signal flex-shrink-0",children:e.jsx(s,{className:"w-4 h-4"})}),e.jsxs("span",{className:"flex-1 min-w-0",children:[e.jsx("span",{className:"block text-[10px] font-semibold text-white/65 mb-0.5",children:t}),r]}),e.jsx(st,{className:"w-4 h-4 text-white/65 flex-shrink-0"})]}
517),Be=({title:t,value:s,icon:r,color:n="blue",subtitle:m})=>{const p=xt[n]||xt.blue,f=typeof s=="string"?s:Ps(s);return e.jsxs("div",{className:"group relative overflow-hidden rounded-lg border border-white/10 bg-[#1C1C1C] p-5 transition-all duration-300 hover:border-white/10 hover:-translate-y-0.5",style:{boxShadow:"0 0 0 1px transparent"},children:[e.jsx("div",{className:"absolute -top-8 -right-8 w-24 h-24 rounded-full opacity-40 blur-2xl transition-opacity group-hover:opacity-70",style:{backgroundColor:p.glow}}),e.jsxs("div",{className:"relative",children:[e.jsx("h3",{className:"text-[10px] font-bold text-white/65 tracking-[0.15em] mb-3",children:t}),e.jsx("p",{className:"text-3xl font-bold text-paper tabular-nums leading-none tracking-tight",children:f}),m&&e.jsx("p",{className:"text-xs text-white/65 mt-2 truncate",children:m}),e.jsx("div",{className:`mt-4 h-0.5 rounded-full bg-gradient-to-r ${p.bar} opacity-70`})]})]})},V=({title:t,subtitle:s,children:r,action:n})=>e.jsxs("div",{className:"group relative rounded-lg border border-white/10 bg-[#1C1C1C] p-6 transition-colors hover:border-white/10",children:[e.jsxs("div",{className:"flex items-start justify-between gap-4 mb-5",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"w-1 h-4 rounded-full bg-signal"}),e.jsx("h3",{className:"text-base font-semibold text-paper truncate",children:t})]}),s&&e.jsx("p",{className:"text-xs text-white/65 mt-1 ml-3",children:s})]}),n&&e.jsx("div",{className:"flex-shrink-0",children:n})]}),r]}),Os=t=>{if(!t||t.length===0)return null;const s=[];let r=0,n=0;t.forEach(l=>{var a;(a=l.contentVariations)==null||a.forEach(u=>{const g=u.impressions||0,x=u.conversions||0,y=g>0?x/g*100:0;r+=g,n+=x,s.push({viewId:l._id,viewName:l.name||"Unnamed View",variationId:u._id,variationName:u.name||"Unnamed Variation",impressions:g,conversions:x,conversionRate:y,headline:u.headline||u.title||"",description:u.description||u.content||"",cta:u.cta||u.callToAction||"",tone:u.tone||"unknown"})})}),s.sort((l,a)=>a.conversionRate-l.conversionRate);const m=r>0?n/r*100:0,p=s.filter(l=>l.conversionRate>m&&l.impressions>=10),f=s.filter(l=>l.conversionRate<m&&l.impressions>=10),w=s.filter(l=>l.impressions<10),h={"Excellent (>5%)":s.filter(l=>l.conversionRate>5).length,"Good (3-5%)":s.filter(l=>l.conversionRate>=3&&l.conversionRate<=5).length,"Fair (1-3%)":s.filter(l=>l.conversionRate>=1&&l.conversionRate<3).length,"Poor (<1%)":s.filter(l=>l.conversionRate<1).length},B=Object.entries(h).map(([l,a])=>({range:l,count:a})),c=s.slice(0,5).map(l=>({name:`${l.variationName.substring(0,20)}...`,rate:parseFloat(l.conversionRate.toFixed(2)),conversions:l.conversions,impressions:l.impressions}));return{totalImpressions:r,totalConversions:n,overallConversionRate:m,variationCount:s.length,allVariations:s,topPerformers:p,bottomPerformers:f,insufficientData:w,performanceDistribution:B,topVariationsChart:c}},pt=["#5B9BD5","#8E7CC3","#3FA86B","#D9A441","#D6604F","#5B9BD5","#ec4899","#84cc16"],Vs=({isOpen:t,onClose:s,variationData:r,dynamicViews:n})=>{var x,y,k;const{activeClient:m}=rt(),[p,f]=S.useState(((y=(x=m==null?void 0:m.company)==null?void 0:x[0])==null?void 0:y.dvAnal)||null),[w,h]=S.useState(!1),[B,c]=S.useState(null),{addAnalysis:l}=ze(),a=S.useMemo(()=>{var i,o,d,v;return r?{overview:{totalViews:(n==null?void 0:n.length)||0,totalVariations:r.variationCount,totalImpressions:r.totalImpressions,totalConversions:r.totalConversions,overallConversionRate:r.overallConversionRate.toFixed(2)+"%"},topPerformers:r.topPerformers.slice(0,5).map(C=>({name:C.variationName,view:C.viewName,conversionRate:C.conversionRate.toFixed(2)+"%",conversions:C.conversions,impressions:C.impressions,headline:C.headline,cta:C.cta,tone:C.tone})),bottomPerformers:r.bottomPerformers.slice(0,5).map(C=>({name:C.variationName,view:C.viewName,conversionRate:C.conversionRate.toFixed(2)+"%",conversions:C.conversions,impressions:C.impressions,headline:C.headline,cta:C.cta,tone:C.tone})),performance:{excellent:((i=r.performanceDistribution.find(C=>C.range==="Excellent (>5%)"))==null?void 0:i.count)||0,good:((o=r.performanceDistribution.find(C=>C.range==="Good (3-5%)"))==null?void 0:o.count)||0,fair:((d=r.performanceDistribution.find(C=>C.range==="Fair (1-3%)"))==null?void 0:d.count)||0,poor:((v=r.performanceDistribution.find(C=>C.range==="Poor (<1%)"))==null?void 0:v.count)||0}}:null},[r,n]),u=async()=>{var i;h(!0),c(null);try{const d=await(await fetch(as,{method:"POST",headers:ns(),body:JSON.stringify({messages:[{role:"user",content:`You are an expert conversion rate optimization analyst. Analyze this A/B test variation performance data and provide actionable insights. 518 519DATA: 520${JSON.stringify(a,null,2)} 521 522Provide a detailed analysis in this EXACT markdown format: 523 524## Executive Summary 525[2-3 sentences on overall performance and key finding] 526
527## Conversion Rate Analysis 528**Overall Rate**: ${a.overview.overallConversionRate} 529- Total Impressions: ${a.overview.totalImpressions} 530- Total Conversions: ${a.overview.totalConversions} 531- Variations Tested: ${a.overview.totalVariations} 532 533### Performance Distribution 534- Excellent performers: ${a.performance.excellent} 535- Good performers: ${a.performance.good} 536- Fair performers: ${a.performance.fair} 537- Poor performers: ${a.performance.poor} 538 539## Top Performing Variations 540[Analyze the top 3-5 performers. What do they have in common? Tone, messaging, CTA style?] 541 542## Bottom Performing Variations 543[Analyze the bottom performers. What patterns emerge? Why might they be underperforming?] 544 545## Key Patterns & Insights 546[3-5 bullet points of patterns you notice across variations] 547 548## Recommendations 549[5-7 specific, actionable recommendations for improving conversion rates] 550 551## Next Steps 552[2-3 immediate actions to take based on this data] 553 554Focus on: 555- What messaging/tone is working vs not working 556- Which CTAs drive conversions 557- Pattern differences between winners and losers 558- Statistical confidence (consider sample sizes) 559- Specific copy/content recommendations`}]})})).json();if(console.log(d),d.success&&((i=d.response)==null?void 0:i.length)>0){const v=d.response;f(v),l({report:v})}else throw new Error("No content received from AI")}catch(o){console.error("Error generating report:",o),c("Failed to generate report. Please try again.")}finally{h(!1)}},g=()=>{if(!p)return;const i=new Blob([p],{type:"text/markdown"}),o=URL.createObjectURL(i),d=document.createElement("a");d.href=o,d.download=`variation-analysis-${new Date().toISOString().split("T")[0]}.md`,document.body.appendChild(d),d.click(),document.body.removeChild(d),URL.revokeObjectURL(o)};return t?e.jsx("div",{className:"fixed inset-0 z-[9999] overflow-y-auto",children:e.jsxs("div",{className:"flex items-center justify-center min-h-screen px-4 pt-4 pb-20",children:[e.jsx("div",{className:"fixed inset-0 bg-black/70 transition-opacity",onClick:s}),e.jsxs("div",{className:"relative bg-[#1C1C1C] rounded-lg shadow-2xl max-w-6xl w-full max-h-[90vh] overflow-hidden border border-white/10",children:[e.jsxs("div",{className:"bg-[#1C1C1C] px-6 py-4 flex items-center justify-between border-b border-white/10",children:[e.jsxs("div",{className:"flex flex-wrap items-center",children:[e.jsx("img",{src:qt,className:"h-[30px] mr-4"}),e.jsx("h2",{className:"text-2xl font-bold text-paper",children:"Dynamic Views Performance AI Analysis"})]}),e.jsx("button",{onClick:s,className:"text-paper hover:bg-white/20 rounded-lg p-2 transition-colors",children:e.jsx(ke,{className:"w-6 h-6"})})]}),e.jsxs("div",{className:"p-6 overflow-y-auto max-h-[calc(90vh-80px)]",children:[!p&&!w&&!B&&e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"inline-flex items-center justify-center w-16 h-16 bg-signal/20 rounded-full mb-4",children:e.jsx(fe,{className:"w-8 h-8 text-signal"})}),e.jsx("h3",{className:"text-xl font-semibold text-paper mb-2",children:"Ready to Analyze Your Variations"}),e.jsx("p",{className:"text-white/65 mb-6",children:"Get AI-powered insights on which content variations are driving conversions and why"}),e.jsx("button",{onClick:u,className:"bg-signal/80 text-paper px-6 py-3 rounded-lg font-medium hover:bg-signal/70 transition-all shadow-lg hover:shadow-xl",children:"Generate Analysis"})]}),e.jsxs("div",{className:"grid grid-cols-2 md:grid-cols-5 gap-4 w-full max-w-6xl mt-8",children:[e.jsxs("div",{className:"bg-[#1C1C1C] p-4 rounded-lg border border-white/10",children:[e.jsx("div",{className:"text-white/65 text-sm mb-1",children:"Total Variations"}),e.jsx("div",{className:"text-2xl font-bold text-paper",children:(a==null?void 0:a.overview.totalVariations)||0})]}),e.jsxs("div",{className:"bg-[#1C1C1C] p-4 rounded-lg border border-white/10",children:[e.jsx("div",{className:"text-white/65 text-sm mb-1",children:"Impressions"}),e.jsx("div",{className:"text-2xl font-bold text-[#8E7CC3]",children:(a==null?void 0:a.overview.totalImpressions)||0})]}),e.jsxs("div",{className:"bg-[#1C1C1C] p-4 rounded-lg border border-white/10",children:[e.jsx("div",{className:"text-white/65 text-sm mb-1",children:"Conversions"}),e.jsx("div",{className:"text-2xl font-bold text-[#3FA86B]",children:(a==null?void 0:a.overview.totalConversions)||0})]}),e.jsxs("div",{className:"bg-[#1C1C1C] p-4 rounded-lg border border-white/10",children:[e.jsx("div",{className:"text-white/65 text-sm mb-1",children:"Conv. Rate"}),e.jsx("div",{className:"text-2xl font-bold text-[#D9A441]",children:(a==null?void 0:a.overview.overallConversionRate)||"0%"})]}),e.jsxs("div",{className:"bg-[#1C1C1C] p-4 rounded-lg border border-white/10",children:[e.jsx("div",{className:"text-white/65 text-sm mb-1",children:"Top Performer"}),e.jsxs("div",{className:"text-lg font-bold text-[#5B9BD5]",children:[((k=r==null?void 0:r.topPerformers[0])==null?void 0:k.conversionRate.toFixed(1))||"0","%"]})]})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6 mt-8",children:[e.jsxs("div",{className:"bg-[#1C1C1C]/30 p-4 rounded-lg border border-white/10",children:[e.jsx("h4",{className:"text-paper font-semibold mb-4",children:"Top 5 Variations"}),e.jsx(_,{width:"100%",height:250,children:e.jsxs(oe,{data:(r==null?void 0:r.topVariationsChart)||[],children:[e.jsx(ee,{strokeDasharray:"3 3",stroke:"rgb(var(--white) / 0.08)"}),e.jsx(Z,{dataKey:"name",stroke:"rgb(var(--paper-muted))"}),e.jsx(J,{stroke:"rgb(var(--paper-muted))"}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",borderRadius:"8px",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"},formatter:(i,o)=>o==="rate"?[i+"%","Conv. Rate"]:[i,o]}),e.jsx(ae,{dataKey:"rate",fill:"#3b82f6"})]})})]}),e.jsxs("div",{className:"bg-[#1C1C1C]/30 p-4 rounded-lg border border-white/10",children:[e.jsx("h4",{className:"text-paper font-semibold mb-4",children:"Performance Distribution"}),e.jsx(_,{width:"100%",height:250,children:e.jsxs(je,{children:[e.jsx(ye,{data:(r==null?void 0:r.performanceDistribution)||[],cx:"50%",cy:"50%",labelLine:!1,label:({range:i,count:o})=>`${i}: ${o}`,outerRadius:80,fill:"#8884d8",dataKey:"count",children:((r==null?void 0:r.performanceDistribution)||[]).map((i,o)=>e.jsx(Ce,{fill:pt[o%pt.length]},`cell-${o}`))}),e.jsx(U,{contentStyle:{backgroundColor:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",borderRadius:"8px",color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}})]})})]})]})]}),w&&e.jsxs("div",{className:"flex flex-col items-center justify-center py-12 space-y-4",children:[e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"w-16 h-16 border-4 border-white/10 border-t-signal rounded-full animate-spin"}),e.jsx("div",{className:"w-16 h-16 border-4 border-transparent border-t-signal rounded-full animate-spin absolute top-0 left-0",style:{animationDirection:"reverse",animationDuration:"1.5s"}})]}),e.jsx("p",{className:"text-white/65 text-lg",children:"Analyzing variation performance..."}),e.jsx("p",{className:"text-white/65 text-sm",children:"This may take 10-20 seconds"})]}),B&&e.jsxs("div",{className:"text-center py-12",children:[e.jsx("div",{className:"inline-flex items-center justify-center w-16 h-16 bg-[#D6604F]/20 rounded-full mb-4",children:e.jsx(Ct,{className:"w-8 h-8 text-[#D6604F]"})}),e.jsx("h3",{className:"text-xl font-semibold text-paper mb-2",children:"Analysis Failed"}),e.jsx("p",{className:"text-white/65 mb-6",children:B}),e.jsx("button",{onClick:u,className:"bg-[#D6604F] text-paper px-6 py-2 rounded-lg hover:bg-red-700 transition-colors",children:"Retry Analysis"})]}),p&&e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"flex gap-3 justify-end",children:[e.jsxs("button",{onClick:g,className:"text-paper px-4 py-2 rounded-lg transition-colors flex items-center gap-2 text-sm font-medium hover:bg-[#242424]",children:[e.jsx(Xt,{className:"w-5 h-5"}),"Download Report"]}),e.jsxs("button",{onClick:()=>{f(null),c(null)},className:"bg-signal/80 text-paper px-4 py-2 rounded-lg hover:bg-signal/70 transition-colors flex items-center gap-2 text-sm font-medium",children:[e.jsx(Qt,{className:"w-5 h-5"}),"Regenerate"]})]}),e.jsx("div",{className:"bg-[#1C1C1C]/30 rounded-lg p-6 border border-white/10",children:e.jsx(Ws,{content:p})})]})]})]})]})}):null},Ws=({content:t})=>{const s=t.split(` 560`);return e.jsx("div",{className:"prose prose-invert max-w-none",children:s.map((r,n)=>r.startsWith("## ")?e.jsx("h2",{className:"text-2xl font-bold text-paper mt-6 mb-3",children:r.substring(3)},n):r.startsWith("### ")?e.jsx("h3",{className:"text-xl font-semibold text-paper mt-4 mb-2",children:r.substring(4)},n):r.startsWith("**")&&r.endsWith("**")?e.jsx("p",{className:"font-bold text-[#5B9BD5] mb-2",children:r.slice(2,-2)},n):r.startsWith("- ")?e.jsx("li",{className:"text-paper ml-6 mb
560-1",children:r.substring(2).replace(/\*\*(.*?)\*\*/g,"<strong>$1</strong>").split("<strong>").map((m,p)=>p%2===1?e.jsx("strong",{className:"text-paper",children:m.replace("</strong>","")},p):e.jsx("span",{children:m},p))},n):r.startsWith("[")&&r.includes("]")?e.jsx("p",{className:"text-white/65 italic mb-2",children:r},n):r.trim()===""?e.jsx("div",{className:"h-2"},n):e.jsx("p",{className:"text-paper mb-2",children:r.split("**").map((m,p)=>p%2===1?e.jsx("strong",{className:"text-paper",children:m},p):m)},n))})},_s=({dynamicViews:t})=>{const[s,r]=S.useState(!1),n=S.useMemo(()=>Os(t),[t]);return n?e.jsx(e.Fragment,{children:e.jsx(Vs,{isOpen:s,onClose:()=>r(!1),variationData:n,dynamicViews:t})}):null},Tt=t=>t?new Date(t).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"}):"N/A",tt=(t,s)=>!s||s===0?"0%":(t/s*100).toFixed(2)+"%",ht=(t,s)=>s?t/s*100:0,St=t=>({"Google Search":"bg-[#5B9BD5]/20 text-[#5B9BD5] border-[#5B9BD5]/30",Other:"bg-[#8E7CC3]/20 text-[#8E7CC3] border-[#8E7CC3]/30",Facebook:"bg-[#8E7CC3]/20 text-[#8E7CC3] border-[#8E7CC3]/30",Email:"bg-[#3FA86B]/20 text-[#3FA86B] border-[#3FA86B]/30"})[t]||"bg-white/10 text-paper border-white/10",X={impressions:"#5B9BD5",conversions:"#EA7817",accent:"#EA7817",cvr:"#3FA86B",grid:"rgb(var(--white) / 0.08)",axis:"rgb(var(--paper-muted))"},Ks={"Page Load":"#EA7817",Trace:"#5B9BD5",Click:"#3FA86B",Conversion:"#EA7817"},be=t=>t==null?"0":t.toLocaleString(),_e=({data:t,stroke:s=X.impressions,height:r=28})=>!t||t.length===0?e.jsx("div",{style:{height:r}}):e.jsx(_,{width:"100%",height:r,children:e.jsx(jt,{data:t,margin:{top:2,right:0,left:0,bottom:0},children:e.jsx(Se,{type:"monotone",dataKey:"v",stroke:s,strokeWidth:1.5,dot:!1})})}),Te=({label:t,value:s,sub:r,spark:n,delay:m=0,accent:p="rgb(var(--paper-muted))"})=>e.jsxs(Ie.div,{initial:{opacity:0,y:6},animate:{opacity:1,y:0},transition:{duration:.25,delay:m},className:"relative overflow-hidden rounded-lg border border-white/10 bg-[#1C1C1C] p-5",children:[e.jsx("div",{className:"absolute top-0 left-0 right-0 h-1",style:{background:p}}),e.jsx("p",{className:"text-xs text-white/65 mb-2",children:t}),e.jsx("p",{className:"text-3xl font-semibold text-paper tabular-nums leading-none",children:s}),r&&e.jsx("p",{className:"mt-2 text-xs text-white/65",children:r}),n&&e.jsx("div",{className:"mt-3 h-7 opacity-70",children:n})]}),Ke=({label:t,value:s})=>e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"text-[11px] text-white/65",children:t}),e.jsx("span",{className:"text-sm font-medium text-paper tabular-nums",children:s})]}),Ue=({value:t,max:s,height:r=4,color:n="#EA7817",muted:m=!1})=>{const p=s>0?t/s*100:0;return e.jsx("div",{className:"w-full rounded-sm bg-white/10 overflow-hidden",style:{height:r},children:e.jsx(Ie.div,{initial:{width:0},animate:{width:`${p}%`},transition:{duration:.6,ease:"easeOut"},className:"h-full",style:{background:m?"rgb(var(--paper-muted))":n}})})},Us=t=>{const s={},r={};return t==null||t.forEach(m=>{var p;(p=m.contentVariations)==null||p.forEach(f=>{(f.impressionDate||[]).forEach(w=>{const h=new Date(w).toISOString().slice(0,10);s[h]=(s[h]||0)+1}),(f.conversionDate||[]).forEach(w=>{const h=new Date(w).toISOString().slice(0,10);r[h]=(r[h]||0)+1})})}),Array.from(new Set([...Object.keys(s),...Object.keys(r)])).sort().map(m=>({day:m,sortKey:m,label:new Date(m+"T00:00:00Z").toLocaleDateString("en-US",{month:"short",day:"numeric",timeZone:"UTC"}),impressions:s[m]||0,conversions:r[m]||0}))},Gs=t=>{const s={};return t.forEach(({day:r,impressions:n,conversions:m})=>{const p=new Date(r+"T00:00:00Z"),f=`${p.getUTCFullYear()}-${String(p.getUTCMonth()+1).padStart(2,"0")}`,w=p.toLocaleDateString("en-US",{month:"short",year:"numeric",timeZone:"UTC"});s[f]||(s[f]={key:f,label:w,sortKey:f,impressions:0,conversions:0}),s[f].impressions+=n,s[f].conversions+=m}),Object.values(s).sort((r,n)=>r.sortKey.localeCompare(n.sortKey))},Ys=({dynamicViews:t,projectAnalyticsDV:s,activeProject:r})=>{var Y,M,G;const n=S.useMemo(()=>{const j={};return s==null||s.forEach(N=>{var q;const D=N.contentVariationId;j[D]||(j[D]=new Set),(q=N.action)==null||q.forEach(b=>{b.converted&&j[D].add(b.sessionId)})}),j},[s]),m=j=>{var D;const N=(D=n[j._id])==null?void 0:D.size;return N!=null&&N>0?N:j.conversions||0},p=j=>{var N;return((N=j.contentVariations)==null?void 0:N.reduce((D,q)=>D+m(q),0))||0},f=j=>{var N;return((N=j.contentVariations)==null?void 0:N.reduce((D,q)=>D+(q.impressions||0),0))||0},w=(t==null?void 0:t.length)||0,h=(t==null?void 0:t.reduce((j,N)=>{var D;return j+(((D=N.contentVariations)==null?void 0:D.length)||0)},0))||0,B=(t==null?void 0:t.reduce((j,N)=>j+f(N),0))||0,c=(t==null?void 0:t.reduce((j,N)=>j+p(N),0))||0,l=tt(c,B),a=S.useMemo(()=>Us(t),[t]),u=a.map(j=>({v:j.impressions})),g=a.map(j=>({v:j.conversions})),x=a.map(j=>({v:j.impressions?j.conversions/j.impressions*100:0})),y=S.useMemo(()=>{const j={"Page Load":0,Trace:0,Click:0,Conversion:0};
560return s==null||s.forEach(N=>{var D;(D=N.action)==null||D.forEach(q=>{j[q.actionType]!=null&&j[q.actionType]++,q.converted&&j.Conversion++})}),Object.entries(j).filter(([,N])=>N>0).map(([N,D])=>({name:N,value:D,fill:Ks[N]}))},[s]),k=y.reduce((j,N)=>j+N.value,0),i=S.useMemo(()=>{let j=null,N=-1;return t==null||t.forEach(D=>{var q;(q=D.contentVariations)==null||q.forEach(b=>{const T=m(b),E=b.impressions||0,z=ht(T,E);z>N&&T>0&&(N=z,j={v:b,view:D,conv:T,imp:E,cvr:z})})}),j},[t,n]),[o,d]=S.useState({}),[v,C]=S.useState("daily"),$=S.useMemo(()=>Gs(a),[a]),I=v==="monthly"?$:a,P=$.length>1;return S.useEffect(()=>{t!=null&&t.length&&Object.keys(o).length===0&&d({[t[0]._id]:!0})},[t]),e.jsxs("div",{className:"space-y-10",children:[e.jsxs(Ie.div,{initial:{opacity:0,y:8},animate:{opacity:1,y:0},transition:{duration:.3},className:"relative overflow-hidden rounded-md border border-white/10 bg-[#1C1C1C]/30 p-6 md:p-8",children:[e.jsx("div",{className:"absolute top-0 left-0 w-1 h-full",style:{background:X.accent}}),e.jsxs("div",{className:"flex flex-col md:flex-row md:items-end md:justify-between gap-6",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-3 mb-2",children:[e.jsxs("span",{className:"inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-white/10 bg-[#1C1C1C] text-[11px] text-paper",children:[e.jsx("span",{className:`w-1.5 h-1.5 rounded-full ${r!=null&&r.active?"bg-[#3FA86B]":"bg-[#D9A441]"}`}),r!=null&&r.active?"Active":"Paused"]}),e.jsxs("span",{className:"text-[11px] text-white/65",children:["since ",Tt(r==null?void 0:r.createAt)]})]}),e.jsx("h2",{className:"text-3xl font-semibold text-paper tracking-tight",children:(r==null?void 0:r.projectName)||"Dynamic Views"}),e.jsxs("p",{className:"mt-2 text-sm text-white/65",children:[w," view",w===1?"":"s"," · ",h," variation",h===1?"":"s"," · ",be(B)," impressions · ",be(c)," conversions"]})]}),e.jsxs("div",{className:"text-left md:text-right",children:[e.jsx("p",{className:"text-xs text-white/65",children:"Overall CVR"}),e.jsx("p",{className:"text-4xl font-semibold text-paper tabular-nums",children:l})]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 lg:grid-cols-4 gap-3",children:[e.jsx(Te,{label:"Dynamic views",value:w,sub:`${h} variations`,delay:.02,accent:"rgb(var(--paper-muted))"}),e.jsx(Te,{label:"Impressions",value:be(B),sub:`${a.length} active day${a.length===1?"":"s"}`,spark:e.jsx(_e,{data:u,stroke:X.impressions}),delay:.05,accent:X.impressions}),e.jsx(Te,{label:"Conversions",value:be(c),sub:`${be(k)} actions tracked`,spark:e.jsx(_e,{data:g,stroke:X.conversions}),delay:.08,accent:X.conversions}),e.jsx(Te,{label:"Conversion rate",value:l,sub:"Sessions that converted",spark:e.jsx(_e,{data:x,stroke:X.cvr}),delay:.11,accent:X.cvr})]}),e.jsxs("div",{className:"grid grid-cols-1 xl:grid-cols-3 gap-3",children:[e.jsxs("div",{className:"xl:col-span-2 border border-white/10 rounded-md p-6",children:[e.jsxs("div",{className:"flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-5",children:[e.jsx("h3",{className:"text-sm font-medium text-paper",children:"Impressions vs. conversions"}),e.jsxs("div",{className:"flex items-center gap-3",children:[P&&e.jsxs("div",{className:"flex items-center rounded-md border border-white/10 bg-[#1C1C1C] p-0.5",children:[e.jsx("button",{onClick:()=>C("daily"),className:`px-2.5 py-1 text-[11px] font-medium rounded-sm transition-colors ${v==="daily"?"bg-[#1C1C1C] text-paper":"text-white/65 hover:text-paper"}`,children:"Daily"}),e.jsx("button",{onClick:()=>C("monthly"),className:`px-2.5 py-1 text-[11px] font-medium rounded-sm transition-colors ${v==="monthly"?"bg-[#1C1C1C] text-paper":"text-white/65 hover:text-paper"}`,children:"Trends"})]}),e.jsxs("div",{className:"flex items-center gap-4 text-xs",children:[e.jsxs("span",{className:"flex items-center gap-1.5 text-white/65",children:[e.jsx("span",{className:"w-2 h-0.5",style:{background:X.impressions}})," Impressions"]}),e.jsxs("span",{className:"flex items-center gap-1.5 text-white/65",children:[e.jsx("span",{className:"w-2 h-0.5",style:{background:X.conversions}})," Conversions"]})]})]})]}),I.length>0?e.jsx(_,{width:"100%",height:280,children:e.jsxs(ft,{data:I,margin:{top:10,right:10,left:-10,bottom:0},children:[e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:"dvImp",x1:"0",y1:"0",x2:"0",y2:"1",children:[e.jsx("stop",{offset:"0%",stopColor:X.impressions,stopOpacity:.35}),e.jsx("stop",{offset:"100%",stopColor:X.impressions,stopOpacity:0})]}),e.jsxs("linearGradient",{id:"dvConv",x1:"0",y1:"0",x2:"0",y2:"1",children:[e.jsx("stop",{offset:"0%",stopColor:X.conversions,stopOpacity:.35}),e.jsx("stop",{offset:"100%",stopColor:X.conversions,stopOpacity:0})]})]}),e.jsx(ee,{stroke:X.grid,strokeDasharray:"2 4",vertical:!1}),e.jsx(Z,{dataKey:"label",stroke:X.axis,fontSize:11,tickLine:!1,axisLine
560:!1}),e.jsx(J,{stroke:X.axis,fontSize:11,tickLine:!1,axisLine:!1,allowDecimals:!1}),e.jsx(U,{contentStyle:{background:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",borderRadius:4,fontSize:12,color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}}),e.jsx(Je,{type:"monotone",dataKey:"impressions",stroke:X.impressions,strokeWidth:2.5,fill:"url(#dvImp)"}),e.jsx(Je,{type:"monotone",dataKey:"conversions",stroke:X.conversions,strokeWidth:2.5,fill:"url(#dvConv)"})]})}):e.jsx("div",{className:"h-[280px] flex items-center justify-center text-white/65 text-sm",children:"No time-series data yet"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"border border-white/10 rounded-md p-6",children:[e.jsx("h3",{className:"text-sm font-medium text-paper mb-5",children:"Action mix"}),y.length>0?e.jsxs(e.Fragment,{children:[e.jsx(_,{width:"100%",height:180,children:e.jsxs(je,{children:[e.jsx(ye,{data:y,innerRadius:54,outerRadius:78,paddingAngle:1,dataKey:"value",stroke:"none",children:y.map((j,N)=>e.jsx(Ce,{fill:j.fill},N))}),e.jsx(U,{contentStyle:{background:"rgb(var(--ink-raised))",border:"1px solid rgb(var(--white) / 0.1)",borderRadius:4,fontSize:12,color:"rgb(var(--paper))"},labelStyle:{color:"rgb(var(--paper))"},itemStyle:{color:"rgb(var(--paper))"}})]})}),e.jsx("div",{className:"mt-3 space-y-1.5",children:y.map(j=>e.jsxs("div",{className:"flex items-center justify-between text-xs",children:[e.jsxs("span",{className:"flex items-center gap-2 text-paper",children:[e.jsx("span",{className:"w-2 h-2 rounded-sm",style:{background:j.fill}}),j.name]}),e.jsxs("span",{className:"text-white/65 tabular-nums",children:[j.value.toLocaleString(),e.jsxs("span",{className:"text-white/65 ml-1",children:["(",(j.value/k*100).toFixed(0),"%)"]})]})]},j.name))})]}):e.jsx("div",{className:"h-[180px] flex items-center justify-center text-white/65 text-sm",children:"No actions tracked yet"})]}),i&&e.jsxs("div",{className:"border border-white/10 rounded-md p-6",children:[e.jsx("h3",{className:"text-sm font-medium text-paper mb-4",children:"Top performer"}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-sm flex-shrink-0 border border-white/10 flex items-center justify-center",style:{background:((Y=i.v.templateConfig)==null?void 0:Y.backgroundColor)||"#1C1C1C"},title:i.v.templateName,children:e.jsx("div",{className:"w-6 h-1 rounded-sm",style:{background:((M=i.v.templateConfig)==null?void 0:M.brandColor)||((G=i.v.templateConfig)==null?void 0:G.primaryButtonBgColor)||"#3f3f46"}})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("h5",{className:"text-paper text-sm font-medium truncate",children:i.v.name}),e.jsx("span",{className:"text-[10px] font-medium text-gain border border-gain/30 bg-gain/10 px-1.5 py-0.5 rounded",children:"Winner"})]}),i.v.templateName&&e.jsx("p",{className:"text-[11px] text-white/65 mt-0.5 truncate",children:i.v.templateName}),e.jsxs("p",{className:"text-[11px] text-white/65 mt-1",children:[i.view.name," · ",i.conv.toLocaleString()," conversions · ",i.cvr.toFixed(1),"% CVR"]})]})]})]})]})]}),e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-baseline justify-between mb-4 pb-3 border-b border-white/10",children:[e.jsx("h3",{className:"text-sm font-medium text-paper",children:"Breakdown by view"}),e.jsx("p",{className:"text-xs text-white/65",children:"Click a row to compare variations"})]}),e.jsx("div",{className:"grid gap-3",children:(t==null?void 0:t.length)>0?t.map(j=>{var pe,ue,de;const N=f(j),D=p(j),q=tt(D,N),b=!!o[j._id],T=j.impressionsBeforeAction||0,E=T?Math.min(100,N/T*100):0,z=(j.contentVariations||[]).map(R=>({v:R,imp:R.impressions||0,conv:m(R),cvr:ht(m(R),R.impressions||0)})),H=Math.max(1,...z.map(R=>R.imp)),ne=Math.max(1,...z.map(R=>R.conv)),me=(pe=z.reduce((R,ce)=>ce.cvr>(R?R.cvr:-1)&&ce.conv>0?ce:R,null))==null?void 0:pe.v._id;return e.jsxs("div",{className:"rounded-lg border border-white/10 bg-[#1C1C1C] overflow-hidden",children:[e.jsx("button",{onClick:()=>d(R=>({...R,[j._id]:!R[j._id]})),className:"w-full text-left p-5 hover:bg-[#242424]/40 transition-colors",children:e.jsxs("div",{className:"flex flex-col md:flex-row md:items-center gap-4",children:[e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-3 flex-wrap",children:[e.jsx("h4",{className:"text-paper font-medium truncate",children:j.name}),e.jsx("span",{className:`px-1.5 py-0.5 rounded text-[10px] border ${St(j.segmentType)}`,children:j.segmentType}),e.jsxs("span",{className:"text-[11px] text-white/65",children:[((ue=j.contentVariations)==null?void 0:ue.length)||0," variation",((de=j.contentVariations)==null?void 0:de.length)===1?"":"s"]})]}),T>0&&e.jsxs("div",{className:"mt-3 max-w-sm",children:[e.jsxs("div",{className:"flex items-center justify-between text-[11px] text-white/65 mb-1 tabular-nums",children:[e.jsx("span",{children:"Threshold progress"}),e.jsxs("span",{children:[N," / ",T]})]}),e.jsx(Ue,{value:E,max:100,height:3,color:X.conversions})]})]}),e.jsxs("div",{className:"grid grid-cols-3 gap-8",children:[e.jsx(Ke,{label:"Impressions",value:be(N)}),e.jsx(Ke,{label:"Conversions",value:be(D)}),e.jsx(Ke,{label:"CVR",value:q})]}),e.jsx(st,{className:`w-4 h-4 text-white/65 transition-transform ${b?"rotate-180":""}`})]})}),e.jsx(es,{initial:!1,children:b&&e.jsx(Ie.div,{initial:{height:0,opacity:0}
560,animate:{height:"auto",opacity:1},exit:{height:0,opacity:0},transition:{duration:.25},className:"overflow-hidden bg-[#1C1C1C]",children:e.jsx("div",{className:"p-5 grid grid-cols-1 lg:grid-cols-2 gap-3",children:z.map(({v:R,imp:ce,conv:F,cvr:se})=>{const ie=R._id===me,xe=R.templateConfig||{},Ne=xe.brandColor||xe.primaryButtonBgColor||"#3f3f46",ge=xe.backgroundColor||"#1C1C1C";return e.jsxs("div",{className:`border rounded-md p-4 bg-[#1C1C1C]/20 ${ie?"border-gain/30":"border-white/10"}`,children:[e.jsxs("div",{className:"flex items-start gap-3 mb-4",children:[e.jsx("div",{className:"w-10 h-10 rounded-sm flex-shrink-0 border border-white/10 flex items-center justify-center",style:{background:ge},title:R.templateName,children:e.jsx("div",{className:"w-6 h-1 rounded-sm",style:{background:Ne}})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("h5",{className:"text-paper text-sm font-medium truncate",children:R.name}),ie&&e.jsx("span",{className:"text-[10px] font-medium text-gain border border-gain/30 bg-gain/10 px-1.5 py-0.5 rounded",children:"Winner"})]}),R.templateName&&e.jsx("p",{className:"text-[11px] text-white/65 mt-0.5 truncate",children:R.templateName})]}),e.jsxs("div",{className:"text-right",children:[e.jsxs("p",{className:"text-lg font-semibold text-paper tabular-nums leading-none",children:[se.toFixed(1),"%"]}),e.jsx("p",{className:"text-[10px] text-white/65 mt-1",children:"CVR"})]})]}),e.jsxs("div",{className:"space-y-2.5",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex justify-between text-[11px] mb-1 tabular-nums",children:[e.jsx("span",{className:"text-white/65",children:"Impressions"}),e.jsx("span",{className:"text-paper",children:ce.toLocaleString()})]}),e.jsx(Ue,{value:ce,max:H,color:X.impressions})]}),e.jsxs("div",{children:[e.jsxs("div",{className:"flex justify-between text-[11px] mb-1 tabular-nums",children:[e.jsx("span",{className:"text-white/65",children:"Conversions"}),e.jsx("span",{className:"text-paper",children:F.toLocaleString()})]}),e.jsx(Ue,{value:F,max:ne,color:X.conversions})]})]})]},R._id)})})})})]},j._id)}):e.jsx("div",{className:"text-center py-16 border border-white/10 rounded-lg",children:e.jsx("p",{className:"text-white/65 text-sm",children:"No dynamic views yet â create one to start tracking performance."})})})]})]})},qs=({user:t,activeClient:s,onSave:r,activeSubTab:n,setActiveSubTab:m})=>{const p=n||"performance",[f,w]=S.useState(!1),{activeProject:h,projectAnalyticsDV:B}=ze();let c=(h==null?void 0:h.dynamicViews)||[];h!=null&&h.projectName,h==null||h._id,h==null||h.active,h==null||h.createAt,`https://tga.thedevcoop.com/${t==null?void 0:t._id}${h==null?void 0:h._id}`,S.useEffect(()=>{console.log("Active Project:",h),console.log("Project Analytics:",B)},[h,B]);const a=[{id:"performance",label:"Performance",icon:fe},{id:"analytics",label:"Advanced Analytics",icon:Zt},{id:"views",label:"Views",icon:Le},{id:"create",label:"Create View",icon:De}];return(t==null?void 0:t.userType)==="client"?a.filter(u=>u.id==="performance"):(t==null?void 0:t.userType)==="admin"||a.filter(u=>u.id!=="create"),h?e.jsx("div",{className:"min-h-screen",children:e.jsxs("div",{children:[p==="performance"&&e.jsx(Ys,{dynamicViews:c,projectAnalyticsDV:B,activeProject:h}),p==="analytics"&&e.jsxs(e.Fragment,{children:[e.jsx($s,{projectAnalyticsDV:B,dynamicViews:(h==null?void 0:h.dynamicViews)||[]}),e.jsx(_s,{projectAnalyticsDV:B,dynamicViews:(h==null?void 0:h.dynamicViews)||[]})]}),p==="views"&&e.jsx(xs,{dynamicViews:c,projectAnalyticsDV:B,getSegmentTypeColor:St,formatDate:Tt,calculateConversionRate:tt}),p==="create"&&e.jsx(cs,{user:t,activeClient:s,onSave:r})]})}):e.jsx("div",{className:"flex items-center justify-center min-h-screen",children:e.jsxs("div",{className:"text-center",children:[e.jsx(Jt,{className:"w-16 h-16 text-white/65 mx-auto mb-4"}),e.jsx("h3",{className:"text-paper text-lg font-semibold mb-2",children:"No project selected"}),e.jsx("p",{className:"text-white/65",children:"Select a project to view its Dynamic Views data"})]})})},nr=({activeSubTab:t,setActiveSubTab:s})=>{var f;const{user:r}=ts(),{activeClient:n}=rt(),{allServices:m}=ss(),p=(f=m==null?void 0:m.filter(w=>w.clients.some(h=>(h==null?void 0:h.clientID)===(n==null?void 0:n._id))))==null?void 0:f.filter(w=>w.serviceName==="Dynamic Views");return console.log(p),e.jsx(e.Fragment,{children:p!=null&&p.length?e.jsx(qs,{user:r,activeClient:n,activeSubTab:t,setActiveSubTab:s}):e.jsx(is,{})})};export{nr as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.