import React, { useState, useEffect } from "react"; import { BrowserRouter, Routes, Route, Link, useNavigate, useLocation, Navigate } from "react-router-dom"; import { Sparkles, Flame, MessageSquare, PlusCircle, User, Check, X, Send, MapPin, ArrowRight, CheckCircle2 } from "lucide-react"; import { motion, AnimatePresence } from "framer-motion"; import { Toaster, toast } from "sonner"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; import { cn } from "@/lib/utils"; // --- LOCAL UTILS --- function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // --- TYPES & INTERFACES --- interface CoFounder { name: string; role: "Tech" | "Growth" | "Product" | "Design"; bio: string; skills: string[]; avatar: string; location: string; } interface StartupIdea { id: string; title: string; tagline: string; description: string; market: string; stage: "Idea" | "MVP" | "Pre-seed"; founder: CoFounder; clayHighlight: string; } interface Match { id: string; idea: StartupIdea; matchedAt: string; messages: { sender: "me" | "them"; text: string; time: string }[]; } interface UserProfile { name: string; role: "Tech" | "Growth" | "Product" | "Design"; bio: string; skills: string[]; location: string; } // --- CONSTANTS & MOCK DATA --- const AVATARS = { elena: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=200&q=80", marcus: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80", sara: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80", devon: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&q=80", priya: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=200&q=80", }; const INITIAL_IDEAS: StartupIdea[] = [ { id: "idea-1", title: "AeroCrop", tagline: "Autonomous drone pollination & health monitoring for vertical farms.", description: "We are building an integrated hardware-software suite that automates crop pollination inside indoor vertical farms, boosting yield by 35% without manual labor.", market: "AgTech • $12B TAM", stage: "MVP", clayHighlight: "Optimizing vertical space", founder: { name: "Elena Rostova", role: "Tech", bio: "Ex-Robotics Lead at Skydio. Built autonomous pathfinders. Looking for a growth partner to tackle B2B sales.", skills: ["ROS", "C++", "Computer Vision", "Embedded Systems"], avatar: AVATARS.elena, location: "San Francisco, CA" } }, { id: "idea-2", title: "ScribeFlow", tagline: "Ambient voice-to-structured-spec for product managers.", description: "An AI companion that listens to messy brainstorm sessions and instantly outputs perfectly formatted PRDs, user stories, and Jira tickets mapped to your workspace.", market: "B2B SaaS • Developer Tools", stage: "Idea", clayHighlight: "Zero-friction drafting", founder: { name: "Marcus Vance", role: "Product", bio: "Former Principal PM at Atlassian. Obsessed with workflow design. Looking for a technical co-founder to build the core parser.", skills: ["Product Strategy", "User Research", "Jira API", "B2B Positioning"], avatar: AVATARS.marcus, location: "Austin, TX" } }, { id: "idea-3", title: "Clay Ledger", tagline: "Local manufacturing supply chains on a unified ledger.", description: "Connecting boutique clay, ceramic, and glass makers directly with regional construction and design firms to bypass global freight delays and lower carbon footprints.", market: "Industrial Tech • Green Logistics", stage: "Pre-seed", clayHighlight: "Hyper-local sourcing", founder: { name: "Sara Lin", role: "Growth", bio: "Operations veteran. Scaled a regional logistics firm to $10M ARR. Looking for a full-stack engineer to own the marketplace engine.", skills: ["Supply Chain", "Growth Marketing", "B2B Sales", "Contract Negotiation"], avatar: AVATARS.sara, location: "Brooklyn, NY" } }, { id: "idea-4", title: "KubeGuard", tagline: "Automated cost-anomaly prevention for multi-cloud setups.", description: "An agentic infrastructure layer that detects resource leaks in Kubernetes clusters and auto-scales down idle environments safely without breaking production.", market: "DevOps • Cloud Infrastructure", stage: "MVP", clayHighlight: "Actionable cloud savings", founder: { name: "Devon Miller", role: "Tech", bio: "Early SRE at HashiCorp. Loves systems programming and shaving milliseconds off build pipelines.", skills: ["Kubernetes", "Go", "AWS/GCP", "Terraform"], avatar: AVATARS.devon, location: "Seattle, WA" } }, { id: "idea-5", title: "NurtureOS", tagline: "Patient-first coordination platform for independent clinics.", description: "A beautifully designed, warm workspace for private medical practices to manage intake, follow-ups, and insurance claims without feeling cold and sterile.", market: "Digital Health • SaaS", stage: "Idea", clayHighlight: "Empathetic patient flows", founder: { name: "Priya Patel", role: "Design", bio: "Healthcare UX designer. Designed patient portals used by millions. Seeking a technical lead to build the secure HIPAA-compliant core.", skills: ["UI/UX Design", "Figma", "User Testing", "Healthcare Standards"], avatar: AVATARS.priya, location: "Chicago, IL" } } ]; const INITIAL_PROFILE: UserProfile = { name: "Alex Mercer", role: "Tech", bio: "Full-stack engineer and builder. Love React, Node, and fast prototyping. Looking to join an early stage team tackling real physical or workflow problems.", skills: ["React", "TypeScript", "Node.js", "PostgreSQL", "Tailwind CSS"], location: "Denver, CO" }; // --- MAIN APP COMPONENT --- export default function App() { const [ideas, setIdeas] = useState(() => { const saved = localStorage.getItem("co_foundry_ideas"); if (saved) { try { return JSON.parse(saved) as StartupIdea[]; } catch (e) { return INITIAL_IDEAS; } } return INITIAL_IDEAS; }); const [swipes, setSwipes] = useState>(() => { const saved = localStorage.getItem("co_foundry_swipes"); if (saved) { try { return JSON.parse(saved) as Record; } catch (e) { return {}; } } return {}; }); const [matches, setMatches] = useState(() => { const saved = localStorage.getItem("co_foundry_matches"); if (saved) { try { return JSON.parse(saved) as Match[]; } catch (e) { // fallback to seed } } // Seed one initial match for immediate legibility return [ { id: "match-1", idea: INITIAL_IDEAS[0], // AeroCrop matchedAt: new Date(Date.now() - 3600000 * 2).toISOString(), messages: [ { sender: "them", text: "Hey Alex! Loved your profile. Your full-stack experience is exactly what we need to build the AeroCrop control dashboard.", time: "2h ago" }, { sender: "me", text: "Thanks Elena! The autonomous drone system sounds incredible. Let's chat.", time: "1h ago" } ] } ]; }); const [profile, setProfile] = useState(() => { const saved = localStorage.getItem("co_foundry_profile"); if (saved) { try { return JSON.parse(saved) as UserProfile; } catch (e) { return INITIAL_PROFILE; } } return INITIAL_PROFILE; }); useEffect(() => { localStorage.setItem("co_foundry_ideas", JSON.stringify(ideas)); }, [ideas]); useEffect(() => { localStorage.setItem("co_foundry_swipes", JSON.stringify(swipes)); }, [swipes]); useEffect(() => { localStorage.setItem("co_foundry_matches", JSON.stringify(matches)); }, [matches]); useEffect(() => { localStorage.setItem("co_foundry_profile", JSON.stringify(profile)); }, [profile]); const handleSwipe = (ideaId: string, direction: "like" | "skip") => { setSwipes(prev => ({ ...prev, [ideaId]: direction })); if (direction === "like") { // Simulate high chance of match (80% for mock experience) if (Math.random() > 0.2) { const matchedIdea = ideas.find(i => i.id === ideaId); if (matchedIdea) { setTimeout(() => { const newMatch: Match = { id: `match-${Date.now()}`, idea: matchedIdea, matchedAt: new Date().toISOString(), messages: [ { sender: "them", text: `Hey! Thanks for swiping right on ${matchedIdea.title}. I'd love to connect and share more about our vision.`, time: "Just now" } ] }; setMatches(prev => [newMatch, ...prev]); toast.custom((t) => (

{ event.currentTarget.onerror = null; event.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23f4f4f5'/%3E%3Cstop offset='1' stop-color='%23d4d4d8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' rx='48' fill='url(%23g)'/%3E%3Cpath d='M330 540 520 350l126 126 80-92 160 156H330Z' fill='%23a1a1aa'/%3E%3Ccircle cx='804' cy='286' r='56' fill='%23c4c4cc'/%3E%3C/svg%3E"; }} />

It's a Match! 🎉

You and {matchedIdea.founder.name} both swiped right on {matchedIdea.title}.

), { duration: 4000 }); }, 600); } } } }; const handleSendMessage = (matchId: string, text: string) => { setMatches(prev => prev.map(m => { if (m.id === matchId) { return { ...m, messages: [...m.messages, { sender: "me" as const, text, time: "Just now" }] }; } return m; })); // Simulate quick reply setTimeout(() => { setMatches(prev => prev.map(m => { if (m.id === matchId) { return { ...m, messages: [ ...m.messages, { sender: "them" as const, text: "That sounds great! Are you free for a quick Zoom call tomorrow afternoon to align on skills?", time: "Just now" } ] }; } return m; })); }, 1500); }; const handleAddIdea = (newIdea: StartupIdea) => { setIdeas(prev => [newIdea, ...prev]); toast.success("Your startup idea has been pitched to the deck!"); }; return (

{/* Global Header */}

CoFoundry Warm Productivity

{/* Main Content Area */}

} /> } /> } /> } /> } />

{/* Persistent Bottom Navigation */}

); } // --- BOTTOM NAVIGATION COMPONENT --- function BottomNav({ matchesCount }: { matchesCount: number }) { const location = useLocation(); const isActive = (path: string) => location.pathname === path; return ( ); } // --- SWIPE DECK SCREEN --- interface SwipeDeckProps { ideas: StartupIdea[]; swipes: Record; onSwipe: (id: string, direction: "like" | "skip") => void; } function SwipeDeck({ ideas, swipes, onSwipe }: SwipeDeckProps) { const activeIdeas = ideas.filter(idea => !swipes[idea.id]); const currentIdea = activeIdeas[0]; const handleAction = (direction: "like" | "skip") => { if (currentIdea) { onSwipe(currentIdea.id, direction); } }; return (

{/* Deck Header */}

Find Your Co-Founder

Swipe right to collaborate on ideas you believe in.

{/* Card Container */}

{currentIdea ? ( {/* Top Accent Bar */}

{/* Idea Header */}

{currentIdea.stage} {currentIdea.market}

{currentIdea.title}

{currentIdea.tagline}

{currentIdea.description}

{/* Founder Profile Section */}

{currentIdea.founder.name} {currentIdea.founder.role} Lead

{currentIdea.founder.location}

"{currentIdea.founder.bio}"

{/* Skills Tags */}

{currentIdea.founder.skills.map(skill => ( {skill} ))}

) : (

You've reached the horizon

No more active pitches left to swipe. Try launching your own idea to attract co-founders!

Pitch Your Idea

)}

{/* Control Actions */} {currentIdea && (

)}

); } // --- MATCHES LIST & CHAT SCREEN --- interface MatchesListProps { matches: Match[]; onSendMessage: (matchId: string, text: string) => void; } function MatchesList({ matches, onSendMessage }: MatchesListProps) { const [selectedMatch, setSelectedMatch] = useState(null); const [typedMessage, setTypedMessage] = useState(""); const handleSend = (e: React.FormEvent) => { e.preventDefault(); if (!typedMessage.trim() || !selectedMatch) return; onSendMessage(selectedMatch.id, typedMessage); setTypedMessage(""); }; return (

Your Co-Foundry Matches

Mutual interest unlocked. Start the conversation to build together.

{matches.length === 0 ? (

No matches yet

Keep swiping on ideas. When a founder likes your profile back, they will appear here.

) : selectedMatch ? ( // Active Chat Interface

{/* Chat Header */}

{selectedMatch.idea.founder.name}

Co-Founder of {selectedMatch.idea.title}

{/* Messages Area */}

{selectedMatch.messages.map((msg, index) => (

{msg.text}

{msg.time}

))}

{/* Chat Input */}

) : ( // Matches List

{matches.map(match => (

setSelectedMatch(match)} className="bg-[#fdfdfc] hover:bg-[#fbfaf7] border border-[#e6e4dc] rounded-xl p-4 cursor-pointer transition-all duration-150 flex items-start gap-3.5" >

{match.idea.founder.name}

{match.idea.title}

{match.idea.tagline}

{match.messages[match.messages.length - 1]?.text || "No messages yet."}

))}

)}

); } // --- PITCH AN IDEA FORM --- interface PitchIdeaFormProps { onAddIdea: (idea: StartupIdea) => void; } function PitchIdeaForm({ onAddIdea }: PitchIdeaFormProps) { const navigate = useNavigate(); const [title, setTitle] = useState(""); const [tagline, setTagline] = useState(""); const [description, setDescription] = useState(""); const [market, setMarket] = useState(""); const [stage, setStage] = useState<"Idea" | "MVP" | "Pre-seed">("Idea"); const [clayHighlight, setClayHighlight] = useState(""); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!title || !tagline || !description || !market) { toast.error("Please fill out all required fields."); return; } const newIdea: StartupIdea = { id: `idea-${Date.now()}`, title, tagline, description, market, stage, clayHighlight: clayHighlight || "Core MVP focus", founder: { name: "Alex Mercer", // Matches the profile screen role: "Tech", bio: "Full-stack builder passionate about early-stage productivity products.", skills: ["React", "TypeScript", "Node.js"], avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=200&q=80", location: "Denver, CO" } }; onAddIdea(newIdea); navigate("/"); }; return (

Pitch Your Startup Idea

Put your idea in the deck to attract co-founders looking to build.

Startup Name * setTitle(e.target.value)} className="w-full bg-[#f5f4f0] border border-[#e6e4dc] rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#5c6f48]" />

One-Sentence Tagline * setTagline(e.target.value)} className="w-full bg-[#f5f4f0] border border-[#e6e4dc] rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#5c6f48]" />

The Vision & Core Workflow *

setDescription(e.target.value)}
            className="w-full bg-[#f5f4f0] border border-[#e6e4dc] rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#5c6f48] resize-none"
          />
        </div>

<div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-xs font-bold text-[#2d2d2a] mb-1">
              Market / Category *
            </label>
            <input
              type="text"
              required
              placeholder="e.g. B2B SaaS"
              value={market}
              onChange={(e) => setMarket(e.target.value)}
              className="w-full bg-[#f5f4f0] border border-[#e6e4dc] rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#5c6f48]"
            />
          </div>

<div>
            <label className="block text-xs font-bold text-[#2d2d2a] mb-1">
              Current Stage
            </label>
            <select
              value={stage}
              onChange={(e) => setStage(e.target.value as any)}
              className="w-full bg-[#f5f4f0] border border-[#e6e4dc] rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#5c6f48]"
            >
              <option value="Idea">Idea</option>
              <option value="MVP">MVP</option>
              <option value="Pre-seed">Pre-seed</option>
            </select>
          </div>
        </div>

<div>
          <label className="block text-xs font-bold text-[#2d2d2a] mb-1">
            Clay Highlight (Memorable differentiator)
          </label>
          <input
            type="text"
            placeholder="e.g. Zero-friction drafting"
            value={clayHighlight}
            onChange={(e) => setClayHighlight(e.target.value)}
            className="w-full bg-[#f5f4f0] border border-[#e6e4dc] rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#5c6f48]"
          />
        </div>

<button
          type="submit"
          className="w-full bg-[#5c6f48] hover:bg-[#4a5a3a] text-white font-semibold text-xs py-2.5 rounded-xl transition-all shadow-sm flex items-center justify-center gap-2 mt-2"
        >
          <CheckCircle2 className="w-4 h-4" />
          Publish Pitch to Deck
        </button>
      </form>
    </div>
  );
}

// --- PROFILE SCREEN ---
interface ProfileScreenProps {
  profile: UserProfile;
  onUpdateProfile: (p: UserProfile) => void;
}

function ProfileScreen({ profile, onUpdateProfile }: ProfileScreenProps) {
  const [name, setName] = useState(profile.name);
  const [role, setRole] = useState(profile.role);
  const [bio, setBio] = useState(profile.bio);
  const [location, setLocation] = useState(profile.location);
  const [skillsText, setSkillsText] = useState(profile.skills.join(", "));

const handleSave = (e: React.FormEvent) => {
    e.preventDefault();
    const skills = skillsText.split(",").map(s => s.trim()).filter(Boolean);
    onUpdateProfile({ name, role, bio, location, skills });
    toast.success("Profile updated successfully!");
  };

return (
    <div className="space-y-4">
      <div>
        <h1 className="text-2xl font-display font-bold text-[#2d2d2a] tracking-tight">
          Your Co-Founder Profile
        </h1>
        <p className="text-xs text-[#7a7872]">
          This is what other founders see when you swipe right on their ideas.
        </p>
      </div>

<form onSubmit={handleSave} className="bg-[#fdfdfc] rounded-2xl border border-[#e6e4dc] p-5 space-y-4 shadow-sm">
        <div className="flex items-center gap-4 pb-4 border-b border-[#e6e4dc]">
          <div className="relative">
            <img 
              src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=200&q=80" 
              alt="Avatar" 
              className="w-16 h-16 rounded-full object-cover border-2 border-[#5c6f48]"
            />
            <span className="absolute bottom-0 right-0 bg-[#5c6f48] text-white p-1 rounded-full text-[8px] font-bold">
              PRO
            </span>
          </div>
          <div>
            <h3 className="font-bold text-sm text-[#2d2d2a]">{profile.name}</h3>
            <p className="text-xs text-[#7a7872]">{profile.role} Lead • {profile.location}</p>
          </div>
        </div>

<div>
          <label className="block text-xs font-bold text-[#2d2d2a] mb-1">
            Full Name
          </label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="w-full bg-[#f5f4f0] border border-[#e6e4dc] rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#5c6f48]"
          />
        </div>

<div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-xs font-bold text-[#2d2d2a] mb-1">
              Primary Role
            </label>
            <select
              value={role}
              onChange={(e) => setRole(e.target.value as any)}
              className="w-full bg-[#f5f4f0] border border-[#e6e4dc] rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#5c6f48]"
            >
              <option value="Tech">Tech</option>
              <option value="Growth">Growth</option>
              <option value="Product">Product</option>
              <option value="Design">Design</option>
            </select>
          </div>

<div>
            <label className="block text-xs font-bold text-[#2d2d2a] mb-1">
              Location
            </label>
            <input
              type="text"
              value={location}
              onChange={(e) => setLocation(e.target.value)}
              className="w-full bg-[#f5f4f0] border border-[#e6e4dc] rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#5c6f48]"
            />
          </div>
        </div>

<div>
          <label className="block text-xs font-bold text-[#2d2d2a] mb-1">
            Bio (What are you looking to build?)
          </label>
          <textarea
            rows={3}
            value={bio}
            onChange={(e) => setBio(e.target.value)}
            className="w-full bg-[#f5f4f0] border border-[#e6e4dc] rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#5c6f48] resize-none"
          />
        </div>

<div>
          <label className="block text-xs font-bold text-[#2d2d2a] mb-1">
            Skills (Comma separated)
          </label>
          <input
            type="text"
            value={skillsText}
            onChange={(e) => setSkillsText(e.target.value)}
            className="w-full bg-[#f5f4f0] border border-[#e6e4dc] rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#5c6f48]"
          />
        </div>

<button
          type="submit"
          className="w-full bg-[#5c6f48] hover:bg-[#4a5a3a] text-white font-semibold text-xs py-2.5 rounded-xl transition-all shadow-sm"
        >
          Save Profile Changes
        </button>
      </form>
    </div>
  );
}</article></body></html>