import { useState } from "react"; const signs = [ { name: "Aries", symbol: "♈", dates: "Mar 21 – Apr 19", element: "Fire", color: "#ff6b6b" }, { name: "Taurus", symbol: "♉", dates: "Apr 20 – May 20", element: "Earth", color: "#a8d5a2" }, { name: "Gemini", symbol: "♊", dates: "May 21 – Jun 20", element: "Air", color: "#ffd166" }, { name: "Cancer", symbol: "♋", dates: "Jun 21 – Jul 22", element: "Water", color: "#a0c4ff" }, { name: "Leo", symbol: "♌", dates: "Jul 23 – Aug 22", element: "Fire", color: "#ffb347" }, { name: "Virgo", symbol: "♍", dates: "Aug 23 – Sep 22", element: "Earth", color: "#c9b99a" }, { name: "Libra", symbol: "♎", dates: "Sep 23 – Oct 22", element: "Air", color: "#f7c5e0" }, { name: "Scorpio", symbol: "♏", dates: "Oct 23 – Nov 21", element: "Water", color: "#9b72cf" }, { name: "Sagittarius", symbol: "♐", dates: "Nov 22 – Dec 21", element: "Fire", color: "#ff9f43" }, { name: "Capricorn", symbol: "♑", dates: "Dec 22 – Jan 19", element: "Earth", color: "#7f8c8d" }, { name: "Aquarius", symbol: "♒", dates: "Jan 20 – Feb 18", element: "Air", color: "#74b9ff" }, { name: "Pisces", symbol: "♓", dates: "Feb 19 – Mar 20", element: "Water", color: "#b8a9e0" }, ]; const predictions = { Aries: { theme: "Claim Your Power", love: "Someone from your past resurfaces — but you're not the same person who let them walk away. Own that.", career: "A bold pitch or idea you've been sitting on? June says send it. The window is open right now.", spirit: "You've been dimming yourself to keep the peace. This month, stop. Your fire is the gift.", mantra: "I act. I lead. I don't wait for permission.", }, Taurus: { theme: "Trust the Slow Build", love: "Depth over dazzle. The connection that's been quietly growing deserves your full attention this month.", career: "A financial shift is in motion. Don't rush it — steady, intentional moves now compound into something real.", spirit: "Your body is trying to tell you something. Slow down enough to listen.", mantra: "I am worthy of what takes time to arrive.", }, Gemini: { theme: "Say the True Thing", love: "You've been charming your way around a real conversation. June asks you to finally have it.", career: "Your ideas are the asset. Stop giving them away for free — in rooms, in meetings, in messages.", spirit: "Two voices inside you are arguing. The quieter one is usually right.", mantra: "My words have weight. I use them with intention.", }, Cancer: { theme: "Come Home to Yourself", love: "You give so much. This month, let someone show up for you. Receiving is not weakness.", career: "Trust your instincts over someone else's timeline. Your gut knows what the spreadsheet doesn't.", spirit: "The full moon hits your sign with force. Whatever you've been holding — let it move through you.", mantra: "I am safe enough to feel everything.", }, Leo: { theme: "Shine Without Apology", love: "Stop editing yourself for someone else's comfort. The person worth keeping wants your full, unfiltered self.", career: "Recognition is coming — but it starts with you recognizing your own work first.", spirit: "You are allowed to take up space. All of it. Every single room.", mantra: "I was made for this moment.", }, Virgo: { theme: "Release the Perfect Plan", love: "You've been analyzing instead of feeling. Put the checklist down and just be present with someone.", career: "Done is better than perfect this month. Ship it, send it, say yes. You can refine later.", spirit: "The healing you keep postponing until you're 'ready' — you're ready now.", mantra: "I trust the process even when I can't see the full picture.", }, Libra: { theme: "Choose Yourself First", love: "You've been bending. This month asks you to hold your ground with someone you love — and still love them.", career: "A decision you've been deferring needs to be made. Both options are fine. Just pick one and move.", spirit: "Your peace is not up for negotiation. Protect it like the sacred thing it is.", mantra: "I can love deeply and still have boundaries.", }, Scorpio: { theme: "Let the Old Version Go", love: "The version of yourself that stayed small to be loved — retire them. Who you're becoming deserves better.", career: "A transformation in your work life is mid-process. Don't try to rush the chrysalis.", spirit: "You already know what needs to be released. June gives you the strength to actually do it.", mantra: "I am not who I was. And that is the whole point.", }, Sagittarius: { theme: "Root Before You Fly", love: "Adventure is your nature — but something real is asking for your consistency right now. Show up for it.", career: "A big vision needs a foundation. Spend June building the infrastructure, not just the dream.", spirit: "The truth you've been seeking? It's already inside you. Stop running toward it and just sit.", mantra: "I can be free and still choose to stay.", }, Capricorn: { theme: "Rest is Productive", love: "You've been showing up for everyone. Let June be the month someone shows up for you — and you let them.", career: "You've earned more than you're asking for. This is the month to renegotiate — a rate, a role, a relationship.", spirit: "Your worth isn't tied to your output. Practice being, not just doing.", mantra: "I achieve more when I'm not running on empty.", }, Aquarius: { theme: "Connection Over Concept", love: "You understand love in theory. June asks you to show it in practice — messy, imperfect, and real.", career: "Your originality is your advantage. Stop making yourself smaller to fit a conventional box.", spirit: "The collective needs your light, but so does the person right in front of you.", mantra: "I am here, present, and open to being known.", }, Pisces: { theme: "Anchor the Vision", love: "You see people at their best — but also protect your energy from those who only take. Discernment is love.", career: "Your creative gifts are ready for a bigger stage. Don't let fear masquerade as humility.", spirit: "Your dreams this month carry messages. Write them down. They're trying to reach you.", mantra: "I honor both my magic and my reality.", }, }; const elementEmoji = { Fire: "🔥", Earth: "🌿", Air: "💨", Water: "🌊" }; export default function ZodiacJune() { const [selected, setSelected] = useState(null); const [tab, setTab] = useState("love"); const sign = selected ? signs.find((s) => s.name === selected) : null; const pred = selected ? predictions[selected] : null; return ( <div style={{ minHeight: "100vh", background: "radial-gradient(ellipse at 20% 10%, #1a0533 0%, #0d0120 40%, #000510 100%)", fontFamily: "'Cormorant Garamond', Georgia, serif", color: "#e8d5ff", padding: "0", position: "relative", overflow: "hidden", }}> {/* Star field */} <div style={{ position: "fixed", inset: 0, pointerEvents: "none", zIndex: 0 }}> {[...Array(80)].map((_, i) => ( <div key={i} style={{ position: "absolute", width: i % 7 === 0 ? "2px" : "1px", height: i % 7 === 0 ? "2px" : "1px", background: "#fff", borderRadius: "50%", top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`, opacity: 0.3 + Math.random() * 0.6, animation: `twinkle ${2 + Math.random() * 3}s ease-in-out infinite`, animationDelay: `${Math.random() * 4}s`, }} /> ))} </div> <style>{` @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap'); @keyframes twinkle { 0%,100%{opacity:.2} 50%{opacity:1} } @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(212,184,255,0)} 50%{box-shadow:0 0 20px 4px rgba(212,184,255,0.15)} } .sign-card { transition: all 0.25s ease; cursor: pointer; } .sign-card:hover { transform: translateY(-4px) scale(1.04); } .tab-btn { transition: all 0.2s ease; cursor: pointer; border: none; } .tab-btn:hover { opacity: 0.9; } .back-btn { transition: all 0.2s ease; cursor: pointer; } .back-btn:hover { opacity: 0.7; } `}</style> <div style={{ position: "relative", zIndex: 1, maxWidth: "820px", margin: "0 auto", padding: "40px 20px 60px" }}> {/* Header */} <div style={{ textAlign: "center", marginBottom: "48px", animation: "fadeUp 0.8s ease both" }}> <div style={{ fontSize: "11px", letterSpacing: "5px", textTransform: "uppercase", color: "#d4b8ff", marginBottom: "12px", fontStyle: "italic" }}> ✦ celestial forecast ✦ </div> <h1 style={{ fontSize: "clamp(38px, 8vw, 64px)", fontWeight: "300", margin: "0 0 8px", lineHeight: 1.1, letterSpacing: "-1px" }}> June 2026 </h1> <p style={{ fontSize: "18px", fontWeight: "300", fontStyle: "italic", color: "#c4a8f0", margin: 0 }}> What the stars are saying for your sign </p> </div> {!selected ? ( /* Sign Grid */ <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: "16px", animation: "fadeUp 0.9s ease 0.15s both", }}> {signs.map((s) => ( <div key={s.name} className="sign-card" onClick={() => { setSelected(s.name); setTab("love"); }} style={{ background: "rgba(255,255,255,0.04)", border: `1px solid rgba(${hexToRgb(s.color)}, 0.35)`, borderRadius: "16px", padding: "24px 16px", textAlign: "center", backdropFilter: "blur(10px)", animation: "pulse 4s ease-in-out infinite", }} > <div style={{ fontSize: "36px", marginBottom: "8px", filter: `drop-shadow(0 0 8px ${s.color})` }}> {s.symbol} </div> <div style={{ fontSize: "16px", fontWeight: "500", marginBottom: "4px", letterSpacing: "1px" }}> {s.name} </div> <div style={{ fontSize: "11px", color: "#a08cc0", letterSpacing: "0.5px" }}>{s.dates}</div> <div style={{ marginTop: "10px", fontSize: "11px", color: s.color, letterSpacing: "2px", textTransform: "uppercase" }}> {elementEmoji[s.element]} {s.element} </div> </div> ))} </div> ) : ( /* Reading View */ <div style={{ animation: "fadeUp 0.5s ease both" }}> <button className="back-btn" onClick={() => setSelected(null)} style={{ background: "transparent", border: "1px solid rgba(212,184,255,0.3)", color: "#d4b8ff", padding: "8px 20px", borderRadius: "30px", fontSize: "13px", letterSpacing: "2px", textTransform: "uppercase", fontFamily: "inherit", marginBottom: "32px", cursor: "pointer", }} > ← All Signs </button> {/* Sign Header */} <div style={{ textAlign: "center", marginBottom: "36px", background: `radial-gradient(ellipse at center, rgba(${hexToRgb(sign.color)}, 0.12) 0%, transparent 70%)`, padding: "32px 20px", borderRadius: "24px", border: `1px solid rgba(${hexToRgb(sign.color)}, 0.2)`, }}> <div style={{ fontSize: "64px", filter: `drop-shadow(0 0 20px ${sign.color})`, marginBottom: "12px" }}> {sign.symbol} </div> <h2 style={{ fontSize: "42px", fontWeight: "300", margin: "0 0 4px", letterSpacing: "3px" }}> {sign.name} </h2> <div style={{ fontSize: "12px", letterSpacing: "4px", textTransform: "uppercase", color: sign.color, marginBottom: "16px" }}> {elementEmoji[sign.element]} {sign.element} · {sign.dates} </div> <div style={{ display: "inline-block", background: `rgba(${hexToRgb(sign.color)}, 0.15)`, border: `1px solid rgba(${hexToRgb(sign.color)}, 0.4)`, padding: "8px 24px", borderRadius: "30px", fontSize: "14px", letterSpacing: "2px", textTransform: "uppercase", color: sign.color, }}> {pred.theme} </div> </div> {/* Tabs */} <div style={{ display: "flex", gap: "10px", marginBottom: "24px", flexWrap: "wrap" }}> {["love", "career", "spirit"].map((t) => ( <button key={t} className="tab-btn" onClick={() => setTab(t)} style={{ padding: "10px 24px", borderRadius: "30px", fontFamily: "inherit", fontSize: "13px", letterSpacing: "2px", textTransform: "uppercase", background: tab === t ? sign.color : "rgba(255,255,255,0.06)", color: tab === t ? "#0d0120" : "#d4b8ff", border: `1px solid ${tab === t ? sign.color : "rgba(212,184,255,0.2)"}`, fontWeight: tab === t ? "600" : "400", }} > {t === "love" ? "💫 Love" : t === "career" ? "✨ Work" : "🌙 Spirit"} </button> ))} </div> {/* Reading Content */} <div style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(212,184,255,0.15)", borderRadius: "20px", padding: "36px 32px", marginBottom: "24px", backdropFilter: "blur(10px)", minHeight: "140px", }}> <p style={{ fontSize: "clamp(18px, 3vw, 22px)", lineHeight: "1.7", fontStyle: "italic", fontWeight: "300", margin: 0, color: "#ecdcff", }}> "{pred[tab]}" </p> </div> {/* Mantra */} <div style={{ background: `linear-gradient(135deg, rgba(${hexToRgb(sign.color)}, 0.1), rgba(212,184,255,0.06))`, border: `1px solid rgba(${hexToRgb(sign.color)}, 0.3)`, borderRadius: "20px", padding: "28px 32px", textAlign: "center", }}> <div style={{ fontSize: "11px", letterSpacing: "4px", textTransform: "uppercase", color: "#a08cc0", marginBottom: "12px" }}> June Mantra </div> <p style={{ fontSize: "clamp(16px, 2.5vw, 20px)", fontWeight: "400", fontStyle: "italic", margin: 0, color: sign.color }}> {pred.mantra} </p> </div> </div> )} <div style={{ textAlign: "center", marginTop: "48px", fontSize: "11px", letterSpacing: "3px", color: "#4a3060", textTransform: "uppercase" }}> ✦ Everything Aligns · June 2026 ✦ </div> </div> </div> ); } function hexToRgb(hex) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `${r},${g},${b}`; }