{displayName}

checkuridea.com/@{profile.userName || "user"}

{profile.designation && (

{profile.designation}

)}

{currentConfig.label}

{/* Basic Info - Dynamic */} startEditing("basic")} onSave={saveBasicInfo} onCancel={cancelEditing} editContent={

Full Name setTempProfile({ ...tempProfile, fullName: e.target.value, }) } className="bg-secondary/30" />

Username

checkuridea.com/ setTempProfile({ ...tempProfile, userName: e.target.value .toLowerCase() .replace(/[^a-z0-9_]/g, ""), }) } className="rounded-l-none bg-secondary/30" />

Designation / Title setTempProfile({ ...tempProfile, designation: e.target.value, }) } className="bg-secondary/30" placeholder="e.g., Product Manager, Founder" />

Bio

setTempProfile({
                        ...tempProfile,
                        aboutMe: e.target.value,
                      })
                    }
                    rows={3}
                    className="w-full rounded-lg bg-secondary/30 border border-border/50 px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none"
                  />
                </div>
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">
                    Gender
                  </label>
                  <select
                    value={tempProfile.gender}
                    onChange={(e) =>
                      setTempProfile({ ...tempProfile, gender: e.target.value })
                    }
                    className="w-full rounded-lg bg-secondary/30 border border-border/50 px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
                  >
                    <option value="">Select Gender</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                    <option value="Others">Others</option>
                  </select>
                </div>
              </div>
            }
          >
            <div className="space-y-2">
              <p className="text-foreground font-medium">{displayName}</p>
              <p className="text-sm text-primary">
                @{profile.userName || "user"}
              </p>
              {profile.designation && (
                <p className="text-sm text-muted-foreground">
                  {profile.designation}
                </p>
              )}
              <p className="text-sm text-muted-foreground">
                {profile.aboutMe || ""}
              </p>
              {profile.gender && (
                <p className="text-sm text-muted-foreground">
                  Gender: {profile.gender}
                </p>
              )}
            </div>
          </EditableSection>

{/* Location - Dynamic */}
          <EditableSection
            title="Location"
            icon={MapPin}
            isEditing={editingSection === "location"}
            onEdit={() => startEditing("location")}
            onSave={saveLocation}
            onCancel={cancelEditing}
            editContent={
              <div className="space-y-4">
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">
                    Country / City
                  </label>
                  <Input
                    value={tempProfile.location}
                    onChange={(e) =>
                      setTempProfile({
                        ...tempProfile,
                        location: e.target.value,
                      })
                    }
                    className="bg-secondary/30"
                    placeholder="e.g., Mumbai, India"
                  />
                </div>
              </div>
            }
          >
            <div className="flex flex-wrap gap-4 text-sm">
              <span className="flex items-center gap-2 text-muted-foreground">
                <MapPin className="h-4 w-4" />
                {profile.location || "Location not specified"}
              </span>
            </div>
          </EditableSection>

{/* Social Links - Dynamic */}
          <EditableSection
            title="Social Links"
            icon={Link2}
            isEditing={editingSection === "social"}
            onEdit={() => startEditing("social")}
            onSave={saveSocialLinks}
            onCancel={cancelEditing}
            editContent={
              <div className="space-y-4">
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">
                    Website
                  </label>
                  <Input
                    value={tempProfile.website}
                    onChange={(e) =>
                      setTempProfile({
                        ...tempProfile,
                        website: e.target.value,
                      })
                    }
                    className="bg-secondary/30"
                    placeholder="https://yourwebsite.com"
                  />
                </div>
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">
                    LinkedIn
                  </label>
                  <Input
                    value={tempProfile.linkedin}
                    onChange={(e) =>
                      setTempProfile({
                        ...tempProfile,
                        linkedin: e.target.value,
                      })
                    }
                    className="bg-secondary/30"
                    placeholder="https://linkedin.com/in/username"
                  />
                </div>
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">
                    Twitter / X
                  </label>
                  <Input
                    value={tempProfile.twitter}
                    onChange={(e) =>
                      setTempProfile({
                        ...tempProfile,
                        twitter: e.target.value,
                      })
                    }
                    className="bg-secondary/30"
                    placeholder="https://twitter.com/@username"
                  />
                </div>
              </div>
            }
          >
            <div className="flex flex-wrap gap-3">
              {profile.website && (
                <a
                  href={profile.website}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 px-4 py-2 rounded-xl bg-secondary/50 hover:bg-secondary transition-colors text-sm"
                >
                  <Globe className="h-4 w-4" />
                  Website
                </a>
              )}
              {profile.linkedin && (
                <a
                  href={profile.linkedin}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[#0077B5]/10 text-[#0077B5] hover:bg-[#0077B5]/20 transition-colors text-sm"
                >
                  <Linkedin className="h-4 w-4" />
                  LinkedIn
                </a>
              )}
              {profile.twitter && (
                <a
                  href={profile.twitter}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2]/20 transition-colors text-sm"
                >
                  <Twitter className="h-4 w-4" />
                  Twitter
                </a>
              )}
              {!profile.website && !profile.linkedin && !profile.twitter && (
                <p className="text-sm text-muted-foreground">
                  No social links added
                </p>
              )}
            </div>
          </EditableSection>

{/* ========== INDIVIDUAL SECTIONS ========== */}
          {userType === "individual" && (
            <>
              <EditableSection
                title="Education"
                icon={GraduationCap}
                isEditing={editingSection === "education"}
                onEdit={() => startEditing("education")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-3">
                    {education.map((edu, idx) => (
                      <div
                        key={edu.id}
                        className="flex items-start gap-3 p-3 rounded-xl bg-secondary/30"
                      >
                        <div className="flex-1 space-y-2">
                          <Input
                            defaultValue={edu.degree}
                            onChange={(e) => {
                              const updated = [...education];
                              updated[idx].degree = e.target.value;
                              setEducation(updated);
                            }}
                            placeholder="Degree"
                            className="bg-secondary/50"
                          />
                          <Input
                            defaultValue={edu.institution}
                            onChange={(e) => {
                              const updated = [...education];
                              updated[idx].institution = e.target.value;
                              setEducation(updated);
                            }}
                            placeholder="Institution"
                            className="bg-secondary/50"
                          />
                          <Input
                            defaultValue={edu.year}
                            onChange={(e) => {
                              const updated = [...education];
                              updated[idx].year = e.target.value;
                              setEducation(updated);
                            }}
                            placeholder="Year"
                            className="bg-secondary/50"
                          />
                        </div>
                        <button
                          onClick={() =>
                            setEducation(education.filter((_, i) => i !== idx))
                          }
                          className="text-destructive hover:text-destructive/80 p-2"
                        >
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <div className="flex gap-2 mt-2">
                      <Input
                        value={newEducation.degree}
                        onChange={(e) =>
                          setNewEducation({
                            ...newEducation,
                            degree: e.target.value,
                          })
                        }
                        placeholder="Degree"
                        className="bg-secondary/30"
                      />
                      <Input
                        value={newEducation.institution}
                        onChange={(e) =>
                          setNewEducation({
                            ...newEducation,
                            institution: e.target.value,
                          })
                        }
                        placeholder="Institution"
                        className="bg-secondary/30"
                      />
                      <Input
                        value={newEducation.year}
                        onChange={(e) =>
                          setNewEducation({
                            ...newEducation,
                            year: e.target.value,
                          })
                        }
                        placeholder="Year"
                        className="bg-secondary/30 w-24"
                      />
                      <Button
                        onClick={() => {
                          if (newEducation.degree && newEducation.institution) {
                            setEducation([
                              ...education,
                              { id: Date.now(), ...newEducation },
                            ]);
                            setNewEducation({
                              degree: "",
                              institution: "",
                              year: "",
                            });
                          }
                        }}
                        size="icon"
                      >
                        <Plus className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                }
              >
                <div className="space-y-3">
                  {education.map((edu) => (
                    <div key={edu.id}>
                      <p className="font-medium text-foreground">
                        {edu.degree}
                      </p>
                      <p className="text-sm text-muted-foreground">
                        {edu.institution} - {edu.year}
                      </p>
                    </div>
                  ))}
                </div>
              </EditableSection>

<EditableSection
                title="Work Experience"
                icon={Briefcase}
                isEditing={editingSection === "experience"}
                onEdit={() => startEditing("experience")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-3">
                    {experience.map((exp, idx) => (
                      <div
                        key={exp.id}
                        className="flex items-start gap-3 p-3 rounded-xl bg-secondary/30"
                      >
                        <div className="flex-1 space-y-2">
                          <Input
                            defaultValue={exp.role}
                            onChange={(e) => {
                              const updated = [...experience];
                              updated[idx].role = e.target.value;
                              setExperience(updated);
                            }}
                            placeholder="Role"
                            className="bg-secondary/50"
                          />
                          <Input
                            defaultValue={exp.company}
                            onChange={(e) => {
                              const updated = [...experience];
                              updated[idx].company = e.target.value;
                              setExperience(updated);
                            }}
                            placeholder="Company"
                            className="bg-secondary/50"
                          />
                          <Input
                            defaultValue={exp.duration}
                            onChange={(e) => {
                              const updated = [...experience];
                              updated[idx].duration = e.target.value;
                              setExperience(updated);
                            }}
                            placeholder="Duration"
                            className="bg-secondary/50"
                          />
                        </div>
                        <button
                          onClick={() =>
                            setExperience(
                              experience.filter((_, i) => i !== idx),
                            )
                          }
                          className="text-destructive hover:text-destructive/80 p-2"
                        >
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <div className="flex gap-2 mt-2">
                      <Input
                        value={newExperience.role}
                        onChange={(e) =>
                          setNewExperience({
                            ...newExperience,
                            role: e.target.value,
                          })
                        }
                        placeholder="Role"
                        className="bg-secondary/30 flex-1"
                      />
                      <Input
                        value={newExperience.company}
                        onChange={(e) =>
                          setNewExperience({
                            ...newExperience,
                            company: e.target.value,
                          })
                        }
                        placeholder="Company"
                        className="bg-secondary/30 flex-1"
                      />
                      <Input
                        value={newExperience.duration}
                        onChange={(e) =>
                          setNewExperience({
                            ...newExperience,
                            duration: e.target.value,
                          })
                        }
                        placeholder="Duration"
                        className="bg-secondary/30 w-32"
                      />
                      <Button
                        onClick={() => {
                          if (newExperience.role && newExperience.company) {
                            setExperience([
                              ...experience,
                              { id: Date.now(), ...newExperience },
                            ]);
                            setNewExperience({
                              role: "",
                              company: "",
                              duration: "",
                            });
                          }
                        }}
                        size="icon"
                      >
                        <Plus className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                }
              >
                <div className="space-y-3">
                  {experience.map((exp) => (
                    <div key={exp.id}>
                      <p className="font-medium text-foreground">{exp.role}</p>
                      <p className="text-sm text-muted-foreground">
                        {exp.company} - {exp.duration}
                      </p>
                    </div>
                  ))}
                </div>
              </EditableSection>

<EditableSection
                title="Skills & Interests"
                icon={Award}
                isEditing={editingSection === "skills"}
                onEdit={() => startEditing("skills")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div>
                    <div className="flex flex-wrap gap-2 mb-3">
                      {skills.map((skill, idx) => (
                        <span
                          key={idx}
                          className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-secondary text-sm"
                        >
                          {skill}
                          <button
                            onClick={() =>
                              setSkills(skills.filter((_, i) => i !== idx))
                            }
                            className="text-muted-foreground hover:text-destructive"
                          >
                            <X className="h-3 w-3" />
                          </button>
                        </span>
                      ))}
                    </div>
                    <div className="flex gap-2">
                      <Input
                        value={newSkill}
                        onChange={(e) => setNewSkill(e.target.value)}
                        placeholder="Add a skill"
                        className="bg-secondary/30"
                        onKeyDown={(e) => {
                          if (e.key === "Enter" && newSkill.trim()) {
                            setSkills([...skills, newSkill.trim()]);
                            setNewSkill("");
                          }
                        }}
                      />
                      <Button
                        onClick={() => {
                          if (newSkill.trim()) {
                            setSkills([...skills, newSkill.trim()]);
                            setNewSkill("");
                          }
                        }}
                        size="icon"
                      >
                        <Plus className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                }
              >
                <div className="flex flex-wrap gap-2">
                  {skills.map((skill, idx) => (
                    <span
                      key={idx}
                      className="px-3 py-1.5 rounded-full bg-primary/10 text-primary text-sm"
                    >
                      {skill}
                    </span>
                  ))}
                </div>
              </EditableSection>
            </>
          )}

{/* ========== BUSINESS SECTIONS ========== */}
          {userType === "business" && (
            <>
             <EditableSection
  title="Company Information"
  icon={Building2}
  isEditing={editingSection === "company"}
  onEdit={() => startEditing("company")}
  onSave={saveCompanyInfo}
  onCancel={cancelEditing}
  editContent={
    <div className="space-y-4">
      <div>
        <label className="text-sm font-medium text-foreground mb-1.5 block">Company Name</label>
        <Input 
          value={tempCompanyInfo.companyName} 
          onChange={(e) => setTempCompanyInfo({...tempCompanyInfo, companyName: e.target.value})} 
          className="bg-secondary/30" 
        />
      </div>
      <div>
        <label className="text-sm font-medium text-foreground mb-1.5 block">Business Type</label>
        <select 
          value={tempCompanyInfo.businessType} 
          onChange={(e) => setTempCompanyInfo({...tempCompanyInfo, businessType: e.target.value})}
          className="w-full rounded-lg bg-secondary/30 border border-border/50 px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
        >
          <option value="">Select Business Type</option>
          {businessTypes.map((type) => (
            <option key={type._id} value={type.businessTypeSlug}>
              {type.businessTypeName}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label className="text-sm font-medium text-foreground mb-1.5 block">Description</label>
        <textarea 
          value={tempCompanyInfo.description} 
          onChange={(e) => setTempCompanyInfo({...tempCompanyInfo, description: e.target.value})} 
          rows={3} 
          className="w-full rounded-lg bg-secondary/30 border border-border/50 px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none" 
          placeholder="Tell us about your company..."
        />
      </div>
      <div>
        <label className="text-sm font-medium text-foreground mb-1.5 block">Industry</label>
        <Input 
          value={tempCompanyInfo.industry} 
          onChange={(e) => setTempCompanyInfo({...tempCompanyInfo, industry: e.target.value})} 
          className="bg-secondary/30" 
        />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="text-sm font-medium text-foreground mb-1.5 block">Founded Year</label>
          <Input 
            value={tempCompanyInfo.founded} 
            onChange={(e) => setTempCompanyInfo({...tempCompanyInfo, founded: e.target.value})} 
            className="bg-secondary/30" 
            placeholder="e.g., 2015" 
          />
        </div>
        <div>
          <label className="text-sm font-medium text-foreground mb-1.5 block">Company Size</label>
          <Input 
            value={tempCompanyInfo.size} 
            onChange={(e) => setTempCompanyInfo({...tempCompanyInfo, size: e.target.value})} 
            className="bg-secondary/30" 
            placeholder="e.g., 50-100 employees" 
          />
        </div>
      </div>
      <div>
        <label className="text-sm font-medium text-foreground mb-1.5 block">Headquarters</label>
        <Input 
          value={tempCompanyInfo.headquarters} 
          onChange={(e) => setTempCompanyInfo({...tempCompanyInfo, headquarters: e.target.value})} 
          className="bg-secondary/30" 
          placeholder="e.g., Mumbai, India" 
        />
      </div>
      <div>
        <label className="text-sm font-medium text-foreground mb-1.5 block">Annual Revenue</label>
        <Input 
          value={tempCompanyInfo.annualRevenue} 
          onChange={(e) => setTempCompanyInfo({...tempCompanyInfo, annualRevenue: e.target.value})} 
          className="bg-secondary/30" 
          placeholder="e.g., ₹10 Cr - ₹50 Cr" 
        />
      </div>
    </div>
  }
>
  <div className="space-y-2">
    <p className="font-medium text-lg text-foreground">{companyInfo.companyName || "Not set"}</p>
    <div className="flex flex-wrap gap-3 text-sm text-muted-foreground">
      {companyInfo.businessType && <span>Type: {companyInfo.businessType.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</span>}
    </div>
    {companyInfo.description && <p className="text-sm text-foreground mt-2">{companyInfo.description}</p>}
    <div className="grid grid-cols-2 gap-3 text-sm mt-3">
      {companyInfo.industry && <p className="text-foreground">Industry: {companyInfo.industry}</p>}
      {companyInfo.founded && <p className="text-foreground">Founded: {companyInfo.founded}</p>}
      {companyInfo.size && <p className="text-foreground">Size: {companyInfo.size}</p>}
      {companyInfo.headquarters && <p className="text-foreground">Headquarters: {companyInfo.headquarters}</p>}
      {companyInfo.annualRevenue && <p className="text-foreground">Annual Revenue: {companyInfo.annualRevenue}</p>}
    </div>
  </div>
</EditableSection>

<EditableSection
                title="Ideas We're Looking For"
                icon={Target}
                isEditing={editingSection === "lookingFor"}
                onEdit={() => startEditing("lookingFor")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div>
                    <div className="flex flex-wrap gap-2 mb-3">
                      {lookingFor.map((item, idx) => (
                        <span
                          key={idx}
                          className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-secondary text-sm"
                        >
                          {item}
                          <button
                            onClick={() =>
                              setLookingFor(
                                lookingFor.filter((_, i) => i !== idx),
                              )
                            }
                            className="text-muted-foreground hover:text-destructive"
                          >
                            <X className="h-3 w-3" />
                          </button>
                        </span>
                      ))}
                    </div>
                    <div className="flex gap-2">
                      <Input
                        value={newLookingFor}
                        onChange={(e) => setNewLookingFor(e.target.value)}
                        placeholder="Add category"
                        className="bg-secondary/30"
                        onKeyDown={(e) => {
                          if (e.key === "Enter" && newLookingFor.trim()) {
                            setLookingFor([
                              ...lookingFor,
                              newLookingFor.trim(),
                            ]);
                            setNewLookingFor("");
                          }
                        }}
                      />
                      <Button
                        onClick={() => {
                          if (newLookingFor.trim()) {
                            setLookingFor([
                              ...lookingFor,
                              newLookingFor.trim(),
                            ]);
                            setNewLookingFor("");
                          }
                        }}
                        size="icon"
                      >
                        <Plus className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                }
              >
                <div className="flex flex-wrap gap-2">
                  {lookingFor.map((item, idx) => (
                    <span
                      key={idx}
                      className="px-3 py-1.5 rounded-full bg-amber-400/10 text-amber-400 text-sm"
                    >
                      {item}
                    </span>
                  ))}
                </div>
              </EditableSection>

<EditableSection
  title="What We Offer"
  icon={Award}
  isEditing={editingSection === "whatWeOffer"}
  onEdit={() => startEditing("whatWeOffer")}
  onSave={saveWhatWeOffer}
  onCancel={cancelEditing}
  editContent={
    <div className="space-y-3">
      {tempCompanyInfo.whatWeOffer.map((offer, idx) => (
        <div key={idx} className="flex items-start gap-3 p-3 rounded-xl bg-secondary/30">
          <div className="flex-1 space-y-2">
            <Input
              value={offer.title}
              onChange={(e) => {
                const updated = [...tempCompanyInfo.whatWeOffer];
                updated[idx].title = e.target.value;
                setTempCompanyInfo({...tempCompanyInfo, whatWeOffer: updated});
              }}
              placeholder="Offer title"
              className="bg-secondary/50"
            />
            <textarea
              value={offer.description}
              onChange={(e) => {
                const updated = [...tempCompanyInfo.whatWeOffer];
                updated[idx].description = e.target.value;
                setTempCompanyInfo({...tempCompanyInfo, whatWeOffer: updated});
              }}
              rows={2}
              placeholder="Description"
              className="w-full rounded-lg bg-secondary/50 border border-border/50 px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none"
            />
          </div>
          <button
            onClick={() => {
              const updated = tempCompanyInfo.whatWeOffer.filter((_, i) => i !== idx);
              setTempCompanyInfo({...tempCompanyInfo, whatWeOffer: updated});
            }}
            className="text-destructive hover:text-destructive/80 p-2"
          >
            <Trash2 className="h-4 w-4" />
          </button>
        </div>
      ))}
      <button
        onClick={() => {
          setTempCompanyInfo({
            ...tempCompanyInfo,
            whatWeOffer: [...tempCompanyInfo.whatWeOffer, { title: "", description: "" }]
          });
        }}
        className="flex items-center gap-2 text-sm text-amber-400 hover:text-amber-400/80 mt-2"
      >
        <Plus className="h-4 w-4" /> Add Offer
      </button>
    </div>
  }
>
  <div className="space-y-3">
    {companyInfo.whatWeOffer.length === 0 ? (
      <p className="text-sm text-muted-foreground">No offers added yet</p>
    ) : (
      companyInfo.whatWeOffer.map((offer, idx) => (
        <div key={idx} className="flex items-start gap-3">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-400/10 shrink-0">
            <Award className="h-4 w-4 text-amber-400" />
          </div>
          <div>
            <p className="font-medium text-foreground">{offer.title}</p>
            <p className="text-sm text-muted-foreground">{offer.description}</p>
          </div>
        </div>
      ))
    )}
  </div>
</EditableSection>

<EditableSection
                title="Key People"
                icon={Users}
                isEditing={editingSection === "keyPeople"}
                onEdit={() => startEditing("keyPeople")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-3">
                    {keyPeople.map((person, idx) => (
                      <div
                        key={person.id}
                        className="flex items-center gap-3 p-3 rounded-xl bg-secondary/30"
                      >
                        <div className="flex-1 grid grid-cols-2 gap-2">
                          <Input
                            defaultValue={person.name}
                            placeholder="Name"
                            className="bg-secondary/50"
                          />
                          <Input
                            defaultValue={person.role}
                            placeholder="Role"
                            className="bg-secondary/50"
                          />
                        </div>
                        <button
                          onClick={() =>
                            setKeyPeople(keyPeople.filter((_, i) => i !== idx))
                          }
                          className="text-destructive hover:text-destructive/80 p-2"
                        >
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <button
                      onClick={() =>
                        setKeyPeople([
                          ...keyPeople,
                          { id: Date.now(), name: "", role: "", avatar: "?" },
                        ])
                      }
                      className="flex items-center gap-2 text-sm text-amber-400 hover:text-amber-400/80 mt-2"
                    >
                      <Plus className="h-4 w-4" /> Add Person
                    </button>
                  </div>
                }
              >
                <div className="flex flex-wrap gap-4">
                  {keyPeople.map((person) => (
                    <div key={person.id} className="flex items-center gap-3">
                      <div className="h-10 w-10 rounded-full bg-amber-400/20 flex items-center justify-center text-amber-400 font-medium text-sm">
                        {person.avatar}
                      </div>
                      <div>
                        <p className="font-medium text-foreground text-sm">
                          {person.name}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {person.role}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </EditableSection>
            </>
          )}

{/* ========== INVESTOR SECTIONS ========== */}
          {userType === "investor" && (
            <>
              <EditableSection
                title="Investment Profile"
                icon={CircleDollarSign}
                isEditing={editingSection === "investorProfile"}
                onEdit={() => startEditing("investorProfile")}
                onSave={saveInvestorProfile}
                onCancel={cancelEditing}
                editContent={
                  <div className="space-y-4">
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">
                        Business / Company Name
                      </label>
                      <Input
                        value={tempInvestorInfo.businessName}
                        onChange={(e) =>
                          setTempInvestorInfo({
                            ...tempInvestorInfo,
                            businessName: e.target.value,
                          })
                        }
                        className="bg-secondary/30"
                        placeholder="Your business or company name"
                      />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">
                        Annual Income Range
                      </label>
                      <select
                        value={tempInvestorInfo.annualIncomeRange}
                        onChange={(e) =>
                          setTempInvestorInfo({
                            ...tempInvestorInfo,
                            annualIncomeRange: e.target.value,
                          })
                        }
                        className="w-full rounded-lg bg-secondary/30 border border-border/50 px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
                      >
                        <option value="">Select Income Range</option>
                        {incomeRanges.map((range) => (
                          <option key={range._id} value={range.rangeName}>
                            {range.rangeName}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">
                        Net Worth
                      </label>
                      <select
                        value={tempInvestorInfo.netWorth}
                        onChange={(e) =>
                          setTempInvestorInfo({
                            ...tempInvestorInfo,
                            netWorth: e.target.value,
                          })
                        }
                        className="w-full rounded-lg bg-secondary/30 border border-border/50 px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
                      >
                        <option value="">Select Net Worth</option>
                        {netWorthOptions.map((option) => (
                          <option key={option._id} value={option.netWorthName}>
                            {option.netWorthName}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">
                        Investor Type
                      </label>
                      <select
                        value={tempInvestorInfo.investorType}
                        onChange={(e) =>
                          setTempInvestorInfo({
                            ...tempInvestorInfo,
                            investorType: e.target.value,
                          })
                        }
                        className="w-full rounded-lg bg-secondary/30 border border-border/50 px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
                      >
                        <option>Angel Investor</option>
                        <option>Venture Capitalist</option>
                        <option>Private Equity</option>
                        <option>Family Office</option>
                      </select>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="text-sm font-medium text-foreground mb-1.5 block">
                          Investment Range
                        </label>
                        <Input
                          value={tempInvestorInfo.investmentRange}
                          onChange={(e) =>
                            setTempInvestorInfo({
                              ...tempInvestorInfo,
                              investmentRange: e.target.value,
                            })
                          }
                          className="bg-secondary/30"
                        />
                      </div>
                      <div>
                        <label className="text-sm font-medium text-foreground mb-1.5 block">
                          Total Invested
                        </label>
                        <Input
                          value={tempInvestorInfo.totalInvested}
                          onChange={(e) =>
                            setTempInvestorInfo({
                              ...tempInvestorInfo,
                              totalInvested: e.target.value,
                            })
                          }
                          className="bg-secondary/30"
                        />
                      </div>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">
                        Active Deals
                      </label>
                      <Input
                        value={tempInvestorInfo.activeDeals}
                        onChange={(e) =>
                          setTempInvestorInfo({
                            ...tempInvestorInfo,
                            activeDeals: e.target.value,
                          })
                        }
                        className="bg-secondary/30"
                      />
                    </div>
                  </div>
                }
              >
                <div className="space-y-3">
                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                    <div className="text-center p-3 rounded-xl bg-emerald-500/10">
                      <p className="text-xl font-bold text-emerald-400">
                        {investorInfo.totalInvested}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        Total Invested
                      </p>
                    </div>
                    <div className="text-center p-3 rounded-xl bg-secondary/50">
                      <p className="text-xl font-bold text-foreground">
                        {investorInfo.activeDeals}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        Active Deals
                      </p>
                    </div>
                    <div className="text-center p-3 rounded-xl bg-secondary/50">
                      <p className="text-sm font-bold text-foreground">
                        {investorInfo.investmentRange}
                      </p>
                      <p className="text-xs text-muted-foreground">Range</p>
                    </div>
                    <div className="text-center p-3 rounded-xl bg-secondary/50">
                      <p className="text-sm font-bold text-foreground">
                        {investorInfo.investorType}
                      </p>
                      <p className="text-xs text-muted-foreground">Type</p>
                    </div>
                  </div>
                  {investorInfo.businessName && (
                    <p className="text-sm text-muted-foreground mt-2">
                      Business: {investorInfo.businessName}
                    </p>
                  )}
                  {investorInfo.annualIncomeRange && (
                    <p className="text-sm text-muted-foreground">
                      Income: {investorInfo.annualIncomeRange}
                    </p>
                  )}
                  {investorInfo.netWorth && (
                    <p className="text-sm text-muted-foreground">
                      Net Worth: {investorInfo.netWorth}
                    </p>
                  )}
                </div>
              </EditableSection>

<EditableSection
                title="Investment Sectors"
                icon={TrendingUp}
                isEditing={editingSection === "sectors"}
                onEdit={() => startEditing("sectors")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-3">
                    {sectors.map((sector, idx) => (
                      <div
                        key={sector.id}
                        className="flex items-center gap-3 p-3 rounded-xl bg-secondary/30"
                      >
                        <div className="flex-1 grid grid-cols-2 gap-2">
                          <Input
                            defaultValue={sector.name}
                            placeholder="Sector"
                            className="bg-secondary/50"
                          />
                          <Input
                            defaultValue={sector.allocation.toString()}
                            placeholder="%"
                            type="number"
                            className="bg-secondary/50"
                          />
                        </div>
                        <button
                          onClick={() =>
                            setSectors(sectors.filter((_, i) => i !== idx))
                          }
                          className="text-destructive hover:text-destructive/80 p-2"
                        >
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <button
                      onClick={() =>
                        setSectors([
                          ...sectors,
                          { id: Date.now(), name: "", allocation: 0 },
                        ])
                      }
                      className="flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-400/80 mt-2"
                    >
                      <Plus className="h-4 w-4" /> Add Sector
                    </button>
                  </div>
                }
              >
                <div className="space-y-3">
                  {sectors.map((sector) => (
                    <div key={sector.id}>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm font-medium text-foreground">
                          {sector.name}
                        </span>
                        <span className="text-sm text-muted-foreground">
                          {sector.allocation}%
                        </span>
                      </div>
                      <div className="h-2 rounded-full bg-secondary overflow-hidden">
                        <div
                          className="h-full rounded-full bg-emerald-400"
                          style={{ width: `${sector.allocation}%` }}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </EditableSection>

<EditableSection
                title="Investment Criteria"
                icon={FileText}
                isEditing={editingSection === "criteria"}
                onEdit={() => startEditing("criteria")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div>
                    <ul className="space-y-2 mb-3">
                      {criteria.map((item, idx) => (
                        <li
                          key={idx}
                          className="flex items-center gap-2 p-2 rounded-lg bg-secondary/30"
                        >
                          <Check className="h-4 w-4 text-emerald-400 shrink-0" />
                          <span className="flex-1 text-sm">{item}</span>
                          <button
                            onClick={() =>
                              setCriteria(criteria.filter((_, i) => i !== idx))
                            }
                            className="text-muted-foreground hover:text-destructive"
                          >
                            <X className="h-4 w-4" />
                          </button>
                        </li>
                      ))}
                    </ul>
                    <div className="flex gap-2">
                      <Input
                        value={newCriteria}
                        onChange={(e) => setNewCriteria(e.target.value)}
                        placeholder="Add criteria"
                        className="bg-secondary/30"
                        onKeyDown={(e) => {
                          if (e.key === "Enter" && newCriteria.trim()) {
                            setCriteria([...criteria, newCriteria.trim()]);
                            setNewCriteria("");
                          }
                        }}
                      />
                      <Button
                        onClick={() => {
                          if (newCriteria.trim()) {
                            setCriteria([...criteria, newCriteria.trim()]);
                            setNewCriteria("");
                          }
                        }}
                        size="icon"
                      >
                        <Plus className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                }
              >
                <ul className="space-y-2">
                  {criteria.map((item, idx) => (
                    <li key={idx} className="flex items-center gap-2 text-sm">
                      <Check className="h-4 w-4 text-emerald-400" />
                      {item}
                    </li>
                  ))}
                </ul>
              </EditableSection>

<EditableSection
                title="Portfolio Companies"
                icon={Briefcase}
                isEditing={editingSection === "portfolio"}
                onEdit={() => startEditing("portfolio")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-3">
                    {portfolio.map((company, idx) => (
                      <div
                        key={company.id}
                        className="flex items-center gap-3 p-3 rounded-xl bg-secondary/30"
                      >
                        <div className="flex-1 grid grid-cols-3 gap-2">
                          <Input
                            defaultValue={company.company}
                            placeholder="Company"
                            className="bg-secondary/50"
                          />
                          <Input
                            defaultValue={company.status}
                            placeholder="Status"
                            className="bg-secondary/50"
                          />
                          <Input
                            defaultValue={company.invested}
                            placeholder="Amount"
                            className="bg-secondary/50"
                          />
                        </div>
                        <button
                          onClick={() =>
                            setPortfolio(portfolio.filter((_, i) => i !== idx))
                          }
                          className="text-destructive hover:text-destructive/80 p-2"
                        >
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <button
                      onClick={() =>
                        setPortfolio([
                          ...portfolio,
                          {
                            id: Date.now(),
                            company: "",
                            status: "",
                            invested: "",
                          },
                        ])
                      }
                      className="flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-400/80 mt-2"
                    >
                      <Plus className="h-4 w-4" /> Add Company
                    </button>
                  </div>
                }
              >
                <div className="space-y-3">
                  {portfolio.map((company) => (
                    <div
                      key={company.id}
                      className="flex items-center justify-between p-3 rounded-xl bg-secondary/30"
                    >
                      <div>
                        <p className="font-medium text-foreground">
                          {company.company}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {company.status}
                        </p>
                      </div>
                      <span className="text-sm font-medium text-emerald-400">
                        {company.invested}
                      </span>
                    </div>
                  ))}
                </div>
              </EditableSection>
            </>
          )}

{/* Appearance - Common */}
          <div className="rounded-2xl glass glass-border p-5">
            <h3 className="font-semibold text-foreground mb-1">Appearance</h3>
            <p className="text-xs text-muted-foreground mb-4">
              Choose how CheckUrIdea looks to you.
            </p>
            <ThemeToggle />
          </div>

{/* More Settings Links - Common */}
          <div className="rounded-2xl glass glass-border p-5">
            <h3 className="font-semibold text-foreground mb-4">
              More Settings
            </h3>
            <div className="space-y-2">
              <Link
                href="/settings/privacy"
                className="flex items-center gap-3 rounded-xl px-4 py-3 hover:bg-secondary/50 transition-colors"
              >
                <Shield className="h-5 w-5 text-muted-foreground" />
                <span className="text-sm text-foreground">
                  Privacy Settings
                </span>
              </Link>
              <Link
                href="/settings/notifications"
                className="flex items-center gap-3 rounded-xl px-4 py-3 hover:bg-secondary/50 transition-colors"
              >
                <Bell className="h-5 w-5 text-muted-foreground" />
                <span className="text-sm text-foreground">
                  Notification Preferences
                </span>
              </Link>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

{title}

Profile Settings

{displayName}