return React.createElement("div", {style:{
background:"rgba(255,255,255,0.03)",border:"1px dashed rgba(255,255,255,0.08)",
borderRadius:"8px",padding:"14px",textAlign:"center",fontSize:"12px",
color:"#555",fontFamily:"'DM Mono', monospace",
}}, "ADVERTISEMENT SPACE — " + label);
}
/* ─── Color Swatch ─── */
function ColorSwatch({hex,index,format,totalCount}){
const[copied,setCopied]=useState(false);
const{r,g,b}=hexToRgb(hex);const hsl=rgbToHsl(r,g,b);const contrast=getContrastColor(hex);
const displayValue=format==="hex"?hex:format==="rgb"?`rgb(${r}, ${g}, ${b})`:`hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
const handleCopy=async()=>{
const ok=await copyToClipboard(displayValue);
setCopied(ok);if(ok)setTimeout(()=>setCopied(false),1500);
};
return React.createElement("div",{onClick:handleCopy,style:{
backgroundColor:hex,color:contrast,padding:"28px 20px",cursor:"pointer",display:"flex",flexDirection:"column",justifyContent:"space-between",minHeight:"120px",position:"relative",transition:"transform 0.2s ease, box-shadow 0.2s ease",
borderRadius:index===0?"12px 12px 0 0":index===totalCount-1?"0 0 12px 12px":"0",
},onMouseEnter:e=>{e.currentTarget.style.transform="scale(1.02)";e.currentTarget.style.boxShadow="0 8px 32px rgba(0,0,0,0.15)";e.currentTarget.style.zIndex="2"},
onMouseLeave:e=>{e.currentTarget.style.transform="scale(1)";e.currentTarget.style.boxShadow="none";e.currentTarget.style.zIndex="1"}},
React.createElement("div",{style:{fontSize:"13px",opacity:0.6,fontFamily:"'DM Mono', monospace",letterSpacing:"0.5px"}},"COLOR "+String(index+1).padStart(2,"0")),
React.createElement("div",null,
React.createElement("div",{style:{fontSize:"18px",fontWeight:600,fontFamily:"'DM Mono', monospace"}},displayValue),
React.createElement("div",{style:{fontSize:"12px",opacity:0.5,marginTop:"6px"}},copied?"Copied!":"Click to copy")
)
);
}
/* ─── Palette Strip ─── */
function PaletteStrip({colors,name}){
const[copied,setCopied]=useState(false);
const handleCopyAll=async()=>{
const text=colors.join(", ");
const ok=await copyToClipboard(text);
setCopied(ok);if(ok)setTimeout(()=>setCopied(false),1500);
};
return React.createElement("div",{style:{marginBottom:"16px"}},
name&&React.createElement("div",{style:{fontSize:"13px",fontWeight:500,color:"#8a8a8a",marginBottom:"8px",textTransform:"uppercase",letterSpacing:"1.5px"}},name),
React.createElement("div",{style:{display:"flex",borderRadius:"10px",overflow:"hidden",cursor:"pointer"},onClick:handleCopyAll},
colors.map((c,i)=>React.createElement("div",{key:i,style:{backgroundColor:c,height:"52px",flex:1,transition:"flex 0.2s ease"},
onMouseEnter:e=>e.currentTarget.style.flex="1.4",onMouseLeave:e=>e.currentTarget.style.flex="1"}))
),
React.createElement("div",{style:{fontSize:"11px",color:"#999",marginTop:"4px",fontFamily:"'DM Mono', monospace"}},copied?"Palette copied!":"Click strip to copy all")
);
}
/* ─── Font Pairing Card ─── */
function FontPairingCard({pairing,previewText,previewColor}){
const[copied,setCopied]=useState(false);
const googleUrl=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(pairing.heading)}:wght@400;700&family=${encodeURIComponent(pairing.body)}:wght@400;600&display=swap`;
const handleCopyCSS=async()=>{
const css=`/* ${pairing.vibe} */\n@import url('${googleUrl}');\n\nh1, h2, h3 {\n font-family: '${pairing.heading}', serif;\n}\n\nbody, p {\n font-family: '${pairing.body}', sans-serif;\n}`;
const ok=await copyToClipboard(css);
setCopied(ok);if(ok)setTimeout(()=>setCopied(false),2000);
};
return React.createElement("div",{style:{backgroundColor:"rgba(255,255,255,0.03)",borderRadius:"12px",border:"1px solid rgba(255,255,255,0.06)",overflow:"hidden",transition:"all 0.3s ease"},
onMouseEnter:e=>{e.currentTarget.style.borderColor="rgba(255,107,53,0.3)";e.currentTarget.style.transform="translateY(-2px)"},
onMouseLeave:e=>{e.currentTarget.style.borderColor="rgba(255,255,255,0.06)";e.currentTarget.style.transform="translateY(0)"}},
React.createElement("div",{style:{padding:"32px 28px",borderBottom:"1px solid rgba(255,255,255,0.06)"}},
React.createElement("div",{style:{fontSize:"32px",fontWeight:700,fontFamily:`'${pairing.heading}', serif`,marginBottom:"12px",lineHeight:1.2,color:(/^#[0-9A-Fa-f]{6}$/.test(previewColor))?previewColor:"#f0f0f0"}},previewText||"The quick brown fox"),
React.createElement("div",{style:{fontSize:"15px",fontFamily:`'${pairing.body}', sans-serif`,lineHeight:1.7,color:"#999"}},"Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. The five boxing wizards jump quickly at dawn.")
),
React.createElement("div",{style:{padding:"20px 28px"}},
React.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:"12px"}},
React.createElement("div",null,
React.createElement("div",{style:{fontSize:"11px",color:"#FF6B35",fontFamily:"'DM Mono', monospace",textTransform:"uppercase",letterSpacing:"1.5px",marginBottom:"6px"}},pairing.vibe),
React.createElement("div",{style:{fontSize:"14px",color:"#ccc"}},
React.createElement("span",{style:{fontWeight:600}},pairing.heading),
React.createElement("span",{style:{color:"#555",margin:"0 8px"}},"+"),
React.createElement("span",{style:{fontWeight:600}},pairing.body)
)
),
React.createElement("button",{onClick:handleCopyCSS,style:{padding:"6px 14px",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"6px",backgroundColor:copied?"rgba(255,107,53,0.15)":"transparent",color:copied?"#FF6B35":"#888",cursor:"pointer",fontSize:"11px",fontFamily:"'DM Mono', monospace",letterSpacing:"0.5px",transition:"all 0.2s ease",whiteSpace:"nowrap"},
onMouseEnter:e=>{if(!copied){e.currentTarget.style.borderColor="#FF6B35";e.currentTarget.style.color="#FF6B35"}},
onMouseLeave:e=>{if(!copied){e.currentTarget.style.borderColor="rgba(255,255,255,0.1)";e.currentTarget.style.color="#888"}}},
copied?"COPIED!":"COPY CSS")
),
React.createElement("p",{style:{fontSize:"13px",color:"#666",lineHeight:1.6}},pairing.desc)
)
);
}
/* ─── Color Palette Page ─── */
function ColorPalettePage(){
const[colors,setColors]=useState(null);const[imageSrc,setImageSrc]=useState(null);
const[format,setFormat]=useState("hex");const[colorCount,setColorCount]=useState(6);
const[isDragging,setIsDragging]=useState(false);const[isProcessing,setIsProcessing]=useState(false);const[error,setError]=useState(null);
const canvasRef=useRef(null);const fileInputRef=useRef(null);
const processImage=useCallback((file)=>{
if(!file||!file.type.startsWith("image/")){setError("Please upload a valid image file.");return}
if(file.size>20*1024*1024){setError("Image too large. Under 20MB please.");return}
setError(null);setIsProcessing(true);
const reader=new FileReader();
reader.onload=(e)=>{const img=new Image();img.crossOrigin="anonymous";
img.onload=()=>{setImageSrc(e.target.result);const canvas=canvasRef.current;const scale=Math.min(1,600/Math.max(img.width,img.height));
canvas.width=img.width*scale;canvas.height=img.height*scale;const ctx=canvas.getContext("2d");ctx.drawImage(img,0,0,canvas.width,canvas.height);
setColors(quantizeColors(ctx.getImageData(0,0,canvas.width,canvas.height),colorCount));setIsProcessing(false);};
img.onerror=()=>{setError("Failed to load image.");setIsProcessing(false)};img.src=e.target.result;};
reader.readAsDataURL(file);
},[colorCount]);
const handleDrop=useCallback((e)=>{e.preventDefault();setIsDragging(false);const file=e.dataTransfer?.files?.[0];if(file)processImage(file)},[processImage]);
const handlePaste=useCallback((e)=>{const items=e.clipboardData?.items;if(!items)return;for(const item of items){if(item.type.startsWith("image/")){e.preventDefault();processImage(item.getAsFile());return}}},[processImage]);
useEffect(()=>{document.addEventListener("paste",handlePaste);return()=>document.removeEventListener("paste",handlePaste)},[handlePaste]);
useEffect(()=>{if(imageSrc&&canvasRef.current){const img=new Image();img.crossOrigin="anonymous";img.onload=()=>{const canvas=canvasRef.current;const scale=Math.min(1,600/Math.max(img.width,img.height));canvas.width=img.width*scale;canvas.height=img.height*scale;const ctx=canvas.getContext("2d");ctx.drawImage(img,0,0,canvas.width,canvas.height);setColors(quantizeColors(ctx.getImageData(0,0,canvas.width,canvas.height),colorCount))};img.src=imageSrc}},[colorCount,imageSrc]);
const downloadPalette=()=>{if(!colors)return;const w=1200,h=400,canvas=document.createElement("canvas");canvas.width=w;canvas.height=h;const ctx=canvas.getContext("2d"),sw=w/colors.length;colors.forEach((c,i)=>{ctx.fillStyle=c;ctx.fillRect(i*sw,0,sw,h*0.75);ctx.fillStyle="#ffffff";ctx.fillRect(i*sw,h*0.75,sw,h*0.25);ctx.fillStyle="#333333";ctx.font="bold 16px monospace";ctx.textAlign="center";ctx.fillText(c,i*sw+sw/2,h*0.75+35)});canvas.toBlob(blob=>{if(!blob)return;const url=URL.createObjectURL(blob);const link=document.createElement("a");link.download="color-palette.png";link.href=url;document.body.appendChild(link);link.click();document.body.removeChild(link);setTimeout(()=>URL.revokeObjectURL(url),100)},"image/png")};
const handleExportCSS=async()=>{if(!colors)return;const css=`:root {\n${colors.map((c,i)=>` --color-${i+1}: ${c};`).join("\n")}\n}`;await copyToClipboard(css)};
const reset=()=>{setColors(null);setImageSrc(null);setError(null)};
return React.createElement("div",null,
React.createElement("canvas",{ref:canvasRef,style:{display:"none"}}),
React.createElement("div",{style:{textAlign:"center",marginBottom:"48px"}},
React.createElement("h1",{style:{fontSize:"clamp(36px, 5vw, 56px)",fontWeight:800,fontFamily:"'Playfair Display', serif",lineHeight:1.1,marginBottom:"16px",background:"linear-gradient(135deg, #fff 0%, #aaa 100%)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",letterSpacing:"-1px"}},"Extract Colors from",React.createElement("br"),"Any Image"),
React.createElement("p",{style:{fontSize:"17px",color:"#777",maxWidth:"520px",margin:"0 auto",lineHeight:1.7,fontWeight:300}},"Upload a photo, screenshot, or design — instantly get a beautiful color palette with HEX, RGB, and HSL codes ready to use.")
),
React.createElement(AdPlaceholder,{size:"leaderboard"}),
React.createElement("div",{style:{height:"40px"}}),
!colors?
React.createElement("div",{onDragOver:e=>{e.preventDefault();setIsDragging(true)},onDragLeave:()=>setIsDragging(false),onDrop:handleDrop,onClick:()=>fileInputRef.current?.click(),
style:{border:`2px dashed ${isDragging?"#FF6B35":"rgba(255,255,255,0.12)"}`,borderRadius:"16px",padding:"80px 40px",textAlign:"center",cursor:"pointer",transition:"all 0.3s ease",backgroundColor:isDragging?"rgba(255,107,53,0.05)":"rgba(255,255,255,0.02)",marginBottom:"60px"}},
React.createElement("input",{ref:fileInputRef,type:"file",accept:"image/*",onChange:e=>processImage(e.target.files?.[0]),style:{display:"none"}}),
isProcessing?
React.createElement("div",null,React.createElement("div",{style:{width:"48px",height:"48px",border:"3px solid rgba(255,255,255,0.1)",borderTopColor:"#FF6B35",borderRadius:"50%",margin:"0 auto 20px",animation:"spin 0.8s linear infinite"}}),React.createElement("p",{style:{color:"#999",fontSize:"15px"}},"Extracting colors..."))
:React.createElement(React.Fragment,null,
React.createElement("div",{style:{width:"64px",height:"64px",borderRadius:"16px",background:"rgba(255,255,255,0.05)",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 24px"}},
React.createElement("svg",{width:"28",height:"28",viewBox:"0 0 24 24",fill:"none",stroke:"#888",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},
React.createElement("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),React.createElement("polyline",{points:"17 8 12 3 7 8"}),React.createElement("line",{x1:"12",y1:"3",x2:"12",y2:"15"}))),
React.createElement("p",{style:{fontSize:"18px",fontWeight:500,marginBottom:"8px"}},"Drop your image here or click to upload"),
React.createElement("p",{style:{fontSize:"14px",color:"#666",marginBottom:"4px"}},"PNG, JPG, WEBP, SVG — up to 20MB"),
React.createElement("p",{style:{fontSize:"13px",color:"#555",fontFamily:"'DM Mono', monospace"}},"or press Ctrl+V to paste from clipboard"),
error&&React.createElement("p",{style:{color:"#FF6B35",fontSize:"14px",marginTop:"16px"}},error)
)
)
:React.createElement("div",{style:{marginBottom:"60px"}},
React.createElement("div",{style:{display:"grid",gridTemplateColumns:"1fr 340px",gap:"32px",marginBottom:"32px"}},
React.createElement("div",null,
React.createElement("div",{style:{borderRadius:"12px",overflow:"hidden",backgroundColor:"#1a1a1a"}},React.createElement("img",{src:imageSrc,alt:"Uploaded",style:{width:"100%",display:"block",maxHeight:"500px",objectFit:"contain"}})),
React.createElement("div",{style:{display:"flex",gap:"12px",marginTop:"16px",flexWrap:"wrap",alignItems:"center"}},
React.createElement("div",{style:{display:"flex",backgroundColor:"rgba(255,255,255,0.06)",borderRadius:"8px",overflow:"hidden"}},
["hex","rgb","hsl"].map(f=>React.createElement("button",{key:f,onClick:()=>setFormat(f),style:{padding:"8px 16px",border:"none",cursor:"pointer",fontFamily:"'DM Mono', monospace",fontSize:"12px",textTransform:"uppercase",letterSpacing:"0.5px",backgroundColor:format===f?"rgba(255,107,53,0.2)":"transparent",color:format===f?"#FF6B35":"#888",transition:"all 0.2s ease"}},f))
),
React.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px",backgroundColor:"rgba(255,255,255,0.06)",borderRadius:"8px",padding:"4px 12px"}},
React.createElement("label",{style:{fontSize:"12px",color:"#888",fontFamily:"'DM Mono', monospace"}},"COLORS"),
React.createElement("select",{value:colorCount,onChange:e=>setColorCount(Number(e.target.value)),style:{background:"transparent",border:"none",color:"#e8e8e8",fontSize:"13px",fontFamily:"'DM Mono', monospace",cursor:"pointer",outline:"none"}},[3,4,5,6,7,8].map(n=>React.createElement("option",{key:n,value:n},n)))
),
React.createElement("button",{onClick:downloadPalette,style:{padding:"8px 16px",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"8px",backgroundColor:"transparent",color:"#ccc",cursor:"pointer",fontSize:"12px",fontFamily:"'DM Mono', monospace",transition:"all 0.2s ease"},onMouseEnter:e=>{e.currentTarget.style.borderColor="#FF6B35";e.currentTarget.style.color="#FF6B35"},onMouseLeave:e=>{e.currentTarget.style.borderColor="rgba(255,255,255,0.1)";e.currentTarget.style.color="#ccc"}},"DOWNLOAD PNG"),
React.createElement("button",{onClick:handleExportCSS,style:{padding:"8px 16px",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"8px",backgroundColor:"transparent",color:"#ccc",cursor:"pointer",fontSize:"12px",fontFamily:"'DM Mono', monospace",transition:"all 0.2s ease"},onMouseEnter:e=>{e.currentTarget.style.borderColor="#FF6B35";e.currentTarget.style.color="#FF6B35"},onMouseLeave:e=>{e.currentTarget.style.borderColor="rgba(255,255,255,0.1)";e.currentTarget.style.color="#ccc"}},"COPY CSS VARS"),
React.createElement("button",{onClick:reset,style:{padding:"8px 16px",border:"none",borderRadius:"8px",backgroundColor:"rgba(255,107,53,0.15)",color:"#FF6B35",cursor:"pointer",fontSize:"12px",fontFamily:"'DM Mono', monospace",marginLeft:"auto",transition:"all 0.2s ease"},onMouseEnter:e=>e.currentTarget.style.backgroundColor="rgba(255,107,53,0.25)",onMouseLeave:e=>e.currentTarget.style.backgroundColor="rgba(255,107,53,0.15)"},"NEW IMAGE")
)
),
React.createElement("div",{style:{borderRadius:"12px",overflow:"hidden"}},colors.map((hex,i)=>React.createElement(ColorSwatch,{key:i,hex:hex,index:i,format:format,totalCount:colors.length})))
),
React.createElement(PaletteStrip,{colors:colors,name:"Your Extracted Palette"}),
React.createElement("div",{style:{marginTop:"32px"}},React.createElement(AdPlaceholder,{size:"leaderboard"}))
),
React.createElement("section",{style:{marginBottom:"60px"}},
React.createElement("h2",{style:{fontSize:"28px",fontWeight:700,fontFamily:"'Playfair Display', serif",marginBottom:"8px"}},"Trending Palettes"),
React.createElement("p",{style:{color:"#666",fontSize:"14px",marginBottom:"28px"}},"Popular color combinations for design inspiration"),
React.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"20px"}},SAMPLE_PALETTES.map((p,i)=>React.createElement(PaletteStrip,{key:i,colors:p.colors,name:p.name})))
),
React.createElement("section",{style:{borderTop:"1px solid rgba(255,255,255,0.06)",paddingTop:"48px",marginBottom:"60px"}},
React.createElement("div",{style:{maxWidth:"680px"}},
React.createElement("h2",{style:{fontSize:"24px",fontWeight:700,fontFamily:"'Playfair Display', serif",marginBottom:"20px"}},"How to Extract Colors from an Image"),
React.createElement("div",{style:{color:"#888",fontSize:"15px",lineHeight:1.8}},
React.createElement("p",{style:{marginBottom:"16px"}},"Finding the exact color from a photo, logo, or screenshot is essential for designers, brand managers, and anyone building a visual identity. Our free color palette extractor analyzes your image and identifies the dominant colors instantly."),
React.createElement("p",{style:{marginBottom:"16px"}},"Simply upload any image — a product photo, a landscape, a brand mood board, or a screenshot of a design you love. The tool uses median cut quantization to extract the most representative colors and provides them in HEX, RGB, and HSL formats so you can use them anywhere: CSS, Figma, Canva, Adobe Creative Suite, or your brand guidelines."),
React.createElement("p",{style:{marginBottom:"16px"}},"Whether you are building a company logo, designing a website, creating social media graphics, or choosing paint colors, having the precise color codes saves time and ensures consistency across every touchpoint of your brand.")
),
React.createElement("h3",{style:{fontSize:"18px",fontWeight:600,marginBottom:"12px",marginTop:"32px",color:"#ccc"}},"What are HEX, RGB, and HSL color codes?"),
React.createElement("div",{style:{color:"#888",fontSize:"15px",lineHeight:1.8}},
React.createElement("p",{style:{marginBottom:"16px"}},React.createElement("strong",{style:{color:"#ccc"}},"HEX codes")," are six-character codes preceded by a hash symbol (like #FF6B35) widely used in web design and CSS."),
React.createElement("p",{style:{marginBottom:"16px"}},React.createElement("strong",{style:{color:"#ccc"}},"RGB values")," express color as three numbers ranging from 0 to 255, representing the amount of red, green, and blue light mixed together."),
React.createElement("p",null,React.createElement("strong",{style:{color:"#ccc"}},"HSL values")," describe color using Hue, Saturation, and Lightness. Many designers prefer HSL because it maps more intuitively to how we think about color.")
)
)
),
React.createElement(AdPlaceholder,{size:"rectangle"})
);
}
/* ─── Font Pairing Page ─── */
function FontPairingPage(){
const[activeCategory,setActiveCategory]=useState("All");
const[companyName,setCompanyName]=useState("");
const[brandColor,setBrandColor]=useState("");
const categories=["All",...FONT_PAIRINGS.map(c=>c.category)];
const filteredPairings=activeCategory==="All"?FONT_PAIRINGS.flatMap(c=>c.pairings.map(p=>({...p,category:c.category}))):FONT_PAIRINGS.find(c=>c.category===activeCategory)?.pairings.map(p=>({...p,category:activeCategory}))||[];
return React.createElement("div",null,
React.createElement("div",{style:{textAlign:"center",marginBottom:"48px"}},
React.createElement("h1",{style:{fontSize:"clamp(36px, 5vw, 56px)",fontWeight:800,fontFamily:"'Playfair Display', serif",lineHeight:1.1,marginBottom:"16px",background:"linear-gradient(135deg, #fff 0%, #aaa 100%)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",letterSpacing:"-1px"}},"Find the Perfect",React.createElement("br"),"Font Pairing"),
React.createElement("p",{style:{fontSize:"17px",color:"#777",maxWidth:"520px",margin:"0 auto",lineHeight:1.7,fontWeight:300}},"Curated font combinations for every style — with live previews and one-click CSS export. All fonts are free from Google Fonts.")
),
React.createElement(AdPlaceholder,{size:"leaderboard"}),
React.createElement("div",{style:{height:"40px"}}),
React.createElement("div",{style:{marginBottom:"32px"}},
React.createElement("label",{style:{display:"block",fontSize:"13px",fontWeight:600,color:"#999",marginBottom:"10px",textTransform:"uppercase",letterSpacing:"1.5px",fontFamily:"'DM Mono', monospace"}},"Preview with your brand"),
React.createElement("div",{style:{display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"}},
React.createElement("input",{type:"text",value:companyName,onChange:e=>setCompanyName(e.target.value),placeholder:"Type name...",style:{width:"100%",maxWidth:"340px",padding:"14px 20px",fontSize:"18px",fontWeight:500,border:"1px solid rgba(255,255,255,0.12)",borderRadius:"10px",backgroundColor:"rgba(255,255,255,0.04)",color:"#f0f0f0",outline:"none",transition:"border-color 0.2s ease",fontFamily:"'DM Sans', sans-serif"},onFocus:e=>e.currentTarget.style.borderColor="#FF6B35",onBlur:e=>e.currentTarget.style.borderColor="rgba(255,255,255,0.12)"}),
React.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px",padding:"8px 16px",border:"1px solid rgba(255,255,255,0.12)",borderRadius:"10px",backgroundColor:"rgba(255,255,255,0.04)"}},
React.createElement("div",{style:{width:"28px",height:"28px",borderRadius:"6px",backgroundColor:(/^#[0-9A-Fa-f]{6}$/.test(brandColor))?brandColor:"#555",border:"1px solid rgba(255,255,255,0.15)",flexShrink:0}}),
React.createElement("input",{type:"text",value:brandColor,onChange:e=>{let v=e.target.value;if(v&&!v.startsWith("#"))v="#"+v;setBrandColor(v)},placeholder:"#HEX color",style:{width:"110px",padding:"6px 0",fontSize:"15px",fontWeight:500,border:"none",backgroundColor:"transparent",color:"#f0f0f0",outline:"none",fontFamily:"'DM Mono', monospace",letterSpacing:"0.5px"},maxLength:7})
)
)
),
React.createElement("div",{style:{display:"flex",gap:"8px",marginBottom:"36px",flexWrap:"wrap"}},
categories.map(cat=>React.createElement("button",{key:cat,onClick:()=>setActiveCategory(cat),style:{padding:"8px 20px",borderRadius:"20px",border:"1px solid",borderColor:activeCategory===cat?"#FF6B35":"rgba(255,255,255,0.1)",backgroundColor:activeCategory===cat?"rgba(255,107,53,0.12)":"transparent",color:activeCategory===cat?"#FF6B35":"#888",cursor:"pointer",fontSize:"13px",fontWeight:500,transition:"all 0.2s ease",whiteSpace:"nowrap"}},cat))
),
React.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:"24px",marginBottom:"48px"}},
filteredPairings.map((p,i)=>React.createElement(FontPairingCard,{key:`${p.heading}-${p.body}-${i}`,pairing:p,previewText:companyName,previewColor:brandColor}))
),
React.createElement(AdPlaceholder,{size:"leaderboard"}),
React.createElement("div",{style:{height:"48px"}}),
React.createElement("section",{style:{borderTop:"1px solid rgba(255,255,255,0.06)",paddingTop:"48px",marginBottom:"60px"}},
React.createElement("div",{style:{maxWidth:"680px"}},
React.createElement("h2",{style:{fontSize:"24px",fontWeight:700,fontFamily:"'Playfair Display', serif",marginBottom:"20px"}},"How to Choose the Right Font Pairing"),
React.createElement("div",{style:{color:"#888",fontSize:"15px",lineHeight:1.8}},
React.createElement("p",{style:{marginBottom:"16px"}},"Great typography is one of the most impactful decisions you can make when building a brand identity. The right font pairing creates visual hierarchy, sets the emotional tone, and makes your content easier to read."),
React.createElement("p",{style:{marginBottom:"16px"}},"The golden rule of font pairing is to combine contrast with cohesion. Your heading font and body font should look different enough to create clear visual hierarchy, but share enough underlying characteristics that they feel like they belong together."),
React.createElement("p",{style:{marginBottom:"16px"}},"A classic approach is to pair a serif heading font with a sans-serif body font. The serif adds personality and distinction to headlines, while the sans-serif ensures easy readability at smaller sizes.")
),
React.createElement("h3",{style:{fontSize:"18px",fontWeight:600,marginBottom:"12px",marginTop:"32px",color:"#ccc"}},"Tips for effective font pairing"),
React.createElement("div",{style:{color:"#888",fontSize:"15px",lineHeight:1.8}},
React.createElement("p",{style:{marginBottom:"16px"}},React.createElement("strong",{style:{color:"#ccc"}},"Limit to two fonts.")," Using more than two fonts in a single design almost always creates visual noise. Pick one heading font and one body font and stick with them."),
React.createElement("p",{style:{marginBottom:"16px"}},React.createElement("strong",{style:{color:"#ccc"}},"Match the mood to your brand.")," A law firm and a children's toy company shouldn't use the same typography. Consider what emotions your fonts evoke."),
React.createElement("p",null,React.createElement("strong",{style:{color:"#ccc"}},"Test at real sizes.")," A font that looks stunning at 72px might be illegible at 14px. Always preview your pairing at the actual sizes you'll be using.")
)
)
),
React.createElement(AdPlaceholder,{size:"rectangle"})
);
}
/* ─── Main App ─── */
function ChromaticApp(){
const[activePage,setActivePage]=useState("colors");
return React.createElement("div",{style:{minHeight:"100vh"}},
React.createElement("header",{style:{padding:"28px 40px",display:"flex",justifyContent:"space-between",alignItems:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"}},
React.createElement("div",{style:{display:"flex",alignItems:"center",gap:"12px",cursor:"pointer"},onClick:()=>setActivePage("colors")},
React.createElement("div",{style:{width:"32px",height:"32px",borderRadius:"8px",background:"linear-gradient(135deg, #FF6B35, #E91E63, #9C27B0, #2196F3)",display:"flex",alignItems:"center",justifyContent:"center"}},
React.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"white"},React.createElement("circle",{cx:"4",cy:"4",r:"3",opacity:"0.9"}),React.createElement("circle",{cx:"12",cy:"4",r:"3",opacity:"0.7"}),React.createElement("circle",{cx:"8",cy:"12",r:"3",opacity:"0.8"}))
),
React.createElement("span",{style:{fontSize:"18px",fontWeight:700,letterSpacing:"-0.3px"}},"Chromatic")
),
React.createElement("nav",{style:{display:"flex",gap:"32px",fontSize:"14px"}},
React.createElement("span",{onClick:()=>setActivePage("colors"),style:{cursor:"pointer",fontWeight:700,fontSize:"15px",color:activePage==="colors"?"#e8e8e8":"#888",borderBottom:activePage==="colors"?"2px solid #FF6B35":"2px solid transparent",paddingBottom:"4px",transition:"all 0.2s ease"}},"Color Extractor"),
React.createElement("span",{onClick:()=>setActivePage("fonts"),style:{cursor:"pointer",fontWeight:700,fontSize:"15px",color:activePage==="fonts"?"#e8e8e8":"#888",borderBottom:activePage==="fonts"?"2px solid #FF6B35":"2px solid transparent",paddingBottom:"4px",transition:"all 0.2s ease"}},"Font Pairing")
)
),
React.createElement("div",{style:{maxWidth:"1100px",margin:"0 auto",padding:"60px 40px 20px"}},
activePage==="colors"?React.createElement(ColorPalettePage):React.createElement(FontPairingPage)
),
React.createElement("footer",{style:{borderTop:"1px solid rgba(255,255,255,0.06)",padding:"32px 40px",display:"flex",justifyContent:"space-between",alignItems:"center",maxWidth:"1100px",margin:"0 auto"}},
React.createElement("div",{style:{fontSize:"13px",color:"#555"}},"Chromatic — Free color palette extractor & font pairing tool"),
React.createElement("div",{style:{display:"flex",gap:"24px",fontSize:"13px",color:"#555"}},
React.createElement("span",{style:{cursor:"pointer"}},"Privacy"),
React.createElement("span",{style:{cursor:"pointer"}},"Terms"),
React.createElement("span",{style:{cursor:"pointer"}},"Contact")
)
)
);
}
ReactDOM.render(React.createElement(ChromaticApp), document.getElementById("root"));